自動評估網站成效

阿迪 (Addy Osmani)
Addy Osmani

網站效能可能會對您的「整體」使用者體驗造成極大影響。如果您最近正在努力改善自家網站的成效,或許聽過 PageSpeed Insights。這項工具可以分析網頁,並提供有關行動版和電腦版網站效能的最佳做法,說明如何提升網頁速度。

PageSpeed 的分數取決於多項因素,包括指令碼的最小尺寸、圖片最佳化、內容壓縮處理、點按目標大小適當,以及避免到達網頁重新導向。

40% 的使用者可能會放棄等待超過 3 秒的網頁載入時間,在評估網頁載入速度是我們的開發工作流程中的關鍵將與時俱進。

建構程序的成效指標

雖然要手動前往 PageSpeed Insights 估算分數,但許多開發人員仍詢問自己是否能在建構過程中獲得類似的效能分數。

答案是:當然可以。

隆重推出適用於 Node 的 PSI

很高興在此宣布,我們推出了適用於 Node 的 PSI 新模組,這個新模組可與 GulpGrunt 和其他建構系統搭配運作,且可與 PageSpeed Insights 服務連結,並傳回網站效能的詳細報告。一起預覽可啟用的報表類型:

成效報告畫面

以上結果有助您瞭解自己可能有哪些改進空間。舉例來說,如要將內容調整為可視區域大小,指定為 5.92 表示仍可以完成「some」;而 24 則表示將禁止算繪資源降到最小時,您可能需要使用 async 屬性延遲載入 JS。

降低 PageSpeed Insights 採用門檻

如果您過去曾嘗試使用 PageSpeed Insights API,或嘗試使用我們在其中建置的任何工具,您可能需要註冊專屬的 API 金鑰。我們知道,雖然這項作業只需幾分鐘,但您可以在定期工作流程中停用取得洞察資訊的功能。

很高興在此通知您,PageSpeed Insights 服務支援在沒有 API 金鑰的情況下,每 5 秒最多每 5 秒發出 1 個要求。如果是較常使用或更嚴重的實際工作環境版本,建議您註冊金鑰。

PSI 模組同時支援在幾分鐘內完成設定的 nokey 選項,以及更長的 key 選項。如要進一步瞭解如何註冊 API 金鑰

開始使用

透過兩種方式將 PSI 整合至工作流程。可以整合至建構程序,或以全域安裝的工具的形式在系統中執行。

建構程序

在「Grunt」或「Gulp」建構程序中使用 PSI 是相當直觀的。處理 Gulp 專案時,您可以直接安裝及使用 PSI。

安裝

使用 npm 安裝 PSI,並傳遞 --save-dev 以儲存至 package.json 檔案。

npm install psi --save-dev

然後在 Gulpfile 中為該工作定義 Gulp 工作,如下所示 (我們的 Gulp 範例專案也會有說明):

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

若是上圖,您可以使用下列指令來執行工作:

gulp psi

如果你使用的是 Grunt,可以用 James Cryer 的 grunt-pagespeed 來強化報告。

安裝

npm install grunt-pagespeed --save-dev

然後在 Gruntfile 中載入工作:

grunt.loadNpmTasks('grunt-pagespeed');

並設定要使用:

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

然後,您可以使用以下方式執行工作:

grunt pagespeed

安裝為全域工具

您也可以在系統中安裝 PSI 做為全球通用的工具。再次我們可以使用 npm 安裝工具:

$ npm install -g psi

透過任何終端機視窗,您可以使用 nokey 選項或 API 專用的 key,要求網站的 PageSpeed Insights 報告,如下所示:

psi http://www.html5rocks.com --nokey --strategy=mobile

或使用已註冊 API 金鑰者:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

就是這麼簡單!

繼續將表現融入文化

我們需要開始思考我們的設計和導入方式對使用者體驗的影響。

PSI 等解決方案可以監控電腦和行動裝置上的成效,並在一般的部署後工作流程中派上用場。

我們非常希望收到您的寶貴意見,希望 PSI 協助提升團隊的績效文化。