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

Question

我要

我的页面加载速度更快或至少加载速度最好。

我已经连接 & 缩小我所有的 JS, CSS, 甚至 HTML。我还在 Mac 上使用 Photoshop 和 ImageOptim 优化了我的大部分图像。现在，我想enable/configure压缩我的网站。

我是新来的

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

我试过了

在 G运行t 内设置。

我已经安装了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

Right now, I only compress my images.

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

Do I need to compress my minify assets like : JS, CSS, HTML?

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

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

How can I enable compression on my site?

html

javascript

css

compression

gruntjs

我要

我是新来的

我试过了

测试

比较

问题