【無料で読める】重いサイトを軽くする、Webページ表示速度の高速化10の基本: 初歩からのPageSpeed Insights (にししふぁくとりー叢書)

本書は、重たいウェブサイトを軽くする方法として、Webページの表示を速くする施策（＋遅くなる要因を排除する方法）10項目を詳しく解説しています。全内容は以下の目次をご覧下さい。
—【本書の目次】—
序章1：重いサイトを軽くする、ウェブサイト高速化10施策の概要
序章2：ウェブページの表示速度の調べ方（PageSpeed Insights／Pingdom Tools）
第1章：読み込む位置(タイミング)を改善する（※描画を遅くする要因を取り除く）
・1-1. スクロールせずに見える範囲(1画面目)だけは素早く表示を完了させる
・1-2. JavaScriptは極力HTMLの末尾へ追いやる
・1-3. CSSファイルをHTMLの末尾で読み込む方法
・1-4. １画面目で使わないスタイルだけを後回しにする
・備考. 画像の読み込みタイミングを遅らせる（後述）
第2章：ダウンロード頻度を減らす（※ブラウザのキャッシュを使って無駄な通信を減らす）
・2-1. ブラウザのキャッシュとは
・2-2. キャッシュ対象にするファイルの種類と保持期間
・2-3. キャッシュを活用する.htaccessの設定方法
・2-4. 更新時に1回だけキャッシュを無効化する方法
・2-5. CDNから読み込めば、ダウンロード回数は0回で済む場合もある
第3章：リソースを減らす（※ファイルサイズとファイル数を減らす）
・3-1. ファイルサイズを減らす方法とメリット
・3-2. ファイル数を減らす意味とメリット
・3-3. CSSを1ファイルに統合する
・3-4. JavaScriptもそのまま統合できるものがある
・3-5. 複数の画像を１ファイルに統合できるCSSスプライトを使う
・3-6. 装飾用の画像はCSSで置き換えられることもある
・3-7. 文字は画像化せずにWebフォントを使う
・3-8. 多数の小さなアイコンはWebフォントを使えないか検討する
・3-9. 小さな画像はHTMLかCSSに埋め込む（Base64でエンコード）
・3-10. JavaScriptではなくCSSで実現できるものはCSSで作る
・3-11. HTMLの構造をシンプルに保つ
第4章：圧縮を有効にして転送量を減らす（※サーバ側でデータを圧縮して転送量を減らす）
・4-1. サーバ側で圧縮するメリットとデメリット
・4-2. 自動圧縮の対象にするファイルの種類
・4-3 サーバ側で圧縮する.htaccessの設定方法
・4-4. 最初から圧縮した状態のファイルを置いておく方法
第5章：ソースを縮小化する
・5-1. 配布されているソースの場合は、縮小化版を使う
・5-2. CSSソースを縮小化する方法
・5-3. JavaScriptソースを縮小化する方法
・5-4. HTMLも縮小化できる
・備考. CGIやPHPの場合は縮小化に意味はない
第6章：画像サイズを最適化する
・6-1. 効率的な画像形式を選ぶ
・6-2. 画像形式の選び方と、ファイルサイズの減らし方
・6-3. 画像の次世代フォーマットを使う場合の書き方
・6-4. 適切な面積サイズになるよう画像を加工しておく
・6-5. 適切な解像度の画像が自動選択されるようにするHTMLの書き方
・6-6. 拡大操作を前提にできるならサムネイルを並べる
・備考. アニメーションGIF形式よりも動画形式の方が軽い場合もある
第7章：画像データを結合する
・7-1. CSSスプライトの仕組みとメリット・デメリット
・7-2. CSSスプライト用に画像を結合する方法
・7-3. CSSスプライトの使い方（HTML＋CSSソースの書き方）
・7-4. CSSスプライト自動生成ツールを使う方法（簡単）
・備考. CSSスプライトでも画像の代替文字を用意したい場合
第8章：画像の読み込みを後回しにする（※必要になるまで画像を読み込まない）
・8-1. 遅延読み込み（Lazy Load）のイメージ
・8-2. ブラウザ標準機能でLazy Loadを実現する方法（とても簡単）
・8-3. Lazy Loadを実現するスクリプト
・8-4. Lazy Loadの活用方法例（HTMLの書き方）
・備考. Lazy Loadスクリプト使用時の注意点
第9章：名前解決を先に済ませる
・9-1. 事前の名前解決（DNSプリフェッチ）で待ち時間を減らせる理由
・9-2. DNSプリフェッチの書き方・記述例
・9-3. 名前解決が必要なドメインの調べ方
第10章：サーバの応答時間を短縮する
・10-1. 動的生成の場合には、できるだけキャッシュを使う
・10-2. 動的生成を静的配信に切り替えるプラグインを使う
・10-3. 動的配信が不要なら静的ファイルで用意しておく
・備考1. モジュール版PHPが使えるサーバを使う
・備考2. CDNを使えるなら使う
補足A：画像を使わずに済ませるCSSの活用方法いろいろ
・A-1. グラデーションはCSSで作る
・A-2. 半透明なデザインはCSSで作る
・A-3. 画像の上に文字や物体を重ねる描画もHTML＋CSSだけで済む
・A-4. 影付き文字・縁取り文字もCSSで作る
・A-5. ボックスや画像の角を丸くしたり、円形にしたりするのもCSSで作る
・A-6. 画像を円形にくり抜いたり縁をぼかしたりするのもCSSで作る
・A-7. 回転・傾けもCSSで作る
・A-8. テクスチャーで彩る文字もCSSで作る：文字の形に画像をくり抜くのもCSSで作る
補足B：Webフォント適用対象の表示を速くする
・B-0. フォントの種類を指定するCSSの書き方
・B-1. 日本語を含むWebフォントサービスを使う
・B-2. Webフォントを使う際には、font-displayプロパティを併用する
・B-3. アイコンWebフォントを極力軽くする方法
補足C：リダイレクトを避けるサイト構造
・C-1. レスポンシブWebデザインを採用して転送を不要にする
・C-2. モバイル版とPC版を分離する場合は、端末に適したページが検索結果に出てくるように書く
・C-3. 移転する場合は301でリダイレクトする
付録α：.htaccessファイルの作り方
・α-1. 本書に掲載の.htaccessをそのまま使う場合
・α-2. .htaccessファイルの作り方
・α-3. .htaccessファイルの設置場所と影響範囲
・α-4. アップロードするとInternal Server Errorになる場合
付録β：本書掲載ソースのダウンロード場所と使い方
おわりに：■重たいサイトをできるだけ軽くする10の方法

