提高網頁速度是少數可以直接影響網站排名的技術 SEO 策略之一。
當然，這並不是說你的網站載入速度超快、就能讓你登上 Google 的第一名。但提高網站的載入速度可以顯著減少自然流量流失(等到不耐煩的訪客)。我將告訴你3種提高網站載入速度的簡單方法。
網頁減肥
CDN(Content Delivery Network)、快取、延遲載入內容、Minifying CSS
這些都是常見的網頁加速方式，但很少有人談論另一個重要的速度因素：網頁大小
事實上，當我們進行大量的網頁速度研究後，發現網頁的總大小與加載時間的相關性比任何其他因素都多。如果你的網頁大小就是比競爭對手整整大上一倍，那麼即便你把上述的優化手段都用的盡善盡美，你的載入速度仍難以追上對手。
從上表中可以清楚看到：
網頁的整體大小(bytesTotal)，在載入速度的影響力上壓倒性的，其它的輔助、加速手段在它面前都是小小一格，可見其重要性。
通常要幫網頁減肥，第一步就是先調整頁面上的圖像素材。你可以壓縮圖片並緩存你的網站，例如現在最流行的 Webp 檔案類型。但是，如果你的網頁內容非常豐富，即使你再怎麼壓縮素材、你的總數就是比別人多。這也是 SEO 專家的千古難題：
- 使用壓縮的圖檔能使載入速度大幅提升，但圖片解析度會下降(壓縮完一定會變糊)
- 使用原本的圖檔能展示一級棒的畫質，但載入速度就快不起來
為了提供訪客良好的使用者體驗，你是用給他更快的載入速度呢？還是要給他清晰的影像內容呢？這時你就得做出取捨。總之，如果提高網站速度是你的第一優先的話，那你就得想盡一切可能縮小網頁的總大小。
當然，壓縮圖像減肥是非常有效的一招，但你要如何知道壓縮前／壓縮後，網頁速度究竟提升了多少？這時就要交給 Google 自家開發的網頁速度檢測工具 – Pagespeed 了。
◆ 網頁速度檢測工具 – Pagespeed
關於 Pagespeed 這套工具，主要分為兩大功能。
- 檢測單一網頁速度，並且幫你打分數
- 針對單一網頁，提出優化網站速度的實際建議
雖然市面上除了 Pagespeed 以外還有其他檢測工具，但我還是推薦你使用這套工具，原因很簡單：
畢竟討好 Google 搜尋引擎，是每位 SEO 專家無法逃離的宿命(除非某天Google被踢下神壇)。既然 Google 自家都開發了這套工具、還設計了數個關鍵指標來幫你的網頁打分數，另外還會給你建議讓你拉高分數，那不會用這套工具不就虧大了嗎？下面就讓我來帶大家看看 Pagespeed 的重點功能吧！
▼ 首先，的界面相當簡潔，類似 Google 搜尋引擎，只不過他是輸入 URL
▼ 輸入你想檢測速度的網頁 URL 後，它就會開始幫你打分數。報告結果出來後會分為「電腦」與「行動裝置」兩份報告，兩個報告的評比是獨立的，你其中一個取得高分、不代表另外一個也會是好成績。
▼ 繼續向下滾動會看到評分細節，也就是前面提到的、Google 自己建立的各項指標
目前官方說明書中已經公開表示，Google 對於網站速度的評分很大比重會放在 First Contentful Paint (FCP)、Largest Contentful Paint(LCP)、及 Cumulative Layout Shift(CLS)，由於官方說明書老樣子寫的文謅謅，我這邊幫大家整理了懶人包：
- FCP(First Contentful Paint)
- 衡量的是網站回應使用者輸入。例如點擊某個按鈕、或在表單中輸入資料後，網站回應的速度
- 通常是抓取點擊行為後的網站回應，像是點擊物件、按鈕；而滑鼠捲動、畫面縮放則不會被計算在內
- LCP(Largest Contentful Paint)
- 衡量的是使用者看到網頁內容的速度
- 這項指標是以使用者點擊網頁後，預設畫面內(也就是網頁頂端，還沒往下滾動)最大的物件，載入完成的時間耗費多久。
- EX：以電商網站來說就是大型輪播 Banner，該圖片被使用者的瀏覽器呈現出來花了多少時間，就是所謂的 Largest Contentful Paint
- 測量的網頁元素可以是圖片、文字區塊、也可以是影片
- CLS(Cumulative Layout Shift)
- 這項指標會評估當用戶想和網頁互動時，網頁中元素出現偏移的頻率。
- 有時當你想點擊網頁上的特定物件，但該物件卻因讀取過慢而發生位移，導致你點到錯誤的物件，產生不好的使用者體驗（例如蓋版廣告）
▼ 有了這幾項重點指標的評分後，我們進一步了解 Google 演算法想要的是什麼。但這些指標只能算給我們一個大方向，具體該如何優化呢？別擔心，Google 大神很貼心附上了改善建議
▼ 每項改善建議，後面都顯示出改善之後預期能縮短的載入秒數，因此優化邏輯也很簡單，就是從能減少更多載入秒數的建議開始著手，CP值最高。
每一項都還能進階展開，查看調整細項
只要善用 Pagespeed 這套工具，就能針對不同網頁進行客製化的優化。
通常技術端(語法/網站架構)的建議都是全站性，只要調整完一次後全網頁適用。因此建議可以先從全站的開始著手；接著才針對各單一網頁的內容(文字/區塊/圖像)去減肥，會是我比較推薦的優化順序。
清除無用的第三方 Scripts
通常隨著網站越來越大，網站上的第三方 Scripts 也會越來越多。你可以把它們想像成是一個一個外掛，每個都有其功能，有些常用、有些可能根本沒在用，但不論你常用與否，只要它還埋在網站內，它就會增加「一點點」載入時間。數量不大時你可以還無感，但時間一久，累積的外掛多了，自然就會拖垮你的載入速度。
▼ 經統計，每個第三方 Scripts，平均會增加 34 毫秒的網頁載入時間。
當然，有些 Scripts 我們不能沒有它。例如 Google Anaytics、廣告平台追蹤碼、或一些付費級的第三方服務…等。但你可以檢查看看網站上是否有些 Scripts、是你即使刪除也不會造成影響的，找到的話就盡快刪掉，這樣將有助於全站的載入速度。
測試 CDN 開/關
國外有研究測試，發現一個驚人現象，那就是使用 CDN 與更短的載入時間無正相關。
◆ 什麼是 CDN ？
大家可能對剛剛的研究報告沒啥感覺，因為 CDN 目前普及率還不算高，這邊簡單幫大家科普一下：
CDN 全名為 Content Delivery Network。直翻為內容傳遞網路。CDN 具有緩存&分散式節點的特性，讓網站訪客可以找較近的節點來獲取網站內容，提升網頁載入速度。另外，CDN 也具備防禦功能，它可以作為用戶端~伺服器端的中間過濾器，所有流量都必須經由 CDN 把關，以達成保護源伺服器的目的。
綜上所敘，使用 CDN 有以下優勢：
- 縮短網頁載入時間
- 提高網站安全性
- 降低頻寬成本
- 提高內容傳輸穩定性
其中一項優勢就是我們今天的重點：「縮短網頁載入速度」。緩存&多節點的模式，幾乎可以確定在 CDN 的輔助下，網站速度肯定會變快的，但下圖的報告中卻顯示，有掛載 CDN 的伺服器別說更快了、整體數據甚至還略輸沒用 CDN 的網站，這又是為何呢？
國外研究報告後續指出，極有可能是因為大多數網站的 CDN 都設置不正確。加上沒有用工具檢測 CDN 開/關後的前後數據差異，因此大數據分析下來、許多有使用 CDN 的網站其實並沒有享受到 CDN 帶來的好處，因此報告才會得出 CDN 跟網站速度幾乎無關的結論。
- 因此，如果你的公司/個人網站有使用 CDN，我建議你在打開/關閉 CDN 的情況下，去 webpagetest.org 上測試你的網站速度
- 或者，如果你已經把 Pagespeed 的所有優化項目都完成，但網站速度仍不理想，那你也可以考慮使用 CDN 服務，目前國外以及相當普及，國內也陸續有廠商提供相關服務
以上，就是我實務上習慣使用的3個網站速度優化要點。
- 先藉由 Google 官方工具健檢，查看各項指標的評分&建議事項去調整網站
- 清除網站上無用的第三方外掛
- 啟用 CDN，但要注意設置是否正確
由於網站速度優化內的技術比重極高，最好是有工程師從旁協助才能事半功倍哦！當然，即可網頁載入速度優化好了，但影響排名的關鍵還是在於「內容」本身，而當中最讓人頭痛的就是遇到「重複內容」問題，如果想了解如何解決重複內容問題，看這篇就對了：SEO 大忌「重複內容」！3招教你快速解決網站重複內容
