如果你有長期看我的部落格文章，應該會知道我強調很多次，Google 非常重視用戶體驗，只以用戶為最優先考量、重視用戶體驗的網站主，才能夠真的理解 SEO 該怎麼做，而「網站速度」自然在網站優化上是一個很重要的項目，對於 SEO 以及網站的體驗都有很大的影響。尤其自從 Google發布了網頁體驗訊號（Page Experience）之後，網站速度顯然只會越來越重要。

這篇文章我會完整分享「網站速度」對於網站的影響、該如何優化、以及網站速度測試的方法。

先談「網站速度」究竟會怎麼影響你的網站

通常我在承接顧問專案時，「網站速度」會是我們評估「網站健康程度」的重要指標之一，因為速度是一個非常綜觀的指標，他影響的層面非常多，我們也先來初步了解一下，究竟對於「網站速度優化」這件事過於怠慢的話，影響層面有哪些：

1. 直接性影響你的網站 SEO排名

Google 在 2010 年時就發過官方聲明 ，網站的速度、效能將會影響搜尋排名，並把網站速度列入排名因素。

Google 在評估一個網站是否值得良好排名時，會參考非常多排名訊號，而這些訊號有強弱之分，每一個優化項目的「排名訊號」強度都不同。若我們針對訊號強度較高的項目進行優化，你在 SEO 的成效上會較容易看到成效；反之若是強度較弱的排名訊號，則是優化了也未必會看到成效。

舉例來說，網站整體的內容是否夠豐富、夠優質就是屬於高強度訊號。你網頁的網址裡面有沒有提到關鍵字，就是屬於極度低強度的訊號，通常網址裡面沒有塞關鍵字，也能得到好的排序。

回歸正題，那麼我們這篇文章正在談的「網站速度」是屬於多高強度的排名訊號呢？如果我們優化了網站速度，對於 SEO 的成效有多大的影響呢？

答案是：「網站速度」屬於中至高強度的訊號，而且訊號強度只會被設定的越來越強。

多年前 Google 剛開始宣布「網站速度」會影響排名時，當時在很多專案上，我們優化網站速度後，都未必會觀察到網站排名或 SEO 流量有提升，但這兩年在優化的實務經驗以及數據觀察之下，我開始發現「網站速度」的訊號強度越來越高，優化後的效果大多都很顯著。同時，Google 在 2018 年時有公開聲明「網站速度」的訊號強度會提高到影響手機排名，2020 年時又宣布了 Page Experience（網頁體驗訊號）這個與網站速度有關聯性的排名訊號，我只能說，結論很顯而易見：

這兩年 Google 越來越重視「網站速度」，他對 SEO 的影響是逐年在提升，明年、後年、大後年也肯定會越來越重要，是現在做 SEO 一定會優化的超級重要項目。

2.除了排名，還會影響Google的爬取額度（Crawl Budget）

先前我在這篇索引的文章談論過，Google 有所謂的爬取額度（Crawl Budget），如果你的網站速度太慢，會影響爬蟲來爬你網頁的健康程度，如果速度慢到爬蟲爬不動你的網頁、或爬起來的效率很差，那整體 SEO 的成效也會不好。

從「排名訊號」的角度以及從 SEO 技術優化的「爬取」角度來看，網站速度都是至關重要的。

延伸閱讀：SEO基礎觀念：認識檢索 (Crawl) 與索引 ( Index )

3.影響使用者體驗以及轉換率

根據 Google 研究報告指出，網站速度對於跳出率的影響是非常顯著的，你的網站載入速度若是 1~3 秒以內，客戶跳出離站的可能性會增加 32%，但只要慢到 5 秒，客戶跳出網頁的可能性就會增加到 90%（其實這是非常驚人的數據），客戶跳出率高，那麼當然就會影響你的轉換率、訂單成交率等各項商業表現數據。

總結來說，網站速度影響的層面很多，從跳出率、使用者體驗、影響爬蟲的爬取效能、甚至影響 SEO 的排名。因此網站速度優化，是一個對整體網站都非常有幫助的優化工作。

網站速度測試工具推薦