以上、主に「Webの表示速度UPなんて考えたこともない！」という方へ向けた基礎を、できるだけ詳しく平易に解説しています。
重いページを軽くすると言っても、アクロバットなテクニックは不要です。ちょっとした設定で済む方法もありますし、簡単なツールを使えば済む方法もあります。もちろん、少々の手間が必要な方法もありますが、その手間をかけるだけの価値はあります。あなたのウェブサイトについて、「なんとなく読み込みが遅いな……」という不満と「もっと速く表示させる方法はないのかな？」という疑問への解決策を紹介しています。

※Webの表示速度についてこれまで何の対策もしなかった方を主な対象にしているため、既に高速化手法を試した方々にとっては当たり前のことしか書かれていないかもしれません。ご購入前に、上記の目次で内容をご判断下さい。

ウェブサイトで重要なのは中身（コンテンツ）ですから、時間はできるだけ中身の充実のために使いたいものです。極限まで高速化しようとは考えず、無理なく実践できる範囲で、簡単にできそうな方法から試してみて下さい。どれか1つでも実践すれば、それだけ速く表示されるようになるでしょう。
どんなに素晴らしいコンテンツでも、重すぎて読めなければ意味がありませんよね。読み込み待ち時間を減らして、ストレスなくスムーズに表示される、内容の充実したウェブサイトを作ってみて下さい。

本書の特徴は下記の3点です。

—■特徴１■— 順不同の基本10＋補足3
各章は独立しているため順番は関係ありません。詳しく解説していますから、まずはざっと斜め読みして、簡単にできそうな方法からお試し下さい。

—■特徴２■— 読み飛ばしやすい要点枠
各章の冒頭には「お勧め度」と「手軽度」を3段階の星印で示し、オススメ要素を短文で掲載しています。すぐに試すか、後回しにするか、そこで判断すれば時間を節約できるでしょう。

—■特徴３■— ソース収録ZIPを提供
コピー＆ペーストして使えると便利な掲載ソースは、別途ZIPに収録して提供しています。

※本書はB6サイズ換算では306ページありますが、リフロー型なので端末の画面サイズによって総ページ数は変化します。リフロー型ですからどのような大きさの画面でもお読み頂けますが、キャプション付きの画面イメージやサンプルソースも含んでいるため、できるだけ広い画面をおすすめ致します。タブレット以上の大きさが推奨です。