2024基于网站性能测试的WordPress优化指南

老白博客WordPress优化高级教程:在如今5G遍地走,千兆多如狗的高速网络时代,如果你访问网站,还出现转圈圈的情况,那么你十有八九是要关掉它的。即便是轻微的延迟,很多时候都会导致用户返回搜索结果页面,打开另外一个网站进行浏览。因此,如果要让你的网站留得住人,网站的速度是非常重要的基础指标。接下来,老白就简要谈谈几个问题:如何知道你的网站访问快慢以及提高网站速度。

基于网站性能测试的WordPress优化指南

一、何谓网站速度

网站速度指的是用户访问网站后,网页加载的速度。网站速度一般取一个平均值:页面上所有内容(文本、图片等元素)完全加载所需时间。

网站速度,不能简称为“网速”;网站速度的测试对象是网站,并非网络速度。

根据国外一篇综述报告(Web 性能心理学 – 缓慢的响应时间如何影响用户心理)显示,用户最满意的打开网页时间,是在2秒以下

用户能够忍受的最长等待时间的中位数,在6~8秒之间。这就是说,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去。

基于网站性能测试的WordPress优化指南

二、网站速度重要性

网站速度越慢,离开的用户越多,反之亦然。除此之外,还有更重要的原因。

网站速度是搜索引擎,包括Google,比较看重的一项排名因素,你的网站在搜索结果页面(SERP)上的排名会被它影响到。

如果你的网站加载速度过慢,尤其是在移动端上的表现太差,网站最终的排名结果就会受到负面影响

所以,网站速度也是搜索引擎优化必须考虑的一个因素,不能忽视。

三、网站速度性能测试

既然要提高网站的速度,那么首先你就得知道你的网站速度快慢,比较全面的方式就是网站性能测试工具。包括网站性能测试和本地F12开发者工具两大类。

1.网站性能测试

1.1 速度综合测试

下面这几个都还可以,首推Google Page Speed和Pingdom。 不过可惜少有国内节点的测试,老白此处推荐一个有香港节点的:https://www.36ce.net/

Page Speed OnlineGoogle Page Speed 是当下很流行的在线测试网站性能工具,基于Google的一套最佳的前端性能的规则,你可以很方便得到大量的性能信息,甚至还提供了移动设备的最佳实践报告。

Pingdom Tools一个不错的网站监测服务,可以针对每个网页的图像,css和JavaScript进行测试,并给出性能等级。还可以提供页面加载时间,页面大小和请求信息的数据。

Free Website Performance Test (BrowserMob):BrowserMob公司提供的网站性能测试和监测服务,可以轻松得到网站的全局性能数据。

Which loads faster?:就像它的名字,对比测试两个页面的速度,一目了然,快测测和你对手的数据吧。

1.2 日常访问测试

下面这几个都挺不错的,老白日常用ITDOT比较多。 爱站网:https://ping.aizhan.com/ 站长之家:https://tool.chinaz.com/sitespeed 17ce:https://17ce.com/ itdog.cn:https://www.itdog.cn/http/

2.性能测试报告

以支持香港节点测试的36ce.net为例,下面是老白博客的测试结果。 可以看到有性能、无障碍以及SEO等相关模块,我们依次点击查看结果。

基于网站性能测试的WordPress优化指南
  图片超链接相关测试
基于网站性能测试的WordPress优化指南

四、基于测试优化WordPress

温馨提示
本文教程建议大家先对网站进行通用优化,关于该部分可参考老白写的有关WordPress优化宝塔面板的相关文章。接下来的部分是针对性优化
我们可以根据得到了报告,按模块进行优化。最主要的是网站性能测试部分,主要的问题一般是图片和其他静态文件,如CSS和JS。
基于网站性能测试的WordPress优化指南

1.图片的优化

在检测报告中可以看到未优化的图像,然后进行下面的优化即可:

1.1.适当调整图像大小

将大型图像调整到正确的尺寸:wordpress自带了图像裁切功能,但是由于图像裁切会自动生成一大堆图片,所以老白自己一般是关闭的。 相关的插件也有很多,比如Aqua-Resizer,大家自行搜索。

1.2.延迟加载

懒加载图像和背景图像。这个很多缓存优化插件都有该功能,比如super cache、wp rocket、openlitespeed cahce等,打开即可。

1.3.转webp/avif

关于webp和avif,老白之前写过很多教程,大家可以去看看。简单来说就是该格式占用的空间更小,加载速度更快。

数据库法实现WordPress全站图片快速转webp格式

1.4.指定图像尺寸

编辑页面,找到图像,并查看它的HTML或CSS。给图像添加一个宽度和高度的属性。

<img src="https://www.xcbtmw.com/wp-content/uploads/2024/10/bt-wordpress.webp" height="200" width="200" /> 

1.5.使用CDN或COS

以腾讯云CDN为例,优化方法有以下几个(最佳但需付费):

  • 开启图片优化,对符合要求的图片请求,自动进行 Webp、Guetzli、TPG、AVIF 格式图片压缩
  • 若同一个图片格式同时匹配多个开启的图片自适应功能时,按照优先级从高到低 AVIF > Guetzli > TPG > Webp 顺序生效。如同时开启了 AVIF 自适应、Webp 自适应功能。当请求 a.jpg 文件,HTTP 请求头中 accept 头部包含 image/avif、image/webp 时,图片优化将优先匹配 AVIF 自适应,将图片格式转换为 AVIF 格式。
  • 自动生成缩略图
  • 按需调整图片大小和转换图片格式。由节点直接处理、缓存和响应缩放的图片,提升图片加速性能;源站仅需存储原图,减少源站的图片管理成本。

2.CSS和JS的优化

这个和图片一样,同属网站静态文件,因此也可以采用CDN。除此之外,还有下面的方法:

2.1压缩CSS和JS

通过压缩可以一定程度减少文件大小,老白推荐两个在线网站: https://www.toptal.com/developers/cssminifier https://www.toptal.com/developers/javascript-minifier

2.2合并压缩

页面加载的文件(css、js、图片等)都会导致请求数的增加,因此可以采用WordPress插件将CSS和JS合并为两个文件,可以极大减少HTTP请求数。 推荐两个插件:Autoptimize、WP Minify。可以合并压缩 js 和css 文件,添加过期时间、缓存,可移动css到页头,移动js 到页脚,压缩HTML代码等。

注意
某些主题关键文件不适用于合并,会报错,自行测试,或可使用单独文件压缩

2.3通用优化

异步加载 预加载 内联加载

静态资源 CDN

消除阻塞渲染的 CSS 及 JavaScript

五、服务器端缓存优化

再次提示,上述教程是在通用优化基础上进行的: 服务器端优化:https://www.xcbtmw.com/30167.html WordPress缓存详解:https://www.xcbtmw.com/29813.html