用 Google PageSpeed Insights 計算 Desktop 或 Mobile 網站分數

相信工程師在調整網站效能一定會使用 Google PageSpeed Insights 來得到測試效能數據報表，但是這僅限於使用 Chrome 或 Firefox 瀏覽器。每次跑 PageSpeed 時候，Chrome 就會出現哀號，並且吃下許多記憶體。有沒有 command line 可以直接用 Google PageSpeed Insights 測試 Desktop 或 Mobile 的分數。Google 工程師 @addyosmani 寫了一套 PageSpeed Insights for Node - with reporting 稱作 PSI，可以直接透過 Node 來產生基本 report，這 report 真的算很基本，跟 Chrome 的 extension 跑起來的 report 是不一樣的。這工具可以用來紀錄每次 deploy 網站時的一些數據變化。底下附上 Google 網站報告

此工具是透過 gpagespeed 完成，如果你有用 GruntJS 可以直接參考 grunt-pagespeed。使用 psi command line 非常簡單，透過底下指令就可以正確產生出上面報表

$ npm install -g psi
$ psi http://www.google.com

如果有用 GulpJS 可以寫成兩個 Task 來跑

var gulp = require('gulp');
var psi = require('psi');
var site = 'http://www.html5rocks.com';
var key = '';
// Please feel free to use the nokey option to try out PageSpeed
// Insights as part of your build process. For more frequent use,
// we recommend registering for your own API key. For more info:
// https://developers.google.com/speed/docs/insights/v1/getting_started
gulp.task(‘mobile’, function (cb) {
psi({
// key: key
nokey: ’true’,
url: site,
strategy: ‘mobile’
}, cb);
});
gulp.task(‘desktop’, function (cb) {
psi({
nokey: ’true’,
// key: key,
url: site,
strategy: ‘desktop’
}, cb);
});

上面程式碼來自 psi-gulp-sample，psi 有提供 callback function

function(err, data){
  console.log(data.score);
  console.log(data.responseCode);
  console.log(data.id );
}

上面的 Task 可以改成

gulp.task('desktop', function (cb) {
  psi({
    nokey: 'true',
    // key: key,
    url: site,
    strategy: 'desktop'
  }, function(err, data){
    console.log(data.score);
    console.log(data.responseCode);
    console.log(data.id );
    cb();
  });
});

用此工具來紀錄每次網站更新後的測試數據，對於調整 Web Performance 來說是一個可以參考的指標。如果 API 使用量很大，請記得申請 Google API Key。

See also