「對於網站速度，千萬不要自我感覺良好」，在優化時我們不能用公司、家裡的電腦來「體感」網站的速度有多快，因為我們的用戶可能位於網路環境較差的地方、或是他的手機正連上某個速度較差的 wifi 網路，而且「你感覺網站速度很快」並不代表 Google 認同你的網站速度很快，若今天我們是要為了 SEO 而優化網站速度，最終目的還是「Google 是否評斷你的網站速度良好」，所以不論是為了用戶還是為了 SEO 而去優化速度，我建議還是避免用自己體感的方式來判斷網站速度是否良好，而是應該要使用一些網站速度測試工具來做分析以及檢測：

▍網站速度測試工具1：Google Page Speed Insight

Google Page Speed Insight 是 Google 官方所開發的工具，如果你希望了解「 Google 如何看待你網站的速度」，用 Google 的工具就可以達到目的。Page Speed Insight 算是操作起來比較容易上手、介面也不會太複雜的工具，故一開始做速度優化時，我都推薦先以 Google 的工具為主。

使用上只要點開 Google Page Speed Insight ，在工具上方輸入網址，你就可以看到 Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）、Interaction（INP）這三個指標的數值（它們是「Page Experience網頁體驗訊號」的三大重要指標，不清楚指標意思的人建議先閱讀網頁體驗訊號這篇文章，再回頭來閱讀網站速度優化的文章）

值得一提的是，Google Page Speed Insigt 這套工具有一個其他工具無法取代的地方，那就是「了解實際使用者體驗」，LCP、CLS、INP 等指標都有一個綠橙紅所構成的長條圖，這個長條圖所顯示的是真實的、真正有造訪過你網頁的使用者們所產生的資料。如上圖所示，點擊「展開顯示畫面」後，便能查體驗良好和體驗不佳的比例。

往下可以看到 Page Speed Insigt 對於網站效能的評分，這個分數主要是由 LCP、CLS、INP 等指標表現來評估。再把檢測報告往下捲動，從「最佳化建議」和「診斷」可以看到 Google 提出的建議，告訴我們該如何進行優化（這些項目我們會在文章的後段來進行說明），實務上我們會根據報告檢測出來的問題，與網站的 PM、網頁技術人員來討論該如何改善這些項目。

要特別注意的是，行動版的網站速度表現以及電腦版的網站速度表現是分開的（有可能你的電腦版網頁速度很快，但手機版卻有許多優化空間），Google 診斷出來的最佳化建議也會有所不同。

▍推薦工具2：WebPage Test

WebPageTest 雖然不是 Google 所開發的工具，但仍是 Google 官方推薦的可用工具之一，打開工具後，同樣只要輸入網址就可以開始做測試，WebPageTest 比較不同的是，你可以選擇速度測試的國家以及瀏覽器，如果你是國際品牌，網站的目標族群來自於各種不同的國家地區，則可以用此工具來檢測不同的地區造訪你網站時的速度表現。

當 WebPageTest 幫你跑出報告之後，你可以點開「Detail報表」就會看到下圖的瀑布流資料報表，從這個報表中可以找出「最耗費你網頁資源的檔案」是哪些，行銷人（非技術人員）可以從報告中的副檔名辨識出拖累網站效能的是圖片還是程式檔案（jpg/png 是圖片的檔案格式，js/css 則是程式檔案），若是特定程式檔案花費太多效能的話，可以找技術人員討論該如何優化，若是圖片檔案拖累效能的話，則可以將圖片透過 Photoshop 進行壓縮或圖片壓縮工具，調整圖片後再重新上傳圖片。

大多的時候我們其實都可以用 Google的Page Speed Insight 來解決問題。若感受到網站速度很慢，但透過 Page Speed Insight 來檢測卻檢測不出問題時，就可以改用 WebPageTest 來交叉分析，找出是網頁上的那些檔案在拖累網站的速度。

網站速度優化有哪些項目？要怎麼做？

上面我們看完了網站速度測試工具，現在來談，那麼工具跑出數據之後，要怎麼著手優化網站速度呢？網站速度優化的項目與要顧的事情非常多，在你開始優化之前，我希望你先注意幾件事情：

