網頁速度是影響 SEO 的許多因素中，很重要的一個項目。因為網站的速度所影響的層面，不僅僅是 SEO 排名、曝光的機會，也包含了使用者體驗。若網站速度過慢，容易造成使用者因等待太久，關閉網站，而錯失更多商業目標達成的可能。因此不論是對於電商、內容型或其他類型的網站，速度優化都是相當重要的一環。今天就帶大家認識網站速度對於 SEO 的影響，並瞭解 Google Page Speed Insights 以及如何進行網站速度優化。
網站速度與SEO的關係
搜尋引擎是透過機器人 (爬蟲程式)，造訪世界各地的網頁，將網頁採集回去，並「收錄」在搜尋引擎中，提供人們查閱。我們可以將搜尋引擎，理解成像是一座圖書館，而網頁則像是書本，書本必須被圖書館索引編目，出現在「書架」上，才能被瀏覽圖書館的人查詢找到。因此，讓網頁能順利地被機器人爬取，被搜尋引擎「採集」到，順利的出現在「書架」上，才會能替網站帶來曝光和排名。而在談網站速度以及 SEO 的關係，必須先認識爬取預算(crawl budget)這個重要的概念。
什麼是爬取預算(crawl budget)？
用比較平易、口語的解釋就是，機器人爬取網頁時，在網站上停留的時間是有扣打 (quota) 的，而不是無上限地停留在同一個網站，將特定網站的頁面一次爬取完畢。
為什麼機器人不將網站的所有頁面一次爬取完畢呢？一切都是為了愛！對於大型網站來說，例如大型電商網站，有類型眾多、數量龐大的商品項目，或是大型論壇，有大量使用者發佈生成的頁面，頁面數量能多至數十萬、甚至數百萬，如果在短時間內對於網站主機發出大量的網頁檔案請求，會造成主機負擔。
許多網站為了避免機器人對網站發出大量請求對主機造成負擔，也會限制機器人的抓取頻率，甚至封鎖特定 IP 位置所發出的造訪請求。所以機器人造訪網站、停留抓取的時間是有限的。
網站速度與SEO之間的關係
如果能提高網站的反應速度，除了讓使用者感到順暢的體驗，也能提高機器人抓取頁面的速度，換句話說，如何讓爬蟲在「有限的時間內，抓到更多的內容」，是 SEO 在速度優化上的重要議題。如果能愈短時間內抓取愈多頁面，就能讓你的頁面更快速得出現在搜尋結果頁這個「書架」上！尤其是新聞媒體類型的網站，由於新聞本身有時效性，若新聞媒體型網站能在更短的時間被搜尋引擎收錄，對於競爭同一則新聞的搜尋流量會更加有利。反之若收錄的速度慢，則會錯失許多在書架上曝光機會。
補充：除了網站本身的速度外，提交網站地圖 (sitemap) 也能為機器人爬取網站時，節省許多工作流程，幫助頁面內容更快速被搜尋引擎收錄，關於提交網站地圖的操作可參閱sitemap.xml網站地圖是什麼？從工具/產生器/程式製作到進行提交教學一文
透過Google Page Speed Insights找出網站問題
Page Speed Insights 是最常用的網站測速工具之一，以下簡稱為 PSI。PSI 將 Google Chrome 的網頁速度分析擴充套件「Lighthouse」的數據整合進來，解決了過去 PSI 與 Lighthouse 數據不一致的問題。
第五版本 PSI 的最大特色，不只著重於 TTFB (time to first byte)，而是針對使用者體驗，增設了以往所沒有的指標，來衡量網站的表現及性能。其中以 FCP (首次顯示內容所需時間) 以及 FID (首次輸入延遲) 是衡量網站使用者體驗最大的兩項指標。
首次顯示內容所需時間 (FCP)
瀏覽器渲染 (render) 出第一個顯示內容所需的時間，也可以解釋成「使用者看見第一個內容所需的時間」。
示意圖如下：
圖片出處：https://gtmetrix.com/blog/first-contentful-paint-explained/
許多網站測速工具，著重在後端主機回傳資料所需的時間 (TTFB)，然而 Google 認為，前端瀏覽器加載、渲染的這段期間，使用者其實也仍在等待，有許多時刻會影響用戶體驗，或是速度快慢的直接感受。FCP 是使用者能看見渲染內容的實際時間，所以這項衡量指標的優化重點，不像以往僅止於後端主機回應的速度、檔案傳輸的時間，也包含了前端瀏覽器載入 CSS、Javascript、渲染，一直到使用者看見網頁呈現內容的這段時間。
首次輸入延遲 (FID)
從瀏覽器開始渲染，一直到能「即時反饋」跟用戶互動行為的延遲時間。Google 官方文件對於 FID 的說明指出，FID 直接表示使用者的痛苦指數，FID 是使用者必須等待瀏覽器反饋聆聽事件所需的延遲時間。當等待時間越長，使用者經常會感到不耐煩並離開網站。下圖是典型的頁面載入的流程圖：
圖中紅色的 FID 所代表的是瀏覽器忙碌時，網頁無法即時正常互動的狀況。輸入延遲的原因，通常是因為瀏覽器的主線程 (main thread) 壅塞，忙於執行其他操作，例如主線程正在解析、渲染大型的 JavaScript 腳本，而沒有執行任何聆聽事件，造成用戶與網頁雖有實際互動的行為，瀏覽器卻無法即時反饋的狀況。使用者必須等到主線程忙完，瀏覽器才能立即性的反饋用戶的聆聽事件，與使用者產生順暢的互動。
(補充：為鼓勵提升網頁速度 UX，Google 為此開發了追蹤FID的Javascript函式庫，提供大家免費使用！而追蹤到的 FID 事件，也能使用追蹤碼傳送到 Google Analytics 來方便大家檢視和分析！)
從上述說明我們可以瞭解，此次 Google 第五版 PSI 的檢測，UX 優化重點除了過去後端主機速度的優化，前端瀏覽器渲染速度、能快速與用戶互動也成為了檢測的重要項目，接下來就來介紹優化網頁速度 UX 的常見方法。
如何優化網頁速度？六大網頁速度優化要點
1. 優化 FCP/FID
・將重要功能優先嵌入、減少 CSS、JS 檔案數量
為了避免過多的 CSS、Javascript 腳本阻塞瀏覽器渲染的過程，可以將優先呈現的內容，內嵌至 HTML 內，重要性較高、優先呈現通常會是視覺版型、文字、互動功能，可以於檔案 <head> 中，所有優先級 CSS 檔案都將使用 <style> 標記，所有優先級 JS 檔案都將使用 <script> 標記。
除了將重要的視覺版面、互動事件優先嵌入外，對於重要性較低的 Javascript 腳本，使用 async 或 defer 屬性。async 或 defer 屬性能讓同一個頁面中的腳本非同步載入，在頁面解析完後才執行重要性較低的腳本，避免瀏覽器解析時主線程的壅塞。
(補充：關於非同步載入的使用，可以參考 W3Sschool 的 async屬性，以及 defer屬性的用法說明)
除了利用 HTML 屬性來優化載入的優先順序外，使用者加載的檔案應精簡。盡可能只加載UI所需的視覺、互動功能的相關事件，避免使用者加載、渲染他們不需要的 Javascript 腳本。
・使用 HTTP/2 通訊協定
從上面所述我們已了解「瀏覽器渲染的延遲，主要是伺服器回應 (response) 用戶時，載入的主線程 (main thread) 壅塞所導致」。HTTP/2 最大特色在於，能夠為使用者的單一個請求 (request)，發出多個回應 (response)。
圖片出處：https://medium.baqend.com/hosting-lessons-learned-6010992eb257
從上圖我們可以看到，使用 HTTP/2，能讓載入網站所需的資源，在同一時間內、同步並行載入，大幅縮短用戶等待的延遲時間，加快網頁速度！HTTP/2 的另一項特色優點，是使用 HPACK 壓縮格式，壓縮請求和回應的 metadata，大幅減少 header 的資料傳輸量，來提高網站速度！HTTP/2 的設定及安裝步驟，可參考你的網站升級到 HTTP/2 了嗎？
此外，若你的網站主機不支援 HTTP/2，可使用 CloudFlare 這類的 CDN 服務，只需修改 DNS 指向 CDN 的主機位置，就能透過 CDN 與用戶進行 HTTP/2 的傳輸！
(關於 CDN 的介紹，可參閱 How to Get CDNs to Play Nice with SEO 這篇文章)
2. 利用瀏覽器快取(cache)
加快頁面載入的時間，除了上述 HTTP/2 同步載入的作法外，使用瀏覽器快取 (cache) 會是一個更簡易有效的方法。在 HTTP Header 中，設定暫存資源的使用期限，暫存的資源通常包含重要的 HTML、CSS、Javascript、圖片等。
讓曾經造訪過網站的使用者，可從用戶自己的磁碟載入先前下載過的資源，這樣就不需要再透過網路重新下載一次，有效的替用戶減少等待載入的時間！設置快取的常見方法如下，以 Apache 的主機為例，我們可以在 .htaccess 檔案裡使用下列範例語法，來設置各項資源暫存的使用期限。
#暫存資源的預設使用期限為1個月 ExpiresActive On ExpiresDefault "access plus 1 months" #針對html格式的文字檔，有效期限為兩週 ExpiresByType text/html "access 2 weeks" #針對不同格式的圖片，設置不同的有效期限 ExpiresByType image/jpg "access 2 months" ExpiresByType image/png "access 2 months" ExpiresByType image/ico "access 6 months" #針對CSS格式的文字檔，有效期限為一個月 ExpiresByType text/css "access 1 months" #JS格式的文字檔有效期限為兩個月 ExpiresByType text/js "access 2 months"
而IIS的主機，我們能從web.config檔案，<system.webServer>的區塊中，使用下列範例語法來設置快取。
<!--網站靜態資源有3週的暫存時間--> <staticContent> <clientCache cacheControlMaxAge ="30.00:00:00" cacheControlMode="UseMaxAge" /> </staticContent>
3. 優化圖片加快網頁速度
完成上述的快取項目後，就能大量減少用戶重新載入網頁檔案的次數。而頁面載入的檔案當中，所佔空間最大的就是圖片。特別是對於婚紗業者、商業攝影工作者，由於攝影的專業取向，影像檔案會比其他產業的大上許多，藉由優化圖片大量地減少主機傳輸的資料量，也是加快網頁載入最簡單、效果顯著的方法！談到壓縮圖片、影像處理的工具，Photoshop 無疑是功能強大又普及的付費工具，除了強大的 Photoshop 外，這裡也為讀者推薦其他免費好用的工具。
．Caesium 圖片壓縮器
Caesium 圖片壓縮器，可以單次批量壓縮多張圖片，達到圖片最佳化，操作步驟簡單直覺，同時也有調整圖片大小、轉換格式等功能，能有效地幫使用者節省下許多操作的步驟和時間！
．TinyPNG / TinyJPG
如果不想下載或是安裝軟體，也可以使用免費的線上圖片壓縮工具，來進行壓縮優化圖片，TinyPNG 和 TinyJPG，是常見方便的簡易線上工具。大家可以依照圖片格式 png、jpg 來選擇自己要使用 TinyPNG 或 TinyJPG。它們同樣可以單次批量壓縮多張圖片，一次最多能上傳 20 張圖片，圖片檔案大小容許在 5 MB 內，適合需求較簡易的用戶們。
4. 為大型檔案啟用 Gzip 壓縮
大型網站常會有許多大型的 JavaScript、HTML、CSS 檔案，需要更長的時間才能從主機傳輸到瀏覽器，啟用 Gzip 壓縮後，能有效地加快檔案傳輸效率，以下為 Apache 主機的 Gzip 語法範例，只需將下列語法添加到 .htaccess 檔案中就可以囉！
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>
5. 精簡不必要的原始碼
許多網站的檔案經常伴隨著多餘的原始碼，增加了檔案的傳輸量，常見的原因如下：
．共用網頁版型
為了增加網站開發的效率，以及便於維護管理，許多不同的網頁會共用頁面版型，因此會發生，頁面雖然帶有原始碼，但部分原始碼卻沒有實際上功能的情況，若能去除用不到的原始碼，或是將網頁版型做更細的分類，就能有效減少檔案的傳輸量！
．關閉不必要的外掛
許多網站常會採用 WordPress 或是 Joomla 這類的 CMS (內容管理系統)，除了方便編輯內容、管理維護、節省開發成本等優點，擁有大量的功能擴充外掛支援，也是吸引眾多用戶的主因。然而這種類型的 CMS 網站，常會有掛載過多外掛，導致拖慢網站效能的情形，將用不到的外掛關閉、換成新外掛，可以達到精簡原始碼，優化網站速度。
6. 主機回應的理想時間
以上就是加快主機回應速度的方法，除了上述的常見方法外，牽涉的主機回應速度的因素事實上還非常多，常見的原因也包含 (不限於) 後端程式碼的邏輯程序、資料庫指令的效能，甚至是主機硬體等等。Google 官方表示：主機回應的速度，最好在 200ms (毫秒) 之內，而這 200ms，正好也是大部分人類大腦的反應時間。
圖片出處：https://www.pubnub.com/blog/how-fast-is-realtime-human-perception-and-technology/
優化網站速度，提供更好的使用者體驗
速度優化所帶來的效益，不僅僅能讓網頁用更短的時間在搜尋引擎曝光，改善 SEO 排名表現，也同時對搜尋引擎的爬蟲更加友善 (機器人的使用者體驗)，並且提升 UX(人類的使用者體驗)！優化使用者體驗，也能將回應速度 200ms 視為一項達成的理想目標，為使用者們打造更棒的網路世界！
延伸閱讀：做 SEO你絕對不可以忽略的【網站速度優化】，關於速度優化的三兩事
