WordPress网站加速经验-体质最佳化与5款快取外挂测速+功能比较

对於WordPress网站来说,快取外挂对网页载入速度的确是有帮助的。
在已经进行一些基本最佳化的网站中,使用最简单又免费的Simple Cache,就能让页面载入的速度加快1秒以上(实际视不同网站而定);如果,使用进阶的快取外挂,像是SWift PERFORMANCE或是WP ROCKET,加快的幅度就不得了罗!
(不过,还得先将网站的基本体质最佳化,才吃得下进阶版的快取外挂所创造的速度优势)

以下是在我自己的网站的Chrome DveTool测速:

  • 网速:16.5mbps
  • 工具:Chrome DevTools(版本 90.0.4430.85 (正式版本) (x86_64))
  • 网站主机:CLOUDWAYS linode 1gb
  • 页面尺寸:1MB
DevTools 无快取 Simple Cache SWift PERFORMANCE WP ROCKET
Dom 1.878(s) 0.7047(s) 0.353(s) 0.441(s)
Load 1.974(s) 0.7352(s) 0.5146(s) 0.592(s)

网站基本体质最佳化

快取外挂只是辅助,还有许多网站的体质需要事先强化,像是主机的性能以及网站结构。

主机

摆脱龟速的共享主机,因为超时的TTFB以及贫脊的CPU效能,会让网页的载入速度至少延迟3秒以上

如果专业技能许可,像是linodeVultr HF,甚至是GCP,都是不错的VPS与云主机
如果无法自行部署云主机,那麽,像是CLOUDWAYS以及RUNCLOUD这类型的平台服务,可以省去许多云主机的管理以及安全维护的麻烦。不过,RUNCLOUD还是需要具备基础的资讯工程知识,使用上比较不容易出错;而CLOUDWAYS则是不太需要技术的方便选择。
如果,实在无法自己驾驭云主机,那麽,KINSTA是个花钱就可以无脑任性的选择。
如果,没那个屁股乘坐KINSTA,那麽,A2的Turbo方案大概可以算是共享主机里较优质的选择,至少,它具有快速的TTFB,至於主机效能,那得取决於网站的资源使用罗!

网站架构与网页尺寸

不使用花俏的主题与页面编辑器:

  • 花俏的主题
    像是envatomarcket里面贩售的主题,捆绑着许多编写地很沈重的脚本以及可能不需要的附加功能。
  • 页面编辑器
    像是最受欢迎的ELEMENTOR,虽然很容易、也很方便;但是,就和花俏的主题一样,过多的DOM、脚本与外部资源,也会让页面载入速度变慢。

花俏的主题与页面编辑器,让非资讯工程的用户能够建构出精美的网站;但是,往往也挟带了许多可能不需要、又或者其实没必要的垃圾(脚本);而这些垃圾,则是拖慢网页载入速度的元凶。
当然,这些都可以靠不断地升级主机(2核心以上的CPU),或者像是WP Rocket这类型的进阶版的外取外挂来解决。

我的方案则是直接舍弃布景主题,改用OXYGEN Builder,它不是布景主题(同时也禁用主题),它也不只是页面编辑器,它其实算是WordPress的网站建构器。
优点是:

  1. 结构编写地最简洁,比使用WordPress预设的主题还要更简洁;因此,网页载入的速度也会更快。
  2. 非资讯工程背景的使用者,能够更容易地只使用真实需要的CSS与JS建构出任何功能与样式的网站。

OXYGEN Builder可以直接编写每一个页面的CSS、JS以及WordPress的php,创建出任何功能与样式的网站,不需要再受限於布景主题或页面编辑器所提供的有限的功能,同时,也不会产生不需要的垃圾;但是,前提是必须得先学习CSS、JS以及php的基本应用,如此,使用过程中比较不容易因挫折而放弃,也才能够随心所欲建构出想要的功能与样式。

如果无法驾驭OXYGEN Builder,又想要漂亮又现代的网站;那麽,Astra Pro算是功能较齐全、结构编写得宜、也算较为轻量的布景主题。
搭配WordPress预设的Block Editor一起使用,也比较不会拖慢网站的速度。

5款快取外挂的测速比较

快取外挂:

测试工具:

WebPageTest
因为数据中心可以选择台湾,数据结果也相当完整。

  • Test Location:Taiwan(虽然测试的主机在Tokyo,但是,我还是想以台湾用户为主)
  • Browser:Chrome
  • Connection:Cable(5/1 Mbps 28ms RTT)
  • Desktop Browser Dimensions:default(1366x768)
  • Number of Tests to Run:9
  • Repeat View:First View Only

测试环境:

  • 主机:CLOUDWAYS linode 1gb
  • 网站:在freenum分别申请5个免费网域进行测试
    为了避免各自的快取外挂相互影响,所以,在同一个主机里安装5个网站。
  • 页面架构:套用OXYGEN Builder的「Marketing Agency」,可以点进去看它的页面架构与内容。
    因为OXYGEN Builder建构的页面很轻巧,所以,我挑选了一个包含了一些JS的使用、嵌入vimeo影片,以及嵌入Google Map的版型,我认为会更适合区分快取外挂的功能,像是延迟或异步JS以及预取第三方JS...等等。

