web前端开发技术博客
当前位置: WP教程 > WordPress站点如何加速打开 开启Gzip压缩加快传输方法

WordPress站点如何加速打开 开启Gzip压缩加快传输方法

2019-06-04 分类:WP教程 作者:码云 阅读(3866)

在二十一世纪,我们大部分的流量来自于现代浏览器,坦白的讲,我们大部分的用户都是很懂技术的。我们不想让任何一个人在访问我们网站的时候卡顿,哪怕是他在用IE4.0和Wdinows95.谷歌和雅虎都开启了gzip压缩。一个现代的浏览器要想不仅要享受到现代网络信息还要享受到现代互联网的速度,就必须开启gzip压缩。

但是我呢最近都没有使用Gzip压缩,是因为发现开启这个压缩也是有学问的。服务器上设置、WordPress站点上设置还是插件上设置让我有所疑惑。通过几天的研究学习,总结并分享下如何将WordPress站点开启Gzip压缩以达到加快传输的目的。

为什么我们要开启gzip压缩?

在此之前,我有必要解释一下什么编码。当你在互联网上想请求一个文件时,比如http://www.mybj123.com/3286.html,你的浏览器会和服务器有一个会话,大概如下如所示。

为什么我们要开启gzip压缩

  1. 浏览器:嘿,给我来一个3286.html文件
  2. 服务器:好的,让我去找找它是不是在~
  3. 服务器:找到它了,我会返回一个成功的状态码(200 ok),我正在发送文件……
  4. 浏览器:100kb?我滴天……等啊……等啊,好的,下载下来了

当然,实际的请求头和协议会更加正规一点。

但是,它生效了,我拿到了3286.html文件。

那现在问题在哪呢?

好吧,这系统是正常的,但是太低效了,坦白讲100kb是一大段的文字,HTML是冗余的,每一个,

都有一个几乎相同的闭合标签。虽然通篇文字都有重复,但是只要你砍掉任何的内容,html(以及它的一奶同胞xml)都不会正常显示。

当文件太大的时候有什么好办法呢,就是gzip压缩它。

如果我们传输一个替代原始大文件的zip的压缩文件给浏览器,就会节省带宽和下载时间。当浏览器可以下载zip文件,解压,并且渲染给用户。下载很快,页面加载也很快,用户心情就会very good。这个浏览器–服务器的会话大概是酱紫的:

WordPress站点如何加速打开 开启Gzip压缩加快传输

  1. 浏览器:嘿,给我来一个index.html,如果要有,给我来一个压缩版的可以吗
  2. 服务器:容我找找……好,满足你,如果找到了给你压缩以下,gzip格式的哦
  3. 服务器:yep,找到了,正在压缩,马上传给你。
  4. 浏览器:太棒了,只有10kb,我来解压,并且渲染给用户。

情况很简单:文件越小,下载更快,用户感受更好。

变化的部分在于浏览器和服务器,它成功的发送过去一个压缩文件。对于gzip压缩的要点有两点:

  • 浏览器发送一个请求头,告诉服务器接受压缩版本的文件(gzip和deflate是两种压缩算法)Accept-Encoding:gzip,deflate
  • 如果文件压缩了,服务器返回一个头信息:Content-Encoding:gzip

如果服务器没有返回Content-Encoding的头信息,意味着这文件是没压缩的(浏览器可以直接解析的)。请求头Accept-Encoding只是浏览器的一个请求,而不是命令。如果服务器不返回压缩文件,浏览器就不得不处理那庞大的源文件。

如何设置Gzip压缩呢?

Nginx开启Gzip的方法

1
2
3
4
5
6
7
8
9
gzip on;
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 6;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

简单解释下,别问我为什么只解释Nginx,因为我就用这个!

1
2
3
4
5
6
7
8
1行:开启Gzip(这是我唯一不借助翻译就能看得懂的)
2行:不压缩临界值,大于1K的才压缩,一般不用改
3行:buffer,就是,嗯,算了不解释了,不用改
4行:用了反向代理的话,末端通信是HTTP/1.0,有需求的应该也不用看我这科普文了;有这句的话注释了就行了,默认是HTTP/1.1
5行:压缩级别,1-10,数字越大压缩的越好,时间也越长,看心情随便改吧,缙哥哥用的是6.
6行:进行压缩的文件类型,缺啥补啥就行了,JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式就行了。不过你要考虑自己的CDN之类的,如果静态文件已经丢出去了,也就没必要了!
7行:跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧
8行:IE6对Gzip不怎么友好,不给它Gzip了

值得一提的是,如果你是使用宝塔面板,那么它已经默认给你开启了Gzip压缩功能,如下图所示:

Gzip压缩功能

Apache开启Gzip的方法

首先确保你的Apache已经加载了mod_deflate模块,然后在httpd.conf代码中加载以下代码:

1
2
3
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/json application/x-httpd-php application/x-javascript
</IfModule>

如果你没有权限修改你的主机,你也可以将以上代码复制到网站根目录的.htaccess文件。

PHP开启Gzip的方法

如果修改Apache httpd.conf文件无效,则可以通过修改PHP的php.ini方法:

