WordPress网站速度优化高级教程 – 动静分离(一)

大家在使用WordPress的时候,可以通过分析发现,各种静态资源的加载速度是影响网站速度的重要原因之一,特别是图片、视频或动画资源较多的网页。加速这些静态内容的加载,可以直接提升网站的整体体验,且提升SEO效果。本文先介绍静态资源的优化。

如何计算静态资源数量及所需带宽

通过浏览器的的开发者工具(F12),就能查看网页的网络请求信息。

注意,打开开发者工具后,如果要获得所有网络请求与请求速度,需要用CTRL+F5刷新页面,否则部分文件是浏览器缓存的。

例如站长帮的首页:https://www.zhanzhangb.com,在开发者工具中能看到下列信息:

57 requests
396 KB transferred
1.2 MB resources
Finish: 1.83 s
DOMContentLoaded: 312 ms
Load: 1.05 s

以上信息大致为:网页总共有57个请求(包括广告),1.2M资源,全部加载完毕1.83秒, HTML文档被加载和解析完成的时间为312毫秒( DOMContentLoaded事件被触发 )。

因为网页上有Adsense广告,过滤掉广告之后,查看一次:

35 requests
208 KB transferred
875 KB resources
Finish: 706 ms
DOMContentLoaded: 297 ms
Load: 316 ms

站长帮的首页会加载875kb的数据,假设在1秒内传输完毕的话,服务器带宽需要 6.835 Mbps(理论值) 。计算公式为:875KB ÷ 128kb = 传输时间(秒)

Mbps是带宽单位,速度单位为MB/s,1MB/s=8Mbps。也就是说 1 Mbps 传输速度为128kb/秒。

PS:假设服务器带宽为3M,首页完全完成的时间为:2.28秒( 忽略其它因素 )。

利用多域名加快网页加载速度

利用浏览器的并发请求资源的功能,实现更快速加载。

拿 Chrome 浏览器为例来分析一下, Chrome浏览器的最大并发HTTP连接数为6,也就是说,如果同域名情况下,浏览器可以同时处理6个请求,而其它的请求只能排队,如果前面的请求加载阻塞,会影响后面的请求加载。

上面的示例中,站长帮的首页总共有 35 个请求,如果在带宽足够的情况下,也无法同时加载完毕。如果将这些请求分成多个域名,理论上浏览器处理的速度会更快(带宽足够的前提下)。

我们看看腾讯首页(www.qq.com),在浏览器的开发工具中可以发现,除了html页面之外,几乎所有的其它静态资源都不是www.qq.com这个域名,而是一些:mat1.gtimg.com、img1.gtimg.com、inews.gtimg.com、vm.gtimg.cn之类的域名。

再看看其它的大型网站基本上都是如此,大多采用img1.xxx.com、img2.xxx.com 、img3.xxx.com 等类似的域名加载静态资源。

WordPress网站如何分离静态资源

首先分离域名,将.css、.js及所有多媒体问题与主域名分开。

方法一:修改Wordpress的wp-content目录路径(建议新安装Wordpress用户使用)

其实Wordpress自带这个功能,只是默认没有开启,编辑wp-config.php文件,加入以下内容:

//将wp-content目录设置为该目录的完整本地路径(尾部不带斜杠),例如
define( 'WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/neirong' );

//将wp-content目录设置为该目录的完整URI(尾部不带斜杠),例如
define( 'WP_CONTENT_URL', 'https://img.zhanzhangb.com/neirong');

以上方法中,可以不修改wp-content目录的本地路径,只修改URL。(推荐)

如果修改了wp-content目录的本地路径,需要将 wp-content 改名,包括路径与修改的一致,否则会出错。修改完成后,建议重启PHP清理相关缓存。

wp-content目录中存放的是主题、插件以及用户上传的所有资源,所以通过此方法,可以成功的把主域名和静态资源域名分离。

方法二:通过 functions.php 文件修改

在 functions.php 文件中加入以下代码:( 注意修改相关域名 )

/**
 * WordPress分离静态资源 - 站长帮
 * 原文地址:https://www.zhanzhangb.com/2020-635.html
**/
function zhanzhangb_replace(){
    function Rewrite_URI($html){
		$domain = 'www.zhanzhangb.com';   //填写主站域名
		$img = 'img.zhanzhangb.com'; //填写图片资源域名
		$static = 'static.zhanzhangb.com'; //填写css与js的资源域名
		$html = preg_replace('/http(s|):\/\/'.$domain.'\/wp-([^"\']*?)\.(jpg|png|gif|bmp|jpeg)/i','//'.$img.'/wp-$2.$3',$html);
		$html = preg_replace('/http(s|):\/\/'.$domain.'\/wp-([^"\']*?)\.(css|js)/i','//'.$static.'/wp-$2.$3',$html);
		return $html; 
	} 
	if(!is_admin()){ ob_start("Rewrite_URI"); } 
} 
add_action('init', 'zhanzhangb_replace');

方法三:插件修改

WP Super CacheW3 Total Cache插件均提供替换静态资源域名的功能。

PS:修改了相应的静态资源域名后,切记要解析和绑定好域名。

下一篇《WordPress网站速度优化高级教程 – 动静分离(二)》将详细介绍配置CDN加速静态资源。


  • 微信或QQ扫一扫

留下评论