Yeoman

パフォーマンス最適化のための Grunt と Gulp タスク

2014年3月4日

パフォーマンスの遅延は、ユーザーのエンゲージメント、エクスペリエンス、そして収益に影響を与える可能性があります。ありがたいことに、Google の「Make The Web Faster」チームは、ページを軽量、高速、スムーズに保つためのベストプラクティスルールを推奨しています。これらのルールには、CSS や JavaScript などのリソースの縮小、画像の最適化、インライン化、未使用スタイルの削除などが含まれます。

サーバーを完全に制御できる場合は、これらのタスクの多くをフィルタリングできる、PageSpeed モジュール for Apache と Nginx があります。ただし、サーバーを制御できない場合や、モジュールが適していないと感じる場合は、おそらく既に使用しているツールのためのビルドタスクが多数存在し、よりきめ細かい制御でギャップを埋めることができます。

以下は、Yeoman チームがプロジェクトで定期的に使用する Grunt と Gulp タスクです。このリストは焦点を絞り、もはやそれほど価値のない以前の提案は除外するように最善を尽くしましたが、ページとそのリソースを可能な限り小さく保つのに役立つものがたくさんあります。

注: Yeoman の Grunt と Gulp webapp ジェネレーターには、画像の最適化、HTML/CSS/JS の連結と縮小のためのタスクが含まれています。これは健全なベースラインを提供すると考えていますが、この記事ではさらに踏み込んだタスクについて説明します。

画像の圧縮と最適化

平均的な Web ページのサイズは現在 1.5MB を超えており、その大部分は画像が占めています。ユーザーがリソースの読み込みを待つ時間を短縮するために、画像サイズを可能な限り小さくすることを目指しています。

適切な圧縮とフォーマットのバランスをとることで、読み込み時間を最小限に抑えながら、画像をページの一部として配信することができます。これは、データプランが限られているモバイルユーザーや接続速度が遅いユーザーにとって非常に重要です。

Grunt

なぜ2つのタスクがあるのでしょうか？2つの違いについては、こちらの詳細な説明をご覧ください。自分に最も適した方を選択してください。

Gulp

注: Etsy は、モバイルページに 160KB の画像を追加するだけで、直帰率が 12% 増加することを発見しました。ページで使用される画像を削減できない場合は、少なくともオプティマイザを実行してください。

<picture> 要素用のレスポンシブ画像を生成する

複数のデバイスで視覚的に柔軟なレスポンシブサイトがある場合は、画像も柔軟にするための戦略が必要です。

不必要に大きな画像をブラウザに配信すると、レンダリングと読み込みのパフォーマンスの両方に影響を与える可能性がありますが、大きな画像がブラウザに配信されたときに低下する可能性のあるメトリクスはこれだけではありません。

これがレスポンシブ画像が必要な理由の1つであり、srcset (うまくいけば <picture> の完全な実装につながる) が既に Chrome Beta に搭載されているのは素晴らしいことです。

ビルドプロセスの一部として、複数解像度の画像を生成するのに役立つ Grunt タスクがいくつかあります。

Grunt

さらに、サイズの大きい画像のサイズ変更/正規化だけが必要な場合は、grunt-image-resize を使用できます。

注: Tim Kaldec のレスポンシブ画像に関する調査では、レスポンシブ画像戦略により、画像の容量を最大 72% 削減できることが示唆されています。仕様互換でクロスブラウザーのレスポンシブ画像アプローチを選択するにはまだ早い段階ですが、BBC と Guardian は Imager.js を使用してこれを成功させています。

SVG 画像の縮小

エディターで作成された SVG ファイルには、通常、大量の冗長な情報 (メタデータ、コメント、非表示要素など) が含まれています。このコンテンツは、レンダリングされる最終的な SVG に影響を与えることなく、安全に削除したり、より最小限の形式に変換したりできます。

Grunt

Gulp

スプライトシートの生成

Grunt

Gulp

画像を WebP に変換する

WebP は、Web 上の画像にロスレスおよびロッシー圧縮を提供する最新の画像形式です。WebP ロスレス画像は PNG と比較して最大 26% サイズが小さく、WebP ロッシー画像は JPEG と比較して 25〜34% サイズが小さくなります。これはかなりの節約であり、ありがたいことに、Grunt と Gulp の両方で WebP にエンコードするためのタスクが存在します。

Grunt

Gulp

注: WebPageTest のこのテストでは、JPEG と比較して、WebP エンコードされた画像はファイルサイズが小さいため、読み込みがはるかに高速に完了することが示唆されています。Chrome ウェブストアは、WebP に切り替えることでバイト数が平均 30% 削減され、1 日に数テラバイトの帯域幅を節約できたことを発見しました。

さまざまなブラウザをサポートする SVG スプライトを構築する

Grunt

Gulp

モバイルでのパフォーマンスが低いことを考えると、データ URI を使用した画像のインライン化はアンチパターンと考えられています。

CSS の縮小

縮小により、ファイル内の不要なスペース、改行、インデント、文字が削除されます。これらは通常、本番環境では不要です。HTML、CSS、JS を圧縮することで、解析、実行、ダウンロードの時間を短縮できます。CSS については、特に以下をお勧めします。

Grunt

Gulp

未使用の CSS を削除する

