14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme

每個架設 WordPress 網站的人都養著一個 (或多個) Frankenstein (科學怪人)，透過不斷增加外掛滿足網站的功能需求，最終網站長成了一個我們無法控制的緩慢怪物。為了獲得更好的訪客體驗、Google 索引排名，網站最佳化會是一項需要站長持續進行的工作。

網站最佳化衝刺

接續之前的提升網頁速度相關文章，我們知道網站上的圖檔、JavaScript、字型以及使用 CDN 分流網站資源對網頁載入速度的影響相當關鍵。兩周前因為入手了一個網站最佳化外掛 Clearfy 的 LTD (Life Time Deal)，想著終於有工具可以處理網站各個頁面資源 (CSS、JavaScript、Images) 載入的控制，也因此展開了為期兩周的網站最佳化衝刺實作。

最佳化的對象

最佳化的對象就是各位目前正在訪問的網站 Quants Note 的各類型頁面，包含：

• 首頁 – Home
• 彙整頁面 – Silo
• 部落格頁面 – Notes
• 文章頁面 – Post1、Post2
  Post2 為字數多達 6,400，包含 19 張圖片的分析文章。

巨型的佈景主題編輯器

網站整體架構使用的是評價上相當肥大的 Thrive Themes。Thrive Themes 在「non tech-savvy」族群中相當受歡迎，不僅是因為提供了相當豐富、多樣的模板可供不同目的使用者直接套用；官網的 knowledge base 也提供相當完整、細節的說明導引文件；此外，更透過同品牌下多樣化外掛提供了完整的生態圈可以獲得更好的功能整合。

• Thrive Theme Builder – 所見即所得的佈景主題編輯器
• Thrive Architect – 所見即所得的頁面編輯器
• Headline Optimizer – 文章標題的 A/B 測試分析工具
• Thrive Comments – 功能豐富的留言管理工具
• Thrive Leads – 客戶開發、名單收集，提供 A/B 測試分析
• Thrive Ovation – 提供專業服務人士最需要的推薦、介紹管理工具
• Thrive Quiz Builder – 建立測驗、考試，增加訪客互動、名單收集，提供漏斗分析
• Thrive Ultimatum – 行銷活動的 FOMO (fear of missing out) 倒數計時器
• Thrive Apprentice – 線上學習管理系統
• Thrive Optimize – 頁面的 A/B 測試分析工具

當然，缺點就是安裝後的 CSS、JavaScript 體積相當大，其中：

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

光是上述 3 個 CSS、JavaScript 檔案大小就超過了 1.5 MB，這也是這次衝刺實作中最令人頭痛的部分。

註：Thrive Themes 在發布 Project Lightspeed (光速計畫) 之後，已經成功瘦身成為輕量的佈景主題編輯器了，可以參考本文結尾的說明。

設定目標

因此在這次的衝刺實作中，我們將目標設定為如果大家要最佳化的對象是「巨型、肥大」的佈景主題編輯器時，藉由 Clearfy 的協助之下，在不涉及 Critical CSS 時，可以將各類型網頁的頁面載入效能最佳化到什麼程度?

眾所皆知，「巨型」佈景主題編輯器網站最佳化的關鍵在於去除未使用的 CSS、JavaScript 資源。但也最容易遭遇最佳化後頁面破損、動態功能喪失的問題。

換句話說，這是以 Quants Note 網站的 4 種不同類型頁面，使用「巨型」佈景主題編輯器做為基準，不涉及需具備專業知識處理 Critical CSS 與修改程式碼的假設之下，網站效能最佳化的基礎分析。

進行網站最佳化時，最重要的是設定目標，因為每個網站的取向、目的性都不同。以我的寫作習慣來看，文章動輒 3,000 字起跳 (本篇超過 9,900 字)，如果是外掛的測試或使用心得分享，圖片數量一定會超過 15 張，因此最佳化的目標只能設定在讓訪客閱讀文章的時候能夠順暢、不卡頓，以獲取知識的目的為主。並不會為了網頁載入速度而犧牲功能。

而由於 Clearfy 的功能實在是太多了，這篇文章將不會一一的說明各個功能所造成的差異，而是會以使用案例 Use Case 的方式說明使用的相對應功能。

準備工作 – 分析工具

