前言
對於使用者而言，當你在開啟一個網頁時，如果需要等上一段時間，或是每次在開啟某個網頁時就是比其他網頁來得慢，那麼你是不是下次就會不太願意再來造訪這個網頁了呢。那麼為什麼有些網頁的開啟速度總是比較慢，當然有時候可能跟使用者所處環境的因素導致訊號不佳，但是對於網頁經營者而言，網站若要長久經營，便要考慮使用者的感受。
就好比若有客人到餐廳用餐，店員因為繁忙，過了20分鐘都還未曾招呼客人是否可以入座或是該在哪裡等候，即便餐點很吸引人，客人離開的機率還是會因此提高。以下文章將馬上帶各位仔細了解網頁速度，以及提升網頁速度所使用檢測工具。
什麼是網頁速度
網頁速度，代表網頁內容讀取的速度，是衡量網頁表現的指標之一。一般來說，常見的描述方式有網頁載入時間(page load time)與TTFB(time to first byte)等，網頁載入時間指的是完整讀取網頁並顯示於瀏覽器所花費的時間，而TTFB則是從用戶端送出請求起，到用戶端瀏覽器收到第一個位元組為止所經過的時間。然而，Google等搜尋引擎並沒有明確指出在網頁速度這個因素，各自採用了什麼計算標準。而網頁速度(page speed)與網站速度(site speed)這兩個名詞常讓人混淆，簡而言之，網站速度是對網頁速度做抽樣計算而成的。
網頁速度會影響排名嗎
Google曾在2009年時做過一個內部實驗，結果指出在刻意在造成網站延遲後，使用者的使用程度(日搜尋量)下降了，所以也可從中得知，速度快的網站可以為使中者帶來更好的體驗。所以Google在2010年時宣布將網站速度列為排名因素之一。
而Google在2018年1月在官方部落格發表了”Crawl Budget”這篇文章，文中提到，因為搜尋引擎的效能是有限的，所以在每個網站所能讀取的資料量也是有限的。簡單來說，搜尋引擎每天會花固定的時間、資源抓取各個網站的資料，之後便會離開，所以讓搜尋引擎順利地抓取網站資料是相當重要的。所以提升網頁速度對於使用者體驗以及搜尋引擎抓取網站的資料量是有幫助的。
於Google也曾提及於2018年7月起，網頁速度將成為行動搜尋(手機、平板等)的排名因素之一。而這次名為「Speed Update」的更新，影響較大的是那些最為緩慢的網頁，對於整體的影響並不大，搜尋意圖的查詢仍是網站排名相當重要的一個因素，如果一個網站上有著高度相關且有價值的內容，仍可以獲的不錯的排名。但這並不是說此次的不重要，在行動裝置越來越盛行的當下，人們藉由上班中午吃飯的時間或是上廁所的時間，忙裏偷閒，想說滑個手機休息一下，結果點開一個網站需要耗費幾十秒的時間，對於使用者來說這個感受是相當差的，可能從此再也不點進你的網頁來做瀏覽，進而影響到你的排名。
網站速度優化有哪些項目
使用瀏覽器快取功能：
快取功能可以讓使用者在造訪你的網站時，讓他先將部分的檔案先存取起來，於下次造訪時他就不必重新下載這些檔案，進而提高網站的瀏覽速度、使用者經驗。
進行文字壓縮：
GZIP是一個用於檔案壓縮的軟體應用，利用GZIP進行壓縮可以減少最多90%的檔案大小，其中又以文字壓縮的效果最好。透過這樣的做法可以減少下載資源的時間，縮短第一次使用網頁呈現所需的時間。所有的現代瀏覽器都支援並自動將GZIP用於所有的HTTP請求，因此建議在網路伺服器上正確設定、啟用GZIP壓縮。
上傳的圖檔不要過大：
簡單舉個例子，如果你首頁的圖檔只需要 600 x 600（pixel），但你上傳了 3000 x 3000，雖然用戶在瀏覽器上看到的是600 x 600，但事實上它下載了 3000 x 3000 那麼大的圖檔，也理所當然會拖累網站的速度與用戶體驗。
減低重新導向的次數：
每當從一個網址導向到另一個網址，由於增加了額外的HTTP的請求-回應流程，使用者等待網頁載入的時間也就隨之增加。所以，若是能夠將重導向的使用最小化，網頁表現也會跟著提升。以下舉兩個例子：
www.example.com.tw 使用響應式設計，所以不需要重導向，網頁速度相對較快。www.example.com.tw → m.example.com.tw 相對於上面的例子，行動端用戶在使用時就會花費較多的時間。
縮小JavaScript、CSS、HTML：
我們網頁上的每一隻Javascript、CSS、圖片都會讓使用者需要跟伺服器多發出一次請求，假設你有20隻CSS，瀏覽器就必須跟伺服器互動20次才能拿到全部的檔案，因此過多的CSS與Javascript會導致使用者在與伺服器互動時需要執行較多次的http request，這會大大的影響網站速度，尤其有些網頁工程團隊因為分工的關係，很容易會產生太多隻 CSS/Javascript ，所以必須盡可能地將CSS/Javascript 合併，控制在合理的數量以內。並且通過優化程式碼（包括刪除空格，逗號和其他不必要的字符），可以顯著提高頁面速度。 同時刪除程式碼解釋和未使用的程式碼。
改善伺服器反應時間：
有許多因素可能造成影響，網站的流量、每個頁面所使用的資源、伺服器所使用的軟體或是所使用的伺服器等。為了改善伺服器反應時間，必需知道問題在哪裡，如資料庫查詢速度較慢，網頁流量速度慢或缺少足夠的記憶體並將對其進行改善，好的伺服器反應時間應該低於200ms。
檢測網站的速度的工具
Google PageSpeed為 Google推出的網站速度優化工具，它的好處是操作較容易、提供的資訊也較為單純，你能夠從中快速看到自己網站的問題，給你1–100的評分，並列出建議修改的項目，常見的圖片壓縮、Gzip、伺服器回應時間他都能夠幫你檢測出來，甚至電腦版與行動版的檢測結果都能夠一起查看。
YSlow 提供的資訊比起 Google PageSpeed 還要再更完整一些，為Yahoo推出的瀏覽器插件，如果你在Google PageSpeed上找不到自己網站速度慢的原因、或你希望看到更詳細的資料，你可以使用YSlow來診斷網站速度的狀況。
WebPageTest 為目前速度檢測工具中，資料最為詳細的一種，它會幫你列出網站上每一隻CSS、Javascript、圖片的下載速度，並整理成完整的報告給你，這個工具也是Google官方認可的測試工具，但讀懂WebPageTest 的報表，需要有點網頁技術的基礎，如果你覺得網站速度很慢，WebPageTest 你一定能找到問題在哪、並從中改善網站速度的問題。
結語
看完以上的介紹，是不是對於網頁速度有更深的認識了呢，雖然不一定會在執行以上的作法後，會有顯著的網頁排名提升，但對於使用者以及搜尋引擎而言，使用者喜歡並且有價值的網站就是應該要推廣的網站。
想了解更多相關知識的話，可以到快樂學程式的Udemy這裡逛逛，豐富的程式課程會讓你在前往工程師的路上。
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
