ウェブのパフォーマンスは、ユーザー エクスペリエンスの全体に大きな影響を与える可能性があります。サイトのパフォーマンスを改善しようとしている方なら、PageSpeed Insights をご存じでしょう。このツールは、ページを分析し、モバイルとパソコンのウェブ パフォーマンスに関するベスト プラクティスに基づいて、ページの読み込み速度を改善するためのアドバイスを提供します。
PageSpeed のスコアは、スクリプトの最小化の程度、画像の最適化、コンテンツの gzip 圧縮、タップ ターゲットの適切なサイズ、ランディング ページのリダイレクトの回避など、さまざまな要因に基づいて算出されます。
読み込みに 3 秒以上かかると、40% のユーザーがページの閲覧を諦める可能性があるため、ユーザーのデバイスでページがどれだけ速く読み込まれるかを重視することは、開発ワークフローの重要な要素になりつつあります。
ビルドプロセスのパフォーマンス指標
PageSpeed Insights に手動でアクセスしてスコアを確認することはできますが、多くのデベロッパーから、ビルドプロセスに同様のパフォーマンス スコアリングを組み込むことは可能か、というお問い合わせをいただいておりました。
答えは「もちろん」です。
Node 向け PSI のご紹介
本日、Node 向けの PSI をリリースします。これは、Gulp、Grunt などのビルドシステムと連携し、PageSpeed Insights サービスに接続してウェブ パフォーマンスの詳細なレポートを返すことができる新しいモジュールです。レポートの種類のプレビューを以下に示します。
上記の結果は、どのような改善が可能かを確認するのに役立ちます。たとえば、コンテンツをビューポートに合わせてサイズ設定する場合の 5.92 は、まだ「一部」の作業が可能であることを意味します。一方、レンダリングをブロックするリソースを最小限に抑える場合の 24 は、async 属性を使用して JS の読み込みを遅らせる必要があることを示唆しています。
PageSpeed Insights の利用ハードルを下げる
過去に PageSpeed Insights API の使用を試みたことがある場合や、その API をベースに構築されたツールの使用を試みたことがある場合は、専用の API キーを登録する必要があったはずです。数分程度で完了しますが、通常のワークフローの一部として分析情報を取得する際には、この手順が煩わしいと感じられることもあるでしょう。
PageSpeed Insights サービスでは、API キーなしで 5 秒ごとに最大 1 件のリクエストを送信できます（十分な頻度です）。より定期的な使用や本番環境向けのビルドの場合は、キーを登録することをおすすめします。
PSI モジュールは、数分以内にセットアップできる nokey オプションと、もう少し時間のかかる key オプションの両方をサポートしています。API キーを登録する方法については、ドキュメントをご覧ください。
スタートガイド
PSI をワークフローに統合する方法は 2 つあります。ビルドプロセスに統合することも、システムにグローバルにインストールされたツールとして実行することもできます。
ビルドプロセス
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 を使用できます。このツールは PSI を使用してレポートを生成します。
インストール
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
任意のターミナル ウィンドウで、サイトの PageSpeed Insights レポートをリクエストします（nokey オプションまたは API 固有の key を使用して、次のようにします）。
psi http://www.html5rocks.com --nokey --strategy=mobile
または、登録済みの API キーをお持ちの場合は、次の手順に沿って操作します。
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
これで完了です。
パフォーマンスを文化の一部にしましょう
設計と実装がユーザー エクスペリエンスに与える影響について、より深く考える必要があります。
PSI などのソリューションは、パソコンとモバイルのウェブ パフォーマンスを監視できます。デプロイ後の通常のワークフローの一部として使用すると便利です。
ご意見をお寄せいただければ幸いです。PSI がチームのパフォーマンス文化の向上に役立つことを願っております。