打开PHP目录下的php.ini文件,找到zlib.output_compression=Off,改成zlib.output_compression=On,再把;zlib.output_compression_level前面的;去掉,后面的-1改成1—9的值,1的压缩比率最低,建议取5。这样便可以实现所有PHP页面的gzip效果。

如果无法修改php.ini文件,则可以在需要gzip压缩的PHP文件头部加入:

1
2
3
4
5
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
    ob_start('ob_gzhandler');
}else{
    ob_start();
}

既可以实现该php页面gzip压缩。

WordPress开启Gzip的方法

如果上述方法都无效,则将下面的代码复制到当前主题的functions.php文件中也可以实现WordPress整站gzip压缩:

1
2
3
4
5
6
7
8
9
//WordPress站点加速之开启Gzip压缩加快传输
add_action('init', 'wpjam_gzip_compression');
function wpjam_gzip_compression(){
    if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
        ob_start('ob_gzhandler');
    }else{
        ob_start();
    }
}

htaccess开启Gzip压缩

编辑站点根目录.htaccess文件,在最后面加上一下三种代码中的任意一种。

代码一:

1
php_value output_handler ob_gzhandler

代码二:

1
2
3
4
5
6
7
8
9
10
11
12
13
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/css A604800
</IfModule>
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css image/gif image/jpeg image/png application/x-javascript
</IfModule>

代码三:

1
2
php_flag zlib.output_compression On
php_value zlib.output_compression_level 6

WordPress插件开启Gzip的方法

这里就有很多可以开启Gzip的插件了,我随意举几个亲自尝试的例子,具体适用与否需要自己尝试。

WP Super Cache插件

如果你的WordPress已安装WP Super Cache缓存插件,可以在WP Super Cache设置→高级选项中勾选Compress pages so they’re served more quickly to visitors.(Recommended)一项,这样也可以开启Gzip压缩,想必很多人都见过,我就不截图了!

WP Performance插件

如果你使用的是WP Performance插件,那就更简单了,直接在插件设置主页勾选

WP Performance插件

Gzippy插件

如果你使用的是Gzippy插件,启动插件即可。

index开启Gzip的方法

通过修改WordPress根目录index.php文件开启Gzip压缩,这是我认为最愚蠢的办法!

为什么呢?众所周知,WordPress的更新换代好比换内裤,三天两头更新。更新一次你就得改一次,你说是不是最愚蠢的办法?但是,如果上方的你都不行的时候,倒是不妨使用这个方法试试!

进入WordPress网站根目录,修改index.php文件,找到

1
define(’WP_USE_THEMES’, true);

在后面加上:

1
2
//WordPress站点加速之开启Gzip压缩加快传输
ob_start(‘ob_gzhandler’)

别忘了升级WordPress之后重新加回去!

Gzip使用注意及说明

  • 如果在.htaccess文件中禁止了Gzip功能的话,那在php.ini文件中开启后也需在.htaccess文件中开启Gzip,否则没有效果。
  • 开启WordPress的Gzip功能后,服务器将在页面传输前将页面压缩后传送,可以有效减少服务器的带宽使用,也可以加速页面下载。
  • 另外请注意只能选择一种方式来开启WordPress Gzip压缩,否则有可能造成冲突,请谨记。

经过测试,采用服务器压缩要比使用PHP压缩要更快,而且压缩之后更小。所以最好的方法还是直接让Apache直接进行gzip压缩。如果无法修改Apache的httpd.conf文件,再尝试去修改php.ini文件,最终才是使用修改php文件以及WordPress hook的方法。

Gzip测试方法

以下代码可通过运行cdm测试。

整个页面测试代码

1
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.你的网址.com/"

css通过Gzip压缩测试代码

1
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.你的网址.com/wp-content/plugins/wpjam-basic/static/script.js"

图片通过Gzip压缩测试代码

1
curl -I -H "Accept-Encoding: gzip, deflate" "https://www.你的网址.org/wp-content/uploads/2019/06/wordpresszmm.jpg"

小于1K文件Gzip压缩测试代码

1
curl -I -H "Accept-Encoding: gzip, deflate" "https://www.你的网址.org/wp-content/plugins/wpjam-basic/static/morris.css"

警告

gzip压缩的出现如此的令人振奋,但是还有以下三个注意点:

-低版本浏览器:一些浏览器接受压缩文件还是有问题(他们说他们可以但是他们并不行),如果你的站点必须在window95的网景1.0浏览器上,你可能不想要压缩文件。Apache mod_deflate设置了一些忽略规则来专门为旧浏览器。

-已经压缩过的文件:大多数的图片,音乐和视频都已经压缩过了,不要浪费时间来压缩他们了。事实上,你可以只压缩那三巨头(HTML,CSS AND JAVARSCRIPT)。

-CPU负载:在传输过程中压缩文件耗费CPU但是节省带宽(用空间换时间)。通常压缩速率的选择需要权衡利弊。也存在一些预压缩静态文件的方法,但这要求更多的资源。考虑了cpu的耗费,压缩文件也是利大于弊。通过压缩实现更好的用户体验,更短的留白时间,值!

开启gzip压缩是优化网站最快的方法之一。大胆的用吧,让你的用户体验更棒。

「如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
0

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - WordPress站点如何加速打开 开启Gzip压缩加快传输方法

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流