2023年 WordPress 速度如何优化 + 三款主流速度优化插件测评

如果采用 WordPress 建站，随着网站内容的丰富、后台插件数量的增多，WordPress 网站的速度变得越来越慢。

为什么变得越来越慢？为什么要优化速度？如何优化网站速度？WordPress 有哪些优化插件能有效提升网站速度？Simple Static如何安装使用？WP Super Cache如何安装与使用？NitroPack真的那么神吗？网站速度优化核心指标有哪些？网站速度核心指标如何优化？

今天小编 甲乙丁丙 一篇文章帮大家搞清楚 WordPress 网站速度优化的来龙去脉！

1. WordPress速度优化前言

1.1 为什么要优化WordPress网站的速度?

## 转化率：

多项研究表明，网站速度会影响转化率（或用户完成所需动作的速度）。更多的用户停留在快速加载的网站上，与速度较慢的网站相比，他们的转化率也更高。许多公司发现，页面加载时间减少几毫秒会增加转换：

1. Mobify发现，将他们的主页加载时间减少100毫秒，导致基于会话的转换增加1.11%
2. 零售商AutoAnything在将页面加载时间减半后，销售额增长了12-13%
3. 沃尔玛发现，将页面加载时间缩短1秒，转化率提高2%

因此，提高站点性能是转化率优化的一个重要部分。

## 跳出率：

跳出率是指只浏览一个页面就离开网站的用户数量与整个网站访问用户的百分比。如果页面在几秒钟内没有加载，用户可能会关闭窗口或单击离开。英国广播公司发现，他们的页面加载每增加一秒，就会损失10%的用户。

##SEO最佳实践：

谷歌表示，网站速度（因此，页面速度）是其算法用来排名页面的信号之一。研究表明，当谷歌考虑页面速度时，它可能会专门测量到第一个字节的时间。此外，页面速度慢意味着搜索引擎可以使用其分配的爬行预算爬行更少的页面，这可能会对索引产生负面影响。网站在移动设备上的性能对于SEO来说尤为重要。

将网速列为网页搜索排名因素

https://developers.google.com/search/blog/2010/04/using-site-speed-in-web-search-ranking

## 用户体验：

页面加载时间长，对用户操作的响应时间差，会造成糟糕的用户体验。等待内容加载会让用户感到沮丧，并可能导致他们完全离开网站或应用程序。

1.2 怎么测试WordPress网站速度?

网站速度测试工具推荐

• https://pagespeed.web.dev/
• https://www.webpagetest.org/
• https://gtmetrix.com/
• https://www.dotcom-tools.com/
• https://tools.pingdom.com/

? 甲乙丙丁推荐： pagespeed & webpagetest

网站测试工具很多，但是使用方式及测试指标都大同小异，今天我们主要使用Google官方速度测试工具pagespeed为大家讲解如何测速及测试结果指标如何看！

打开 https://pagespeed.web.dev/ ， 输入自己的网址， 点击 Analyze 开始测试，四个主要维度的评分越高， 说明网站的性能速度和SEO效果做得越好【1~100】；

综合评分：

# Performance (性能评分)【1~100】: 网站性能得分主要以FCP(First Contentful Paint)、SI (Speed Index)、LCP(Largest Contentful Paint)、TTI(Time to Interactive)、TBT(Total Blocking Time)、CLS(Cumulative Layout Shift) 指标得分综合评估而来；

# Accessibility(可用性评分)【1~100】: 网站尽可能多的适用于各种人群访问（正常人、视觉障碍人群，听觉障碍人群，输入障碍人群、表达障碍人群等）。 作为开发人员，很容易假设所有用户都可以看到并使用键盘、鼠标或触摸屏与您的页面交互。可能对某些人来说是很好的体验，但也会给其他人带来问题，从简单的烦恼到彻底的阻碍。了解更多

