本篇文章主要介绍如何对网站的静态资源进行优化。
静态资源就是网页中用到的 js/css/fonts 这些文件。基本上 WordPress 的每个插件，每个主题都会有自己的 css/js/fonts。最终在做好的网站上会加载这些全部的 js/css/fonts 文件。
而我们需要做的就是优化这些静态资源，提升网站加载速度，因为网站的速度是搜索引擎判断网页是否有价值的一个重要因素。
查看我更多关于网站 SEO 优化的文章：
2019年自建站 On-Page SEO 优化的最佳实践（附SEO模版） - 王会的博客www.wanghuiblog.com
下面详细来介绍做静态资源优化的几种方法：
压缩合并
所谓压缩合并就是将网站中用到的多个 js/css/fonts 等等，按照一定的规则将他们分别打包成一个文件或者少量的几个文件，然后再进行压缩。
压缩文件不必多说，压缩后的文件平均能减少60%的大小，比如 jquery 未压缩时是 78.8 KB，压缩后只有 30KB。所以无论如何，压缩都是我们必须要做的。
合并文件的做法并不少见，一个安装了10个插件的网站（10个插件不算多吧），那么网站需要引用的 css 文件可能就会达到10个左右，虽然每个css 文件都不大，基本上在 5k 以下，并不会太影响网页加载。
但是目前常用的浏览器打开网页时能同时发出的请求只有6个，所以当有10个css 文件需要请求时，浏览器会一次性请求6个，而剩下的4个必须等前面6个有请求完成后才能发出。无疑，大量的请求会导致页面加载时间过长。
控制请求资源的数量在合理的范围内，能最大化的优化网站加载速度。
什么是合理的范围呢？
因为浏览器可以同时发出 6 个请求，所以没有必要将 css/js 分别合并到一个文件中，那么这个时候网页请求只有三个，一个 HTMl 一个 css 一个 js，好么？不好，因为全部合并到一起后，文件大小变大，变大意味着下载需要更长的时间。而一旦 js 或者 css 有没有加载好时，页面是会出现错乱甚至白屏的。没有完全利用好浏览器可以同时下载 6个请求的优势。
所以，最佳的做法是：将一些较小的（5KB 以下） css 进行合并处理，较大的 css 文件则剔除，比如 font-awesome、bootstrap。将 jquery，query-migrate，bootstrap 等等较大的库这些也剔除，其他的小 js 文件进行合并压缩。
此外，合理评估页面是否需要用到 font-awesome，通常情况下，可能网站只用到了很少的几个 font icon，但是需要引入整个 font-awesome 文件，这样就有点大材小用了。如果是这种情况，可以考虑用其他的方案替掉 font-awesome。
引用外部 CDN 资源
将网页中用到的 js 库或者 css 库从网站代码中修改成使用公共资源库。
使用公共 CDN 资源有两个优势：
- 一方面 CDN 的 加载速度更快
- 另一方面可以减少自己服务器流量
额外的还会有一个隐藏好处，国内加速，比如 jquery 官方的 cdn 资源，在国内的访问速度比国内 CDN 的速度要慢2倍。国内的 CDN 资源基本上 50ms 就能完成请求，而 jquery 官方的 CDN 资源平均请求时间在 150ms。
WordPress 中使用外部 jQuery 的方法：
找到你正在用的主题目录下的 function.php 文件，通常在 wp-content/themes/{你正在用的 Theme}/function.php，找到这个文件中的 function register_scripts 这个函数。
在这个函数内部添加下面的一段代码：
public function register_scripts {// 添加下面的代码wp_deregister_script( 'jquery' ); // 取消默认的 jquerywp_deregister_script( 'jquery-migrate' ); // 取消默认的 jquery-migratewp_enqueue_script( 'jquery', '//cdn.bootcss.com/jquery/1.12.4/jquery.min.js', array(), '1.12.4' ); // 添加外部 CDN 的 jquery 版本wp_enqueue_script( 'jquery-migrate', '//cdn.bootcss.com/jquery-migrate/1.4.1/jquery-migrate.min.js', array(), '1.4.1' ); // 添加外部 CDN 的 jquery-migrate 版本}
- wp_deregister_script 函数的功能就是取消之前的某个内置 js 文件，
- wp_deregister_style 就是取消之前引入的某个 css 文件，
- wp_enqueue_script 是引入某个依赖文件，
- wp_enqueue_style 是引入某个 css 文件。
JS 异步加载
js 文件开启 defer 加载功能，也就是延迟加载，这样不会阻塞页面加载渲染，会有更快的页面展示。
注意：由于一些插件会在网页的 html 代码中添加依赖于 jquery 的 js 脚本，所以，jquery 最好在 head 中引入。
GTag 优化
google analytics 优化，由于浏览器的 adblock 插件会将 gtag 屏蔽掉，所以，最好的处理方法是将 gtag 优化到本地，在优化到本地后，文件名会被 hash 成一个随机字符串，这样 adblock 插件就没有办法识别出来了。
但是在 gtm 运行时会动态加载 ga，而这个动态加载的 ga 文件名就是 google analytics，还是会被 block 掉。但是 gtag 的起他功能还能用。
懒加载
懒加载也是必须要开启的一个功能，它可以显著的降低网站上的请求数量，尤其是当网站上的图片、视频较多时。它会让不在可视区域内的图片、视频等等资源暂时不加载，只有当网页滚动到相应位置时才会发起请求。
CDN 图片
图片一般都是网站上最大的流量消耗者。相比较文字来说，一个网站的 html 可能只有 10k 左右，但是一个图片很可能就到 300k 了，所以有必要将图片从服务器中移出，单独放到 oss 中，通过 cdn 的方式访问。
这样既能节省服务器流量，保护服务器，另一方面通过cdn访问图片，能获得更好的加载速度。
推荐使用 阿里云 oss + cdn服务。WPOSS 插件可以将 wp 中上传的图片同时保存在 oss 和 服务器中，并返回 cdn 的图片地址。
图片处理
阿里云 OSS 图片处理可以方便我们对图片进行一些处理，比如水印，压缩，渐变，Webp等等。Webp 是一种新型的图片格式，它的大小更小（甚至可以只有原图片的 10% 大小），但是却不会降低图片的质量。
遗憾的是，iOS 并不支持 Webp 格式的图片，而阿里云的 OSS 也并不支持动态 Webp。所以是否启用 Webp 需要权衡一下。
除了 Webp 特性之外，OSS 支持的压缩，水印，裁剪等等功能可以在 OSS 的后台进行设定，然后在网页上使用处理后的图片，可以和显著的降低图片大小，以达到速度优化的效果。
修改 wp-includes/media.php 两个地方可以让网站的图片变成处理后的图片：
第 884 行
$default_attr = array('src' => $src . "?x-oss-process=style/webp-water", // Line: 884 这行有改动'class' => "attachment-$size_class size-$size_class",'alt' => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
);
第 1169 行
$source = array('url' => $image_baseurl . $image['file'] . "?x-oss-process=style/webp-water", // Line 1169'descriptor' => 'w','value' => $image['width'],
);
这两个地方后，可以让网站上的图片使用 oss 处理后的图片了。
如果还有疑问，欢迎留言。
以上～