Bootstrap、Foundation などの CSS フレームワークを使用するプロジェクトでは、通常、利用可能なスタイル全体を使用するわけではありません。フレームワーク全体を本番環境に配信するのではなく、UnCSS を使用してページ全体の未使用のスタイルを削除します。開発者によっては、スタイルシートのファイルサイズが最大 85% 削減されたケースもあります。

Grunt

Gulp

注: 開発者がよく尋ねる質問は、UnCSS、または未使用の CSS を削除するプロセスが、ページに動的に挿入されたスタイルでも機能するかどうかです。答えは「はい」です。UnCSS は PhantomJS と連携してこれを実現します。開発者は、通常の Bootstrap ページで10〜120KB の削減を経験しており、UnCSS は他のフレームワークでもうまく機能します。

CSS のインライン化

特定のページの外部 CSS リソースが小さい場合は、それらをマークアップに直接インライン化して、追加のリクエストを節約できます。このように小さな CSS をインライン化することで、ブラウザはページのレンダリングを続行できます。

Grunt

Gulp

メディアクエリの結合

これは PageSpeed の推奨事項ではありませんが、一致するメディアクエリを単一のメディアクエリ定義に結合できます。ネストされたメディアクエリを使用するプリプロセッサによって生成された CSS を処理するのに役立つことがわかりました。

Grunt

Gulp

JavaScript

JS の縮小と圧縮

Grunt

Gulp

RequireJS (r.js を介した最適化)

Grunt

Gulp

HTML の縮小

Grunt

Gulp

単純な連結

Grunt

Gulp

ファイル/フォルダーの一般的な圧縮

Grunt

Gulp

Zopfli 圧縮

Zopfli 圧縮アルゴリズムは、最大圧縮で zlib と比較して通常 3〜8% 小さい出力を生成するオープンソースの圧縮ライブラリです。データが一度だけ圧縮されてからネットワーク経由で何度も送信されるアプリに最適です。

Grunt

Gulp

注: Google Fonts が Zopfli を使用するように切り替えたとき、フォントは平均で約 6% 小さく、場合によっては最大 15% 小さくなりました。Ilya Grigorik によると、Open Sans の場合は 10% 以上小さく、レンダリングと読み込みの時間が短縮されました。ただし、Zopfli 画像は JPG よりデコードに時間がかかる場合があるため、WebP を使用するかどうかを決定する際には、重要なメトリクスを測定してください。

クリティカルパス CSS のインライン化

クリティカルパスは、ページの「ファーストビュー」コンテンツ、つまりユーザーがページを読み込んだときに最初に目にするコンテンツをレンダリングするために必要なコードとリソースを表します。PageSpeed は、パフォーマンスを向上させるために、クリティカルパス CSS をインライン化することを推奨しています。mod_pagespeed などのツールはこれを非常に効率的に実現しますが、他のツールではクリティカルパスを最適化するのがより困難です。

PhantomJS と speedreport のファーストビュースクリプトを一緒に使用して、ファーストビューにある CSS を把握し、手動で最適化することができます。

**注:** Paul Kinlan は、ページのファーストビュー CSS を推定するためのブックマークレットを作成しました。これもチェックする価値があります。

アセットパイプライン (すべての最適化を自動処理)

「注目すべきツール」リストには、AssetGraph があります。

AssetGraph は、プロジェクトをグラフ問題の集合として捉え、ノードをアセット (HTML、CSS、画像、JS)、エッジをそれらの間の関係 (画像タグ、アンカータグ、スクリプトタグなど) と見なします。

AssetGraph はプロジェクトアセットがどのように相互に関連しているかを判断できるため、開発者が独自に実行したい多くの一般的なパフォーマンス最適化を自動的に実行できます。これは、小規模プロジェクトでは特にうまく機能し、大規模プロジェクトのサポートに取り組んでいます。

Grunt

Gulp

Gulp ユーザーは AssetGraph を直接使用する必要があります。

ベンチマーク

以下のベンチマークタスクは、継続的インテグレーションの一部として統合するのに役立ちます。以下は現在 Grunt でのみ利用できますが、gulp-grunt を使用して Gulp から Grunt タスクを実行できます。以下をお勧めします。

  • grunt-pagespeed - CI の一部として PageSpeed スコアのチェックを自動化するのに最適です。
  • grunt-topcoat-telemetry - CI の一部として Telemetry からスムーズさ、読み込み時間、その他の統計情報を取得します。これは、TopCoat で使用されているのと同様のパフォーマンスベンチマークダッシュボードを設定するのに役立ちます。
  • grunt-wpt - WebPageTest スコアの CI
  • grunt-phantomas - リクエスト、レスポンス、最初の画像/CSS/JS までの時間、onDOMReady などの応答時間。

フレームワークの最適化

Grunt

Gulp

その他

結論

パフォーマンスの遅延は、ユーザーエンゲージメント、エクスペリエンス、および収益に影響を与える可能性があります。パフォーマンス最適化に使用できるタスクを試して、プロジェクトにどのような実際的なメリットをもたらすことができるかを確認してください。

ページへの訪問者は、より軽快なエクスペリエンスの結果として満足度が高まり、Webが高速になることはすべての人にとってより良いことです。

~ Addy Osmani

レビューにご協力いただいたSindre Sorhus、Pascal Hartig、Stephen Sawchukに感謝いたします。

« その他の投稿を見る