测试结果

快取外挂 Full Loaded Time
Swift Performance 0.986(s)
WP Rocket 1.1(s)
Swift Performance Lite 1.524(s)
Breeze 11.351(s)
Simple cache 11.518(s)
无快取 13.874(s)

详细的测试结果与说明

在WebPageTest中的测试:

  • 为了不影响结果,所以不使用任何CDN,因此,「Effective use of CDN」为「X」
  • 因为是临时注册的免费网域,没有为每个网站加上「Security Header」,因此,「Security score」得到「F」

无快取的状态


SWift PERFORMANCE的测试结果

他是一个非常伟大的快取外挂!

因为,它的功能非常完整,可以解决大多数造成慢速网站的各种疑难杂症;此外,它还提供了lite免费版,而这个免费版也相当佛心,包含了许多相当有用的核心功能,只要设定得宜,页面的速度与最佳化的效果直逼WP Rocket

速度与页面最佳化的表现最好

在测试中,以下是「有开启」+「能大幅加速」的功能

  • Warmup:这是最重要的功能,它能够还没有任何访客进来之前,先快取所有或指定的内容,让所有的访客都能够最快载入。
    (因为一般的快取都是在第一个访客载入之後才开始快取,所以,每一次清除快取之後的第一位访客都无法享受到快取内容的载入速度。)
  • Prefetch DNS:预取第三方资源(像是Google字体、YouTube影片),能够大幅度减少等待第三方的资料调用,因为等待第三方的资源调用,会阻止自己的网页内容载入。
  • Collect domains from scripts:在预取第三方JS之前先搜集第三方的域名,这是为了加速预取。
  • Youtube Smart Embed:它会自动生成一个影片的缩图,如此一来,页面载入的时候,就不需要等待载入整个影片。虽然页面中刚好没有嵌入Youtube影片,但是,它仍然是一个非常棒的创举。
  • Lazy Load Iframes:延迟Iframe载入(比如说:嵌入影片、地图、嵌入任何外部内容...),尤其嵌入的内容正好在页面较上方的位置,那麽,加速的幅度颇明显(测试的页面正好在最上方嵌入vimeo影片)。
  • Load Iframes on User Interaction:这个功能也很不错,尤其是对付「页面下方」的嵌入内容;因为它不只是延迟,而是直接阻止嵌入的内容载入,直到访客往下滑到才会载入。
  • Merge Scripts:可以大幅度减少Request,但是,合并之後页面可能会跑版。因此,SWift PERFORMANCE提供了许多更进阶、更细节的调整,只合并或异步载入那些不会造成跑版的JS。
  • Preload Fonts Automatically:自动预先载入字体。
  • Dynamic Cache:可以预先快取动态内容。
  • AJAX Cache:可以快取AJAX request。

注意事项

  • 因为功能太完整、太周到,以至於可以微调的细节太多,像是光是「Merge Scripts」,里面就包含了18个微调小项目。
    而这些小项目其实都是非常有用的,因为,不是每个网站都能够很豪迈地直接一键合并所有JS,因此,它可以选择性地不合并、不异步载入、不延迟异步载入、不内联、不缩小某些合并後会造成跑版的JS。虽然得很有耐心地逐一测试,但是,一旦成功合并了,或多或少总是能加快速度以及提高在Lighthouse的分数。
  • 「Warmup」、「OPTIMIZATION」、「AJAX Cache」以及「Dynamic Cache」都需要仰仗主机的CPU,共享主机可能会负荷不了,所以,如果要享受这些加速的好处,需要先评估主机的规格与性能。

我的二个网站(其中一个是WooCommerce),架在CLOUDWAYS 「linode 1GB RAM/1 CPU」的方案中,可以负荷这二个网站的「Warmup」以及「OPTIMIZATION」。


WP ROCKET的测试结果

功能也算完整

前面在SWift PERFORMANCE所提到的「有启用+能大幅加速」的功能,在WP ROCKET大致上都有,而测试的页面中也有启用(仅缺乏部分功能)。
而二者在页面加速的策略与能力都相当好,不分轩轾,虽然在这次的测试中,SWift PERFORMANCE小胜了几毫秒。

我认为操作未必比SWift PERFORMANCE容易

很多人都说WP ROCKETSWift PERFORMANCE更容易上手,我当时天真地以为,WP ROCKET会自动帮我侦测+安排妥当所有的JS与CSS;但是,在我使用之後,我发现,其实半斤八两耶!
因为,我还是得在合并、缩小或内联、延迟JS之後,再逐页检查+逐一排除合并之後会跑版的JS呀!

此外,WP ROCKET在「Prefetch DNS Requests」以及「Preload Fonts」,都需要手动去输入第三方JS的域名以及字体的url,真的比较容易吗?
因为在SWift PERFORMANCE中,这二个功能只需要一键打开即可,除非功能或页面跑版,才需要手动去个别排除,在我的操作使用上,我会觉得先一键开启,再逐一排除,这样的作法比较省事。
不过,以事後再来除错的逻辑思考,在GRMetrix中找出妨碍页面载入的第三方JS,再手动添加後观察,或许更容易找到跑版凶手。

