ウェブ パフォーマンスはユーザー エクスペリエンスの全体に大きな影響を与えます。PageSpeed Insights というツールは、ページを分析して、モバイルとパソコン向けのウェブ パフォーマンスに関するおすすめの方法に基づいて、ページの読み込み速度を上げる方法についてのアドバイスを提供するツールです。
PageSpeed のスコアは、スクリプトの最小化、画像の最適化、コンテンツの gzip 圧縮、タップ ターゲットのサイズの適切な設定、ランディング ページのリダイレクトの回避など、さまざまな要素に基づいています。
40% のユーザーは、読み込みに 3 秒以上かかるページを放棄する可能性があるため、ユーザーのデバイスでページの読み込み速度に気を配ることが開発ワークフローにおいてますます重要になっています。
ビルドプロセスのパフォーマンス指標
手動で PageSpeed Insights にアクセスしてスコアに問題がないか確認しますが、同様のパフォーマンス スコアをビルドプロセスで取得できないかという問い合わせが、多くのデベロッパーから寄せられています。
答えは「もちろんです」です
ノード用 PSI の概要
本日は、Node 用 PSI についてご紹介いたします。新しいモジュールは、Gulp や Grunt などのビルドシステムと適切に連携し、PageSpeed Insights サービスに接続して、ウェブ パフォーマンスの詳細なレポートを返すことができるものです。どのような種類のレポートが有効になるのか、そのプレビューを見ていきましょう。
上記の結果は、どのような点で改善が可能かを知るのに役立っています。たとえば、コンテンツのサイズをビューポートに合わせるための 5.92 であれば、「一部」の作業は実行できることを意味しますが、レンダリング ブロック リソースを最小限に抑える 24 では、async
属性を使用して JS の読み込みを遅らせる必要があるかもしれません。
PageSpeed Insights の利用可能性を下げる
これまでに PageSpeed Insights API を使ってみたことがある、または PageSpeed Insights 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 がチームのパフォーマンス文化の改善にお役に立てば幸いです。