CSSパフォーマンスツールを使いこなす

https://www.youtube.com/watch?v=FEs2jgZBaQA

1 comment | 1 point | by WazanovaNews 約2時間前 edited


Jshiike 約2時間前 edited | ▲upvoteする | link

CSSconf EU 2014におけるGoogleのAddy Osmaniの講演です。CSSのパフォーマンス向上に役立つツールを40個+ 紹介してくれてます。

背景

パフォーマンスの最適化において、

  • ベースラインとしてやること
    • 最小化（minification）
    • 結合（concatenation）
    • 画像の最適化
    • 圧縮（GZip, Zopfli）
    • 非同期スクリプト
    • キャッシュの利用
    • WOFF2フォント
    • CSSスプライトを使う
    • リダイレクトをしないこと
  • スピードアップ
    • パフォーマンス向上に重要なCSSのインライン化
    • レンダリングをブロックしないように、急ぎでないアセットの取得を遅らせる
    • 使ってないCSSの削除
    • 修正の都度、ビジュアルの劣化テストを実施
    • パフォーマンスのベンチマーク測定
  • できればなお良いこと
    • 色、セレクタ、フォント種類/サイズを削減すること

最近のユーザの期待値は、ページの表示速度が0-100msであれば早い、300-1000msであればOK。

ケーススタディ

このカンファレンスのサイトJSConf.euの最適化事例。

ステップ1: 計測する

ページが表示される時間をWebPageTestのSpeed Indexで計測。スコアは低いほどよい。

パフォーマンス予算として目指したいのは、

  • ページの読込み1秒以下
  • SpeedIndexのスコア 1000点以下
  • サーバのレスポンス時間 200ms以下

PageSpeed Insightsについては、

  • モバイル 85点以上、デスクトップ 90点以上を目指したい。
  • 修正したらスコアをチェック、思いがけないスピードダウンが起きてないか確認すること。
  • Chrome DeveloperToolのデバイスモードを利用すれば、WiFi / 3G / オフラインなどでのシミュレーションができる。

今年の8月のHTTPArchiveのデータで、webページの平均サイズは1.8MB、その内、画像が1.2MB、スクリプト & スタイルで0.3MB

ステップ2: 最適化

1) CSS, HTML, JavaScript & 画像の最小化

PageSpeed Insightsに表示される、対応策 & 効果の見積もりを確認する。

最小化ツールの定番は、

最小化の結果、Speed Indexが 2093 -> 1321、表示時間が12.1秒 -> 11.7秒に改善した。

2) 使ってないCSSの削除

「今のページで必要なCSSだけ使う。」「他のページで使われているスタイルは無視する。」よりも、「サイト全体に適用されるCSSで、どこでも使われていないものはどれか」という考え方をすべき。

Chrome DevToolsのAuditsタブで確認してみると、CSSの60%弱が未使用であった。

お薦めは、UnCSS

  • Grunt / gulpユーザ向けにはそれぞれ、grunt-uncss / gulp-uncssがある。
  • Sass / Less /Stylusを使っているサイトでも利用できる。ワークフローとしては、Sass -> CSS -> UnCSS -> 最小化。
  • Bootstrapを利用しているページだと平均で、オリジナル: 120KBに対して、縮小化: 110KB、UnCSS + 縮小化: 11KBと90%改善。JSConf.euのサイトでは、20KB -> 11KB -> 7KB と効果は微妙。
  • CSSライブラリを利用していたり、サイトのサイズが大きいときに効果がある。
  • 削除可能なCSSの判定は100%の精度ではない。 動的に挿入されるCSSの対応もサポートしているが、エッジケースも多いので要注意。必ずテストすること。

未利用のCSSを削除することで、Speed Indexが 2093 -> 1316、表示時間が12.3秒 -> 1.3秒に改善。

3) CSS劣化テスト

