.st0{fill:#FFFFFF;}

網站最佳化 – Thrive Themes 的 Project Lightspeed 光速計畫 + Clearfy Pro 

Thrive Themes 的 Project Lightspeed (光速計畫) 更新發布囉!在這次的版本更新中,重新設計、組織了網站中的網頁資源 CSS、JavaScript。不再是像過去為了利用網站快取 Cache 加速網頁下載,而將所有資源都整合成一大包的方式載入。

由於 HTTP/2、HTTP/3 技術的普及,網頁資源從循序式變為同步式的載入與讀取,Project Lightspeed 的第一階段最佳化透過將 CSS、JavaScript 等網頁資源按照功能分拆為許許多多的小檔案,不同類型的頁面只需要載入會使用到的 CSS、JavaScript 檔案,藉此大幅的改善 Google Core Web Vitals 分數。

還記得之前跟大家分享的文章「14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme」嗎?我們在 Thrive Themes 佈景主題專輯器還是個胖胖的時候分析了如何透過網站最佳化、利用 Clearfy 大幅減少網頁載入時間。現在,在 Thrive Themes 的光速計畫發布之後,我們終於可以說 Thrive Themes 瘦身成功啦!

接下來,讓我們來跟大家分享 Thrive Themes 瘦身的成功案例,以及 Clearfy 在 Thrive Themes 瘦身之後還能在提升網頁載入速度上提供多少幫助。

Thrive Themes

第一階段最佳化:CSS、JavaScript 檔案模組化

舊版 Thrive Themes

Thrive Themes 的 CSS、JavaScript 體積相當大,其中:

  • Theme-template – CSS > 500 KB
  • Thrive Architect – CSS > 930 KB
  • Thrive Architect – JavaScript > 270 KB

光是上述 3 個 CSS、JavaScript 檔案大小就超過了 1.5 MB。

Project Lightspeed 光速計畫

在 CSS、JavaScript 分拆、模組化之後,

  • Theme-template – CSS < 51 KB 且分拆為 3 個檔案。
  • Thrive Architect – CSS = 0.3 KB
  • Thrive Architect – JavaScript = 121.3 KB 且分拆為 7 個檔案。

這三部分的檔案大幅縮小到只有 172.6 KB 不到。

Thrive Themes 為此也提供了相當方便的功能讓既有使用者能夠一鍵式 (One Click) 完成目前網頁資源的診斷、最佳化,最後再經過一些微調之後,踏噠~~!網站的載入速度就大幅提升啦!

Thrive_suite_small_outline

以下步驟僅供 Thrive Themes 的既有使用者參考,如果是第一次使用 Thrive Themes 架站的朋友,恭喜你,你安裝的最新版本預設就是使用最佳化的網頁資源了。

Project Lightspeed 光速計畫

首先,到 Thrive Theme Builder 找到左邊的 Site Speed,接著點擊 Project Lightspeed 開始網頁資源最佳化。

Thrive Themes - Site Speed - Project Lightspeed - 網站最佳化

最佳化的過程包含兩個步驟:

  1. 網站資源分析
  2. 資源最佳化
Thrive Themes - Project Lightspeed - Start

Step 1 – 分析網站資源

這個步驟花費的時間按網站的規模大小而有所不同。小型網站數十秒就能完成分析,大型網站可能需要 1~2 分鐘。

Thrive Themes - Project Lightspeed - Step 1 - Analyze the Site

完成後會顯示目前網站已經完成資源最佳化的頁面數量。

Step 2 – 網頁資源最佳化

分析完成之後,按下 Run asset optimization 就會開始一一的將各個頁面中使用到的 CSS、JavaScript 轉換為最佳化的檔案。

Thrive Themes - Project Lightspeed - Asset Optimization - 網站最佳化

這個步驟花費的時間會稍長一些,小型網站大約 1-2 分鐘即可完成最佳化。而複雜的大型網站則可能要花費數十分鐘,視網頁數量而定。

Thrive Themes - Project Lightspeed - Asset Optimization Finished - 網站最佳化

待最佳化完成之後,回到 Project Lightspeed 的控制面板,並將「Display optimized assets on the front end of your site」開啟以完成設定。

Thrive Themes - Project Lightspeed

Step 3 – 微調 & 注意事項

接下來,按網頁類型逐一檢視各個頁面。雖然 Thrive Themes 官方的說明中有提到最佳化之後的頁面會自動更新使用分拆後的 CSS、JavaScript 檔案,但如果發現有頁面出現位移、破損的情形,記得按以下步驟進行檢查:

  1. 清除快取 Cache。
  2. 若 CSS、JavaScript 有透過 CDN 託管,記得清除 CDN 上的快取檔案。
  3. 如果有使用其他網站最佳化工具,如 Flying Scripts、Clearfy 等,記得先將這些外掛停用之後再重複上述步驟進行檢查。
  4. 打開有位移、破損狀況的頁面,重新儲存一次即可。

Clearfy Pro 網站最佳化

Assets Manager

如果再給我一次機會,我還是要稱讚 Clearfy 的 Assets Manager 的功能以及方便、美觀的 UI、UX 設計。

在光速計畫之後,Thrive Themes 的 CSS、JavaScript 被拆成許多體積很小的檔案載入頁面中,由於資源載入再也不是瓶頸了,所以我們不只停用了 Flying Scripts,在 Assets Manager 中也不再需要使用 defer to footer 的功能。

在 Assets Manager 中我們大量地使用 CSS、JavaScript 的停用功能,平均每一個頁面在載入時都減少了 50 ~ 200 KB 的網頁資源。

Clearfy Business

成果

那麼,我們接著來看看透過 Thrive Themes 的 Project Lightspeed + Clearfy Pro 對網頁最佳化的影響。

分析的網頁類型包含:

  • 首頁 – Home
  • 部落格頁面 – Notes
  • 彙整頁面 – Silo
  • 文章頁面 – Post
PageSpeed Insights - with Thrive Themes Project Lightspeed and Clearfy - 網站最佳化

比較 1 – 舊版 Thrive Themes | 無 GA | 無 Clearfy

這是這次網站最佳化的比較基礎。大家有看過「14 天網站最佳化衝刺實作」文章的應該都有些印象。

比較 2 – 升級 Project Lightspeed | 無 GA | 無 Clearfy

按照上述的升級步驟將 Thrive Themes 的網頁資源最佳化之後,大家可以看到很顯著的網頁效能提升。Google PageSpeed Insights 分數幾乎都有 20 分左右的改善。

比較 3 – 升級 Project Lightspeed | 有 GA | 無 Clearfy

接著,我們將 Google Analytics 的 Script 加上,可以觀察到特定頁面的分數有大幅的減少。

比較 4 – 升級 Project Lightspeed | 有 GA | 有 Clearfy

最後,透過 Clearfy 的功能:

  • Assets Manager – 按頁面類型移除不需要的網頁資源
  • 移除網站中不需要的功能、清理非必要腳本
  • GA Script 最佳化

我們可以看到各類型頁面的 Google PageSpeed Insights 分數都超過了 80 分! (5 ~ 6 千字以上的文章另當別論,這類文章只能最佳化到接近 70 分)

而網站首頁的分數也終於超過 90 分囉!

PageSpeed Insights - after Thrive Themes Project Lightspeed and Clearfy - 網站最佳化

結語

在這次的測試之後,相信大家對 Thrive Themes 與 Clearfy 的網頁速度最佳化表現應該能有更清楚的了解。

在「14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme」一文中,我們讓大家知道 Clearfy 對使用「巨型」佈景主題編輯器的網站的效能增進成果。(當時的 Thrive Themes 還是胖胖)

在這次的測試中,大家則可以體會到對於使用「已經最佳化」的佈景主題編輯器的網站來說,Clearfy 依然能夠穩定地改善各類型網頁的速度評分。

對 Clearfy 有興趣的朋友,可以參考 Clearfy 目前的定價 (以下價格為美金):

Clearfy Pro 的定價

(行動裝置可左右滑動查看更多方案)

方案

Small Business

Business Plus

Business Revolution

Unlimited

網站授權數量

3

10

50

Unlimited

年費方案

$39

$65

$125

$199

LTD 方案 (一次性)

$99

$189

$369

$550

Clearfy Pro 終生授權方案


而 Thrive Themes 也終於成功洗刷了「巨型」佈景主題編輯器的污名,具備各種超實用功能的 Thrive 家族外掛,相信接下來大家可以好好的思考是不是要一起加入我的行列了~!

有興趣的朋友可以透過以下推薦連結,直接到 Thrive Themes 官網購買唷。

Thrive_suite_small_outline

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>