網站分析建議工具 - Google PageSpeed Insights

做SEO優化時除了Google 網站管理員工具以外,也可以使用 Google PageSpeed Insights來 獲得一些頁面改善的建議,這樣不但有助於改善網站頁面的速度,同時一樣有利於 SEO:

https://developers.google.com/speed/pagespeed/insights

在輸入框中輸入你要分析的網站之網址後,按 ANALYZE 按鈕即可會得該網址頁面的改善建議。

以下是 Google PageSpeed Insights 的一些建議項目:

o 使用瀏覽器快取功能 (Medium priority)
- 一般瀏覽器對網站頁面中的圖片、外部 CSS 檔案、外部 JavaScript 檔案等都會有快取功能,以在重新載入相同頁面時可以加快速度。
- 對於頁面中的圖片、外部 CSS 檔案、外部 JavaScript 檔案等快取資源的有效期間會被建議設定成距離今天至少一周以上的未來日期做為這些資源的到期日。

o 快取驗證資訊
- 靠著快取驗證資訊的指定,例如: Last-Modified 或 ETag header,可以確保快取資源的有效性能被有效率地判定。
- PHP 中使用 Last-Modified 或 ETag header 的方法請見: PHP中如何對輸出的資源檔案使用 Last-Modified 或 ETag

o 將圖片合併到 CSS 合併圖片 (Medium priority)
- 請盡可能將多個小圖片加以合併成一張圖,然後用 CSS 的方式存取之。這樣減少圖片總數可以減少多個圖片時的載入時間。
- 工具:CSS SPRITES GENERATOR 或 CSS 圖片合併產生器。

o 延後剖析 JavaScript (Low priority)
- 初次載入網頁時進行 JavaScript 剖析會延緩頁面載入的速度。延後剖析 JavaScript 可以避免系統無法顯示網頁的情形。
- 如果 JavaScript 的執行不影響頁面架構呈現結果,那可以將 (內嵌/外部) JavaScript 盡量往後擺放,例如:放在 HTML 尾端的 之前。

o 避免首頁有頁面重導的情況 (Low priority)
- 避免首頁有頁面重導的情況可加速訪客載入你網站首頁的時間
- 盡可能地移除首頁頁面重導的情況
- 關於網頁重導技術的介紹請見:轉導、轉向(Redirect)網址的方法。

o 將重新導向次數降到最低
- 減少頁面重新導向次數可以縮短主機和瀏覽器間額外資料往返的時間,進而縮短整體頁面呈現的等待時間。

o 最佳化圖片 (Low priority)
- 可將圖片最佳化,使檔案大小減少,以加快檔案的下載速度。

o 壓縮 JavaScript (Low priority)
- 可以將 JavaScript 壓縮,以加快檔案的下載速度。
- 工具:Google Closure Compiler Service - http://closure-compiler.appspot.com/home

o 壓縮 CSS (Low priority)
- 可以將 CSS 壓縮,以加快檔案的下載速度。
- 工具:http://www.cssdrive.com/index.php/main/csscompressoradvanced/

o 移除靜態資源中的查詢字串 (Low priority)
- 部分 Proxy 快取伺服器不會快取網址中含有“?”的資源,請移除查詢字串,並將資源的網址參數予以編碼。

o 減少要求序列化 (Experimental rules)
- 將序列化的要求改成可以平行載入。

o 刪除不必要的回流 (Experimental rules)
- 一些執行的 JavaScript 造成不必要的回流。如要減少網頁轉譯時間,請修改 JavaScript,這樣就不會造成回流。

o Avoid a character set in the meta tag
- 或許它是建議頁面在 HTTP request 標頭就指定好你的頁面的字集而不是在 HTML 區段時才指定。但是 區段還是應該指定字集以免網頁被存檔重新開啟後會無法知道它的字集為何。

o 優先使用用非同步資源
- 用非同步的 JavaScript 語法去載入資源,以避免那些要載入的資源卡住頁面的載入時間。
- 如何將 JS 改寫成非同步的 JavaScript?請參考這一篇:非同步載入執行JavaScript的寫法

o 內嵌小型 CSS
- 如果 CSS 語法很小的話,可以將此 CSS 區段放在 HTML 頁面中,這樣可以避免要載入額外的 CSS 檔案,以縮短主機和瀏覽器間額外資料往返的時間,進而縮短頁面載入時間。

o 內嵌小型 JavaScript
- 如果 JavaScript 語法很小的話,可以將此 JavaScript 區段放在 HTML 頁面中,這樣可以避免要載入額外的 js 檔案,以縮短主機和瀏覽器間額外資料往返的時間,進而縮短頁面載入時間。

o 啟用壓縮功能
- 可以啟用網頁伺服器的 gzip 或 deflate 功能以壓縮輸出的網頁或資源檔案、減少網路上資料傳輸量。 (瀏覽器和網頁伺服器都要同時都支援此功能,此功能才會能運作)
- 例如:Apache 網頁伺服器上可啟用 deflate 模組、指定壓縮率來實現壓縮功能。
- 如要在 Apache 伺服器中設定啟用壓縮功能,請參考文章:如何設定 Apache 網頁伺服器以壓縮輸出的網頁或資源檔案?

o 在文件標頭中加入 CSS
- 將內嵌的 CSS 或外部 CSS 寫在 區段,以改善頁面的排版呈現效率。

o 壓縮 HTML
- 將頁面的 HTML 輸出結果壓縮 (包含頁面中內嵌的 JavaScript 和 CSS),進而節省資料傳輸量以提升速度。

o 從相同的網址提供資源
- 資源檔案盡量放在同個網址下,這樣縮短主機和瀏覽器間額外資料往返的時間,也可以減少 DNS 的查詢次數。

o 指定 Vary: Accept-Encoding 標頭
- 指示 proxy 伺服器去快取兩種版本的資源:壓縮版和非壓所版
- 這樣可以避免 proxy 伺服器忽略了 區段的 Content-Encoding 屬性。

o 指定圖片尺寸
- 指定圖片的長度和高動可以加速頁面的排版呈現效率。

o 指定字元集
- 盡早為你的 HTML 頁面指定字元集可以讓瀏覽器馬上開始執行 scripts。

o 提供大小經過調整的圖片
- 調整圖片成為要呈現的大小,這樣可以節省不少資料傳輸量和空間。

o 最佳化樣式和指令碼的順序
- 最佳化樣式和指令碼的順序可以讓不同的資源平行地被下載,以加速頁面載入時間。

o 最小化要求大小
- 讓 cookies 和 HTTP header 盡量小,以確保一個封包就可以傳送完這個 HTTP request。

o 避免使用 CSS @import
- 用 CSS @import 會延遲頁面載入的時間。

o 避免使用無效的要求
- 刪除頁面裡已經無效的鏈結,或是那些會產生 HTTP 404/410 錯誤的鏈結。

o 避免使用長期執行的指令碼
- 例如,長期執行的 JavaScript 程式碼。