網站最佳化 – 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 Themes 的既有使用者參考，如果是第一次使用 Thrive Themes 架站的朋友，恭喜你，你安裝的最新版本預設就是使用最佳化的網頁資源了。

Project Lightspeed 光速計畫

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

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

1. 網站資源分析
   
2. 資源最佳化

Step 1 – 分析網站資源

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

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

Step 2 – 網頁資源最佳化

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

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

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

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 的網頁資源。

成果

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

分析的網頁類型包含：

• 首頁 – Home
• 部落格頁面 – Notes
• 彙整頁面 – Silo
• 文章頁面 – Post

比較 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 分囉！

結語

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

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

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

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

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

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