Wordpress PageSpeed 速度優化分享
在今年的聖誕節，我為一起共渡了13載的伙伴（i.e.這個 Wordpress Blog）送上一份聖誕禮物------瘦身提速大翻新！一方面令 PageSpeed 評分提升至「快速」級別，同時盡量清除trackers，致力成為零網絡跟蹤的新世紀高速Blog（笑）！筆者雖然不是甚麼 SEO 專家，但也希望與各位公海 Blogger 分享一下心得，提供兩套簡易方案，大家在聖誕假期有空的話可以嘗試一下啊 :-)
早前得知 Google 將網頁載入時間列為搜尋結果的考慮因素，尤其是對於手機版 Google Search 更為重要。他們推出了 PageSpeed Insights 分析工具，讓網頁製作者評估網站的效能，筆者一直想抽空研究一下。最近經過數星期的努力，終於將此 Blog 的 PageSpeed 評分由 37 提升到 95，評分甚至比筆者的 Medium 頁面更高呢！
PageSpeed 提升的成果！
PageSpeed 反映的是網站的反應速度，在瞬息萬變的今天，慢一點載入網站，就代表讀者可能因為等得不耐煩而離開（可讀Silven的文章《為什麼網站速度非常重要？》）。Google 在手機版搜尋結果特别強調網站速度的重要性，一方面是因為手機網絡始終比固網慢及不穩定，同時亦是貼近手機的使用習慣，避免搜尋結果出現一大堆反應遲緩的網站。所以較高的 PageSpeed 評分不單止能提高你的網站在 Google Search 上的排名，同時亦能為讀者提供更好的瀏覽體驗。
以 Medium 為例，雖然其介面看似已十分精簡，但是其實手機版 PageSpeed 評分也只有 68 分。可見只要經過適當優化，各位公海 Blogger 的自家網站絕對有機會在 Google Search 中搶佔更高排名 :-)
手機版 Medium 的 Pagespeed 得分
Pagespeed 的優化建議
PageSpeed Insights 的分析其實已包含如何優化的建議，有興趣研究的朋友可以細看。而此文則會跳過太技術的部份，直接給各位兩套方案，分别為使用 Jetpack 及不使用 Jetpack 兩種 :-)
第一步：檢視外掛及佈景主題
要優化網站速度，除了安裝及設置優化外掛，還有一些基本步驟要做。如果你的 Blog 已經運行很久了，請仔細檢視一下所有安裝過的外掛，看看那些是已經不需要的，甚至可能已經不支援現時的 Wordpress。不確定還有沒有使用的話，可以先將外掛停用 (Disable)，觀察數天看看有沒有異常。減少不需要的外掛是優化 Wordpress 網站速度非常有效的方法。
進入控制台，點擊外掛->已安裝外掛，仔細檢視，並停用不需要的插件
另外，亦可以檢視佈景主題。若然當前使用的佈景主題已有多年沒有更新，可能其代碼設計已經過時。或者若然其設計過於繁複，亦會拖慢網站在讀者手機顯示的速度。可以趁這個機會看一看最新的佈景主題，選擇一些標榜是簡約及快速的主題，幫自己的 Blog 換上新裝。如果實在非常喜愛現時的佈景主題，亦可以先行設置下文所述的插件，看看成效如何，如果想要更進一步再研究佈景主題。
本Blog換上了Satrah佈景主題
第二步：安裝及設置優化外掛
方案1：使用 Jetpack
現在很多 Wordpress 都有安裝 Jetpack，與 Wordpress.com 連結，提供很多便利的功能，例如讀者統計、網站優化、跨站登入等等（當然亦有 trade-off，會在你的網站加入用戶跟蹤，下文再述）。此方案就以簡便為前提，介紹如何使用 Jetpack 功能及兩個 plugin ，嘗試將 PageSpeed 盡量提升。
首先是Jetpack，安裝後依指示設置 Wordpress.com 帳戶，然後進入 Jetpack 的設置頁並啟動以下功能。這兩個功能可以優化網站的圖片及部份代碼，寄存在 Wordpress.com 的伺服器，以及優化圖片載入的流程。
Jetpack 的相關設定
然後安裝兩個外掛，第一個是 WP Fastest Cache。安裝後進入設置選項，如下圖所示打開這些選項。WPFC 會為網站建立靜態 cache，以及精簡佈景主題的代碼，縮短伺服器載入文章的時間。使用 WPFC 後，如果發現更新網站後有些內容沒有更新，可以手動按頁面上方的 Clear Cache。
WP Fastest Cache (WPFC) 的相關設定
這時候可以到 PageSpeed Insight 測試一下評分，之前筆者到這一步可以達到 80-90 分。若然要穩定在 90 分以上，則要再停止佈景主題使用外部 Google 字型。你可以安裝 Disable Google Font 來停止使用 Google 字型，或安裝 Self-Hosted Google Font 來把 Google 字型保存在你的網站上，讓讀者不用另行到 Google 伺服器下載字型。
兩個處理 Google Font 問題的外掛
方案2：不使用 Jetpack
上文提到，使用 Jetpack 的 trade-off 是會讓網站加入額外的 tracker，讓 Wordpress.com 能夠跟蹤讀者在你的 Blog 上的足跡。筆者由於想盡力減少自己 Blog 的網絡跟踪，所以選擇研究不用 Jetpack 又達致高 PageSpeed 評分的方法。筆者最終使用以下四個外掛：
首先亦是 WP Fastest Cache。這次我打開的選項比較少，因為部份設定改為在另一個外掛中開啟，WPFC只專門管理cache，用另一個外掛集中管理代碼優化。
WP Fastest Cache (WPFC) 的相關設定，部份選項改為在 Autoptimize 裏進行
之後安裝 ShortPixel，這個外掛可以提供非常好的圖像壓縮功能，效能比 Jetpack 更高。安裝後輸入電郵地址以獲得 API KEY，然後選擇要 Lossy 或 Glossy 壓縮。再按 Save 後，將來上傳的圖片就會自動壓縮。如果想壓縮以前上傳的圖片，就按 Save and Go to Bulk Process。免費帳户每月可以壓縮100張圖，如不夠可以加購限額，$9.99美金10,000張圖，不限期使用。
之後就安裝 Autoptimize，它集合不少網站優化功能，包括上面 WPFC 沒有勾選的代碼優化，去除 Google 字型，以及配合 ShortPixel 將圖片寄存在他們的快速伺服器上等等。可以按下圖來配置。
最後也安裝 Lazy Load，優化圖片載入流程。有很多形形式式的 Lazy Load 外掛，功能大同小異，而筆者選擇以下這一個，安裝後啓用即可，毋需配置。
Wordpress Blog 提速大功告成！
這樣就大功告成了！請到 PageSpeed Insights 去測試一下新的評分，並分享一下結果吧吧！若然仍未感滿意而又未更換佈景主題，可以考慮去看看有沒在合適的主題。筆者自己其實還根據 PageSpeed Insights 的建議做過進一步優化，但由於技術難度較高，所以那些就先不提了。如果您也有興趣研究的話，歡迎留個言交流一下 :-)
P.S. 其實可行的優化方案還有很多，例如我覺得用 Cloudflare 作為 CDN 再配合 WPFC、ShortPixel 及 Autoptimize 也會是一個好選擇，而且還可以順道搞 SSL。不過此方案我只有構思而未測試過，所以未有詳細介紹。有使用 Cloudflare 的朋友歡迎交流一下心得 :-D
番外篇：清除網絡跟踪
文首提及過我亦盡量達致零網絡跟蹤（trackers），身體力行支持更健康的互聯網發展。現時網絡跟蹤非常普遍，可以有各種不同來源，例如網站由於要統計讀者動態而追踪用戶行為，廣告網站及購物網站收集用戶喜好，又或者網站使用外掛而當中附帶用戶追踪等等。例如 Wordpress.com 為了綜合統計讀者的瀏覽行為，如啓用 Jetpack 的話會包含網絡跟踪。又例如本 Blog 之前使用 Add-to-Any 外掛來加入社交媒體分享按鈕，當中亦帶有各社交網站的跟踪代碼。
Blog 首頁完全清除所有 trackers！ (左邊為Brave，右邊為Ghostery)
上圖是筆者努力清除的成果，現時 Blog 的首頁已達致零網絡跟踪！我用 Brave 瀏覽器及 Chrome/Firefox 外掛 Ghostery 分析自己的 Blog，再逐一清除含有網絡跟踪的元件。此過程要視乎實際分析結果研究，無法給予大家一個簡易教學。以 Add-to-Any 為例，我尋打其他相似的外掛，發現如果使用 Sassy 以及不選取互動按鈕，就可以在設置不附帶網絡跟踪的社交網站分享按鈕。
在Sassy的設定裏，不選擇上方互動按鈕，只選擇下方的簡單按圖示
為何我特别聲明只有 Blog 的首頁做到了零網絡跟踪呢？下圖是內文頁面的 Brave 及 Ghostery 分析結果，Brave 的定義比較寬鬆，認為有 Facebook fbevents.js 一個網絡跟踪，而 Ghostery 則比較嚴謹，認爲有 Facebook、Google Analytics、Mouseflow 等多個網絡跟蹤。我從網頁原始碼進一步分析，發現全部來自 LikeCoin button 的 Wordpress 外掛組件。我相信 LikeCoin 要使用 Google Analytics 及 Mouseflow 是可以理解，兩者都是非常普遍的網絡統計工具，但其他的網絡跟踪是否必需呢？
用Brave分析Blog內文的網絡跟踪組件
用Ghostery分析Blog內文的網絡跟踪組件
個人而言在可見的將來此 Blog 仍打算繼續使用 LikeCoin，所以我希望基金會可以檢視一下這些網絡跟蹤的必要性。對於 Blogger 及網站管理者而言，LikeCoin Wordpress plugin 現時附帶這些網絡跟踪，不知道我們是否要加入私穩採集聲明才符合 GRPR 法規，大家或許要留意一下。（看網絡上的GDPR資訊，不少人認爲若然網站有使用 Google Analytics，先設置私隱採集及使用聲明會比較安全，避免沾上法律問題，現正聯絡 LikeCoin 基金會幫忙查證。筆者先研究一下 GDPR notice 要怎樣寫以及測試一下 Wordpress GDPR 外掛，下一次再分享。）
Posted from my blog with SteemPress : https://hkxforce.net/wordpress/5738