如何在网站上启用压缩？

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

Google提供了优化内容效率的良好指南。 你可以在这里看看。 总体思路是

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

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不会获得任何好处。

我是否需要压缩诸如JS，CSS，HTML等小型资产？

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