# Best Practices(最佳实践评分)【1~100】: 最佳实践主要测试一些技术指标是否实施，比如：HTTPS、页面声明编码、页面没有显示的控制台错误、没有使用存在漏洞的第三方库等

# SEO(SEO优化评分)【1~100】: 主要检查是否按照SEO建议进行页面优化。比如标题优化、链接优化、图片优化

评分等级

• 绿色圈：优秀
• 橘色圈：及格
• 红色圈：太差

? 搜索引擎优化 (SEO) 新手指南: https://developers.google.com/search/docs/fundamentals/seo-starter-guide

? PageSpeed Insights 规则: https://developers.google.com/speed/docs/insights/rules

核心指标下图所示：

①First Contentful Paint【FCP】（首次内容绘制）：首次内容绘制 (FCP)指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间；

?FCP通俗理解：打开网站看到第一屏需要多长时间。

②Time to Interactive【TTI】（可互动时间）：可互动时间(TTI)是指访问网站到可以交互所需要的时间。

?TTI通俗理解：打开网站到可点击可滚动需要多长时间

③Speed Index【SI】（页面显示速度）：速度索引衡量页面加载期间内容的视觉显示速度。

?SI通俗理解：网站首屏完整加载所需时间

④Total Blocking Time【TBT】（总阻塞时间）：总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。

?TBT通俗理解：大的JS文件或者CSS文件阻塞渲染所消耗的时间

⑤Largest Contentful Paint【LCP】（最大内容渲染时间）：最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

?LCP通俗理解：大的图片，大的内容块，大的banner加载的平均时间

⑥Cumulative Layout Shift【CLS】（累计布局偏移）：CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。

?CLS通俗理解：页面加载过程中有没有过多的元素大幅度的上窜下跳

?核心网站指标（Core Web Vitals）: https://web.dev/learn-core-web-vitals/?utm_source=lighthouse&utm_medium=lr

1.3 WordPress网站速度为什么变慢?

为什么网站速度会变慢？随着页面内容的增多，随着后台插件的增多，网站的页面资源也越来越多。导致速度变慢的因素可能有很多种， 最为重要的有以下两个因素

• 阻碍呈现的往返次数过多：加载阻碍呈现的资源所需的往返次数过多。如果网页的大部分资源都会阻碍呈现，PageSpeed Insights 会认为相应网页有较大的优化空间。开发者可以调查以下规则，以进行优化：避免着陆页重定向、清除阻碍呈现的 JavaScript 和 CSS 内容、使用浏览器缓存、优先加载可见内容以及缩短服务器响应时间。（通俗理解：js、css、图片、第三方资源太多）
  • 太多的阻塞JS/CSS文件加载
  • 太多的字体文件加载
  • 太多的图片加载
  • 太多的重定向
  • 没有使用缓存（服务器缓存、CDN缓存、浏览器缓存）
• 响应内容过大：响应的内容过大，包括 HTML 主要资源和所有子资源。如果通过压缩或缩减大小可清除响应主体的大部分内容，PageSpeed Insights 会认为相应网页有较大的优化空间。开发者可以调查以下规则，以进行优化：启用压缩功能、缩减资源大小和优化图片。（通俗理解：js、css、图片等资源过大）
  • 需要不需要的JS/CSS都一起加载
  • 非首屏的图片第一时间加载(懒加载)
  • html/js/css没有使用压缩
  • 图片没有按浏览器支持加载webp

1.4 如何优化WordPress网站速度?

1.4.1 遵循Google官方建议

Google Page Speed Insights在每一个测试不理想的指标下面，都会给出具体的优化建议。我们测试完成以后，点击项目的小箭头，展开测试明细，点击“Learn more” ，即可按照官方的最佳实践进行优化！

?PageSpeed Insights 规则: https://developers.google.com/speed/docs/insights/rules
– 避免使用着陆页重定向
– 启用压缩功能
– 缩短服务器响应用时
– 使用浏览器缓存
– 缩减资源大小
– 优化图片
– 优化 CSS 发送过程
– 优先加载可见内容
– 移除会阻止内容呈现的 JavaScript