在最佳化的過程中，我們會利用到以下工具協助分析造成網頁效能緩慢的關鍵瓶頸。

Google PageSpeed Insights (PSI)

輸入網頁網址，即可進行網頁速度評估。

從「排除禁止轉譯的資源」、「移除未使用的 CSS」、「移除未使用的 JavaScript」可以知道有哪些資源需要考慮：

• 預先載入 Preload
• 延後載入 Delay

從「最大內容繪製元素」、「避免大量版面配置轉移」可以知道網頁的哪些內容、元素可能需要重新編排、設計。

推薦閱讀：關於網站最佳化的文章
「How to Improve Core Web Vitals」
「Your All-in-One Website Speed Optimization Guide: How to Speed Up WordPress」

Chrome 瀏覽器 – dev tools

使用 Chrome 瀏覽器訪問網頁，按下滑鼠右鍵後點選「檢查」Inspect (Ctrl + Shift + I) 即可開啟頁面的 Inspect 模式。

Inspect > Console

最佳化的過程中，每一次改變設定之後，檢查頁面載入過程中是否出現不預期的錯誤訊息。

一些 JavaScript 彼此之間會有相依性，如果使用 Flying Scripts、Clearfy 等外掛停用或延遲 JS 的載入是有可能會造成載入過程中出現錯誤的。這時候就需要到 Console 下觀察是否有錯誤訊息產生。

Inspect > Network

在每一次最佳化調整之後，重新載入頁面 (Ctrl + F5) 時可以觀察 – 「頁面是否已更新完全」。

觀察 JS、CSS、Img、Font 在重新載入頁面後相關資源的狀態是否為 200。如果狀態為 302 轉址 (redirect) 代表最新版本的檔案還無法取得。如果網站有設定 CDN，需要等候一、兩分鐘資料同步之後才會更新完全。

如果圖檔有透過 CDN 轉為 WebP 格式託管，也可以同時觀察檔案類型 Type 是否已更新為 WebP、檔案路徑是否為 CDN 路徑、狀態是否為 200 來判斷頁面是否已更新完全。

有個需要特別注意的地方，當網站的佈景主題曾經改變為其他佈景主題之後，要確認網頁資源的更新步驟是否正確。

1. 佈景主題改變之後，檢查 Clearfy 等外掛對網頁進行的修改是否依然存在。
2. 如果不存在，重新安裝 Clearfy 等外掛，讓外掛再次的將設定套用到網站上。
3. 接著將網站的快取、CDN 內容清空，等待網頁資源重新更新、同步。
4. 再次進行網頁速度評估測試。

Inspect > Coverage

進入 Chrome > Inspect 模式之後，按下 Ctrl + Shift + P 之後輸入 Coverage 即可進入分析頁面。按下 reload 按鈕後，即可開始頁面資源使用率的分析。

從分析結果可以觀察出哪些資源 (CSS、JavaScript) 的「未」使用率為 100% 的，後續可以使用 Assets Manager 從頁面載入中排除。對於「未」使用率超過 90% 的，則可以考慮使用 Critical CSS 的方式處理。

推薦閱讀：「How Do You Remove Unused CSS From a Site?」

Google Pagespeed Insights 外掛

這是免費的外掛工具，取得 Google API Key 之後，即可批量執行指定頁面的網頁速度評估，相當省時便利。

在進行網站最佳化的時候，改變設定後除了等候頁面資源是否已更新完全之外，也需要執行多次的網頁速度評估進行取樣，以避免評估數據偏誤。

在測試過程中，每改變一次設定都會執行 5 ~ 10 次的網頁速度評估，並取其平均值。

Clearfy – Assets Manager

透過 Clearfy 的 Assets Manager 功能，可以針對每一個頁面觀察使用到的 CSS、JavaScript 的相關資訊，包含：

• CSS、JavaScript 的檔案名稱、版本
• 檔案間的相關性、相依性 (Requires for、Dependency by)
• 檔案大小

可以清楚的知道各個不同類型頁面涉及的相關網頁資源有哪些，方便後續的分類、管理與記錄。

最佳化工具

在最佳化的過程中，除了 Clearfy 以外我們還利用到以下外掛提供的服務。這些工具大多數已經在之前的文章中介紹過了，如果有興趣可以點擊連結閱讀相關文章。

Breeze

