大家在使用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网站如何分离静态资源

这部分可阅读本站最新教程：

WordPress使用CDN加速，动静分离教程（又拍云）

WordPress使用CDN加速，动静分离教程（腾讯云CDN）

以下为旧方案：

首先分离域名，将.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/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 Cache或 W3 Total Cache插件均提供替换静态资源域名的功能。

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

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