老白博客WordPress优化高级教程：在如今5G遍地走，千兆多如狗的高速网络时代，如果你访问网站，还出现转圈圈的情况，那么你十有八九是要关掉它的。即便是轻微的延迟，很多时候都会导致用户返回搜索结果页面，打开另外一个网站进行浏览。因此，如果要让你的网站留得住人，网站的速度是非常重要的基础指标。接下来，老白就简要谈谈几个问题：如何知道你的网站访问快慢以及提高网站速度。
[h1]一、何谓网站速度[/h1]
网站速度指的是用户访问网站后，网页加载的速度。网站速度一般取一个平均值：页面上所有内容（文本、图片等元素）完全加载所需时间。
网站速度，不能简称为“网速”；网站速度的测试对象是网站，并非网络速度。
根据国外一篇综述报告（Web 性能心理学 – 缓慢的响应时间如何影响用户心理）显示，用户最满意的打开网页时间，是在2秒以下。
用户能够忍受的最长等待时间的中位数，在6～8秒之间。这就是说，8秒是一个临界值，如果你的网站打开速度在8秒以上，那么很可能，大部分访问者最终都会离你而去。
[h1]二、网站速度重要性[/h1]
网站速度越慢，离开的用户越多，反之亦然。除此之外，还有更重要的原因。
网站速度是搜索引擎，包括Google，比较看重的一项排名因素，你的网站在搜索结果页面（SERP）上的排名会被它影响到。
如果你的网站加载速度过慢，尤其是在移动端上的表现太差，网站最终的排名结果就会受到负面影响。
所以，网站速度也是搜索引擎优化必须考虑的一个因素，不能忽视。
[h1]三、网站速度性能测试[/h1]
既然要提高网站的速度，那么首先你就得知道你的网站速度快慢，比较全面的方式就是网站性能测试工具。包括网站性能测试和本地F12开发者工具两大类。
[h2]1.网站性能测试[/h2]
[h3]1.1 速度综合测试[/h3]
下面这几个都还可以，首推Google Page Speed和Pingdom。 不过可惜少有国内节点的测试，老白此处推荐一个有香港节点的：https://www.36ce.net/
Page Speed Online：Google Page Speed 是当下很流行的在线测试网站性能工具，基于Google的一套最佳的前端性能的规则，你可以很方便得到大量的性能信息，甚至还提供了移动设备的最佳实践报告。
Pingdom Tools：一个不错的网站监测服务，可以针对每个网页的图像，css和JavaScript进行测试，并给出性能等级。还可以提供页面加载时间，页面大小和请求信息的数据。
Free Website Performance Test (BrowserMob)：BrowserMob公司提供的网站性能测试和监测服务，可以轻松得到网站的全局性能数据。
Which loads faster?：就像它的名字，对比测试两个页面的速度，一目了然，快测测和你对手的数据吧。
[h3]1.2 日常访问测试[/h3]
下面这几个都挺不错的，老白日常用ITDOT比较多。 爱站网：https://ping.aizhan.com/ 站长之家：https://tool.chinaz.com/sitespeed 17ce：https://17ce.com/ itdog.cn：https://www.itdog.cn/http/
[h2]2.性能测试报告[/h2]
以支持香港节点测试的36ce.net为例，下面是老白博客的测试结果。 可以看到有性能、无障碍以及SEO等相关模块，我们依次点击查看结果。 
图片超链接相关测试 
[h1]四、基于测试优化WordPress[/h1]
[success title="温馨提示"]本文教程建议大家先对网站进行通用优化，关于该部分可参考老白写的有关WordPress优化和宝塔面板的相关文章。接下来的部分是针对性优化[/success] 我们可以根据得到了报告，按模块进行优化。最主要的是网站性能测试部分，主要的问题一般是图片和其他静态文件，如CSS和JS。 
[h2]1.图片的优化[/h2]
在检测报告中可以看到未优化的图像，然后进行下面的优化即可：
[h3]1.1.适当调整图像大小[/h3]
将大型图像调整到正确的尺寸：wordpress自带了图像裁切功能，但是由于图像裁切会自动生成一大堆图片，所以老白自己一般是关闭的。 相关的插件也有很多，比如Aqua-Resizer，大家自行搜索。
[h3]1.2.延迟加载[/h3]
懒加载图像和背景图像。这个很多缓存优化插件都有该功能，比如super cache、wp rocket、openlitespeed cahce等，打开即可。
[h3]1.3.转webp/avif[/h3]
关于webp和avif，老白之前写过很多教程，大家可以去看看。简单来说就是该格式占用的空间更小，加载速度更快。
[h3]1.4.指定图像尺寸[/h3]
编辑页面，找到图像，并查看它的HTML或CSS。给图像添加一个宽度和高度的属性。
<img src="https://www.xcbtmw.com/wp-content/uploads/2024/10/bt-wordpress.webp" alt="2024基于网站性能测试的WordPress优化指南" height="200" width="200" /> [h3]1.5.使用CDN或COS[/h3]
以腾讯云CDN为例，优化方法有以下几个（最佳但需付费）：
- 开启图片优化，对符合要求的图片请求，自动进行 Webp、Guetzli、TPG、AVIF 格式图片压缩
- 若同一个图片格式同时匹配多个开启的图片自适应功能时，按照优先级从高到低 AVIF > Guetzli > TPG > Webp 顺序生效。如同时开启了 AVIF 自适应、Webp 自适应功能。当请求 a.jpg 文件，HTTP 请求头中 accept 头部包含 image/avif、image/webp 时，图片优化将优先匹配 AVIF 自适应，将图片格式转换为 AVIF 格式。
- 自动生成缩略图
- 按需调整图片大小和转换图片格式。由节点直接处理、缓存和响应缩放的图片，提升图片加速性能；源站仅需存储原图，减少源站的图片管理成本。
[h2]2.CSS和JS的优化[/h2]
这个和图片一样，同属网站静态文件，因此也可以采用CDN。除此之外，还有下面的方法：
[h3]2.1压缩CSS和JS[/h3]
通过压缩可以一定程度减少文件大小，老白推荐两个在线网站： https://www.toptal.com/developers/cssminifier https://www.toptal.com/developers/javascript-minifier
[h3]2.2合并压缩[/h3]
页面加载的文件（css、js、图片等）都会导致请求数的增加，因此可以采用WordPress插件将CSS和JS合并为两个文件，可以极大减少HTTP请求数。 推荐两个插件：Autoptimize、WP Minify。可以合并压缩 js 和css 文件，添加过期时间、缓存，可移动css到页头，移动js 到页脚，压缩HTML代码等。
[h3]2.3通用优化[/h3]
异步加载 预加载 内联加载
静态资源 CDN
消除阻塞渲染的 CSS 及 JavaScript
[h1]五、服务器端缓存优化[/h1]
再次提示，上述教程是在通用优化基础上进行的： 服务器端优化：https://www.xcbtmw.com/30167.html WordPress缓存详解：https://www.xcbtmw.com/29813.html
本文作者为test，转载请注明。