このページは Cloud Translation API によって翻訳されました。

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

Addy Osmani

Twitter GitHub

ウェブパフォーマンスはユーザーエクスペリエンスの全体に大きな影響を与えます。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 がチームのパフォーマンス文化の改善にお役に立てば幸いです。

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