#1 有技術人員協助：網站速度有很多優化項目都是需要技術人員協助的，請先確保你身旁邊有願意陪你討論、規劃、執行的技術人員提供協助。

以我來說，我的本質以及專長仍然是在「行銷人」，通常在速度優化上還是要倚賴網頁技術人員的協助以及支援，這都是很正常的。

#2 如果你是使用架站平台：如果你是使用電商平台，那你很可能沒辦法優化網站速度，若你感到網站速度太慢且已經影響了 SEO、轉換率、跳出率等多項商業表現，最直接的解決方案還是跟平台的廠商聯繫並請他們協助，但若廠商沒辦法協助，那很遺憾，若希望速度更好，可能要考慮更換一個平台。

#3 如果你是使用架站系統：如果你是使用開源架站系統（像是 Wordpress），那麼你如何使用架站系統很可能會影響你的網站速度（像是你使用的主題、插件、功能…等），在優化時最好有很熟悉系統的人從旁協助。如果是像 Wordpress 這種很流行的系統，網路上的文章跟資源也很多，也可以一邊爬文一邊自己優化。

那麼，我們再來就要開始介紹網站速度優化上常見的項目，主要會以 Google Page Speed Insight 會條列出來的優化項目為主，這些也是 Google 官方建議我們優化的項目。至於你的網站是否需要優化這些項目，可以跑一次 Google Page Speed 速度檢測工具，就會條列出來：

▍使用合適的圖片大小

圖片的大小太大、解析度太高、品質太高是我們在速度優化上最為普遍的項目，很多人在上傳圖片（不論是商品圖片還是文章圖片）時都沒有特別壓縮的習慣，事實上就算你上傳的圖片解析度為 4,000 x 4,000 還是 800 x 800，你的使用者實際看到的圖很可能根本是沒有太多差別的，但 4,000 x 4,000 與 800 x 800 的圖片容量大小可能可以差到數倍以上。

通常我會建議你找到一個「解析度不會失真的最低限度」為多少，並以此為標準即可，以我的文章來說，我也是從 400 x 400、 500 x 500、 600 x 600 來逐一嘗試，最後我選擇圖片盡可能最大不要超過 600，寬度 600 在我的網頁上是清晰且容量不會太大的大小。你可以透過 Photoshop 調整圖片的品質、解析度、大小，也可以使用 Google 官方的免費圖片壓縮工具『Squoosh』來壓縮自己的圖片。

上述的情況是「如果你的網頁是你可以自己上傳圖片」的前提，你可以用 Photoshop 或是用壓縮工具先將圖片壓縮到一定尺寸大小再上傳。

但如果你是電商網站，可能就會遇到下圖的情況：很多電商網站的商品列表頁（下圖左側）以及商品詳細頁（下圖右側）是使用同樣一張商品詳細頁的圖片，使用者看起來大小不同，是因為網頁上的 CSS 將圖片在網頁上進行大小的縮放調整（下圖僅是示意圖，ebay 其實是有做好圖片的壓縮，如果想看一下壓縮後的樣子也可參考 ebay 的商品列表頁）。

以網頁介面舉例來說，你的商品列表頁的圖片區塊為 400 x 400 解析度的小圖，而商品詳細頁的圖片為了讓消費者可以看得清楚，是使用較大張的 800 x 800。

你的商品列表頁在網頁介面上其實只要 400 x 400 尺寸的圖片即可，這時如果你將商品列表頁的圖片壓縮到 400 x 400，檔案容量可以控制到一定的大小以內，但很多網頁在運作上是「商品列表頁的圖是直接抓取商品詳細頁的圖」，就會導致商品列表頁的載入了解析度較高、容量較大的圖片，尤其商品列表頁通常會有大量的圖片，如果每一張圖的大小都是載入太大解析度的圖，這會讓整體速度表現很差。

如何確定你的網頁是否有這樣的情況呢？你可以透過我的文章中介紹到的分析工具來檢測，或是透過下圖的方式，在你的商品列表頁的圖片上按右鍵來開啟圖片，看圖片是否太大張。

