网页启用Gzip压缩提高浏览速度——可压缩js、css等静态文件

  • A+
所属分类:wordpress建站

Gzip压缩的优化方法我很早已经就启用了,不过从未与大家分享过。近期由于备案问题,临时更换服务器,结果忘了启用Gzip压缩,爱编程技术博客小编周末利用空余时间启用了Gzip压缩,并把全部过程记录下来,与大家分享。

启用Gzip压缩的好处

它的好处显而易见,提高网页浏览速度,无论是之前说的精简代码、压缩图片都不如启用Gzip来的实在。闲话不多说下面进入正题

配置

编辑httpd.conf文件

去除 #LoadModule headers_module modules/mod_headers.so 前面的注释#

去除 #LoadModule deflate_module modules/mod_deflate.so 前面的注释#

去除 #LoadModule filter_module modules/mod_filter.so 前面的注释#

第三个模块一定要打开,很多人根据网上的配置无法生效,就是这个模块没有开启。不开启的话下面配置后也无法启动Apache。

然后在最底部添加如下代码

  1. <ifmodule mod_deflate.c>
  2. DeflateCompressionLevel 6
  3. AddOutputFilterByType DEFLATE text/plain
  4. AddOutputFilterByType DEFLATE text/html
  5. AddOutputFilterByType DEFLATE text/php
  6. AddOutputFilterByType DEFLATE text/xml
  7. AddOutputFilterByType DEFLATE text/css
  8. AddOutputFilterByType DEFLATE text/javascript
  9. AddOutputFilterByType DEFLATE application/xhtml+xml
  10. AddOutputFilterByType DEFLATE application/xml
  11. AddOutputFilterByType DEFLATE application/rss+xml
  12. AddOutputFilterByType DEFLATE application/atom_xml
  13. AddOutputFilterByType DEFLATE application/javascript
  14. AddOutputFilterByType DEFLATE application/x-javascript
  15. AddOutputFilterByType DEFLATE application/x-httpd-php
  16. AddOutputFilterByType DEFLATE application/x-font-ttf
  17. AddOutputFilterByType DEFLATE image/svg+xml
  18. AddOutputFilterByType DEFLATE image/gif image/png  image/jpe image/swf image/jpeg image/bmp
  19. # Don’t compress images and other  #排除不需要压缩的文件
  20. BrowserMatch ^Mozilla/4 gzip-only-text/html
  21. BrowserMatch ^Mozilla/4\.0[678] no-gzip
  22. BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  23. SetEnvIfNoCase Request_URI .(?:html|htm)$ no-gzip dont-varySetEnvIfNoCase
  24. #SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
  25. SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
  26. SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
  27. </ifmodule>

注:注释和命令不要写在同一行,不然容易导致Apache无法启动。网上很多教程都是写在同一行,也有这个问题我也找了很久,可能是我这的问题把。

运行

用了一个文本做测试,大小是300左右。来看看压缩后多少~

网页启用Gzip压缩提高浏览速度——可压缩js、css等静态文件

压缩后:

网页启用Gzip压缩提高浏览速度——可压缩js、css等静态文件

大小是77kb。体积减少了将近 4倍。效果还是非常很可观的。文件越多效果越明显,网站访问速度得到很大的优化!

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: