「SEO 就是要跑 PageSpeed Insights！」
「我要追求 100 分的跑分！」
「網頁速度是排名要素！」
不曉得你有沒有聽過上述這樣的傳聞，這些內容都跟網頁速度（Page speed）有關，上述這些內容對錯參半，有合理的部分，也有許多的迷思。
網頁速度非常的重要，不只會影響 SEO，更會影響到你的 Google Ads、Facebook 廣告、你的生意成交狀況。
接下來我們就來好好聊聊「網頁速度」，以及有什麼非技術背景朋友能做的調整。
文章目錄
網頁速度（Page speed）是什麼？
Page speed 是指網頁載入速度，網頁速度對於使用者跟搜尋引擎來說都很重要。
嚴謹來說，”Page” speed 是指網頁的速度跟效能，而不是整個網站的速度跟效能，但大家蠻常稱「網站速度」，但基本上是同個意思。
而網頁速度（Page speed）、網頁載入速度（Page load speed）也幾乎是同個意思。
另一方面，PageSpeed Insights 則是 Google 測試網頁速度的工具名稱，寫法跟（Page speed）也不同。
延伸閱讀：《SEO 自學大全：一篇就搞懂 SEO，完整說明 SEO 的底層邏輯》
對於使用者的意義
對於使用者來說，網站載入速度慢，就代表獲得答案的體驗差，也就是使用搜尋引擎的體驗不好。
根據 Google 調查《Find out how you stack up to new industry benchmarks for mobile page speed》 ：當頁面加載時間從 1 秒增加到 3 秒時，使用者離開網站的可能性會增加 32%。
而知名 SEO 機構 SEMRUSH 也提出《What Is Page Speed & How to Improve It》，當網站載入速度超過 3 秒，那麼使用者跳出的機率會增加三倍。
提升網頁速度，就能更容易留下消費者。
對搜尋引擎的意義
上述使用者提到的：「搜尋引擎的使用體驗不佳」，Google 聽到這句話就會心慌慌，完全無法容忍，因為搜尋引擎要靠使用者來賺錢。
另一方面當網站載入速度慢，也代表爬蟲要讀取這個網站會更加費力，對於 Google 來說會是個負擔。
而且不只搜尋引擎，Google 自家的 Google Ads 關鍵字廣告，對於網站主的網頁載入速度也非常看重，太慢的網站載入就會影響到廣告的品質分數。
小結：網頁速度非常重要
綜觀上述的原因，網站速度、網頁速度是 SEO 中有被 Google 明確說明會影響排名的要素，而且網頁速度對於網站主的商業表現也會有明顯影響。
換句話說，提升網頁速度對於提升整體網站排名會一定的幫助，而這算是 SEO 相對少見由 Google 官方明確給出的優化建議。
我認為網站主在自身能力範圍內，都應該多關注自己的網站載入速度，給使用者良好的體驗。
如何測試網站載入速度
我們可以透過一些免費工具跟方法來測試自己網站的網站載入速度。
方法一、多拿幾支手機測試
第一個方法，我會推薦多拿自己的手機實際用用看網站，建議都用無痕模式，並且跟身邊的朋友同事都拿來測試，看看不同的手機是否會有不同的變化。
這個方法當然不夠科學、不夠具有代表性，但我認為網站主就應該是最常逛自己的網站的，網站主應該要當最嚴格的使用者，盡快發現自己網站的問題。
如果你身邊的人都發現網站載入很慢了，那還懷疑什麼？不需要別的量化數據了，趕快改吧！
方法二、PageSpeed Insights
Google PageSpeed Insights（PSI）這個免費工具能檢測網站的載入速度跟網頁使用體驗的指標，也是多數人最熟悉的網頁速度測試工具。
你只需要把網址丟進去，就可以看到桌面版跟手機版的網頁載入效能，記得多測幾個不同的網頁。其中手機版的速度重要性遠遠大於電腦版，而 Google 也會優先顯示手機版的資訊給你。
在 PageSpeed Insights 下方會提供給你很多分數跟分析資訊，我認為至少超過 50 分（橘燈）就是及格了，高分當然好。
需要提醒的是，針對 PageSpeed Insights 的分數（PSI）切勿走火入魔，儘管網頁速度、效能對於排名有幫助，但不代表你從 80 分變成 99 分就會變成第一名。
請記得影響排名的要素至少有 200 個，網頁速度就只是其中一個，過度優化是沒有意義的。
另一方面，PageSpeed Insights 評量的指標也不只載入速度，還有很多其他的指標，這個下個章節會提到。
Google PageSpeed Insights：https://pagespeed.web.dev/
方法三、其他工具
比起 Google PageSpeed Insights，SEO 與網站工程界有一派更喜歡使用其他工具檢測網頁速度，如：GTMetrix、Pingdom。
這兩個工具能提供更細節的分析資訊，有興趣的朋友可以去鑽研這兩個工具。
GTMetrix：https://gtmetrix.com/
Pingdom：https://tools.pingdom.com/
優化網頁速度的限制
使用網頁速度檢測工具都會列出一些網站的問題，那麼如果我們想要優化網頁速度，簡單來說可以怎麼做？
以及實務狀況是什麼？在談論這個之前，我想要先談論一下網頁速度優化的限制。
1. 有修改門檻
首先我必須很誠實的說：優化網頁速度是非常細膩的網站工程，對於不熟悉網站程式的朋友來說能做的十分有限。
當然還是有些事情是非工程背景的朋友能做的，但想要把網站調教到很好，還是十分仰賴專業人士。
2. 不見得能修改
如果今天你是自己架站，對整個網站程式碼都有修改權力跟能力，那當然你想優化網頁速度是沒問題的。
但如果你是在別人家的電商平台、別人家建置的系統，能優化的空間就會很小了，因為多數程式碼你都不能動。
當然這不見得是壞事，優質的平台會幫你把網站技術都處理到還不賴的標準，使用者也就別操心了，專心做生意就好。
3. 尊重網站工程師
如果你把 Google PageSpeed Insights 裡面的每個修改建議都丟給網站工程師，他多半會面有難色；因為裡面很多的修改建議對於實務上並不現實，很難做到，儘管報告中看起來都不能做到。
如果你非網站工程背景，這個時候不要過度堅持，要誠懇地跟工程師溝通我們的需求跟目標，一起討論目前的網站可以怎麼調整。
網站載入速度優化手段
理解完限制後，我們就能來討論怎麼優化網頁速度了，我們主要討論基本版，也就是非工程背景的朋友也能比較容易實踐的。
1. 壓縮圖片
最簡單、最容易做的就是壓縮圖片了；儘管高畫質的圖片很吸引人，但如果檔案太大，會讓網站載入被嚴重拖累。
你可以利用各種圖片壓縮工具，這些工具可以把圖片大小大幅降低，但畫質卻幾乎不受影響，我自己習慣使用的是 TinyPNG，你可以用自己習慣的就好。
理想上會建議每張圖片大小可以小於 100kb，這確實不是個容易做到的事情，但有壓縮圖片都會比沒壓縮圖片好，不要每張圖都好幾 mb。
如果可以，可以把網站圖片換成 Webp 格式，可以讓網站圖片更輕量。
TinyPNG：https://tinypng.com/
2. 減少不必要的網站外掛
網站外掛（plugins）是替網站增加額外額外功能的程式，這些程式太多的話，就會讓整個網站變的臃腫跟遲緩。
因此想要優化網站速度的時候，可以檢視一下網站上有沒有不必要的外掛可以移除？有沒有外掛的功能是重複的，可以只保留其一？
但如果是一些非重要的外掛，就算會讓網站速度變慢一點，那還是得保留，不能因小失大。
上述兩個做法是一般人員都能嘗試處理的。而下面我會條列一些需要工程人員協助的修改項目。
其他常見優化項目
以下這些則是其他常見的優化項目，多半都需要網站工程師協助，以下這邊就不做太多描述，有興趣的朋友可以查詢相關名詞獲得更詳細的資料。
- 使用 WEBP 的圖片格式
- 優化 CSS
- 減少 JS
- 壓縮 JavaScript、CSS、HTML
- 利用瀏覽器緩存
- 限制 HTTP 請求
- 減少重新定向
- 優化網站字體
- 使用 CDN
- 升級網站主機
建議做 AMP 嗎？
有些朋友可能聽過 AMP（Accelerated Mobile Pages），中文叫做加速行動版頁面，是一種能讓行動版網站載入速度變快的工具。
但因為 AMP 有諸多限制、管理上比較麻煩，近期業界比較不流行跟推崇使用 AMP，我這裡不特別推薦新手使用 AMP。
總結
網頁速度對於 SEO、電商、使用者都非常重要，值得網站留意。
但網頁速度的優化需要網站工程師的密切配合，需要網站主跟網站工程師詳細規劃專屬自身網站的優化方案。
延伸閱讀
- 《Page Load Time vs. Response Time – What Is the Difference?》
- 《What Is Page Speed & How to Improve It》
