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

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

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

本のキャプチャ

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

書籍の表紙

Webフロントエンド ハイパフォーマンス チューニング
[Amazonでみる]
[楽天でみる]

著:
久保田 光則
出版社:
技術評論社
発売日:
2017/5/26

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. 認知的チューニング
    インジケータを用いる
    インターフェイスプレビューを用いる
    処理が終わったように振る舞う
    無限スクロールを用いる
    投機的なリソースの先読み

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

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

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

書籍の表紙

Webフロントエンド ハイパフォーマンス チューニング
[Amazonでみる]
[楽天でみる]

著:
久保田 光則
出版社:
技術評論社
発売日:
2017/5/26

献本の御礼

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

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

top of page

©2017 coliss