格物躬行博客(基于WordPress)的性能优化之路

本文主要探讨Wordpress博客搭建起来后的后期加速优化,属于“亡羊补牢”;建站前期的优化重在总体规划可以达到事半功倍的效果,大家可以看看这篇 《 建站前必做的优化加速规划 》

结合格物躬行博客实践wordpress性能优化

1.小图片的处理

因格物躬行博客使用了百度搜索框作为本站的侧边栏扩展功能,而且每次打开任意页面都会前往百度的服务器请求图片资源,为了提速,将图片转换为Base64编码,不仅可以很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中,还可以减少http的请求数量(如果能集合到js、css代码中更好!!!),也可以防止因为一些相对路径等问题导致图片404错误,这种方法适用于需要频繁显示的图片如logo等,而且图片要很小的情况,最好是图片缩减预处理后10Kb以内。否则图片字符串会变得很长很长。

小图片转Base64的实现:

方法是将小图片通过atool.org进行在线转换,例如将页面右侧百度搜索框的百度图标转换后的代码如下:

data:image/gif;base64,R0lGODlhUAAdANUnAMjG9lpT5ZGM7TEn3kxE4/Hx/cjF9tbU+Kyo8uMWEePi+7q39OUlIec1MT824Pvg3/Shn5GM7v3v7/nQz+xkYfKSj3Zv6epUUfaxr56a8IR+65+a8Ghh53Zw6e5zca2p8oN+6/fBv+lEQfCCgCMZ3OEGAf///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAACcALAAAAABQAB0AQAb/wJNwSCwaj8ikcslsOoeHAWlwKEhJpMBpge0anmBhaSwql8elyvIxGkGMBQLJYZF3SQhuVwtpt0VkfiNsYxQlDSGJiQ0lhmOKiYBkYxhDI2MjIWRCAVgcJqCgAB+hoBFdAkKXJUerJ64hjGiNEmFhCHckCid2WBm2wMFDArlaQgoCAghEnXdfwkaz0iUjSB6YmiUix1IWogcmAAAmneOnJBqWY63rq6vTadDy8/TBBlIEBUMFGcv1/06IORO4B6DBIXq6pDtxoAgCAVXsUDEIj8wEJtm2ObizK2GXfCeaefFgpqTJCSEEjWCASRCaIhcwnahI4URGIlH2hMuFxZ+6/4ovV7FMYDJBCZaPIEli8MAovEybTmwkUcDExgDhxpUzcY5EqldAg04KCzTBhKYVoWob0oun2yw/w4KVliDmrIN48wazUpDhFQJ6AxPEYsAj3MAAd53AxXEwiQ6I602domCBFAeKey0z8CxyMMfGkgx2YBASpFpNJCSaYPjrYJAhc3UOgzJEkbAJUCe5eYBDli8KruRK5/vOAUlhU5KVVsTdK5WZhLBxU0SBHawAeCIwkCyDvpR+kF4QNHc5GTOySlw0mT5R1MVYIlQVtQGAnPoWSPz6aTqRo7mXIAIJS+9UZNsDFJSElFrbnNABFuOAkEVW5JBgThcNzWVSGUjNVX/BhmVcgMFLRGRDzRgN+CEJg0J0cSF24+R3IRZfuQOdJACi0YAHTiVQAVkirEIUh9hExVgWC4gDwAYDfKAkAPlhkaGNKskyVyIQzCICBolA5wcEqElQgZchTPeGEAUIEIADBAQQgAALGICABpMN0IE+QoDnZRuV6NkGmCc8AEkQADs=

完整的复制已上代码,然后在插入图片的时候,地址填写这段代码即可。
CSS中使用参考如下的格式进行插入:

background-image: url("data:image/gif;base64,R0lGODlhUAAdANUnT5ZGM7T...");

HTML中使用参考如下的格式进行插入:

<img src="data:image/gif;base64,R0lGODlhUAAdANUnAMjG9lpT5ZGM7TEn...">

2.大图片的处理

如果洁癖,使用atool.org进行png/jpg的无损在线压缩功能。如果想省事偷懒,安装并启用“WP Smush”插件,该插件可以自动压缩图片。

3.整合压缩CSS和JavaScript

使用Autoptimize插件,它可以整合本地服务器上的CSS和JavaScript代码并压缩,可将多个CSS文件和JavaScript的请求合并成为1个CSS与1个JavaScript,即减小了文件体积,也减少了request请求数目。该插件还有设置CDN加速功能,所以值得一试。

4.多域名提高浏览器并发连接数