1.4.2 学习Web.dev

web.dev 上针对速度测试的指标以及当指标不理想如何进行优化，进行了系统而全面的阐述；参考这些优化教程，可以讲网站的综合评分优化到一个新的高度！

? Performance audits: https://web.dev/lighthouse-performance/

1.4.3 甲乙丙丁速度优化建议

当网站建立第一个空白页面，速度测试是4个100分；当我们不断往网站加插件，加内容，评分就每况愈下！速度优化的核心是做减法，化整为零！

当我们不停往页面加东西的时候，我们需要考虑：

• 加那么多东西？想要表达什么？
• 加那么多东西？帮客户解决了什么问题？
• 加那么多东西？客户阅读会不会有负担？
• 不加这个插件？SEO还能不能做？
• 不加这个插件，还有没有其它方式可以实现？

? 甲乙丙丁速度优化实操推荐：

#减少非必要插件数量
-> 尽量选择解决方案比较完整的完整的主题服务商（例如:kadence、avada）

#减少非必要请求（js/css/字体/图片）
-> 核心css代码直接嵌入页面顶部
-> 核心js代码直接嵌入页面底部
-> 重复引用的小图直接base64编码
-> 图片懒加载

#减小资源请求路径
-> 减少重定向
-> 服务器做缓存，CDN缓存，浏览器缓存

#减小资源大小
-> 无用js/html/css代码移出
-> 启用GZIP压缩
-> 图片支持响应式尺寸
-> 图片支持webp

#减小资源处理时间
-> js进行延迟加载
-> 非主要css进行延迟加载
-> 字体preload

2. WordPress速度优化插件测试前置条件说明

? 甲乙丙丁友情提示：以香港的主机测试全球速度有失偏颇，本教程仅供参考和学习交流！真实效果以大家实测为准！

3. Simply Static 安装与使用

使用 WordPress 静态站点生成器插件 Simply static 将 WordPress 站点转换为静态站点。Simply Static Pro（付费）支持表单、评论、搜索和多语言。

通俗理解：当用户从浏览器发起一个wordpress站点请求，wordpress在服务器端接收请求以后，需要从数据库查询相应数据，再结合对应文章类型的模板渲染成html，返回给用户。中间存在两个步骤，查询数据库+数据模板渲染，利用Simply static 可以提前把所有网站动态请求生成html静态页面，缓存到服务器磁盘上，当用户请求页面的时，直接从磁盘读取静态页面进行响应，从而提高了网站响应速度！

3.1 Simply Static安装

免费版Simple Static的安装

付费版Simply Static安装（付费版的功能依赖于免费版，所以安装付费版，要同时安装免费版）

Simply Static Pro购买 》， 购买以后会获得相应的Pro安装包，然后通过Wordpress后台》Add Plugin》Upload Plugin进行上传启用即可.

3.2 Simply Static设置

基本设置

包含或排除URL

Deployment可忽略，限定了不常用CDN

表单配置

站内搜索配置

它使用 fuse.js 或 Algolia API，并创建一个完整的索引来根据每个页面的标题和内容进行搜索。搜索不展开配置，有需要的小伙伴可以加作者QQ交流！

高级设置

最后一个重置设置

3.3 Simply Static测试

配置好Simply Static以后，就可以开始生成静态页面了；注意：生成静态页面需要一些时间，建议检查静态页面生成目录

相应的静态缓存目录已经生成了对应的静态文件：

如果想让 Nginx 直接返回生成的静态页面, 可以在 Nginx 增加如下配置

# WP Super Cache rules.
# Designed to be included from a 'wordpress-ms-...' configuration file.
 
set $cache_uri $request_uri;
 
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
        set $cache_uri 'null cache';
}
 