WP ROCKET缺少的

  • 它也有预载入第三方字体,但是仅限於Google;如果有其他网域的字体,就无法被预载入了。
  • Dynamic Cache
  • AJAX Cache

不过,这些差异都是一些小细节,重要的是,WP ROCKET确实大幅度改善了页面载入速度,剩下的就是个别需求罗!像是「数据库清理」、「CDN整合」、「Cron Job管理」以及「heartbeat管理」...等等。

注意事项

SWift PERFORMANCE一样,「Preloader」也需要仰赖主机的效能,共享主机大概是无福消受了。


SWift PERFORMANCE Lite的测试结果


免费版真的很佛,虽然少了许多进阶的细节调整与功能,但是,有许多重要的核心功能,像是「PreBuild」、「Warmup」、「Prefetch DNS」、「Collect domains from scripts」...等等,就足以让网站的速度从13秒加快到1.5秒唷!
当然,前提是还得先仰仗「高性能的主机」以及「简洁轻巧的网站架构」。

Lite免费版缺少的有用功能

  • Youtube Smart Embed
  • Preload Fonts Automatically
  • Lazyload Shortcodes、Blocks、Widgets

如果上面那3个功能都用不到的话,Lite免费版的表现还是相当惊人唷!

注意事项

和前面SWift PERFORMANCE(付费版)所提及的2个项目一样,需要有耐心地设定「Merge Scripts」,以及「Warmup」、「OPTIMIZATION」、「AJAX Cache」以及「Dynamic Cache」都需要仰仗高性能的主机。


Breeze的测试结果


这是CLOUDWAYS 自家开发的快取外挂,功能很简单,只有缩小、内联以及合并JS与CSS;当然,也可以手动添加去排除不要合并的JS与CSS。
不过,实际测试之後,有无「缩小、内联以及合并JS与CSS」对速度改善没什麽太大差异;此外,它的「Gzip Compression」似乎也没有太多的帮助。
无论如何,快取的效果(包含浏览器快取),的确让网页速度加快了2秒。



Simple Cache的测试结果


正如其名一样地简单,它真的只负责快取!不提供处理JS与CSS的功能。

界面也相当简单,只有一页!
不过,它的快取功能包含了「可选择启用Memory或Object快取」(如果主机端有配置像是Memcached或Redis的话,则可以在Simple Cache中配置启用),这一点比Breeze更好喔!(但是Simple Cache无法配置VARNISH)

有关Memcached、Redis以及VARNISH,可以参考这篇文章
因为CLOUDWAYS已经配置好VARNISH以及Memcached,而Redis也只需要一键安装,所以,以前使用Simple Cache主要是为了连结主机端的配置。

Simple Cache只负责基本的静态内容的快取,所以,速度改善的幅度有限,和Breeze一样,只加快了2秒。

我的结论

如果只是想要单纯的快取,那麽,在我的使用经验中,Simple Cache其实比Breeze更好用(虽然在测试中几乎不分轩轾)。
如果有使用Cloudflare CDN,可以将缩小HTML/CSS/JS交由Cloudflare去处理的效果也还可以,还更省事。
至於JS的问题,如果会使用的话,也可以交给Flying Scripts这套免费的外挂处理。
其实有很多免费的解决方案可以替代,未必要使用付费的外挂;不过,「Prefetch DNS」大概是无法免费(有一些付费外挂也有提供「Prefetch DNS」,像是perfmatters,它也是一个很超值的外挂,但是,它不处理快取以及延迟CSS/JS)。

因此,若想要拥有最多的功能,那麽,SWift PERFORMANCE是一个物有所值的选择。
如果想要轻松使用VPS或云端主机,那麽CLOUDWAYS是一个省时便利的选择。

注册CLOUDWAYS的时候,填入优惠码MMM8可获得首二月8折优惠。


<<:  [Day 40] 心情随笔後台及前台(二) - 新增心情随笔资料

>>:  CMoney菁英软件工程师战斗营之前端VS後端_Week 9

3. 关於那些重要但无法帮助升迁的工作

前言 这篇真的是非常有意思的反思演讲,强烈推荐大家去听原演讲或看文字稿。 讲者主要讲述的是技术发展...

自我笔记 - django 系列 [任务列队celery篇]

django celery celery是什麽 一种让异步处理任务的工具 主要应用情境为以下: 任务...

Day01 - 复习 canvas 做个同化别人的小方块

今天去打疫苗,想说做个感染人的坏东西,可惜没时间好好美化他,主要做出以下功能 设定两个角色(Frie...

[DAY 1] 前言

大家好,我是Billy,身为资讯人,在对一项技术深入研究才会发现,自己不了解的更多,所以尝试以参加铁...

Day22 ( 游戏设计 ) 小玛莉游戏机

小玛莉游戏机 教学原文参考:小玛莉游戏机 这篇文章会介绍如何使用「函式」、「逻辑判断」、「当按钮按下...