当我们用浏览器点击打开一个URL网站链接时,大概有以下几个过程:发起连接、域名解析、建立连接、发送请求、等待响应、接收数据。后面四个跟用户的网络情况和网站服务器处理速度有关,现在说说前两个。不同的浏览器对单个域名的最大并发连接数是有一定的限制,HTTP/1.0和HTTP/1.1也不相同,各浏览器一般并发连接数是2~8个,最多10个以内。这个时候,如果浏览器同时对某一域名发起多个请求,超过了限制就会出现等待和阻挡,造成了访问上严重的延时。

解决这个问题的通常做法是按需加载,分步延时加载;还有一种办法是使用多域名,因为浏览器并发连接数限制是对同一个域名的资源加载有并发数的限制,如果将资源文件分散到不同的域名下,即可实现并发数的显著扩展。

例如,格物躬行博客域名地址是www.go2do.net,该域名下主要存放html/php类型的页面资源,而对于图片和css/js是存放在cdn.go2do.net的域名下,因此在访问www.go2do.net时,同时也在访问提取cdn.go2do.net域名下的图片和css/js资源。此外,比如图片资源较多时还可以对URL的进行多域名处理,如果只使用一个cdn.go2do.net的域名,当一个页面包含30多张图片的时候,那至少有10几个请求会被阻挡,但是如果我们分散到cdn1.go2do.net/cdn2.go2do.net/cdn3.go2do.net/…等多个不同的域名时,就能保证这些图片的连接请求被并行的处理,网站打开速度也会明显提升很多。类似的,可以对一些css/js类的资源进行同样的多域名处理。

多域名的实现:(以简单方式的开启图片资源的多域名为例进行说明。)

具体到Wordpress中的实现多域名有两方面的工作要做,一是开通新域名并进行绑定解析,然后按照正常的建站步奏搭建好Http服务;另一方面是在Wordpress的后台的“外观——编辑——functions.php”里插入如下代码,用于开启上传的图片域名及路径的设定。

//Wordpress找回多媒体文件路径的上传设置
if(get_option('upload_path')=='wp-content/uploads' || get_option('upload_path')==null) {
    update_option('upload_path',WP_CONTENT_DIR.'/uploads');
   }

Wordpress插入已上代码并刷新后,媒体库效果如下图所示:

wordpress的媒体库路径设置找回

提醒一下,注意路径和赋予权限!上传路径是我们图片资源的存放目录,与我们在多域名图片服务器配置的路径一致,也可以是其子目录,文件夹权限是755,资源文件是644。权限修改方式如下:

chown -R www.www /路径/cdn/img
find /路径/cdn/img/  -type d -exec chmod 755 {} \;
find /路径/cdn/img/  -type f -exec chmod 644 {} \;

另外,多域名方案实施时,建议主访问域名与视频/音频/图片/css/js资源存取域名属于不同的二级域名,即主域名用a.net,资源类域名用b.net等。同时,通常我们会将视频/音频/图片/css/js资源文件和页面文件都存放在同一台服务器里的,这样在访问请求多时,服务器过重负担重,造成服务器数据处理上的延时,为了加快网页的加载,我们可以将这些资源文件分开存放在不同的服务器里,其实,这就类似于CDN或者负载均衡之类的技术了。

5.域名预解析(DNS Prefetch)

DNS请求虽然占用了很少的带宽,但因为DNS的逐层递进式查询会有很高的延迟,由其用于在移动网络如手机4G/5G上网环境时会更加明显。默认情况下操作系统和浏览器都会对域名进行一定的“记忆”(缓存),浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预解析,并且缓存结果,这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预解析,那么就要使用显式的域名预解析(DNS Prefetch)。域名预解析(DNS Prefetch)是具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能减少访问的等待时间。

预解析的实现:

a.用meta信息来告知浏览器, 当前页面要做DNS预解析,html代码如下:

    <meta http-equiv="x-dns-prefetch-control" content="on">

b.在页面header中使用link标签来强制对DNS预解析:

 
  	 	  	<link rel="dns-prefetch" target="_blank" href="//bdimg.share.baidu.com">	
 	 	 	<link rel="dns-prefetch" target="_blank" href="//nsclick.baidu.com">	 	 	 	 	 	   
 	 	  	<link rel="dns-prefetch" target="_blank" href="//hm.baidu.com"> 	 	 	 	 	 	 	  
 	 	  	<link rel="dns-prefetch" target="_blank" href="//eiv.baidu.com">
 	 	 	<link rel="dns-prefetch" target="_blank" href="//www.baidu.com">
 	 	 	<link rel="dns-prefetch" target="_blank" href="//pagead2.googlesyndication.com">

注:“//”开始是为了适配https和http,所以href后面也可写为href=”http://www.baidu.com/”或href=”https://www.baidu.com/”。

域名预解析(DNS Prefetch)应该尽量的放在网页的前部以利于提前解析,推荐放在<meta charset=…”/>后面且</head>之前。

