专注于外贸建站,分享WordPress教程和Elementor教程

如何使用WP Rocket加速WordPress网站

更新日期:2024-02-20
本系列教程

正版分销:

159元/站点/2年以上

WP Rocket 是市面上最好的WordPress网站速度优化缓存插件。它易用使用、适合新手,能让用户一键优化网站,而不必进行繁杂的配置,能立即减少网站的加载时间,并提高网站的 Google PageSpeed 和 Core Web Vitals 分数,无需编码技能。
加入读者学习群
我用的页面编辑器
让我的客户网站GTmetrix测分A\A的主机Cloudways
黑五优惠前4个月6折, 戳上方按钮注册即可自动带入优惠码BFCM2024
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我

WP Rocket插件是提升WordPress网站速度的易用且有效的最佳选择。本文将介绍如何使用wp rocket加速网站,在开篇,我将直接介绍优化后的数据比较,这也是我为什么选择使用wp rocket的原因。

缓存插件优化网站的测速数据对比

我对本站的B2B模板站https://b2bdemo.loyseo.com/展开了缓存插件的优化测试:

  • 测试工具:https://gtmetrix.com/
  • 测试位置:香港(网站服务器在siteground新加坡服务器)
  • 测试次数:3次;
  • 网站条件:已经做了图片优化,禁用了谷歌字体,安装了GA,未开启cloudflare CDN

测试结果如下:点击表格中的链接可以看到每次的测试报告

使用的缓存插件PageSpeed ScoreYSlow ScoreFully Loaded TimeTotal Page SizeRequests
未使用缓存插件C/73%B/84%2.4s/2.7s/3.1s1.58M74
SG optimizerA/94%A/92%2.3s/2.6s/3.0s1.01M18
wp rocketA/96%A/94%1.3s/1.4s/2.5s1.02M18
b2b模板站最初是studyingseo.com,现已更换域名到b2bdemo.loyseo.com

结论是WP rocket明显胜出了Siteground开发的sg optimizer。

此外,我曾经在比较缓存插件时,试过了W3 Total Cache、WP Fastest Cache、WP Super Cache等多款插件,这些插件都有免费版,但都没有纯付费的WP rocket的操作简单、学习成本低,并且有些插件的设置甚至会破坏站点,于是最后买了付费的wp rocket,一用之下确实很棒。

如何使用WP Rocket加速WordPress网站
上图是我的wp rocket购买记录。

从安全角度而言,保持插件更新是必要的,只有按年续费才能保持更新,若不更新的话,可能无法修复一些漏洞,不更新插件也依旧能用,这方面需自己权衡,譬如站点收入较多,能够覆盖这方面成本的时候,就可以买付费,最低价格是49美元 单站点/年,点此前往查看更多wp rocket价格套餐

也可以联系我购买,159元/站/2年以上(如无不可抗力的意外,我每年都续费,你就可以一直用)。

接下来,我们讲解wp rocket如何使用及配置,这些配置正运用于上文所述的测试站点中。

设置 WP Rocket

安装并启用wp rocket,启用后wp rocket就开始按照默认设置发挥作用

我们需要对它进一步设置,点击wordpress后台顶部的wp rocket》设置,即可进入设置页面

如何使用WP Rocket加速WordPress网站

接下来按照下列组图框选的选项进行配置,此外:wp rocket插件自带中文,只要你把后台的用户语言设置为中文即可。

仪表盘

在仪表盘中,你可以看到账户的授权类型以及过期时间,通常这个页面里你不需要做什么事情。

如何使用WP Rocket加速WordPress网站

缓存

按下图所选进行启用即可,其他的保持不动。注意,移动端不需要单独缓存。只有当你正在使用移动端专用的主题或插件时才建议开启移动端缓存功能。

如何使用WP Rocket加速WordPress网站

文件优化

在文件优化这一页,下面图中是我的常用配置。

注意,勾选合并CSS和JavaScript文件能让测速工具的评分有所提升,但是,你可以自己体验一下勾选前后的区别,通过无痕浏览器或者其他浏览器(不要登录网站)进行对比。