Breeze 是專為網站進行加速的 WordPress 外掛，同時也提供與 Cloudways 主機服務相容的 Varnish 快取設定。我們透過 Breeze 管理快取、Gzip 壓縮、資料庫最佳化、Varnish 等。

在最佳化的過程中，會需要不斷的更改設定觀察網頁載入效能的變化；在每一次的更改設定之後，可以透過 Breeze 快速的清除內部、Varnish 快取，相當便利。

Breeze 也提供 CDN 的設定，可以為全站 wp-includes、wp-content 等指定目錄下的資源進行 CDN 內容分流，包含 CSS、JavaScript、Image、Fonts。

ShortPixel

對個人網站或部落格而言，最重要的資產除了文字內容，當然就是圖片了。增進網頁讀取效率的方法，除了使用 CDN、開啟網頁快取等，最關鍵的還是減小圖片大小。而使用好的圖片壓縮工具才能達到這個目的並且不影響到圖片的品質。

Clearfy 也有提供「Robin 圖片最佳化」外掛可以壓縮圖檔，待測試之後我們會再跟大家分享使用心得。但以目前的使用經驗 ShortPixel 提供的圖片壓縮品質、彈性相當優秀，所以圖片壓縮工具我們使用的是 ShortPixel Image Optimizer。

關於如何使用 ShortPixel，可以參考「無痛架站 – 縮圖工具 ShortPixel 快速又方便」。

CDN

在先前的文章中，我們已經介紹過兩個 CDN 服務：

• Cloudways 提供的 StackPath CDN
  在歐、美的網速都相當快，但在亞洲區網速遠遠落後其他服務商。
• BunnyNet CDN
  如前文「BunnyNet CDN 免費額度! 來玩 Presto Player 囉!」的介紹，是相當高 CP 的選擇，透過文章中的推薦連結、優惠碼可獲得美金 $10 的額度免費使用 BunnyNet CDN，相當於 (最多) 可以免費使用 10 個月。

在原本的架構中，Quants Note 的 CDN 最初是使用 Cloudways 合作的 StackPath，相當便宜，在目前的流量下每個月只需要美金 $1。無奈的是訪客以亞洲區為主，因此利用不到 StackPath 的好處。

測試過程中比較了以下幾個方案，最終選擇了 Optimole 進行全站的 CDN 內容分流 (除了影片之外)。

• StackPath CDN
• ShortPixel Adaptive Images (SPAI)
  CDN 使用的是 BunnyNet 的服務，但目前只能透過 CDN 分流 CSS、Image 等資源。根據官方的消息，接下來會包含 JavaScript。待參與 Beta 測試後再與大家分享使用心得。
• BunnyNet CDN
  CDN 可分流 CSS、Image、JavaScript、Fonts 等，功能相當完整、齊全。但亞洲區的網速較為一般，稍稍落後 AWS CloudFront、Cloudflare。
• Optimole – Image optimization service
  CDN 使用的是 AWS CloudFront CDN。雖然無法真正落實全站的 CDN 分流 (不包含 Fonts)，但網頁速度評估表現相當穩定且優於上述服務，並且提供雲端圖片轉檔 WebP 格式進行 CDN 分流。

課程影片的分流我們還是會利用 BunnyNet + Presto Player，因為課程頁面不需要仰賴 Google 索引、排名，需要綜合考量的是 CDN 的網速、費用、安全加密、防止下載等功能。

關於各家 CDN 服務商在全球各洲的網速比較，可以參考 CDNPerf 網站。

並不是所有網站都需要 CDN 分流服務，如果主要客群與網站伺服器在同一個城市或國家，基本上是不需要額外使用 CDN 的。然而，這個前提在於網站的託管主機商效能要夠好。
如果提供的是多語系、全球客戶的服務，CDN 內容分流服務絕對是不可缺少的。

Flying Scripts

對於新手站長來說，最為快速、有效的方式，就是利用 Flying Scripts 延遲在上述 Google PSI、Chrome dev tools 中觀察到造成瓶頸的 JavaScript 的載入時點。透過將一些在網頁初始化階段不必要事先載入的功能、外掛、分析工具等延後載入，以改善 Core Web Vitals 分數。

關於如何使用 Flying Scripts，可以參考「無痛架站 – Flying Scripts 提升網頁速度，改善 Google Core Web Vitals 分數」。