注意:域名预解析(DNS Prefetch)也需慎用,多页面重复DNS预解析会增加重复DNS查询次数。

5.开启HTTP/2加密又加速

HTTP/2 即超文本传输协议 2.0(原名HTTP/2.0),是下一代HTTP协议,是在 Google 之前提出的 SPDY 协议的基础上演变而来,在互联网上HTTP 2.0将只用于https://网址链接,而 http://网址链接将继续使用原来的HTTP/1,目的是在目前开放的互联网上增加数据加密技术,以提供强有力的保护去防范主动攻击,相对于 HTTP1.1 增加了连接复用、头部压缩、服务端 push 等等新特性,而且与 HTTP1.1 完全语义兼容,几乎可以无缝升级。目前主流浏览器都已经支持 HTTP/2 了(IE 从 IE 11 版开始支持)。总而言之,开启HTTP/2是即加密又加速网络链接过程。

HTTP/2的实现:

开启HTTP/2需要三个条件:1.Nginx 版本在 1.9.5 版已上且编译参数配置了“ –with-http_v2_module”(通过nginx -V来查验);2.openssl环境版本在openssl-1.0.2已上(通过openssl version -a查验);3.网站启用了Https访问协议,可以看看这篇文章《 格物躬行博客开启全站 HTTPS ( SSL ) & 解决外链(跨域资源) HTTP 问题 》。对于第一个条件,大部分服务器都是满足的,但是第二个可能很多都不满足了,下面也简单介绍一下openssl升级的方法openssl-1.1.1a。

<!--- centos6.9(Final),内核2.6.32-042stable,升级安装openssl1.1.1a --->
<!---1.查看当前 openssl版本 --->
openssl version -a
<!---2.下载openssl-1.1.1a.tar.gz,可在www.openssl.org查看最新版 --->
wget https://www.openssl.org/source/openssl-1.1.1a.tar.gz
 
<!---3.安装zlib,提供数据压缩用的函式库 --->
yum install zlib -y 
 
<!---4.解压 x:解压(c:压缩);z:gzip(j:bz2);v:显示详细信息;f:f之后要立即接文件名--->
tar -xzvf openssl-1.1.1a.tar.gz
cd openssl-1.1.1a
 
<!---5.配置及安装(shared zlib 是配置时调用共享zlib库) --->
./config shared zlib
make && make install
 
<!---6.备份原文件及创建软连接 --->
mv /usr/bin/openssl /usr/bin/openssl_old.bak
mv /usr/include/openssl /usr/include/openssl_old.bak
ln -s /usr/local/bin/openssl /usr/bin/openssl
ln -s /usr/local/include/openssl /usr/include/openssl
 
<!---/etc/ld.so.conf 记录编译时使用的动态库的路径,默认只有/lib和/usr/lib的库文件 --->
<!---用--prefix指定编译安装路径 或 将/usr/local/lib路径加入到/etc/ld.so.conf文件 --->
echo “/usr/local/ssl/lib” >> /etc/ld.so.conf
 
<!---运行ldconfig,使所有的库文件都被缓存到/etc/ld.so.cache中 --->
ldconfig -v
 
<!---查看openssl版本,检查是否升级成功 --->
openssl version -a
 
<---如果报错:openssl: error while loading shared libraries: libssl.so.1.1: cannot open shared object file: No such file or directory>
    ln -s /usr/local/lib64/libssl.so.1.1 /usr/lib64/libssl.so.1.1
    ln -s /usr/local/lib64/libcrypto.so.1.1 /usr/lib64/libcrypto.so.1.1
<---如果报错:openssl: No such file or directory>
     source /etc/profile

PS:如果你的 Nginx 不支持HTTP/2,那么在 ./configure 中加入:–with-http_v2_module ;如果没有 SSL 支持,还需要加入 –with-http_ssl_module,然后 make && make install 即可。

万事俱备,只欠东风,开启服务器支持HTTP/2就很简单了,只用在你主机/虚拟机nginx的.conf(一般在 /usr/local/nginx/conf/vhost/ 或 /etc/nginx/conf/)配置文件中将“listen 443 ssl;”改成“listen 443 ssl http2;”即可,还有记得reload重载一下Nginx服务。好了,去有关SSL检测网站检测(如 https://myssl.com/ )一下HTTP2是否开启成功。现在我们的网站又多了一个酷炫吊炸天的功能了,哈哈哈!

欢迎投稿、分享转载,转载请保留如下信息:格物躬行博客[https://www.go2do.net]

本文由 [go2do] 原创,本文链接: https://www.go2do.net/vps/how-performance-optimization-acceleration-website-wordpress.html



You may also like...

发表评论

电子邮件地址不会被公开。

本页共执行143次数据库查询,耗时0.275秒,使用内存 1.77 MB