フロントエンドの制作者が、HTML, CSS, JavaScriptでWebページのパフォーマンスを改善するためのテクニックを磨ける良書

Webサイトやアプリを制作する際、パフォーマンスは重要なポイントの一つです。ページが早く表示されることは、それだけでユーザーの満足度に繋がり、Googleにおいても非常に重要な項目に挙げられています。

ページを表示するブラウザのレンダリングの仕組み、HTML, CSS, JavaScriptをどのように改善すべきか、フロントエンドの制作者がチューニングを基礎からくわしく学べるオススメの本を紹介します。

本書は中・上級者向けの解説書で、既にフロントエンド制作者としてのスキルを備えている人を対象したものです。
HTMLやCSSやJavaScriptの使い方を基礎から解説したものではなく、パフォーマンス面において基礎から徹底的に解説されてします。

Kindle版はお値段が、少しお得です。

• Webフロントエンド　ハイパフォーマンス　チューニング（Kindle版）

紙面のキャプチャで、中身を少しだけご紹介。

パフォーマンスを改善するには、パフォーマンスについてを知る必要があります。本書では、『ユーザーの様々な振る舞いに対してウェブページが応答を返す速さ」と定義し、Webページやアプリの改善に取り組みます。

ブラウザがWebページやアプリを表示するには大きく分けて、4つのフェーズがあります。これらのフェーズごとに改善するテクニックは異なります。

1. loading: リソース読み込み
2. Scripting: JavaScript実行
3. Rendering: レイアウト計算
4. Painting: レンダリング結果の描画

パフォーマンスを改善する前に、現状を知っておかないと意味がありません。特別なツールは必要なく、Chromeのデベロッパーツールで大丈夫です。もちろん、改善後の結果も測定できます。

本書は9章構成、1-3章は基礎知識、4-7章が4つのフェーズごとの解説、8,9章がさらに高度な全般的なチューニングテクニックの解説です。
4章ではリソースの読み込み、CSSやJavaScriptの外部ファイルや画像ファイルなど読み込むファイルの最適化について。5章ではJavaScriptをチューニングするための知識とテクニックがくわしく解説されています。

6章はレンダリングで、DOM要素のスタイルの計算とレイアウトについて。CSSをどのように記述すると、最適化につながるかを学びます。

無駄に長いセレクタ、必要のない子孫セレクタ、利用していないCSSの記述などをなくすことで、パフォーマンスはかなり改善されます。

7章のレンダリングはこれまでの結果を描画するもので、CSSで指定した角丸はどうなのか、box-shadowやCSSのグラデーションはどうなのかなどがくわしく解説されています。

8章からは高度なテクニックの解説。
CSSのwill-changeを使用しているサイトも最近増えてきました。

今年になってから、インターフェイスプレビューもよく見かけるようになりました。今まではロード用のアイコンだけが表示されていました、データが表示される予定のレイアウトを先に表示します。
Facebookをはじめ、Mediumでも利用されていますね。

Webフロントエンド　ハイパフォーマンス　チューニングの目次

1. ウェブパフォーマンスとは何か

   パフォーマンスを定義する

   パフォーマンスの重要性

   新たに重要になった描画パフォーマンス

   ハイブリッドアプリの存在

   パフォーマンスチューニングの第一歩

   本書の概要

2. ブラウザのレンダリングの仕組み

   なぜ仕組みから学ぶのか

   対象とするレンダリングエンジン

   ブラウザのレンダリングの流れ

   リソース読み込み - Loading

   JavaScript実行 - Scripting

   レイアウトツリー構築 - Rendering

   レンダリング結果の描画 - Painting

   再レンダリング

3. チューニングの基礎

   闇雲なチューニングの害

   推測するな，計測せよ

   目指すべき指標を設定する

   計測する手段

   Chrome DevToolsなど開発者向けツールによる計測

   JavaScriptによる計測

   パフォーマンス診断ツールを用いる

   パフォーマンスの継続的監視

4. リソース読み込みのチューニング

   リソース読み込みの流れ

   HTML/CSS/JavaScriptを最小化する

   適切な画像形式を選択する

   画像ファイルを最適化する

   CSSのimportを避ける

   JavaScriptの同期的な読み込みを避ける

   JavaScriptを非同期で読み込む

   デバイスピクセル比ごとに読み込む画像を切り替える

   CSSのメディアクエリを適切に指定する

   CSSスプライトを使って複数の画像をまとめる

   リソースを事前読み込みしておく

   Gzip圧縮を有効にする

   CDNを用いてリソースを配信する

   ドメインシャーディング

   リダイレクトしない

   ブラウザのキャッシュを活用する

   Service Workerの利用

   HTTP/2の利用

5. JavaScript実行のチューニング

   JavaScriptの実行モデル

   JavaScriptのボトルネックを特定する

   GCを避ける

   メモリリークを防ぐ

   WeakMapとWeakSet

   Web Workersの利用

   asm.jsによるJavaScript高速化

   SIMD.jsの利用

   高頻度で発火するイベントの抑制

   モバイル端末でのclickイベントの遅延をなくす

   Passive Event Listenerでスクロールのパフォーマンスを改善する

   setImmediate()の非同期実行

   アイドル時処理を使う

   ページ表示状態を確認する

   無駄なForced Synchronous Layoutを減らす

   DocumentFragmentの追加

   Intersection Observerで効率的に交差を検知する

   canvas要素の2D Contextアニメーション

   requestAnimationFrame()を活用する

   JavaScriptからCSS Transitionを用いる

   WebGL

6. レイアウトツリー構築のチューニング

   レイアウトツリー構築の流れ

   レイアウトツリー構築におけるパフォーマンスの計測

   高速なCSSセレクタの記述

   BEMを用いる

   CSSセレクタのマッチング処理を避ける

   レイアウトを高速化する

   レイアウトを避ける

   DOMツリーから切り離して処理する

   レイアウトを減らす非表示

   img要素のサイズを固定する

7. レンダリング結果の描画のチューニング

   レンダリング結果の描画の流れ

   再描画

   CSSプロパティの変更が何を引き起こすのか？

   レイヤーの生成条件

   描画のオーバーヘッドを解析する

   GPUによって合成されるレイヤー

   translateZハック

8. 高度なチューニング

   大量のDOM要素をあつかうバーチャルレンダリング

   なめらかなアニメーション

   will-changeCSSプロパティによる最適化

   CSS Containmentで再レンダリングを最適化する

9. 認知的チューニング

   インジケータを用いる

   インターフェイスプレビューを用いる

   処理が終わったように振る舞う

   無限スクロールを用いる

   投機的なリソースの先読み

当ブログでも、フロントエンドのパフォーマンスについて記事を掲載しています。

• サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて
• GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド
• キーフレームを使ったCSSアニメーションの実装ポイントまとめ
• モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説
• ローディングのアニメーションの次の段階、インターフェイスプレビューに対応するための軽量スタイルシート
• 非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト

1つ目はクリティカル レンダリング パス、2つ目はCSSのセレクタ、3つ目は「will-change」機能、4,5つ目はインターフェイスプレビュー、6つ目はPJAXを使った高速化。

こういったことの積み重ねが大きな結果に繋がります。

献本の御礼

最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス