Google PageSpeed Insights 網站速度測試與性能優化建議

Google PageSpeed Insights 為 Google 提供的網頁線上速度測試工具,使用時它會掃描網站內的「JS、CSS、圖片、HTML」,依據各個檔案的「壓縮、傳輸、轉譯、快取緩存、網址導向」做性能分析與優化建議

分析時會以「行動裝置「與「電腦桌機平台」,提供相關的性能與優化建議報告。而近幾年來行動裝置盛行,平台中也加入了「行動裝置相容性測試」的測試選項,透過測試可以觀察網頁是否適合透過行動裝置瀏覽。

Google PageSpeed Insights 也許不是網頁速度優化時的絕對指標,但藉由 Google PageSpeed Insights 能方便的觀察或學習,網站整體的資源運用與調整。

Google PageSpeed Insights 網站速度測試與性能優化建議_001



相關連結

Google PageSpeed Insights

行動裝置相容性測試



使用方式

Google PageSpeed Insights 網站速度測試

前往「Google PageSpeed Insights」,輸入網址後即可為單一網頁做優化建議分析。分析結果會以顏色與分數做為區分,分析數據中如果有需要改進的問題,會以紅色與橘色字體顯示出報告。

Google PageSpeed Insights 網站速度測試與性能優化建議_101


(* 項端的「here」連結則可幫自己的網站做「行動裝置相容性測試」報告。)



速度與分數的謎思

清除前幾行內容中的禁止轉譯 JavaScript 和 CSS:
我們以分數直接落差有 30分左右的「禁止轉譯內容」為例,一般情形下將禁止轉譯的 JavaScript 和 CSS 移除之後,整體分數會在 75 分以上。這邊做個小試驗,我們用常見的「jquery.min.js」這個檔案來做示例,觀察速度與分數之間的關係。

觀察使用 Blogger 建站的「demo.techcoke.com」這個網址,在未將「jquery.min.js」移除前分數落在「65:86 ( 行動版:電腦版 )」。

Google PageSpeed Insights 網站速度測試與性能優化建議_102



將「jquery.min.js」移除後,分數則在「93:95 ( 行動版:電腦版 )」。

Google PageSpeed Insights 網站速度測試與性能優化建議_103



比較好的做法是,不以移除的方式來部署「jquery.min.js」。而是可以將「jquery.min.js」以「async='async' 非同步載入」的方式,放置在網站上。 Blogger 為例:

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

(* 以「async='async' 非同步載入」的方式部署「jquery.min.js」,不會有「禁止轉譯 JavaScript」情形。)



同理,一般常用的 Google Adsense 廣告函式庫,也可以用下面的方式,加入到網站中。

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>



而實際上「demo.techcoke.com」這個網站,並沒有運用到太多「jquery.min.js」函式庫的情況。也就是說,Google PageSpeed Insights 測試出來的性能優化建議,僅就網頁整體規劃來做考量而評定出分數及建議。

評測出來的分數,優化建議分數,並不是實際的速度分數,因為開啟「demo.techcoke.com」這個網站,兩者的實際體感速度是一樣的。



小結

需要留意的部份是,將「jquery.min.js」以「async='async' 非同步載入」的方式部署在網站上,可能會導致某些不支援「非同步載入」的「javascript」無法啟動。而「adsbygoogle.js」環境比較單純,不會有這方面的問題。



相關文章

Google 出品:小型企業網站 Mobile Friendly 速度測試工具

Google 行動裝置相容性測試,網頁手機瀏覽最佳化測試


留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

Blogger 文章底部自動加入版權宣告