越來越重要的SEO優化項目：『網站速度』優化
如果你有長期看我的部落格文章，應該會知道我強調很多次，Google 非常的重視用戶體驗，只以用戶為最優先考量、重視用戶體驗的網站主，才能夠真的理解 SEO該怎麼做，而『網站速度』自然在網站優化上是一個很重要的項目，對於SEO以及網站的體驗都有很大的影響。尤其自從Google發布了網頁體驗訊號（Page Experience）之後，網站速度顯然只會越來越重要，我想我應該要特別更新一下速度優化的文章，來提供更多的觀點以及分享。
這篇文章我會完整分享『網站速度』對於網站的影響，以及你該怎麼做。
先談『網站速度』究竟會怎麼影響你的網站
通常我在承接顧問專案時，『網站速度』會是我們評估『網站健康程度』的重要指標之一，因為速度是一個非常綜觀的指標，他影響的層面非常多，我們也先來初步了解一下，究竟對於『網站速度優化』這件事過於怠慢的話，影響層面有哪些：
- 直接性影響你的網站 SEO排名
Google 在 2010 年時就發過官方聲明 ，網站的速度、效能將正式影響搜尋排名， Google 在評估一個網站是否值得得到好的排序時，網站速度已被列入為排名因素。
不過 Google 的所謂的『排名訊號』是有分強度的，每一個優化項目的『排名訊號』強度都不同，簡單來說，Google 在判斷你的網站是否值得被排序到搜尋結果頁的前面時，有著非常複雜的演算法並且參考了非常多的訊號，這些訊號有強弱之分，若我們針對訊號強度較高的項目進行優化的話，你在 SEO 的成效上會較容易看到成效，反之若是訊號強度較弱的排名訊號，則是優化了也未必會看到成效。
舉例來說，網站整體的內容是否夠豐富、夠優質就是屬於高強度訊號。你網頁的網址裡面有沒有提到關鍵字，就是屬於極度低強度的訊號，通常網址裡面沒有塞關鍵字，也能得到好的排序。
那麼我們這篇文章正在談的『網站速度』是屬於多高強度的排名訊號呢？如果我們優化了網站速度，對於 SEO 的成效有多大的影響呢？
答案是：『網站速度』屬於中至高強度的訊號，而且訊號強度只會被設定的越來越強。
多年前，Google 剛開始宣布『網站速度』會影響排名的年代，當時在很多專案上，我們優化網站速度後，都未必會觀察到網站的排名、SEO 表現、SEO 流量會提升，還是要依靠反向連結、內容、On-Page 的調整，才會看到顯著的成效。但這兩年在優化的實務經驗以及數據觀察之下，我開始發現『網站速度』的訊號強度越來越高，優化後的效果大多都很顯著，同時，Google 在 2018 年時有公開聲明『網站速度』的訊號強度會提高到影響手機排名，2020 年時又宣布了 Page Experience（網頁體驗訊號）這個與網站速度有關聯性的排名訊號，我只能說，結論很顯而易見：
這兩年 Google 越來越重視『網站速度』，他對 SEO 的影響是逐年在提升，明年、後年、大後年也肯定會越來越重要，是現在做 SEO 一定會優化的超級重要項目之一。
- 除了排名，還會影響Google的爬取額度（Crawl Budget）
先前我在這篇索引的文章談論過，Google 有所謂的爬取額度（Crawl Budget），如果你的網站速度太慢，會影響爬蟲來爬你網頁的健康程度，如果速度慢到爬蟲爬不動你的網頁、或爬起來的效率很差，那整體 SEO 的成效也會不好。
從『排名訊號』的角度以及從 SEO 技術優化的『爬取』角度來看，網站速度都是至關重要的。
- 影響使用者體驗以及轉換率
根據 Google 的研究報告指出，網站速度對於跳出率的影響是非常顯著的，你的網站載入速度若是 1~3 秒以內，客戶跳出離站的可能性會增加 32%，但只要慢到 5 秒，客戶跳出網頁的可能性就會增加到 90%（其實這是非常驚人的數據），客戶跳出率高，那麼當然就會影響你的轉換率、訂單成交率等各項商業表現數據。
一個重要的觀念：對於網站速度，千萬不要自我感覺良好
網站速度的優化影響的層面很多，從跳出率、使用者體驗、影響爬蟲的爬取效能、甚至影響 SEO 的排名。因此網站速度優化，是一個對整體網站都非常有幫助的優化工作。
在優化時我們不能用公司、家裡的電腦來＂體感＂網站的速度有多快，我們的用戶可能位於網路環境較差的地方、或是他的手機正連上某個速度較差的 wifi 網路。同時，＂你感覺網站速度很快＂並不代表 Google 認同你的網站速度很快，若今天我們是要為了 SEO 而優化網站速度，最終目的還是＂Google 是否評斷你的網站速度良好＂，因此不論是為了用戶還是為了 SEO 而去優化速度，我建議還是避免用自己體感的方式來判斷網站速度是否良好，而是應該要使用一些網站速度分析工具來做分析以及檢測：
- 推薦工具1：Google Page Speed Insight
Google Page Speed Insight 是 Google 官方所開發的工具，如果你希望了解＂ Google 如何看待你網站的速度＂，用 Google 的工具就可以達到目的，Google 開發的這套 Page Speed Insight 算是操作起來比較容易上手，介面也不會太複雜的工具之一，故一開始做速度優化時，我都推薦先以 Google 的工具為主。
使用上只要點開Google Page Speed Insight 的工具，在工具上方輸入網址，工具就會給予你的網站一個1~100的分數，除了分數之外，你可以在下圖底部的地方看到 First Input Delay（FID）、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）等三個指標，這三個指標是 Page Experience（網頁體驗訊號）的三大重要指標（若還不知道FID、LCP、CLS這些指標是甚麼的話，建議你先閱讀網頁體驗訊號這篇文章，再回頭來閱讀網站速度優化的文章），這三個指標也是你 1~ 100分能得到多少分數的重要依據（也請特別注意，行動版的網站速度表現以及電腦版的網站速度表現是分開的，有可能你的電腦版網頁速度很快，但手機版卻有許多優化空間）。
值得一提的是，Google Page Speed Insigt 這套工具有一個其他工具無法取代的地方，那就是＂Chrome用戶體驗報告＂，FID、LCP、CLS 等指標都有一個綠橙紅所構成的長條圖，這個長條圖所顯示的是真實的、真正有造訪過你網頁的使用者們所產生的資料，以下圖來說，有 62% 的使用者在 LCP 上體驗良好、24% 有待改善、15% 為不良。
再把檢測報告往下捲動，我們會看到許多的速度優化項目，這邊是 Google 的工具提出的速度優化建議，直接建議你該如何進行優化（這些項目我們會在文章的後段來進行說明），實務上我們會根據報告檢測出來的問題，與網站的 PM、網頁技術人員來討論該如何改善這些項目。
- 推薦工具2：WebPage Test
WebPageTest 雖然不是 Google 所開發的工具，但仍是 Google 官方推薦的可用工具之一，打開工具後，同樣只要輸入網址就可以開始做測試，WebPageTest 比較不同的是，你可以選擇速度測試的國家以及瀏覽器，如果你是國際品牌，網站的目標族群來自於各種不同的國家地區，則可以用此工具來檢測不同的地區造訪你網站時的速度表現。
當 WebPageTest 幫你跑出報告之後，你可以點開＂Detail報表＂ 就會看到下圖的瀑布流資料報表，我們可以從這個報表中找出最耗費你網頁資源的檔案是哪些，行銷人（非技術人員）可以從報告中的副檔名辨識出拖累網站效能的是圖片還是程式檔案，jpg/png 是圖片的檔案格式，js/css 則是程式檔案，若是特定程式檔案花費太多效能的話可以找技術人員討論該如何優化，若是圖片檔案拖累效能的話，則可以將圖片透過 Photoshop 進行壓縮或圖片壓縮工具，調整圖片後再重新上傳圖片。
大多的時候我們其實都可以用 Google的Page Speed Insight 來解決問題。若感受到網站速度很慢，但透過 Page Speed Insight 來檢測卻檢測不出問題時，就可以改用 WebPageTest 來交叉分析，找出是網頁上的那些檔案在拖累網站的速度。
- 推薦工具3：Google Analytics的網頁操作時間報表
實務上我們要優化的網頁很多，因此會把每一個網頁的版型都用速度檢測工具來檢測一遍並進行優化（比方說：以電商網站來說至少會有三個重要版型，包括『首頁』、『商品列表頁』、『商品詳細頁』），但實務上如果你的網頁數量太多，不知道該從哪些網頁開始優化，你可以打開 Google Analytics 的『網頁操作時間』報表，這張報表會呈現出哪些網頁速度最慢，你可以先找出最多使用者瀏覽、但網站速度較慢的網頁，優先對這些網頁進行優化。
網站速度優化有哪些項目？要怎麼做？
上面我們看完了工具，現在來談，那麼工具跑出數據之後，要怎麼著手優化網站速度呢？網站速度優化的項目與要顧的事情非常多，在你開始優化之前，我希望你先注意幾件事情：
#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』都算是對程式檔案進行清整、整理、優化的工作，如果你是使用較難更動的架站平台、或公司沒有技術人員可以提供協助，那麼就會很難進行下去。
我很常說：行銷人其實應該要常常請技術人員喝咖啡的，因為真的滿多工作需要他們的協助以及支持，這真的是有原因的 : )
