網站速度優化，從Google Page Speed Insights開始 - awoo 阿 ...

本文介紹網站速度對於SEO的影響，並瞭解Google Page Speed Insights，以及如何進行網站速度優化。

... 從工具/產生器/程式製作到進行提交教學一文 ... Skiptocontent網站速度優化，從GooglePageSpeedInsights開始 本森 2019-05-14 網頁速度是影響SEO的許多因素中，很重要的一個項目。

因為網站的速度所影響的層面，不僅僅是SEO排名、曝光的機會，也包含了使用者體驗。

若網站速度過慢，容易造成使用者因等待太久，關閉網站，而錯失更多商業目標達成的可能。

因此不論是對於電商、內容型或其他類型的網站，速度優化都是相當重要的一環。

今天就帶大家認識網站速度對於SEO的影響，並瞭解GooglePageSpeedInsights以及如何進行網站速度優化。

目錄 網站速度與SEO的關係什麼是爬取預算(crawlbudget)？網站速度與SEO之間的關係透過GooglePageSpeedInsights找出網站問題首次顯示內容所需時間(FCP)首次輸入延遲(FID)如何優化網頁速度？六大網頁速度優化要點1.優化FCP/FID・將重要功能優先嵌入、減少CSS、JS檔案數量・使用HTTP/2通訊協定2.利用瀏覽器快取(cache)3.優化圖片加快網頁速度．Caesium圖片壓縮器．TinyPNG /TinyJPG4.為大型檔案啟用Gzip壓縮5.精簡不必要的原始碼．共用網頁版型．關閉不必要的外掛6.主機回應的理想時間優化網站速度，提供更好的使用者體驗網站速度與SEO的關係搜尋引擎是透過機器人(爬蟲程式)，造訪世界各地的網頁，將網頁採集回去，並「收錄」在搜尋引擎中，提供人們查閱。

我們可以將搜尋引擎，理解成像是一座圖書館，而網頁則像是書本，書本必須被圖書館索引編目，出現在「書架」上，才能被瀏覽圖書館的人查詢找到。

因此，讓網頁能順利地被機器人爬取，被搜尋引擎「採集」到，順利的出現在「書架」上，才會能替網站帶來曝光和排名。

而在談網站速度以及SEO的關係，必須先認識爬取預算(crawlbudget)這個重要的概念。

什麼是爬取預算(crawlbudget)？用比較平易、口語的解釋就是，機器人爬取網頁時，在網站上停留的時間是有扣打(quota)的，而不是無上限地停留在同一個網站，將特定網站的頁面一次爬取完畢。

為什麼機器人不將網站的所有頁面一次爬取完畢呢？一切都是為了愛！對於大型網站來說，例如大型電商網站，有類型眾多、數量龐大的商品項目，或是大型論壇，有大量使用者發佈生成的頁面，頁面數量能多至數十萬、甚至數百萬，如果在短時間內對於網站主機發出大量的網頁檔案請求，會造成主機負擔。

許多網站為了避免機器人對網站發出大量請求對主機造成負擔，也會限制機器人的抓取頻率，甚至封鎖特定IP位置所發出的造訪請求。

所以機器人造訪網站、停留抓取的時間是有限的。

網站速度與SEO之間的關係如果能提高網站的反應速度，除了讓使用者感到順暢的體驗，也能提高機器人抓取頁面的速度，換句話說，如何讓爬蟲在「有限的時間內，抓到更多的內容」，是SEO在速度優化上的重要議題。

如果能愈短時間內抓取愈多頁面，就能讓你的頁面更快速得出現在搜尋結果頁這個「書架」上！尤其是新聞媒體類型的網站，由於新聞本身有時效性，若新聞媒體型網站能在更短的時間被搜尋引擎收錄，對於競爭同一則新聞的搜尋流量會更加有利。

反之若收錄的速度慢，則會錯失許多在書架上曝光機會。

補充：除了網站本身的速度外，提交網站地圖(sitemap)也能為機器人爬取網站時，節省許多工作流程，幫助頁面內容更快速被搜尋引擎收錄，關於提交網站地圖的操作可參閱sitemap.xml網站地圖是什麼？從工具/產生器/程式製作到進行提交教學一文透過GooglePageSpeedInsights找出網站問題PageSpeedInsights是最常用的網站測速工具之一，以下簡稱為PSI。

PSI將GoogleChrome的網頁速度分析擴充套件「Lighthouse」的數據整合進來，解決了過去PSI與Lighthouse數據不一致的問題。

第五版本PSI的最大特色，不只著重於TTFB(timetofirstbyte)，而是針對使用者體驗，增設了以往所沒有的指標，來衡量網站的表現及性能。

其中以FCP(首次顯示內容所需時間)以及FID(首次輸入延遲)是衡量網站使用者體驗最大的兩項指標。

首次顯示內容所需時間(FCP)瀏覽器渲染(render)出第一個顯示內容所需的時間，也可以解釋成「使用者看見第一個內容所需的時間」。

示意圖如下： 圖片出處：https://gtmetrix.com/blog/first-contentful-paint-explained/許多網站測速工具，著重在後端主機回傳資料所需的時間(TTFB)，然而Google認為，前端瀏覽器加載、渲染的這段期間，使用者其實也仍在等待，有許多時刻會影響用戶體驗，或是速度快慢的直接感受。

FCP是使用者能看見渲染內容的實際時間，所以這項衡量指標的優化重點，不像以往僅止於後端主機回應的速度、檔案傳輸的時間，也包含了前端瀏覽器載入CSS、Javascript、渲染，一直到使用者看見網頁呈現內容的這段時間。

首次輸入延遲(FID)從瀏覽器開始渲染，一直到能「即時反饋」跟用戶互動行為的延遲時間。

Google官方文件對於FID的說明指出，FID直接表示使用者的痛苦指數，FID是使用者必須等待瀏覽器反饋聆聽事件所需的延遲時間。

當等待時間越長，使用者經常會感到不耐煩並離開網站。

下圖是典型的頁面載入的流程圖： 圖中紅色的FID所代表的是瀏覽器忙碌時，網頁無法即時正常互動的狀況。

輸入延遲的原因，通常是因為瀏覽器的主線程(mainthread)壅塞，忙於執行其他操作，例如主線程正在解析、渲染大型的JavaScript腳本，而沒有執行任何聆聽事件，造成用戶與網頁雖有實際互動的行為，瀏覽器卻無法即時反饋的狀況。

使用者必須等到主線程忙完，瀏覽器才能立即性的反饋用戶的聆聽事件，與使用者產生順暢的互動。

(補充：為鼓勵提升網頁速度UX，Google為此開發了追蹤FID的Javascript函式庫，提供大家免費使用！而追蹤到的FID事件，也能使用追蹤碼傳送到GoogleAnalytics來方便大家檢視和分析！) 從上述說明我們可以瞭解，此次Google第五版PSI的檢測，UX優化重點除了過去後端主機速度的優化，前端瀏覽器渲染速度、能快速與用戶互動也成為了檢測的重要項目，接下來就來介紹優化網頁速度UX的常見方法。

如何優化網頁速度？六大網頁速度優化要點1.優化FCP/FID・將重要功能優先嵌入、減少CSS、JS檔案數量為了避免過多的CSS、Javascript腳本阻塞瀏覽器渲染的過程，可以將優先呈現的內容，內嵌至HTML內，重要性較高、優先呈現通常會是視覺版型、文字、互動功能，可以於檔案