iT邦幫忙

0

WordPress網站加速經驗-體質最佳化與5款快取外掛測速+功能比較

  • 分享至 

  • xImage
  •  

對於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折優惠。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
racing20165543
iT邦新手 5 級 ‧ 2022-01-24 16:42:14

太感謝分享了,好專業!
我最近自架網站也在看有什麼方法可以讓網站加速
之前也有試過一些方法或軟體測試,但都覺得好像沒什麼差,
我也來用外掛測試看看!太感謝分享

温唯 iT邦新手 5 級 ‧ 2022-05-30 15:30:14 檢舉

可以從免費的外取外掛比較載入速度的差異,但是還是得考量網站本身的架構和主機的負載能力。

我要留言

立即登入留言