如何在我的网站上启用压缩功能?

How can I enable compression on my site?

本文关键字：启用 压缩 功能 网站 我的      更新时间：2023-09-26

我想要

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

I've concatated &最小化了所有的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 vs. 59 kb

<标题>

现在，我只压缩我的图像。我需要压缩我的最小化资产，如:JS, CSS, HTML ?在我们的网站上启用压缩最有效的方法是什么?

你也可以通过添加report选项来压缩你的最小化JS/CSS:

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

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

如果你正在使用指南针，试着Spriting你的图像，而不是仅仅压缩它们。

Google有一个很好的优化内容效率的指南。你可以在这里看看。总体思路是

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

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

没有。万维网上使用的所有图像格式都有本机压缩方案。在上面添加gzip没有任何好处。

我需要压缩我的最小化资产，如:JS, CSS, HTML?

是的。文本文件可以使用gzip压缩。

相关文章：