如何在我的网站上启用压缩？

Question

我想要

我的页面加载速度更快，或至少加载到它的最佳。

我已经连接了&，缩小了所有的JS，CSS，甚至HTML。我还在Mac上使用Photoshop和ImageOptim优化了大部分映像。现在，我想在我的站点上启用/配置压缩。

我是新来的

压缩世界：gzip/deflate，我正在努力学习它们。

我试过了

在Grunt内设置它。

我安装了npm install grunt-contrib-compress --save-dev

然后，我让它像这样配置

compress: {

    main: {

        options: { mode: 'gzip' },

        expand: true,
        cwd: 'img/',
        src: ['**/*'],
        dest: 'dist/img'
    }
}

测试

运行grunt时，img/文件夹中的所有内容都会按预期压缩并存储在dist/img/中。

Created dist/img/overlays/01.png (214 bytes)
Created dist/img/overlays/02.png (212 bytes)
Created dist/img/overlays/03.png (209 bytes)
Created dist/img/overlays/04.png (211 bytes)
Created dist/img/overlays/05.png (212 bytes)
Created dist/img/overlays/06.png (211 bytes)
Created dist/img/overlays/07.png (217 bytes)
Created dist/img/overlays/08.png (159 bytes)

比较

然后，我转到文件夹dist/img/并检查文件大小不同。他们没那么大的不同。58 kb对59 kb的例子

问题

现在，我只压缩我的图像。我是否需要压缩我的小型化资产，如: JS、CSS、HTML？什么是最有效的方式，使我们的网站压缩？

请随便给我任何建议。

Answer 1

还可以通过添加report选项来压缩缩小后的JS/CSS：

cssmin: {
    dist: {
       options: {
         report: 'gzip'
     },
     files: [{...

uglify: {
    options: {
        mangle: true,
        report: 'gzip'
    },

使用grunt-uncss从项目中删除未使用的CSS。

如果你使用指南针，尝试泉亭你的图像，而不是仅仅压缩他们。

Answer 2

谷歌对优化内容效率有很好的指导。你可以看看这里。一般的想法是

• 如果可能的话压缩文本资产
• 图像通常已经被压缩。Gzip/deflate不能进一步压缩它。图像优化是减少有效负载大小的更好方法。
• 尽可能使用HTTP缓存。

Answer 3

现在，我只压缩我的图像。

不要。所有在WWW上使用的图像格式都有本机压缩方案。在顶部添加gzip不会获得任何好处。

我是否需要压缩我的小型化资产，如: JS、CSS、HTML？

是。文本文件受益于gzip压缩。