ウェブ パフォーマンス測定の自動化

ウェブのパフォーマンスは、ユーザー エクスペリエンスの全体に大きな影響を与える可能性があります。サイトのパフォーマンスを改善しようとしている方なら、PageSpeed Insights をご存じでしょう。このツールは、ページを分析し、モバイルとパソコンのウェブ パフォーマンスに関するベスト プラクティスに基づいて、ページの読み込み速度を改善するためのアドバイスを提供します。

PageSpeed のスコアは、スクリプトの最小化の程度、画像の最適化、コンテンツの gzip 圧縮、タップ ターゲットの適切なサイズ、ランディング ページのリダイレクトの回避など、さまざまな要因に基づいて算出されます。

読み込みに 3 秒以上かかると、40% のユーザーがページの閲覧を諦める可能性があるため、ユーザーのデバイスでページがどれだけ速く読み込まれるかを重視することは、開発ワークフローの重要な要素になりつつあります。

ビルドプロセスのパフォーマンス指標

PageSpeed Insights に手動でアクセスしてスコアを確認することはできますが、多くのデベロッパーから、ビルドプロセスに同様のパフォーマンス スコアリングを組み込むことは可能か、というお問い合わせをいただいておりました。

答えは「もちろん」です。

Node 向け PSI のご紹介

本日、Node 向けの PSI をリリースします。これは、GulpGrunt などのビルドシステムと連携し、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 がチームのパフォーマンス文化の向上に役立つことを願っております。