■特徴１■順不同の基本10項目＋補足3項目

各章は独立しているため順番は関係ありません。詳しく解説していますから、まずはざっと斜め読みして、簡単にできそうな方法からお試し下さい。

■特徴２■読み飛ばしやすい要点枠

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

■特徴３■ソース収録ZIPを別途提供

コピー＆ペーストして使えると便利な掲載ソースは、別途ZIPに収録して提供しています。(※本書の末尾で案内)

目次

詳しい目次は下記に掲載しています。まずは斜め読みして、使えそうな方法から試してみて下さい！

• はじめに：■2秒以内に表示される「軽いページ」が望ましい
• 序章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製作時間はできるだけ中身の充実のために使いたい

ウェブサイトで重要なのは中身（コンテンツ）ですから、時間はできるだけ中身の充実のために使いたいものです。

極限まで高速化しようとは考えず、無理なく実践できる範囲で、簡単にできそうな方法から試してみて下さい。 どれか1つでも実践すれば、それだけ速く表示されるようになるでしょう。

ぜひ、ストレスなくスムーズに表示される、内容の充実したウェブサイトを作ってみて下さい。