Apache 启用GZIP压缩功能

郎涯技术
776 阅读4分钟

“这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战”

 

概览

      许多网络服务器可以通过调用第三方模块或使用内置程序将文件压缩为GZIP格式，然后再发送该压缩文件以供下载。这样可以在下载呈现网站所需的资源时，为您节省一些时间。

  • 减少高达70%的网页大小
  • 提高网页速度
  • 需要访问.htaccess文件或者服务器管理文件

什么是Gzip压缩？

      当用户点击你的网站时，由您的服务器提供所要求的文件，这些文件越大，到你的浏览器并显示在屏幕上所需的时间就越长。GZIP在传输他们到浏览器之前压缩您的网页和样式表，这大大减少了传输时间，因为这些文件小得多。GZIP压缩是网页速度优化的基本方法，现在绝大多数网站都已经启用GZIP。

GZIP是怎样工作的？

      GZIP实际上是一个相当简单的想法，但是善加利用是非常强大的。 GZIP把一个文本文件的字符串替换使整个文件大小更小。由于CSS文件和HTML文件使用了大量重复的文字，并有空白的字符，而GZIP压缩公用字符串，这可以减少页面和样式表的高达70％的大小！而对您的Web服务器启用Gzip是相对简单的。当浏览器访问一个Web服务器时，会先检查看看是否有服务器启用GZIP，并请求该网页。如果启用，它就接收gzip文件，否则它会接收未压缩的版本，但这页面大小将大得多。

为什么这么重要

      压缩GZip如此重要的主要的原因是，它减少了一个网站传输网页文件和样式表所需的时间，最终降低你的网站加载时间。

Apache服务器配置

      你需要添加如下脚本到.htaccess文件或者在http.conf文件尾加上：

编辑 http.conf 文件
去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释#
去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注释#
去掉 #LoadModule filter_module modules/mod_filter.so 前面的注释#

# Compress HTML, CSS, JavaScript, Text, XML and fonts
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-httpd-fastphp
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
    # Remove browser bugs (only needed for really old browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.x 有一些问题，所以只压缩文件类型是text/html的
    BrowserMatch ^Mozilla/4.0[678] no-gzip # Netscape 4.06-4.08 有更多的问题，所以不开启压缩
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # 但IE浏览器会伪装成 Netscape ，是事实上它没有问题
    #SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary #设置不对后缀gif，jpg，jpeg，png的图片文件进行压缩
    Header append Vary User-Agent
</IfModule>

常见问题

怎么知道网站的GZip压缩是否起作用了？

      使用webkaka的网站速度诊断，在“优化建议”里可以看到网站各文件是否使用了GZip。

为什么图片、PDF和视频文件没有压缩？

      GZip压缩对图片、PDF、视频和其他已经使用二进制压缩过的文件是无效的。

Flash被破坏

      flash预加载器不能处理压缩的flash文件，如果你已经压缩的flash被破坏了，请不要压缩flash文件。

建议

把网页内容写得使压缩更有效

为了使用你的网页内容得到更好的压缩，请参照如下方法：

确保HTML和CSS代码的一致性。为了实现一致性

       在可能的情况以相同的顺序指定CSS关键值，例如按字母顺序排列它们。以相同的顺序指定HTML属性，例如按字母顺序排列它们。把HREF第一个链接（因为它是最常见的），然后按字母顺序排列剩下的。例如，谷歌的搜索结果页面，当HTML属性是按字母顺序排列时，gzip压缩过的输出的大小减少1.5％。保持字母的一致性，例如在任何时候都是小写。保持引号的一致性，例如全部使用单引号，或者全部使用双引号，又或者如果可能的话干脆连引号也不要。

优化CSS和优化Js

      优化CSS和Javascript不仅可以帮助外部的CSS和Javascript文件的压缩，还可以帮助HTML页面内嵌的CSS和Javascript代码。

不要使用GZip压缩图片和其他二进制文件

      网页支持已经压缩过的图片文件，同样支持已经压缩过的视频、PDF等二进制文件；使用GZip压缩这些文件，不会提供额外的好处，反而使他们的体积变得更大。

avatar
文章
阅读
粉丝