UIの劣化は見つけるのが難しい。レスポンシブサイトだと手動のテストは手間がかかる。UI劣化ツール + Resemble.jsで、diffをビジュアルでわかりやすく確認できる。必要であれば、フェイクのデータを使えって、エンドtoエンドのテストもできる。

PhantomCSSで、PhantomJSやResemble.jsなどのテストを自動化できる。頻繁にコンテンツが更新されるページや複雑なアプリには向かない。

選択肢は他にも、Huxley, Wraith, Needle, CSSCtric, dpxdt など色々ある。

4) クリティカルパスの最適化

  • 1回のRTT (Round Trip Time)でファーストビュー（above the fold）を表示
  • リダイレクトせずに素早いサーバのレスポンス
  • 重要なCSSのインライン化、レンダリングをブロックするJavaScript

が達成すべきことであり、まずはスクリプトを書いて対応しようとしたが、特別な文字の判別など例外ケースが多くて効果的ではなかった。

そこで具体策を細分化

  • HTMLからスタイルシートを抽出
    • ツールが抽出するか、あらかじめ *.cssファイルを事前に指定するか。どちらでもよい。
  • ファーストビューのCSSを生成
    • ターゲットとするviewportを決める。モバイルとデスクトップのバランスから最適解を一つに絞るか、サーバ側で判別して対応するか。
    • 14KB以下におさめる。
  • クリティカルパスのCSSをにインライン化
  • 残りのスタイルは非同期で読込む

上記の具体策を自動化するツールとして、Penthouseをベースに、Criticalを新たにつくった。同じようなコンセプトで、CriticalCSS もある。

クリティカルパスの最適化で、Speed Indexが 2093 -> 1225、表示時間が12.3秒 -> 8.7秒に改善。

注意点としては、

  • 相対パスを絶対パスに変更しないと、バックグランドの画像 & フォントがうまく表示されないことがある。
  • スタイルされてないコンテンツの表示。clearfix-patternを使うこと。
  • 特別な画像の表示。CSSのhexiadecimalフォーマットは、:\2192 のようにバックスラッシュを付加する必要あるかも

5) ボトルネックとなるサイズの大きい画像対策

ImageOptim は下記の様々なツールとうまくワークするよいプロダクトだが、今回の5MBのアニメーションGIFの対応では効果が小さかった。

PNGのスクリーンキャプチャを0.1秒ごとに実行し、そのdiffを利用したアニメーションにしたが、効果は600KBで、もっとレンダリングをブロックするJavaScriptが増えてしまった。

<video>タグを利用して、450KBに。

最小化 + UnCSS + <video>タグで、Speed Indexが 2093 -> 1327、表示時間が12.0秒 -> 5.8秒に改善。

最小化 + UnCSS + 静的ヘッダーにすると、Speed Indexが 2093 -> 923、表示時間が12.3秒 -> 1.3秒に改善できる。

ちなみに、grunt-critical + 一連の最適化策 + 静的ヘッダーだと、Speed Indexが 2093 -> 917、表示時間が12.2秒 -> 1.1秒にまで改善できる。

6) 自分のサイトにとって何が重要か？

modpagespeed.comとngxpagespeed.comを是非セットするとよい。JSConf.euのサイトで、Speed Indexが 2149 -> 1310、表示時間が13.5秒 -> 1.8秒に改善できる。

しかし、サイトの変更のたびにパフォーマンスは都度変わるので、パフォーマンス予算は設定しておくべき。

パフォーマンス測定の自動化をしておくこと。

スタイルシートの複雑さを把握する。メンテしやすくするには繰り返しを減らすこと。色やスタイルの重複をチェックする。

ステップ３: アクションを繰り返す

  • about:blankページが最も早い、どれだけ近づけることが可能か頑張る。
  • 熊のようにデカいファイルをダウンロードしない
  • 想像しないで計測する
  • 計測、最適化、繰り返す
  • パフォーマンス予算の設定
  • 自分のサイトのユーザにとって大事なコンテンツにフォーカス

#css #サイトパフォーマンス

ワザノバTop200アクセスランキング

Back