if ($query_string != "") {
        set $cache_uri 'null cache';
}   
 
# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
        set $cache_uri 'null cache';
}   
 
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
        set $cache_uri 'null cache';
}
 
# START MOBILE
# Mobile browsers section to server them non-cached version. COMMENTED by default as most modern wordpress themes including twenty-eleven are responsive. Uncomment config lines in this section if you want to use a plugin like WP-Touch
# if ($http_x_wap_profile) {
#        set $cache_uri 'null cache';
#}
 
#if ($http_profile) {
#        set $cache_uri 'null cache';
#}
 
#if ($http_user_agent ~* (2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800)) {
 #       set $cache_uri 'null cache';
#}
 
#if ($http_user_agent ~* (w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-)) {
  #      set $cache_uri 'null cache';
#}
#END MOBILE
 
# Use cached or actual file if they exists, otherwise pass request to WordPress
location / {
        try_files /wp-content/plugins/simply-static/static-files/simply-static-1-1669029202/$cache_uri/index.html $uri $uri/ /index.php?$args;
} 

注意: simply-static-1-1669029202 根据自己实际生成路径名配置

使用Simply Static前后网站核心指标对比

备注: 27国家测试工具：https://www.dotcom-tools.com/

通过观察速度测试对比矩阵，可以发现 Simply static 对网页的性能提升还有有一定帮助的；主要指标提升体现在绿色标记条目上。

4. WP Super Cache安装与使用

WP Super Cache从动态WordPress博客生成静态html文件。生成html文件后，Web服务器将为该文件提供服务，而不是处理相对较重和更昂贵的 WordPress PHP脚本。生成原理类似于Simply static。

4.1 WP Super Cache安装

直接在wordpress后台，增加插件，输入WP Super Cache进行查找，如下图所示，点击安装启用即可。

4.2 WP Super Cache设置

基本设置

高级设置如图所示

按照如图所示勾选即可

当 Cache Delivery Method 选择 Expert （专家模式），需要在nginx配置如下规则：

# WP Super Cache rules.
# Designed to be included from a 'wordpress-ms-...' configuration file.
 
set $cache_uri $request_uri;
 
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
        set $cache_uri 'null cache';
}
 
if ($query_string != "") {
        set $cache_uri 'null cache';
}   
 
# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
        set $cache_uri 'null cache';
}   
 
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
        set $cache_uri 'null cache';
}
 
# START MOBILE
# Mobile browsers section to server them non-cached version. COMMENTED by default as most modern wordpress themes including twenty-eleven are responsive. Uncomment config lines in this section if you want to use a plugin like WP-Touch
# if ($http_x_wap_profile) {
#        set $cache_uri 'null cache';
#}
 
#if ($http_profile) {
#        set $cache_uri 'null cache';
#}
 
#if ($http_user_agent ~* (2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800)) {
 #       set $cache_uri 'null cache';
#}
 
#if ($http_user_agent ~* (w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-)) {
  #      set $cache_uri 'null cache';
#}
#END MOBILE
 
# Use cached or actual file if they exists, otherwise pass request to WordPress
location / {
        try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri $uri/ /index.php?$args ;
} 

CDN配置

Contents 主要查看已缓存的文件列表，也可以删除过期的缓存以及删除全部缓存

Preload设置如下，设置完以后点击“Preload Cache Now”开始创建缓存

Plugins 和 Debug 不需要额外设置，保持默认

查看对应的缓存目录，就可以看到html已经生成成功，并生成了对应gz压缩包；到此WP Super Cache配置成功！

4.3 WP Super Cache测试

WP Super Cache 提速没有 Simply Static 那么明显，按道理他们应该属于同一类插件，技术原理也差不多！如果大家使用 WP Super Cache 有明显速度提升，记得跟小编一起交流！

5. NitroPack安装与使用

