無痛架站 – Flying Scripts 提升網頁速度，改善 Google Core Web Vitals 分數

在討論網站 SEO 最佳化的時候，除了網站中最關鍵的「內容」之外，Google 要求網站也必須要提升網頁讀取速度、改善訪客閱讀的體驗。一般人在 SEO 最佳化的過程中大多數只能更用心的準備文章、素材，提供更有價值的內容，而對於與網站技術有關的知識則是相當欠缺，並且難以切入。畢竟不是人人都精通於程式設計、網站架構設計。

Google 在決定搜尋結果排名的同時，也考量了網站在 PageSpeed Insights 上的速度評分，尤以行動版 (手機) 的體驗最為關鍵。光是 Quants Note 網站從開張以來，90 天內將近 6000 位訪客中，使用行動裝置的比率已經高達 74% 了！

對於自行架站的麻瓜們 (包含我自己)，時常又只能利用方便設計網站版面的各種主題編輯器 (Theme Builder)，而這會進一步的讓網頁大小增加，特別是 CSS 版面設計的樣式表。

如果網站上放了外掛可以提供訪客與站長之間的互動、答問，一樣需要安裝 JavaScript，並且會拉長網頁讀取時間。

而為了更了解訪客的流量與行為的分析，也需要安裝 Google Analytics 的 JavaScript。這一樣也會拉長網頁讀取時間。

在提升網頁速度 (網站加速) 的許多手段之中，我們已經介紹了對於新手站長來說最簡單的第一步「無痛架站 – 縮圖工具 ShortPixel 快速又方便」，透過確實的管理網站圖檔的大小，善用圖片壓縮工具可以顯著的提升網頁速度。

對於新手站長來說，還有另一個最快速、有效的方式，就是延遲上面所說的 JavaScript 的載入時間。透過將一些在網頁初始化階段不必要事先載入的功能、外掛、分析工具等延後載入，即可顯著的改善 Google Core Web Vitals 分數。

改善網頁載入速度的其他方式 – 1. 使用超輕量佈景主題 2. 使用 Gutenberg 區塊編輯器 3. 進行網站最佳化 4. 使用支援 LiteSpeed 技術的主機架站。

Google Core Web Vitals

首先，我們先來了解什麼是 Core Web Vitals。大家可以訪問 PageSpeed Insights 網站，並且輸入自己網站的網址進行分析。

電腦版網頁速度評估

靜待數十秒之後，就能看到分析結果如下。

一般來說，如果使用了圖片壓縮工具處理網站上的圖檔，並且透過 CDN 管理網站的圖片、CSS、JavaScript 等資源。電腦版的分數都可以到達 90 分以上。

行動版網頁速度評估

然而，一旦按照行動版的標準來評估的話，就不是那個回事了。從下面的行動版分析結果來看，可以發現光是「移除未使用的 JavaScript」部分就已經佔了 1.1 秒了。而這就是本文要討論的主角 – JavaScript。

其實本來對要分析的這篇文章「Presto Player Review 最佳的線上影片播放解決方案」的速度評分一直都不敢抱太大的期望，因為這是對 Presto Player 外掛的分析文章，充滿了許多的圖檔、字數也多達 6,350。一般來說，這類文章就是靠主題 + 內容的實用性吸引人點閱的。

因為每個人安裝的外掛都不一樣，大家可以仔細觀察分析結果中列出來的「移除未使用的 JavaScript」清單，鎖定「非」網頁初始化時的關鍵內容。

可以看出來，相關的 *.js 有：

• frontend.min.js
  這是 Thrive Comments 使用的。實驗後發現延遲載入有一定機率造成 Comments 區塊不會正常顯示。
• sdk.js
  與 Facebook 溝通使用的，顯示文章分享數、訪客可以使用 FB 帳號登入留言。
• gtag
  這就是大家熟悉的 Google Analytics 了。
• moxie.min.js
  處理檔案上傳使用的。

這些其實都可以從檔案路徑，或是 google 搜尋找到相關 JavaScript 的用途說明。

Flying Scripts – 提升網頁速度

透過 Flying Scripts by WP Speed Matters 外掛，可以簡單的將列表中的 JavaScript 關鍵字填入 Flying Scripts 中，並決定延後載入的秒數：

• Include Keywoods
  將需要延遲載入的 JavaScript 關鍵字輸入。
• Timeout
  決定延後載入的秒數，如果在指定的秒數之前訪客已經有與網頁互動的行為發生，例如點擊滑鼠、滾動滑鼠的滾輪、選取文字、移動鼠標等，JavaScript 則會立即載入，完全不影響使用者的體驗。
• Disable on pages
  更進一步的，也可以在不需要延後載入的頁面選擇不要載入 Flying Scripts。以減少 Flying Scripts 對相關網頁的影響。(這外掛的開發者是處女座吧?!)

測試的時候，切記要把握以下原則：

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

行動版網頁速度提升

啟用 Flying Scripts 之後，可以看到行動版的速度評分大幅改善，特別是 Total Blocking Time，而未使用的 JavaScript 也從最佳化建議中消失了。

電腦版網頁速度提升

電腦版的速度評分也同樣有改善。

結語

說老實話，其實一兩個月前就知道有這個外掛了，但抱持著多一個外掛不如少一個外掛的想法，就遲遲沒有嘗試使用了。

沒想到使用之後 (當然，事先也做好了備份)，發現對網頁版面、格式沒有造成負面影響 (前提是，延後載入的 Scripts 不是初始化過程中必要的元素)，實際瀏覽網頁也發現 Scripts 載入的時間點也會因為瀏覽的行為而觸發。簡直就是針對 Google PageSpeed Insights 而來的 hack 阿！

這個外掛相當精簡、功能極小化，但卻發揮了相當大的功效。雖然是免費的，但為了鼓勵開發社群的貢獻者，大家使用了如果覺得幫助很大，可以請他喝杯咖啡。

我也馬上付諸行動了~

當然，看了我的文章覺得受益良多的人也歡迎買杯咖啡請我喝唷~~

後記 – 關於 Thrive Theme Builder

使用 Thrive Theme Builder 或其他布景編輯器的人請注意，在編輯 Theme Templates 的時候如果遇到載入編輯頁面動作無法完成、一直轉圈圈，可以嘗試將 Flying Scripts 停用。

事實上，使用各類型外掛要特別小心與其他外掛或主題編輯器之間的相容性問題。要謹記上述的三大原則唷!

後記 – 與其他外掛的衝突

根據 Github 上 WP Rocket 外掛最近的討論 (3/18)，使用 WP Rocket、Flying Scripts、Perfmatters 等外掛延遲載入 JavaScript 時，延遲載入以下外掛會造成衝突，頁面載入後首次點擊連結需要點擊兩次才能生效。這跟延遲載入的機制有關，可以複習一下文中 Timeout 的說明部分。

• TOC Plus (Table of Content Plus)
• Google Adsense
  關鍵字包含：googlesyndication、adsbygoogle、adsbygoogle.js

目前有效的解決方式有：

1. 將 Timeout 秒數設定為 1 秒，如此一來訪客很難有機會遭遇上述問題。
2. 在 mouse hover 階段預先載入 Adsense (不確定手機版是否可行)。
3. 避免使用 Adsense 賺錢，這樣一來網頁當然也會速度更快。

參考資料 – Delay JS – Links needs to be clicked twice on iOS / Safari。