網頁性能測試工具PageSpeed Insights

PageSpeed Insights 是非常棒的工具，它能夠測試網頁在移動設備和桌面設備上的性能，以及用戶體驗(UX)！

用戶體驗方面非常有趣，這是以前沒有的功能。它能指出頁面中的哪些地方需要改進，比如在移動設備上某個觸控區面積太小或與其它觸控區距離太近，應該增加觸控面積或相鄰元素的間隔。點擊“問題解決方法”會看到具體是哪些資源或元素引起的問題。進一步點擊旁邊的“查看屏幕截圖”可以看到該問題的具體位置。

性能方面，我們它會告訴你頁面上具體哪些圖片可以進一步優化、哪些 CSS、 JavaScript 可以壓縮。在性能規則末尾還可以直接“下載已針對此網頁優化的圖片、JavaScript 和 CSS 資源”——一個打包好的壓縮文件。當然，你不想每次頁面做點調整都來這里重新下載優化后的資源，而應該把優化放在自動化構建過程中。

前面只是介紹了 PageSpeed Insights 的幾個檢測規則，下面是目前支持的完整規則，都是非常值得學習的最佳實踐。

用戶體驗規則：

• 使用清晰可辨的字體大小
• 將內容尺寸調整為適合 viewport 大小
• 適當調整點按目標尺寸
• 避免使用應用安裝插頁式廣告
• 避免使用插件
• 配置 viewport

性能規則：

• 優化 CSS 遞送
• 優化圖片
• 瀏覽器緩存建議
• 縮減 CSS 的大小
• 縮減 HTML 的大小
• 縮減 JavaScript 內容的大小
• 啟用壓縮
• 按優先級排列可見內容
• 服務器響應時間優化
• 避免著陸頁重定向

日常使用和自動測試

PageSpeed Insights 提供了這么多好處，幫你發現你之前可能一直沒有注意的問題，所以你應該時不時地用 PageSpeed Insights 檢查一下自己的網站。

“我的頁面經常改動，要是能自動化檢測就好了”。可以的，PageSpeed Insights 支持 REST API ，你可以通過程序自動執行并獲得檢測結果。使用方法和其它 Google API 類似，詳見 這里 。

注：PageSpeed Insights 現在只支持在線或 API 使用，不再支持 Chrome、 Firefox 插件了。

改進性能

網頁性能問題的改進主要涉及三個方面：構建工具的使用、頁面結構和服務器端。下面這個視頻有進一步說明：

最后，再介紹一下 服務器端的 PageSpeed 模塊 。它是開源的用于在 Web 服務器上自動優化網站的模塊，支持 Apache 和 Nginx 。

作者：韓國愷。本系列文章以 Addy & Matt 的系列視頻  Totally Tooling Tips 的內容為基礎重新整理而成，主要介紹一些(前端)開發者喜歡的工具和技巧。

Post Views: 2

除非特別聲明，此文章內容采用 知識共享署名 3.0 許可，代碼示例采用 Apache 2.0 許可。更多細節請查看我們的 服務條款 。