重いサイトを軽くする、Webページ表示速度の高速化10の基本
重たいウェブサイトを軽くする方法として、Webページの表示を速くする施策（＋遅くなる要因を排除する方法）10項目を解説した電子書籍(Kindle本)を書きました。
あなたのウェブサイトについて、「なんとなく読み込みが遅いな……」という不満と「もっと速く表示させる方法はないのかな？」という疑問への解決策を紹介しています。
主に「Webの表示速度UPなんて考えたこともない！」という方へ向けた基礎を、できるだけ詳しく平易に説明した解説書です。
ちょっとした設定で済む方法もありますし、簡単なツールを使えば済む方法もあります。もちろん、少々の手間が必要な方法もありますが、その手間をかけるだけの価値はあります。
どんなに素晴らしいコンテンツでも、重すぎて読めなければ意味がありませんよね。読み込み待ち時間を減らして、ストレスなく読み進められるWebサイトにしてみて下さい！
※Kindle Unlimited対応なので、Unlimitedな方々は負担なくお読み頂けます。
紙の書籍とは違ってリフロー型の電子書籍ですから、お使いの端末(画面サイズ)によって総ページ数は変化します。B6サイズ換算でカウントすると、合計306ページあります。 画面キャプチャ画像やサンプルソースなども含んでいますので、できるだけ大きめの画面で閲覧されることをおすすめしています。タブレットサイズ以上が推奨です。
7インチ程度のタブレットサイズで閲覧すると、中身の表示イメージは概ね下図のような感じになります。
※PC版のKindleをお使いになれば、もっと広い画面でお読み頂けます。
■特徴１■順不同の基本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章：名前解決を先に済ませる
第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の方法
ウェブサイトで重要なのは中身（コンテンツ）ですから、時間はできるだけ中身の充実のために使いたいものです。
極限まで高速化しようとは考えず、無理なく実践できる範囲で、簡単にできそうな方法から試してみて下さい。
どれか1つでも実践すれば、それだけ速く表示されるようになるでしょう。
ぜひ、ストレスなくスムーズに表示される、内容の充実したウェブサイトを作ってみて下さい。