Local Host Google Fonts

使用分析工具，分析造成網頁效能緩慢的關鍵瓶頸時，如果網站有使用到 Google 字型就能在「排除禁止轉譯的資源」中看到與 fonts.googleapis.com 的資料傳輸與占用時間。Google 字型雖然都是最佳化的，但需要額外連線、傳輸還是會占掉一些基本的時間。

關於如何自行託管 Google Fonts，可以參考「無痛架站 – Self-Host Google Fonts 提升網頁速度，改善 Google Core Web Vitals 分數」。

Clearfy

首先，不建議新手站長們直接使用 Clearfy 的一鍵最佳化設定。對於 WordPress 上任何會對網頁資源直接進行修改的外掛，使用時都需要多加注意、小心。測試時，切記要把握我們之前說過的原則：

1. 備份、備份、備份。
2. 逐條測試，每次只改變一個設定。
3. 每一次的測試都記得檢查不同類型的頁面，如果網頁數量少，可以每一頁都觀察功能是否正常。例如，以 Quants Note 網站為例，邊欄的目錄是否正常顯示、各個頁面最上方的選單是否功能正常、底部的留言區塊是否正常載入、訂閱電子報的 opt-in form 是否正常顯示等。

而我們進行最佳化的方式是根據上述「分析工具」章節中提到的方法，首先確認、分析造成網頁效能緩慢的關鍵瓶頸並按照下述功能一一處理，並記錄網頁速度評估的評分。

感謝 WordPress 社群前輩阿力獅、Sid 的貢獻，Clearfy 也已經具備相當完備的繁體中文翻譯了。

移除不需要的功能

在 Clearfy 的「效能」選項下，可以移除非必要腳本，包含：

• 停用 RSS
• 移除 REST API 連結
• 停用 Emojis
• 移除 JQuery Migrate
• 停用嵌入
• 移除 RSD 連結
• 非同步化 Font Awesome
• 停用 Dashicons
• 停用 gravatars

這些或多或少都會影響網站效率的。

Local Host Google Analytics

透過自行託管 Google Analytics 的 JavaScript，可減少與 Google 伺服器的溝通與資料傳輸。並且提供額外功能如：

• Use adjusted bounce rate – 調整 GA 對 bounce 的認定秒數
• Change enqueue order – 改變 GA Script 載入的優先順序

關於最佳化 CSS、JavaScript

Clearfy 提供最佳化、最小化 HTML、CSS、JavaScript 的選項，並且可以設定 Critical CSS 的檔案與內容。但在最佳化過程中發現對於使用「巨型」佈景主題編輯器的網站來說，無法透過簡單的最小化、合併 CSS、JavaScript 改善 PSI 評分，因為 CSS、JavaScript 已經過於龐大，合併之後反而會拉長載入時間、惡化 Total Blocking Time。

而針對大型 CSS 進行 inline、defer 則會使得 Cumulative Layout Shift (CLS ) 時間拉長，必須同時搭配 Critical CSS 的設定才能讓頁面載入時的版面能夠穩定不變。然而，大型 CSS 即使擷取出關鍵的 CSS 預先載入，預先載入的 CSS 大小一般也不建議超過一定大小。

看到這，大家應該就知道使用「巨型」佈景主題編輯器的網站會面臨的困境了。實際測試之後，使用 Critical CSS 可以改善 CLS 但 Total Blocking Time 則會受到影響。因此會造成 PSI 評分不穩定的飄動。

這也是為什麼在前面章節提到，這次的最佳化衝刺實作中我們不對 Critical CSS 進行處理；其實不是不處理，而是簡單的使用 Critical CSS 之後發現無法獲得穩定的 PSI 評分。(Critical CSS 將會作為未來的研究目標)

所以我們將最佳化著重在每個頁面 CSS、JavaScript 資源的管理上。

對於不是使用「巨型」佈景主題編輯器的人來說，可以善加利用 Clearfy 的 JavaScript、CSS 最佳化功能。

JavaScript 最佳化功能

CSS 最佳化功能

有興趣想要使用 Critical CSS 的人可以利用 pegasaas 的線上工具、sitelocity 或安裝 Chrome 擴充工具 CSS Used 產生 Critical CSS 內容。並將 Critical CSS 內容放到 Critical CSS code 的欄位中，將 CSS 檔名放到 Critical CSS files 欄位。

