大家在使用WordPress的时候，可以通过分析发现，各种静态资源的加载速度是影响网站速度的重要原因之一，特别是图片、视频或动画资源较多的网页。加速这些静态内容的加载，可以直接提升网站的整体体验，且提升SEO效果。本文先介绍静态资源的优化。
如何计算静态资源数量及所需带宽
通过浏览器的的开发者工具（F12），就能查看网页的网络请求信息。
注意，打开开发者工具后，如果要获得所有网络请求与请求速度，需要用CTRL+F5刷新页面，否则部分文件是浏览器缓存的。
例如813站长大咖的首页：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
813站长大咖的首页会加载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个请求，而其它的请求只能排队，如果前面的请求加载阻塞，会影响后面的请求加载。
上面的示例中，813站长大咖的首页总共有 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加速，动静分离教程（腾讯云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分离静态资源 - 813站长大咖
* 原文地址：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加速静态资源。
