WP Rocket 插件教学,提升 100% WordPress 网页载入速度
你觉得自己的 WordPress 网站速度很慢吗?因为载入速度太慢,所以总是让访客等到不耐烦直接跳出了吗?
这篇文章主是要帮助觉得自己网站很慢 WordPress 新手站长,透过启用 WP Rocket 这款加速插件,在不删减任何其它内容的情况下,提升自身的网站速度,并增加访客继续停留在网站的时间。
这是我目前网站在 Google PageSpeed Insights中的速度表现,可以看到透过 WP Rocket,我的网站速度获得了 91 分的高分,不仅让使用者可以快速地浏览网页,也加强了网站的 SEO 表现。
所以,如果你也想要获得跟我网站一样的速度与评分的话,那么就继续看下去吧!
为什么你的网站很慢?
如果你觉得你的网站用起很慢、很卡,其实是因为你的网站载入时间太长,所以才导致你使用起来很不顺。
所谓的网站载入时间,是根据你网站上的内容、以及功能的多寡来决定的,所以,如果今天你网站上的内容比较多,那么访客来到你的网站,就会需要花费比较久的时间才载入完所有的内容。
举例来说,这是点击我网站的首页,访客所需要载入的全部内容,一共向服务器发送了 89 条请求,并花费了 2.85 秒才完全载入完成。
因此,如果你今天想要真的从根本上提高网站的载入速度,那么当然就是尽量减少网站的内容,例如:不要装太多插件,尽量用 WordPress 内建的设置。
不过在大部分的情况下,有些功能是我们一定要有的,如果没有的话网站就会变得很难用,反而失去了架设网站的意义。
但是多加装了这些功能的话,又会造成网站速度缓慢,让访客难以忍受,那么,该怎样才能解决这种两难的情况呢?
答案很简单,只要将你的 WordPress 网站启用“加速插件”,就可以在兼顾网站内容与功能的情况下,维持网站速度的水平。
什么是加速插件?
简单来说,所谓的加速就是透过某种技术,预先产生一个静态的页面,当访客来访的时候,服务器就不用重新生成新的页面,而是可以直接把这个静态页面给访客看。
举例来说,为什么麦当劳出餐可以这么快呢?就是因为它们已经先将汉堡做好了,所以等你到柜台点餐的时候,它们就可以快速将餐点准备好给你,而这点就跟加速是一模一样的。
当然,加速也有缺点,由于加速是一种预先生成的暂存档案,所以当我们修改网站的时候,网站前台被加速所覆盖住了,所以你更新过后的东西并不会马上显示在网站前台。
如果这时候有访客来你的网站,那他们看到的网站仍然是旧网站 ( 加速 ),必须要透过手动清除加速,才能让网站的更新显示出来。
不过这个问题其实很小甚至也可以忽略不计,因为以接下来要介绍的加速插件而言,每当你有修改过网站的内容,它便会自动帮你清除加速,相当方便!
总之,我们可以透过加速插件,在兼顾网站内容与功能的情况下,维持快速的网站速度水平,如果这也是你想要追求的目标的话,那就请你继续看下去吧。
WP Rocket 介绍
WP Rocket是一款付费制的全方位的 WordPress 加速插件,同时也是很多人心目中第一名的加速插件 ( 包括我 )。
WP Rocket 最大的特色就是“设置简单,功能强大”,它们将原本繁琐复杂的速度调校设置,都以简单的视觉化区块呈现,因此你只需要用滑鼠勾选以及按下储存,就可以一键完成所有设置,相当方便!
除此之外,你也不必担心看不懂设置中相关的程序词汇,因为 WP Rocket 也有提供完整的繁体中文化,基本上上面的设置都写得蛮清楚的,不会像其它快速插件一样艰涩难懂。
费用大约落在 1 个网站美金 $ 49/年,其实不算便宜,但是,却能节省下你使用网络上那些免费、但却没什么用的加速插件,它们所浪费的时间,以及拆装时对资料库造成的负担。
因此,我个人觉得花这点小钱,换取网站载入速度的提升、与更好的使用者体验,是非常值得的。
安装 WP Rocket
上图为 WP Rocket 设置介面,但由于 WP Rocket 是一款付费插件,因此无法透过 WordPress 后台的插件区域进行下载,必须另外前往 WP Rocket 官网进行下载。
所以,接下来我将会带领你一步步地完成 WP Rocket 的安装,最终将会帮助你提昇你 WordPress 网站的速度,搭上这一班 WP Rocket 高速列车!
值得注意的是,由于 WP Rocket 不支援 WordPress.com,所以如果你的网站是使用 WordPress.com 架设的,那么你可能无法使用 WP Rocket。
前往官网购买 WP Rocket
前往 WP Rocket 官网进行购买,挑选适合你的方案。
WP Rocket 一共有 3 种方案,可以使用的网站数量,依照你购买的方案而有所不同:
1. Single – 只能用于 1 个网站,一年免费更新与支援,价格为 $ 49 美金/年。
2. Plus – 可以用于最多 3 个网站,一年免费更新与支援,价格为 $ 49 美金/年。
3. Infinite – 可以用于无限个网站,一年免费更新与支援,价格为 $ 49 美金/年。
详细方案请参阅 WP Rocket 官网。
下载 WP Rocket
购买完成之后,登入帐号里面进行下载 WP Rocket 插件程序档。
上传 WP Rocket 到 WordPress
接着回到 WordPress 中上传插件处,将刚刚下载的 WP Rocket 档案上传并启用。
由于一个网站只能用一个加速插件,所以如果你的网站已经有加速插件了,例如 Siteground 的 SGoptimizer、Cloudways 的 Breeze,记得要先把你原本的加速插件停用,才能正常启用 WP Rocket。
开始设置 WP Rocket
安装好 WP Rocket 之后,前往 WordPress 后台,并在左边工具列中的“设置”中找到“WP Rocket”,即可开始设置。
WP Rocket 设置教学
安装完 WP Rocket 之后,并不代表网站速度就会变快,接下来,我们还需要进行一系列的设置,才可以把 WP Rocket 调校好。
WP Rocket 的设置非常全面,从最基本的加速、媒体甚至到资料库,几乎把所有可以提升网站速度的选项都列出来给你选了。
但是,如果你是完全不懂程序码的新手,你可能还是会对于上面的选项与名词解释看得一脸茫然。
因此,接下来的设置,我会每一条逐条解释给你听,如此一来,你就可以依照自身的情况去做设置。
不过,如果你还是怕自己弄会出错的话,你可以直接照抄我图片上的配置,那是我预先准备好的比较安全的设置方式。
加速
移动端加速( ✔ ):指的是要不要在手机版上也启用加速,建议勾选,因为现在大部分也都是手机使用者居多;如果不启用的话,手机浏览者会直接读取 WordPress 资料库的内容,虽然能确保一定是最新的,但是载入速度会很慢。
针对移动端建立独立的加速档案:启用之后,WP Rocket 会独立为手机版网站建立一个加速,这边建议不要勾选,如果你的手机版跟电脑版的网站,外观差很多才建议取用,否则很容易产生在手机版上出现跑版的问题。
使用者加速:勾选后会对每个使用者产生独立加速,如果你是做电商的,有顾客需要登入你的网站才需要开启,或是你的网站有多个管理者再开启就好;如果你只有一个人管理网站,那就不用开启,节省网站空间。
加速生命周期:系统自动清除加速的时间,这边可以用预设的 10 小时就好,因为 WP Rocket 也有提供手动清除加速的功能,可以让你随时想清除就清除。
档案最佳化
基本设置
压缩 HTML ( ✔ ):将 HTML 程序码中的空白与注解部分删除,让档案大小变小,进而加快网页载入速度。
Optimize Google Fonts ( ✔ ):将分开的 Google Fonts 字体档案合而为一,如此一来便可减少 http 的请求数目,进而加快网页载入速度。
可以两个都勾选,这两个选项都是在做程序码的压缩处理,基本上不会出问题。
如果修改之后网站有字体出问题的话,就把 Optimize Google Fonts取消勾选。
CSS 档案
压缩 CSS ( ✔ ):将 CSS 程序码中的空白与注解部分删除,让档案大小变小,进而加快网页载入速度。
合併 CSS:假设你原本有 10 个的 CSS 档案,透过这个选项可以将其合併成 1 个 CSS 档,透过降低 http request 来达到网站加速的效果,可以依照个人状况进行勾选,不过启用合併 CSS 很容易造成跑版的问题,要小心使用 ( 不过在一般的情况下,合併档案只会让速度检测的分数提高,而不会真正提高网站速度 )。
最佳化 CSS 分派 ( ✔ ):这是一种叫做
Critical CSS
( 关键 CSS ) 相关的技术,因为在预设的情况下,浏览器会等到<head>
里面的 CSS 加载完之后才会开始渲染页面;所以说,如果我们能最小化<head>
中的 CSS,也就是说我们只放重要的 CSS,就可以享有更快速的载入速度,因此必须勾选。
JavaScript 档案
Remove jQuery Migrate ( ✔ ):因为 WordPress 会内建帮我们载入一个
jQuery-migrate.in.js
的档案,这已经蛮旧的了,其实在大多数的情况用不到了,透过勾选这个选项可以将其移除,详细请参阅官方文件。压缩 JavaScript ( ✔ ):将 JavaScript 程序码中的空白与注解部分删除,让档案大小变小,进而加快网页载入速度。
合併 JavaScript:假设你原本有 10 个的 JavaScript 档案,透过这个选项可以将其合併成 1 个 JavaScript 档,透过降低 http request 来达到网站加速的效果,可以依照个人状况进行勾选,不过 JavaScript 是掌控网站上许多动态效果的程序语言,所以合併的话可能会让网站的许多功能失效,例如:Google 广告、弹出视窗等 ( 不过在一般的情况下,合併档案只会让速度检测的分数提高,而不会真正提高网站速度 )。
非同步载入 JavaScript ( ✔ ):优化网站中清除前几行内容中的禁止转译 JavaScript,让网站载入更快速,非同步的意思就是让网站可以同时处理两件事情以上。
针对 jQuery 的安全模式 ( 建议 ) ( ✔ ):非同步载入 JS 的安全模式确保写在主题或插件中的 jQuery 能正确被执行到,不采用安全模式的话可能会发生错误!停用的话可能会造成错误!
Delay JavaScript Execution ( ✔ ):这个选项可以让你延迟执行一些 JavaScript 相关的网页功能或插件,例如弹出式视窗,因为弹出式视窗本身其实跟你要载入的网页没有太大的相关,因此我们可以透过这个选项延迟执行这些功能,并让第一时间的网页载入速度更快。
补充:何谓档案压缩?
所谓的档案压缩,指的是将程序码档案里面的空白、与注解部分进行删减。
如此一来,便能减少档案大小,而当档案变小之后,即可加快载入速度,并且不会对程序码本身造成任何影响,仍然可以保持正常运作。
但是,进行压缩过后的档案会变得难以进行人工阅读与修改,这点要非常注意,不过如果是透过 WordPress 插件来修改的话,就没有这个问题。
举例来说,这边是一个没压缩过的 JavaScript 档 ( 291KB ),以及一个有压缩的 JavsScript 档 ( 87.3KB ):
没压缩过的 JavaScript 档 ( 291KB )
压缩过后的 JavsScript 档 ( 87.3KB )
总之,透过压缩,可以有效地减少档案大小。
媒体
延迟载入 ( Lazy Loading )
针对图片使用延迟载入 ( ✔ )
针对 iFrame 与影片使用延迟载入 ( ✔ )
使用预览图片取代 Youtube 播放器 ( ✔ ):如果你有大量 YouTube 影片在单一页面中,这可以显着地改善载入时间。
Lazy Loading 是一种网页载入的加速技术,举例来说,它可以让你浏览到某张图片时,才进行载入那张图片。
如果不使用 Lazy Loading 的话,网页就会在一开始就把所有的图片载入完成,因此如果你的网页非常长、内容非常多,可能会大幅增加使用者在第一次载入的时间。
不过 Lazy Loading 还蛮容易跟许多布景主题以及插件冲突的,因此如果使用后,你的网站上有图片跑不出来,请把 Lazy Loading 全部关掉。
表情符号
停用表情符号 ( ✔ ):停用表情符号 ( emoji ) 来减少外部的 HTTP 请求。
使用电脑中预设的表情符号,避免另外从 WordPress.org 下载来增加载入时间的负担。
内嵌
关闭 WordPress 内嵌功能:预防你的网站被别人嵌入在他自己的网站 ( 或是非白名单网站 ),以及移除 WordPress 自动内嵌影音功能的 JavaScript。
这个不太需要,因为不会有人去内嵌你的网站到它们自己的网站。
WebP compatibility
Enable WebP Caching( ✔ ):额外启用 WebP 图片格式的加速档案。
.webp
是一种 Google 新开发出来的网页图片格式,它使用了 Google 在网页开发上的最新技术,能够提供无损与有损的方式,来进行图片的优化。
一般来说,如果你使用 .webp
作为图片格式的话,不仅能保持跟 .jpg
, .png
等类型的图片档案相同的画质与解析度,但是却可以节省原本的 25% ~ 35% 的档案大小,是标准的百利而无一害的图片格式。
因此,透过将你网站的图片格式换成 .webp
,你就可以在不牺牲任何图片画质的情况下,享受更快的网站载入速度,并带给网站访客更好的使用者体验。
不过 WebP 不是勾选就启用了唷,还必须搭配像 ShortPixel这种图片压缩插件,另外生成 .webp
格式的图片才可以。
预先载入
Preload Cache ( 预先载入加速 )
Activate Preloading ( ✔ )
启用以网站地图为加速的预先载入功能 ( ✔ )
Rank Math XML sitemap ( ✔ ):这边会自动侦测你的 SEO 插件而给予你选项 ( 有支援的才有 ),由于我的 SEO 插件是 Rank Math,因此,这边会自动生成这个选项。
由于加速是一种载入后才生成静态网页的技术,因此如果你没有开启预先载入加速,那么使用者在第一次载入的时候并不会享有加速带来的好处,所以这边我们需要把加速给打开。
而网站地图 ( Sitemap ) 是用来告诉系统你有那些网页需要生成加速的,因此也要打勾。
Preload Link
Enable link preloading ( ✔ ):这个选项可以让访客将滑鼠移至 ( Hover )
网站中的任何连结
时,便开始执行载入,有点像是你去参加百米赛跑,如果说起跑的枪响就是点击连结的话,那么 Preloading 将可以让你在枪响之前就开始起跑,并且不会被判为违规。
预先取得 DNS 请求
由于我们的网站会用到一些第三方的服务商,例如 Youtube, Google Fonts 等,这时候可以预先透过 DNS 向他们要资料,进而提升网站速度。
预先取得的 URL:把你网站常到用的服务商,前面的网址移除
http:
或https:
,只留下//
,例如//youtube.com
。
至于要如何取得你网站用到的服务商呢?你可以直接透过 Prefetch这个工具,找出你网站中用到的所有服务商,并将获得的结果直接贴入到 WP Rocket 之中。
例如这是我使用 Prefetch 之后的结果:
当你获得了这一串之后,就全选并回 WP Rocket 中复制贴上即可。
如果上面那个网站失效了话,可以用这个美国吃瓜群众整理出来的列表。
进阶规则
这边主要是设置哪些网址或装置,不要有加速、Cookie 等设置,除非你有特殊需求,否则基本上可以先留白就好。
资料库
在 WordPress 中,你的文章、页面上所有的内容曾经修改过的纪录都储存在资料库,而随着网站越用越久,你的资料库会堆积许多无用的资料。
所以,这时候就可以透过 WP Rocket 提供的资料库清除功能,把这些没再用的资料进行移除,减轻网站负担。
基本上,以下选项全部勾选就好了,不会对网站影响什么,只是把一些以前的纪录删掉而已。
文章清理
文章版本与草稿将会被删除,如果你需要还原版本或草稿,不要使用此功能。
回响清理
垃圾留言将被删除。
临时选项清理
临时选项可以安心移除,他们是由插件所自动产生的。
资料库清理
减少过大的资料表。
自动清理
资料库清除是不可逆的,在进行资料库清除之前,请记得先备份 WordPress。
CDN
如果你有使用 CDN ( 内容传递网络 ),例如 Cloudflare 的服务的话,可以使用 WP Rocket 的整合 CDN 服务;如果没有的话就不用设置,其实没差多少,而且不懂的话很容易出问题。
简单来说,CDN 就是让你网站的浏览者,观看网页的时候会经由比较靠近它们附近的服务器。
例如你的网站架在美国,而浏览者在台湾,这时候在台湾看的人就可以直接连到服务商在日本的机房,不用大老远地跑去美国,达到网页加速的目的。
HeartBeat
HeartBeat 是一种调节网站发送 POST 请求的技术,你可以透过使用 HeartBeat,来管理及限制网站发送 POST 的数量与频率,减少主机效能的耗损。
我个人觉得不需要特别去设置,如果是因为主机效能差导致网站速度过慢的话,直接花钱升级主机会是比较好的做法。
附加功能
这里有一些跟 WP Rocket 整合的大型服务商与插件,基本上不太需要去做设置,因为对网站速度没有提升,只是比较好管理而已。
如何清除加速?
完成上面的设置之后,以后如果你需要清除加速,只要在登入状态下,点选上方工具列的 WP Rocket
中即可清除!
可以依照你想要清除的加速进行选择,如果怕遗漏的话,基本上就是全部都按过一轮就对了。
WP Rocket 常见问题
WP Rocket 是什么?
WP Rocket是一款付费制的全方位的 WordPress 加速插件,它可以透过 Preload Cache, Lazy Loading, WebP 等技术,去大幅地提升你的 WordPress 网站的载入速度,进而提升你网站的 SEO 排名。
谁适合使用 WP Rocket?
WP Rocket 适用于所有 WordPress 的网站拥有者,这是因为 WP Rocket 的介面十分简单好上手,所以即使你不懂任何程序码,也能轻易进行设置。
除此之外,WP Rocket 也提供了许多进阶的选项,让具有专业程序经验的人员也能进行客制化的改动。
WP Rocket 有免费试用吗?
WP Rocket 并没有提供免费试用版本,不过它们有提供 14 天 100% 保证退费政策,你可以在购买日起的 14 天内进行全额退费。
WP Rocket 可以使用在几个网站?
可以使用的网站数量,依照你购买的方案而有所不同,WP Rocket 一共有 3 种方案:
1. Single – 只能用于 1 个网站,一年免费更新与支援,价格为 $ 49 美金/年。
2. Plus – 可以用于最多 3 个网站,一年免费更新与支援,价格为 $ 99 美金/年。
3. Infinite – 可以用于无限个网站,一年免费更新与支援,价格为 $ 249 美金/年。
详细方案请参阅 WP Rocket 官网。
WP Rocket 可以升级方案吗?
WP Rocket 可以随时升级你的方案,并且只需要补足差额即可,不过仍以首次购买日期计算。
WP Rocket 有没有售后服务?
有的,购买 WP Rocket 后有任何问题,均可以透过官网的 Support 专区发送 Ticket 进行提问。
WP Rocket 适用于 WordPress.com 吗?
WP Rocket 并不支援于 WordPress.com 架设的 WordPress 网站,仅供 WordPress.org 下载的自架式网站,这点要特别注意。
WP Rocket 可以和其它加速插件共用吗?
WP Rocket 不能和其它加速插件共用,例如 SG Optimizer, Breeze, WP super cache, W3 total cache。
WP Rocket 真的有效吗?
其实如果你的网站没有加速插件,基本上一定有效,但如果你原本就有使用的加速插件了,那提升的效果可能有限。
WP Rocket 的主机规格需求?
WP Rocket 可适用于 Apache 跟 Nginx 主机上,不过最低的 PHP 版本需大于 5.6。
结语
下图是我的网站启用完 WP Rocket 后的速度评分,在 GTmetrix 的评比上获得了平均 95% 的超高分;而在 Google 的 PageSpeed Insights 也获的了 88 分的高分,相信这种成绩与速度已经胜过市面上 95% 的网站了。
以下则是我未使用 WP Rocket的测速成绩:
如果你想要测试不使用 WP Rocket 的测速成绩,请在你的网址后面加上 ?nocache
,例如 https://weblai.co/?nocache
。
当然,不仅仅是在测速网站上分数好看,网站载入速度也让我非常有感,基本上一般手机的 4G 网络点进来都是非常顺畅的,完全不会让人感到不适,使用者体验非常好。
总之,如果你也想提升自己网站的载入速度,那么你真的不可以错过 WP Rocket这款 WordPress 界公认的第一加速插件。
暂无评论
发表评论