Critical CSS 功能

移除不需要的 CSS、JavaScript

先前曾經試用過 Asset CleanUp 的 CSS、JavaScript 資源管理功能，需要在每一篇文章、頁面上分別調整 CSS、JavaScript 的載入、排除等設定。雖然能夠做到很細緻化的設定，但在管理上的麻煩程度實在是太太太高了! 所以試用之後就完全不考慮使用 Asset CleanUp 外掛了。

在看到 Clearfy 的 Assets Manager 之後，才發現這就是我理想中的網頁資源管理工具，UI、UX 都更貼近使用者的想法與使用習慣。這也是我大力推薦使用 Clearfy 的主要原因！

使用管理員角色登入網站、瀏覽網頁時，可以在頁面頂部管理員列中快速找到 Assets Manager 選單。

Assets Manager 中針對網頁使用到的 CSS、JavaScript 分為三大類別分別顯示：

• 外掛 PLUGINS
• 雜項 MISC
• 佈景主題 THEMES

其中每一個 JavaScript 都會清楚的標示有相依性的其他 JavaScript 檔案名稱，如果要針對指定 JavaScript 進行排除或延後載入都可以同時考量有相依性的其他代碼，減少測試過程中頁面功能破損的嘗試錯誤機率。

針對付費版本，Assets Manager 也提供了安全模式 Safe mode，完成設定後可以事先預覽，確認頁面功能一切正常之後再使用一般模式儲存設定即可。

付費版本中也提供了可以將 CSS、JavaScript 個別移到 footer 載入的選項。

對於每一個 CSS、JavaScript 資源都可以個別設定排除、禁用的篩選條件。設定的方式相當細緻、彈性，可以包含多個 AND、OR 條件。

條件的篩選對象相當多元，可以按照訪客的角色、瀏覽裝置是否為手機、快取名稱、頁面網址路徑、頁面類型、分類等指定篩選條件。

篩選時可以使用「等於」、「不等於」、「包含」、「不包含」等條件，相當彈性。

基本上 Assets Manager 是我最喜歡的 Clearfy 功能之一，除了能聰明、美觀的做到 Asset CleanUp、Perfmatters 可以做到的功能之外，在篩選條件上的彈性更是優於其他外掛。對於網頁設計師 (自行設計網站 CSS、JavaScript) 來說，我想這會是如虎添翼的好工具。

Preload 預先載入字型

自行託管 Google 字型之後，可以透過預先載入關鍵字型減少 First Contentful Paint (FCP)。字型預先載入對網頁效能的影響，可以參考這篇文章的分析。

如果有網頁資源來自於其他網址，也可以設定 prefetch 預先取得，提高載入時的優先順序。

重新編排、設計頁面

在分析造成網頁效能緩慢的關鍵瓶頸時，我們也可以從「最大內容繪製元素」、「避免大量版面配置轉移」知道網頁的哪些內容、元素可能需要重新編排、設計。

對於「避免大量版面配置轉移」中提示的內容，可以知道頁面上哪些元素的位置、大小在載入時會出現動態的調整與位移。這些可以透過指定明確的圖片、區塊大小，避免使用 auto 的方式來解決。可以縮短 Cumulative Layout Shift 的時間。

而 Critical CSS 的目的也是為了在延遲載入 CSS 的時候，預先讀取 Critical CSS 以避免明顯、大量版面配置轉移。

對於「最大內容繪製元素」中提示的內容，當其在頁面載入時受到變動、影響，都會延後 Largest Contentful Paint 的時間。因此，如前述所說的，字型載入的穩定性能夠幫助改善。此外，避免在載入頁面的過程中最大內容不斷的出現在後續頁面的內容中，這些可以透過文章、頁面的重新編排、設計來改善。

恢復原設定

在測試的過程中，總是需要將相關設定啟用、關閉來回的比較才會知道每一次的改動是否能對網頁載入效率帶來正向的影響。如果需要將整個 Clearfy 外掛「停用」的話，要記得多數 WordPress 外掛的運作原理，啟用設定的時候這些設定會被儲存在資料庫中，單純地將外掛停用或移除時並不會更改資料庫中的紀錄。

