Gruntとgulp.jsでサイトパフォーマンスを向上させる

http://yeoman.io/blog/performance-optimization.html

1 comment | 0 points | by WazanovaNews 約3年前 edited


Jshiike 約3年前 edited | ▲upvoteする | link

@yosuke_furukawaさんがtweetしていたサイトパフォーマンスに関連する Gruntgulp.js のタスク一覧です。確かによいまとめなので、メモしておきます。

GruntとGulpには、画像の最適化、HTML/CSS/JavaScriptファイルの結合 & 圧縮をするタスクがあるので、まずそちらをベースラインとして利用されたし。

1) 画像ファイルの圧縮 & 最適化

webページは平均1.5MBで画像ファイルが多くを占める。モバイルで160KBの画像ファイルを追加すると直帰率が12%悪化するというEtsyのデータがあり。

Grunt

二つのタスクのどちらを選ぶかは、こちらの比較表 で確認してください。

Gulp

3/4/2014時点ではImageOptim向けのGulpプラグインはなし。

2) <picture>エレメントのためのレスポンシブ画像生成

Gruntには、ビルドプロセスの、複数の解像度の画像ファイルを生成するのを手伝うタスクがあり。

Grunt

大きすぎる画像ファイルをリサイズ/正規化するだけであれば、grunt-image-resizeを使えばよい。

Tim Kaldecのリサーチでは、レスポンシブデザインの採用で72%の画像サイズを削減できるとしてます。スペック互換性のあるクロスブラウザのレスポンシブ画像対応の定番とするのはまだ時期尚早ですが、BBCとGuardianはImager.jsをうまく利用しています。

3) SVGファイルの圧縮

エディタで作られたSVGファイルには、メタデータ/コメント/隠しエレメントなどの冗長な情報がたくさん入っているが、レンダリングのクオリティに影響を与えずに、うまく削除、もしくはもっと小さなサイズに変換できる。

Grunt

Gulp

4) スプライトシート作成

Grunt

Gulp

5) 画像ファイルをWebPに変換

WebPの画像ファイルは、PNGと比較してサイズを26%小さく、JPEGよりロスを25%-34%減らせる。

WebPageTestの結果によると、JPEGと比較して、WebPでエンコードされた画像ファイルはサイズが小さいため、読込みが相当早く完了する。Chrome Web Storeの実績では、WebPへの変更後、バイトあたり30%の削減ができ、1日あたりでは数テラバイトの帯域の節約につながった。

Grunt

Gulp

6) 各種ブラウザをサポートしたSVGアイコンの作成

Grunt

Gulp

モバイルでのパフォーマンスの悪さから、データURIを使った画像ファイルのインライン化はお薦めできない手法だと考えている。

7) CSSの圧縮

Grunt

Gulp

8) 不要なCSSの削除

本番環境では、BootstrapのようなCSSフレームワークの全ては利用しないので、UnCSSを使えばスタイルシートのファイルサイズの85%を削減できた事例もある。

ページに動的に挿入されたスタイルも、PhantomJSを使えばUnCSSで対応できる。一般的なBootstrapのページで10KB-120KBを削減でき、他のフレームワークでも利用することができる。

Grunt

Gulp

9) メディアクエリをまとめる

PageSpeedのお薦めメニューにはないが、プレプロセッサーで生成されたCSSはメディアクエリがネストしているときがあるので、メディアクエリをまとめることで効果がでることがわかっている。

Grunt

Gulp

10) JavaScriptファイルの圧縮

Grunt

Gulp

11) RequireJSでの最適化

Grunt

Gulp

12) HTMLの圧縮

Grunt

Gulp

13) シンプルなファイル結合

Gunt

Gulp

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

Grunt

Gulp

15) Zopfli圧縮アルゴリズム

オープンソースの圧縮ライブラリで、zlibと比較して最大の圧縮率で3%-8%小さくできる。一度だけ圧縮してから、ネットワーク経由で何度もやり取りされるファイルに適している。

GoogleフォントをZopfliフォントに変更した際は平均で6%、ケースによっては15%小さくできた。IIya GrigorikによるとOpen Sansの場合は、レンダリングと読込みスピードの改善で、10%の効果があった。しかし、Zopfli画像ファイルはJPEGと比較してデコードの時間がかかるので、WebPを使うかどうか決める際はどの数値を改善したいか考慮すること。

Grunt

Gulp

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

この場合のクリティカルパスとは、ユーザが読込んだページを最初に見る部分、"above-the-fold" のコードとリソースを指す。PageSpeedでは、パフォーマンス改善のために、クリティカルパスのCSSをインライン化することを勧めている。mod_pagespeedはかなり有効だが、他のツールでの最適化は難しくなる。

"above-the-fold"のCSSがどうなってるかは、speedreportで確認できる"above-the-fold"のスクリプトとPhantomJSを使えば把握できるので、後は手動で最適化することもできる。

Paul Kinalanが、"above-the-fold"のCSSを調べるbookmarkletを書いているので、確認してみるとよい。

17) アセットパイプライン (最適化の手法をまとめて扱う。)

AsseGraphは、プロジェクトとは、アセット(HTML, CSS, Image, JavaScript)とエッジとその関係(イメージタグ、アンカータグ、スクリプトタグなど)をノードに見立てたグラフ分析だとしている。その分析により、一般的なパフォーマンスの最適化を自動で行ってくれる。小さなプロジェクトに向いているが、大規模プロジェクトへの対応も準備中。

Grunt

GulpユーザはAssetGraphを直接利用する。

18) ベンチマーク

ベンチマーク関連のタスクは、継続的インテグレーションのプロセスに組み込むことで効果がでる。現在利用可能なのはGruntのタスクのみだが、Gulpユーザはgulp-grunt経由で使うことができる。

  • grunt-pagespeed : PageSpeedのスコア確認。

  • grunt-topcoat-telemetry : CIの進捗、読込み時間などの数値を取得できる。TopCoatのようなパフォーマンスベンチマークのダッシュボードをつくることができる。

  • grunt-wpt : WebPageTestのスコア確認。

  • grunt-phantomas : レスポンスタイム、画像/CSS/JavaScriptの最初の取得、onDOMReadyなどが計測できる。

19) フレームワークの最適化

Grunt

Gulp

その他


Feb/2014: ワザノバTop25アクセスランキング


#grunt #gulp.js #サイトパフォーマンス

Back