にしし ふぁくとりー:西村文宏 個人サイト

電子書籍「重いサイトを軽くする、Webページ表示速度の高速化10の基本」

2019/06/13 出版

■Web製作系実用書

2019年6月13日(木)に、Kindle電子書籍として発売された電子書籍です。
西村文宏(にしし)の著書としては8冊目で、出版社を介さない自己製作の電子書籍としては3冊目です。

軽量化+高速化で読み込み待ち時間を軽減!

「重いサイトを軽くする、Webページ表示速度の高速化10の基本」

重いサイトを軽くする、Webページ表示速度の高速化10の基本:西村文宏(著)
書籍情報(電子書籍)
著者西村 文宏
形態電子書籍
対応端末Kindle、Kindleアプリ
販売形態Kindle Unlimited対応
発売日2019年6月13日
ASINB07T17QSQ5
サイズ約18.5MB

※この本に書かれている内容の一部は、もはや現在では古くなっている点にご注意下さい。本書を今お読み頂く意味はあまりなく、もっと新しい類書をご参照になるのが良いと思います。 本書(電子書籍)は、2023年1月29日に販売を終了しました。

重たいウェブサイトを軽くする方法として、Webページの表示を速くする施策(+遅くなる要因を排除する方法)10項目を解説した電子書籍(Kindle本)を書きました。 あなたのウェブサイトについて、「なんとなく読み込みが遅いな……」という不満と「もっと速く表示させる方法はないのかな?」という疑問への解決策を紹介しています。

主に「Webの表示速度UPなんて考えたこともない!」という方へ向けた基礎を、できるだけ詳しく平易に説明した解説書です。 ちょっとした設定で済む方法もありますし、簡単なツールを使えば済む方法もあります。もちろん、少々の手間が必要な方法もありますが、その手間をかけるだけの価値はあります。 どんなに素晴らしいコンテンツでも、重すぎて読めなければ意味がありませんよね。読み込み待ち時間を減らして、ストレスなく読み進められるWebサイトにしてみて下さい!

Kindle Unlimited対応なので、Unlimitedな方々は購入することなくKindleアプリ等でお読み頂けます。

紙の書籍とは違ってリフロー型の電子書籍ですから、お使いの端末(画面サイズ)によって総ページ数は変化します。B6サイズ換算でカウントすると、合計306ページあります。 画面キャプチャ画像やサンプルソースなども含んでいますので、できるだけ大きめの画面で閲覧されることをおすすめしています。タブレットサイズ以上が推奨です。 7インチ程度のタブレットサイズで閲覧すると、中身の表示イメージは概ね下図のような感じになります。

「重いサイトを軽くする、Webページ表示速度の高速化10の基本」西村文宏(著)

※PC版のKindleをお使いになれば、もっと広い画面でお読み頂けます。

本書の内容

■特徴1■順不同の基本10項目+補足3項目

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

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

各章の冒頭には「お勧め度」と「手軽度」を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. 1画面目で使わないスタイルだけを後回しにする
    • 備考. 画像の読み込みタイミングを遅らせる(後述)
  • 第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. 複数の画像を1ファイルに統合できる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つでも実践すれば、それだけ速く表示されるようになるでしょう。

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

※この電子書籍は、Kindle端末またはKindleアプリでのみお読み頂けます。Kindle端末がなくても、iOS用やAndroid用のKindleアプリを使ってお読み頂けます。

※紙版の出版はされておりません。

※お読み頂く際の画面サイズは「タブレット以上」をお勧めしています。それより小さいと、図表が縮小されすぎて読みにくいためです。

Last modified: 2023/01/29.

--- 当サイト内を検索 ---