NitroPack 跟 Simply Static& WP Super Cache 原理差不多，也是把Wordpress动态请求静态化为html；但是NitroPack会把静态化的文件拉取到它们自己的服务器，然后再分发到他们的全球CDN服务器（NitroPack的CDN基于cloudflare）; NitroPack官网

5.1 NitroPack安装

1. NitroPack是一个付费软件（可以申请免费试用），先注册NitroPack账号，选择自己的付费计划

2. 注册账号成功以后，登录NitroPack，点击 Add new website

选择付费订阅或者免费订阅，点击 Proceed，即可添加网站

添加网站以后，需要建立网站与Nitropack的连接，针对wordpress，有专门的插件：WordPress NitroPack Plugin

也可以在Wordpress后台，添加插件》插件市场搜索》Nitropack

安装完插件并启用以后，无需任何设置，NitroPack 与 WordPress 网站建立了连接：

5.2 NitroPack设置

5.2.1 NitroPack 服务端设置

NitroPack服务端设置指的是需要的nitropack.io后台进行的设置，对于NitroPack的设置明细不作过多解释，大家安图设置即可。希望进一步了解每个参数的作用，可以查阅官方文档或加小编QQ（文末尾），深入交流。

开启缓存预热

点击顶部的设置进入详细设置页面，如图所示

Optimization Modes 选择 Custom

General 设置如下

Caching设置如下

Fonts设置如下

Images设置如下

HTML设置如下

CSS设置如下

JS设置如下

Integrations设置如下

到此，NitroPack服务端设置完毕

5.2.2 NitroPack WordPress后台设置

进入Wordpress后台，依次点击Settings 》NitroPack

Dashboard设置如下

Diagnostics 设置

wordpress后台，nitropack设置完毕

5.3 NitroPack测试

通过对比矩阵数据，NitroPack对全球的速度提升还是比较明显，是三个插件中效果最好的！因为CDN基于Cloudflare，中国地区不太友好！

6. WordPress速度优化总结

6.1 Simple Static & WP Super Cache & NitroPack 优化速度对比

通过测试矩阵对比发现，速度优化效果： NitroPack > Simply Static > WP Super Cache； 实际效果还得看大家具体实施，有多方面的因素会影响最终的测试结果，比如服务器配置，宽带，主题资源复杂度，服务器所在地区等等。

6.2 WordPress速度优化总结

以上就是WordPress速度优化插件Simply Static、WP Super Cache、NitroPack的安装及使用教程，WordPress是很好的开源CMS系统，成也开源，败也开源；开源成就了WordPress的繁荣生态，想要实现什么效果或者功能，安装插件即可；但是，当安装太多第三方插件以后，插件的资源加载，插件之间冲突影响，插件资源不可轻易优化，导致速度越来越慢；使用WordPress，如果想要保证速度，建议保持主题的单一性，插件非必要不安装；多即少。

WordPress速度优化关键原则还是用减法：减少非必要插件数量、减少非必要请求、减小资源请求路径、减小资源大小、减小资源处理时间。速度优化有一定技术门槛，还需要一些动手能力，再加上一些耐心和细心！如果大家在速度优化上还存在疑问或问题，可以关注后续文章，也可以添加文章末小编QQ，咱们共同进步，共同富裕！

7. 速度优化系列后续文章（预告）

1. 服务器端宝塔速度优化
2. PHP缓存及速度优化
3. 服务器缓存服务Redis,Memcached系列
4. 图片webp如何优化？
5. Js&Css如何优化？
6. 字体文件如何优化？
7. 静态网站生成器（Static Site Generator）
8. 未完待续， 关注不迷路…

⁉️ 如果还有其它问题或进一步跟小编深入交流，请加 QQ：2715802635

作者：甲乙丙丁

10年+程序生涯, 产品需求原型架构开发运维引流 SEO 一条龙，学海无涯苦作舟, 老夫聊发少年狂….还有我不会的吗?