Google官方網頁載入速度檢測工具PageSpeed Insights 使用教程

相信有接觸前端開發的大神們都據說過Google官方的PageSpeed Tools，這個網頁載入速度檢測工具備在線版本也有一個 Chrome 擴展，叫PageSpeed Insights，在此以前，Jeff 瞭解的更可能是雅虎的 Yslow 。不過在Jeff 使用過 PageSpeed Insights 後，感受更加容易上手——由於人家PageSpeed Insights 有中文！下面就介紹一下PageSpeed Insights。

Google官方的PageSpeed Tools的兩個版本

在線版：https://developers.google.com/speed/pagespeed/

Chrome擴展PageSpeed Insights：點擊安裝

Firefox插件PageSpeed Insights：點擊下載

本文主要介紹的是Chrome 擴展。

PageSpeed Insights

PageSpeed Insights 的Chrome擴展是由谷歌官方開發的一款能夠分析頁面載入的各個方面，包括資源、網絡、DOM以及時間線等等信息的插件，安裝之後會附加到 Developer Tools(開發者工具)中。因此安裝以後，你們只須要在頁面上點擊右鍵——審查元素，就能夠在最後一個標籤中看到 PageSpeed 了。

使用方法：點擊 「分析」，稍等一下子就會給出分析結果。

 

PageSpeed的分析基於一個分爲五類的最佳實踐列表：

* 優化緩存——讓你應用的數據和邏輯徹底避免使用網絡

* 減小回應時間——減小一連串請求-響應週期的數量

* 減少請求大小——減小上傳大小

* 減少有效負荷大小——減少響應、下載和緩存頁面的大小

* 優化瀏覽器渲染——改善瀏覽器的頁面佈局

使用過 Yslow 的通常都知道如何照着去分析、優化了。本站DeveWork.com 首頁評分是 94 ，以前Yslow 最高有98；PageSpeed Insights 十分厚道，它會把優化的結果給你展示出來，以下圖的，優化圖片的項目會直接給出該無損壓縮後的圖片供你替換原圖片；連CSS、Js等文 件也都有優化後的文件供參考使用。（谷歌真是業界良心啊）

從實際分析結果看，本站DeveWork.com 的網站性能優化仍是作得不錯的！哈哈！

去谷歌開發者官網看了看，發現PageSpeed 不單單只是個在線工具、插件那麼簡單，還有開發者使用的API，SDK；甚至還有有能夠安裝在Apache 或者 Nginx 服務器上的開源模塊！