如果需要恢復原設定，記得在「快速開始」頁面的「重設設定」下點擊「重設」按鈕。

如果需要完整移除 Clearfy 的設定，記得在停用與移除外掛之前，在右上角的「CLEARFY設定」頁面的「進階設定」下開啟「完整移除」選項。

成果

使用不同 CDN 的差異

在前述 CDN 章節我們提到使用不同方式進行 CDN 內容分流對網頁速度評估的影響。其中使用 Optimole 的網頁速度評估表現相對穩定且優於其他服務。

透過 Clearfy 分析、最佳化的成果

在最佳化的過程中實際上只用到了 Clearfy 很小部分的功能，對於使用「巨型」佈景主題編輯器的網站 (Thrive 在前述的排名中是第三肥) 而言，以 14 天衝刺實作的成果來說，透過 Clearfy 獲得的改善已經讓我相當滿意了。

可以看出，能取得速度評分穩定成長都是通過 Clearfy 的設定調整達成的

在實作的過程中，對網站結構、影響載入速度因素的愈加了解，也讓我開始跟造成關鍵瓶頸的外掛廠商展開對談，明確提出個別外掛在設計與功能規劃時可以提升效率、減少網頁載入負擔的方案建議，並且獲得廠商的正面答覆，也讓這 14 天的成果更加充實，得以展望未來。

結語

Clearfy 持續地在改善最佳化的功能，大約是以每半個月、一個月的頻率更新外掛功能。最近一次 (Apr. 2021) 的更新也改善了 CSS 檔案在最小化與合併時，造成 (使用某些佈景主題編輯器時) 網頁功能破損的問題。而 Assets Manager 中的篩選條件也加入了針對 Query 字串篩選的功能強化。

這些都是未來可以持續測試的相關功能 (包含 CSS、JavaScript 最佳化以及 Critical CSS)，PSI 速度評分也肯定還會有進步的空間。

為了能持續提高網站的曝光度，網站最佳化是站長們需要持續不間斷研究的題目。大家可以參考前面介紹的架構，一步一步的準備、分析，記錄每一次更改設定後對頁面載入效能的影響，漸漸地對最佳化的「目的」與「解決方法」就會越來越清晰、熟練了。

有網站最佳化需求的人可以參考 Clearfy 目前的定價 (以下價格為美金)：

不想錯過的朋友，可以直接到 Clearfy 官網購買。

相當推薦個人網站、部落格的站長使用 Small Business 方案 (我就是買這個！)，而 Agency 則可以購買 Business Revolution 或 Unlimited 方案，視大家的業務量而定。

如果大家有什麼心得或建議，也歡迎在留言中與我分享、討論喔~

若對網站最佳化有興趣，Google 提供了更多的指引與說明。

---

附註 – Clearfy Pro 與 Asset CleanUp、Performatters 的訂價比較

相較於其競爭對手 Asset CleanUp Pro (簡稱 A)、Performatters (簡稱 P)，Clearfy 的訂價更為彈性且優惠。

首先，A、P 目前都不提供終生授權方案 (LTD)。定價上 A、P 都有提供 1 個網站的授權方案，但說老實話，現在架設 WordPress 網站的人有誰手上只有一個網站的呢？

而 3 個網站的授權中，A 的年費是 $77、P 則是 $54.95，費用都比 Clearfy 高。只有無限網站授權的方案 A 與 P 的年費較為優惠，各自為 $147 與 $124.95。

而事實上，Clearfy 的 Revolution 方案授權 50 個網站對於中小型 Agency 來說已經相當夠用。對於長期深耕網站設計，提供網站最佳化等專業服務的人來說，終究還是會需要終生授權方案的。

而 Asset CleanUp Pro 的 UI 設計、使用邏輯如果沒有跨世代的改版，對我來說是永遠不可能會考慮使用的。

後記 – Thrive Themes 成功減肥後的最佳化分析

在 Thrive Themes 的光速計畫 (Project Lightspeed) 發布之後，我們進行了升級後的最佳化分析。在這次的分析中，我們比較了：

1. 舊版 Thrive Themes
2. 升級 Project Lightspeed 光速計畫
3. Google Analytics 的影響
4. Clearfy 的成效

看最新的分析文章 -「網站最佳化 – Thrive Themes 的 Project Lightspeed 光速計畫 + Clearfy Pro」。