当选择CSS或JS合并时,会在打开页面的瞬间察觉明显的样式扭曲状态(因为合并后文件比较大,无法较快输出,而非合并情况下,大多都是小文件,能够较快输出),所以,通常不推荐网页的css或js超过50KB的情况下合并它们,并且官方也说,不推荐用于HTTP/2的站点,点击图中的更多信息你可以测试自己的站点是否已经使用HTTP/2。通常,用我推荐的Cloudways主机就是HTTP/2的。

如何使用WP Rocket加速WordPress网站

而CSS递送优化,虽然官方推荐使用移除未使用CSS的选项,但出问题的概率比较大;所以,我通常选择异步加载CSS,不过此项经观察也偶尔会出现打开页面时的样式闪烁,所以,你需要结合自己的接纳程度选择了。

如何使用WP Rocket加速WordPress网站

javascript异步加载是将js文件放到了页脚,而延迟执行是在交互时才触发,通常延迟执行引起页面问题的概率大一点,有些主题会为你提供wp rocket的理想配置,但并非所有主题都支持,这个延迟执行的功能,如果没有专业知识、或可靠的设置、或耐心的测试,否则不推荐启用。

媒体

按下图所选进行启用,通常我们要启用懒加载,让图片在进入可查看区域时才加载,降低页面加载时间。但懒加载会导致前台看到图片时出现卡顿。

所以,我更喜欢perfmatters插件(可联系我优惠购买)的媒体设置,它允许你设置前N张图片不用懒加载,同时,预先加载即将看到的N像素的内容的图片,这样就能将懒加载与用户体验更好的结合了。

如何使用WP Rocket加速WordPress网站

预缓存

在下图中,预缓存要开启。如果你的网站已经上线,启用了rank math seo等SEO插件,这里还能勾选按照站点地图(sitemap)进行预缓存。

此外,启用链接预取功能也很棒,当你把鼠标停留在链接之上时,对应页面就已经预先加载一部分内容了,这样会提升用户的体验,让用户感觉打开网页很快。

如何使用WP Rocket加速WordPress网站

接下来,有一栏DNS预读取功能,它是针对外部文件的优化,譬如谷歌字体、主题字体,能够优化移动端速度。

wprocket设置教程-8

你可以通过https://gtmetrix.com/的检测结果查看你的网站是否有第三方资源,如下图所示,在waterfall中查看domain列,如有非本站域名内容,则为第三方资源

gtmetrix检测网站第三方文件
gtmetrix检测网站第三方文件-2

将第三方域名复制后,在DNS与读取中中填入://第三方域名,譬如://fonts.googleapis.com

接下来是预加载字体功能,此处用于填入网站本地的字体(而非谷歌等第三方字体),如果用Google pagespeed insight测速,配置好预加载字体后,测试得分将有明显的提升。

如何使用WP Rocket加速WordPress网站

高级规则、数据库

这两项保持默认即可。

CDN

若按本站建站教程使用的cloudflare cdn,则此处不用设置。

心跳监测

降低心跳监测频率可节省部分服务器资源,一般都选中。

如何使用WP Rocket加速WordPress网站

扩展功能

扩展功能里是对第三方功能的支持,请按需选择,通常,我都保持不动。

接下来的图片优化功能也是安装一个插件IMAGIFY来实现,我一般不用这个插件,具体请查看这篇图片压缩教程

以上设置完毕后,我们可以先用新浏览器或无痕浏览器查看网站是否有异常需要改正,若正常,则使用工具https://gtmetrix.com/进行测试查看成果。

以后,若修改内容或设计发现用户端不能生效时,记得在顶部wp rocket菜单下,点击Clear and preload Cach,如果修改了设计样式,且无痕浏览发现样式不生效,那还需要点击一下Regenerate Critical Path CSS/重新生成关键路径CSS。必要时也可以禁用wp rocket排查问题。

如何使用WP Rocket加速WordPress网站

好了,本篇wp rocket网站速度优化教程到此结束。

查看更多WordPress教程

点赞

0 / 5 5

Your page rank:

Picture of 外贸建站技术姐Bonnie
外贸建站技术姐Bonnie

Bonnie是LOYSEO的创始人,在建站领域有着超过14年的经验,热爱能将想法变为现实的WordPress,更是Elementor的忠实用户~

LOYSEO
让我的客户网站GTmetrix测分A\A的主机Cloudways
黑五优惠前4个月6折, 戳上方按钮注册即可自动带入优惠码BFCM2024
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我