這個問題的最佳解決方案，其實是透過「圖片壓縮套件」來解決，當我們把圖片上傳時，我們網站會在後台壓縮好幾張不同尺寸大小的圖片，根據網站的需求來使用，舉例來說，網站側欄的板位較小，只需要 200 x 200、商品列表頁只需要 400 x 400，就讓壓縮程式來壓縮出不同尺寸的圖片。不論是 Wordpress 還是自架網站都有類似的套件可以使用，但網站若要安裝此類的套件，同樣也是需要技術人員提供協助才能做。

▍移除未使用的 JavaScript / 移除未使用的 CSS

這個項目是屬於需要技術人員協助做修正/檢查的項目。

JavaScript 以及 CSS 都是網頁上的程式檔案，如果 Google Page Speed Insight 針對你的網站跑出這項建議，代表工具偵測你的網頁上有些程式檔案是沒有使用到的，這些程式檔案等於既沒有在使用、但使用者的瀏覽器卻需要去載入這些程式檔，理所當然的網站速度就會被拖累。若看到這個項目還請跟技術人員確認一下，是否這些確實是用不到且可以移除掉的程式檔案。

▍排除禁止轉譯的資源

這同樣是需要技術人員提供協助的優化項目，白話一點來說，就是網頁上有 JavaScript/CSS 干擾到了首次畫面的繪製，實務上我們會建議延遲較不重要的JavaScript/CSS 的執行時間。

「排除禁止轉譯的資源」以及「移除未使用的 JavaScript / 移除未使用的 CSS」都算是對程式檔案的清整以及大掃除。

▍啟用 gzip 或類似的壓縮技術

這是 Google 官方推薦的優化項目之一，透過 gzip 壓縮技術我們可以有效的壓縮網站上的檔案大小（包括HTML、CSS、JavaScript），進而優化網站速度，也同樣需要技術人員提供協助來幫你安裝 gzip。

▍Reduce initial server response time（降低主機回應時間）

如果你的速度檢測報告顯示出這個項目 Reduce initial server response time，代表你的主機回應時間太慢，這時會需要重新清整主機的環境、或升級主機的環境/硬體。

▍提供 next-gen 格式的圖片

Next-gen 其實指的是新世代（Next Generation）的意思，過去我們使用的圖片格式大多為 JPG 以及 PNG 居多，但 Google 現在特別提倡使用新世代的 JPEG 2000、JPEG XR 、WebP 這些圖片格式，因為這些格式的圖片檔案容量更小、圖片失真不嚴重、對於整體速度體驗更好。但由於目前並不是所有的瀏覽器都支援這些格式，所以這些格式還尚未普及，目前 Google 也還沒有強制要大家採用這樣的格式，僅是在一個推廣的階段。

以我的網站來說，我是使用 WebP 的圖片格式，並且透過判斷式來進行優化（當使用者的瀏覽器支援時，網站就會提供 WebP 圖片，若遇到使用者的瀏覽器不支援 WebP 時，我的網站就會改為提供 PNG 圖片），由於大多版本的 Chrome 還是支援 WebP 的，所以我最近決定採用了這個圖片格式，在更換到 WebP 之後，平均我的每一張圖片的大小縮小了60~70%左右。

關於速度優化，稍微總結一下

Google 判斷網站排名的訊號有很多，即便我們把 Google Page Speed 做到 90 分、確保網站速度的優化工作很確實，但畢竟網站速度只是搜尋引擎演算法中的其中一環，雖然他的訊號強度偏高，但也不要期待只做好網站速度優化，排名就能上升。從網站內容、關鍵字布局、反向連結…等很多訊號都跟排名有關，網站速度只是其中一環。

同時，網站速度優化很多項目都是需要技術人員協助的，像是「排除禁止轉譯的資源」、「排除禁止轉譯的資源移除未使用的 JavaScript / 移除未使用的 CSS」都算是對程式檔案進行清整、整理、優化的工作，如果你是使用較難更動的架站平台、或公司沒有技術人員可以提供協助，那麼就會很難進行下去。

我很常說：行銷人其實應該要常常請技術人員喝咖啡的，因為真的滿多工作需要他們的協助以及支持，這真的是有原因的 : )