我想要

Question

我想要

我的网页加载速度更快或至少加载最佳。

我连接＆amp; 缩小我的所有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

问题

现在，我只压缩我的图像。我是否需要压缩我的minify资产，如：JS，CSS，HTML？在我们的网站上启用压缩的最有效方法是什么？

请随时向我推荐任何内容。

Answer 1

Google提供了优化内容效率的良好指南。你可以看看here。一般的想法是

尽可能压缩文字资产
图像已经被压缩了。 Gzip / deflate无法进一步压缩它。 Image optimization是减少有效负载大小的更好方法。
尽可能使用HTTP caching。

Answer 2

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

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

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

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

如果您正在使用指南针，请尝试Spriting您的图片，而不是仅仅压缩它们。

Answer 3

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

别。 WWW上使用的所有图像格式都具有本机压缩方案。通过在顶部添加gzip，您无法获得任何收益。

我是否需要压缩我的minify资产，例如：JS，CSS，HTML？

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

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

我想要

我是

我已经尝试了

测试

比较

问题

3 个答案: