重いサイトを軽くする、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つでも実践すれば、それだけ速く表示されるようになるでしょう。
ぜひ、ストレスなくスムーズに表示される、内容の充実したウェブサイトを作ってみて下さい。
個人でも簡単！ 時間をかけない最低限のSEO、今すぐできる７つの基本
せっかくウェブサイトを作ったのなら、できるだけ多くの人々に訪れて欲しいものですよね。個人サイトでも企業サイトでも。
ウェブサイトのアクセス数(訪問者数)を増やすには、まず検索サイトからの訪問者を増やす必要があります。そのための方策を「SEO（検索エンジン最適化）」と呼びます。 難しそうに感じる方もいらっしゃるかもしれませんが、そもそもSEOの基本はとても簡単です。
そこで、
という方に向けて、短時間で済むSEOの基礎を解説した電子書籍(Kindle本)を作りました。
SEOを考慮したウェブページを作る上で常に気にしておきたい最低限のポイント７つ＋αを解説しています。さらに巻末には参考情報も多数加えました。 初歩の話とはいえ、初めて実践する方でも分かりやすいように解説は詳しめに書いています。ぜひ覗いてみて下さい。
※Kindle Unlimited対応なので、Unlimitedな方々は負担なくお読み頂けます。
紙の書籍とは違ってリフロー型の電子書籍ですから、お使いの端末(画面サイズ)によって総ページ数は変化します。B6サイズ換算でカウントすると、合計188ページあります。 画面キャプチャ画像やサンプルHTMLソースなども含んでいますので、できるだけ大きめの画面で閲覧されることをおすすめしています。タブレットサイズ以上が推奨です。
7インチ程度のタブレットサイズで閲覧すると、中身の表示イメージは概ね下図のような感じになります。
※PC版のKindleをお使いになれば、もっと広い画面でお読み頂けます。
■特徴１■これだけを押さえて！という基本７項目を詳しく解説
基本中の基本に絞り、SEOの初歩を分かりやすく解説。 SEOが初めての方でも簡単に試せるように、基礎とはいえ、それぞれの分量は多めに詳しく解説しています。必要な箇所だけをお読み下さい。
■特徴２■読み飛ばしやすい要点枠を用意
時間の無い方のために、各章の冒頭に要点を短文でまとめてあります。 そこで章の内容を判断し、既に知っている情報なら読み飛ばすことにすれば時間を節約できるでしょう。
■特徴３■追加の３施策＋参考情報７つを用意
ウェブサイト全体を構築する上で実践しておきたいSEOとして3項目の詳解も追加。 巻末には付録として「余力があれば次に実践すると良い」参考情報も紹介しています。
【本書の目次】
はじめに：■時間をかけない最低限のSEO、７＋３項目
第1章：検索ワードを決めて、確実に使う。
- 1-1. 検索ワードに採用する単語を決定する基本
- 1-2. 検索ボリュームを調べて検索ワード選定の参考にする方法
- 1-3. 検索ワードをページ内でしっかり使う
- 1-4. 最適化は1ページ1検索ワードに留める
- 1-5. ある程度の長さがある本文を書く
第2章：タイトルに検索ワードを含める。
- 2-1. 指定文字数内で検索ワードを含むタイトルの付け方
- 2-2. 重要な検索ワードは最初(左側)の方に使っておく
- 2-3. タイトルにサイト名も併記する場合は右側に
- 2-4. 各ページで異なるタイトルを付ける（具体的にする）方法
- 備考. 読みたくなるタイトルを付ける(大げさにはしない)
第3章：見出しと本文の関係をうまく利用する。
- 3-1. 見出しは検索結果のタイトルに使われることもある
- 3-2. 見出しレベル6種類を適切に使い分ける方法
- 3-3. 検索ワードを含めて分かりやすさが増すように書く
- 3-4. 全部の見出しをh1(第１レベル)にしても意味はない
- 3-5. 見出しを画像にしたい場合は代替文字を使う
- 備考. 見出しの文字サイズは自由に調整できる
第4章：概要文(要約文)をしっかり書く。
- 4-1. 概要文は、そのページを読むかどうかの決め手になる
- 4-2. 概要文の書き方：HTMLソース内の記述位置
- 4-3. 概要文の文字数は確実に120文字を超えておく
- 4-4. 検索ワードと関連語を前半にしっかり含んでおく
- 4-5. 更新日付があれば検索結果に表示されることも
- 備考. Keywordsは書いても意味がない
第5章：アンカーテキスト(リンク)にも検索ワードを使う
- 5-1. リンクの種類とリンクが重要な例
- 5-2. サイト内リンクを掲載できる場所の例
- 5-3. 「こちら」ではなく検索ワードでリンクを作る
- 5-4. リンクはa要素で作る（他の方法を使わない）
- 5-5. 隠れたリンクを作らないように
- 備考. リンクリストは箇条書きで作る
第6章：ページ内リンク(ページ内目次)も活用する。
- 6-1. ページ内リンクとは？ 最もローカルなナビ
- 6-2. 検索結果の概要部分にページ内リンクが出ることも
- 6-3. 見出しをすべてページ内リンクにしても良い
- 6-4. 見出し単位でもリンクされやすくする方法
- 備考. 話題が異なるならページそのものを分割する
第7章：画像の掲載方法を最適化する
- 7-1. 代替文字には適切な検索ワードを含めておく
- 7-2. 重要な文字を画像化しない（テキストで表示する）
- 7-3. キャプションをテキストで掲載する
- 7-4. 無駄に重たい画像にしない（軽くする）
第8章：パンくずリストを作る
第9章：サイトマップを作る
第10章：検索サイト提供サービスに登録しておく
- 10-1. Google Search Consoleでサイトマップを送信
- 10-2. Bing Webマスターツールでサイトマップを送信
- 備考. Yahoo! Japanへの対策は？
《Appendix：アクセス向上のための参考情報７個》
- 付録A：軽くする（せめて第一画面をすぐに表示させる）
- A-1. 読み込むファイル数やサイズを減らす方法
- A-2. CDN経由でライブラリを読み込む方法
- A-3. 外部ファイルの読み込みを後回しにする方法
- A-4. プリフェッチ機能を利用して先読みさせる方法
- A-5. もっと軽くする余地がないかPageSpeed Insightsで調べる
- 付録B：OGPやTwitter Cardsを加えてSNS連携
- 付録C：SNSボタンを掲載する
- 付録D：モバイルフレンドリーかどうかを確認／レスポンシブWebデザインでPC・モバイル両対応に
- 付録E：ずっと変わらない自分のドメイン名を持つ
- 付録F：移転するなら望ましい形でリダイレクト（自動転送）を設定する
- 付録G：SSL証明書を使ってhttpsでアクセス可能にする
おわりに■極力時間をかけない、最初のステップとしてのSEO
ウェブサイトの中で最も重要なのは中身（コンテンツ）です。SEOは対象サイトの中身があってこそ意味の出る方法ですから、SEOに時間を消費してしまうよりは中身の充実に時間を使いたいものです。
しかし、そうは言っても、せっかくウェブサイトを作ったのなら多くの人々に訪れて欲しいものでもありますよね。
SEOは基礎さえしっかり押さえておけば、まずは充分です。本書の７＋３項目をきっちり実践して、SEOに時間を使いすぎることなく、中身の充実にこそ時間を使ってみて下さい。
1月1日になった瞬間にウェブサイトを正月デザインに変えるには
とうとう2014年も最後の週になりました。今日が仕事納めな方々も多いのでしょうか。
1月1日になったら自動的にウェブサイトを「お正月デザイン」に切り替えたいと考えているウェブ製作担当者さんもいらっしゃるでしょうね。
そんな方々のために、All Aboutで記事『指定日時にページを自動更新する方法(cron編・CGI編)』を公開しております。自動更新したい日時を指定しておけば、自力で作業しなくても指定日時に自動的にページを更新できます。
ご参考にどうぞ！
2014年分の新規記事の公開は、先日公開した記事『吹き出しツールチップが簡単に作れるPowerTipの使い方』で終わりです。2015年も1月から新しい記事を公開していきます。来年もどうぞよろしくお願い致します！
ガイドブログOPEN？
あ、いつの間にか、ブログのデザインがAll About用デザインになっていました。たしか、昨日あたりに正式OPENしたんでしたっけね？
ネタができれば何か投下していきたいと思います。(^_^;)
個人サイトにもブログがありますし、日々Twitterで呟いていますので、あんまり日常的な話題は書かないとは思いますが。記事にしようかな……どうしようかな……というような記事案(になる前の欠片のような？)でも垂れ流しましょうかね？
せっかくスペースがあるわけですから、何かには活用したいと思います。
「必要があるからスペースを作る」のではなく、逆の「スペースがあるから活用方法を考える」というアプローチは、何か新しいものを捻り出すのには必要な考え方だと思います。たぶん。(^_^;)
あ、昨日、リンクをスタイルシートで装飾して「角の丸いタブ」に見せるデザインの作り方を解説した2008年公開の記事『角の丸い「タブ」をHTMLとCSSで作る方法』を、6年ぶりに全面改定しましたので、ご興味がおありでしたら覗いてみて下さい～。
11月に公開・改訂したウェブ作成関連記事の一覧
月末になりましたので、今月に公開した記事の一覧を載せておきます。読み逃している記事がありましたら、ぜひ覗いてみて下さい。
新規記事(2本)：
●指定量スクロールした時点で上端にメニューを出す方法（2014/11/29）
ウェブページをある程度スクロールした段階で、描画領域の上端にメニューなどの任意の「バー」を固定表示させる方法を解説。
●floatを使わないCSSで、段組(マルチカラム)を作る方法（2014/11/20）
古いブラウザさえ無視できれば、floatプロパティやclearfixなどのCSSハックを駆使しなくても、段組はもっと楽に作成できます。CSSで段組(マルチカラム)レイアウトを簡単に作成する方法をご紹介。
新着まとめ(1本)：
●たくさん画像を掲載する際に便利なテクニック5選｜All About（オールアバウト）（2014/11/28）
画像表示テクニックに関する記事をを5種類（6本）紹介しています。
改訂記事(2本)：
●閲覧者がスタイルシートを切り替えられる機能を作る [ホームページ作成] All About（2014/11/11）
2007年に公開した記事を改訂しました。
●文字数に関係なく、表(table)の列幅を均等にする方法 [ホームページ作成] All About（2014/11/05）
2009年に公開した記事を改訂しました。
今月の新着・更新は、以上（記事4本＋まとめ1本）です。興味がおありの記事がありましたら、覗いてみて下さい。
Media Queriesを使って新旧ブラウザにうまく対応させるレガシーファースト
CSS3の「Media Queries」を使ってレスポンシブWebデザインを採用するとき、モバイルファーストという書き方があります。
先に(あまり複雑なレイアウトにはならない)「モバイル向けのデザイン」を記述しておいて、そこからMedia Queriesを使って(モバイル用のデザインに上書きする形で)「広い画面用のデザイン」を追加していく記述方法です。
これと同じ方法を使って、以下の2ステップでCSSを書けば、新旧ブラウザの両方に楽にうまく対応させる記述ができそうです。
(1) 先に『Media Queriesを使わないで』古いブラウザ向けのCSSを書いておく。
(2) その後で『Media Queriesを使って』最近のブラウザ向けのCSSを(必要に応じて上書きする形で)書く。
※ここでの「古いブラウザ」とは、「Media Queriesを解釈できないブラウザ」を想定しています。つまり、「古いブラウザ」は(1)のCSSだけが読めて、(2)は読まないことになります。
モバイルファーストならぬ、レガシーファーストとでも言えるでしょうか。
古いブラウザ用のデザインを作る場合、たいていは「単純なレイアウト」にせざるを得ないでしょうから、この書き方だと全体的に労力が少なくて済む気がします。（最終的にどんなデザインにしたいのかに依りますが。^^;）
「Media Queriesを解釈できないブラウザ」は同時に「最近の様々なCSSテクニック」も表示できないことが多々あるので、それなら「Media Queriesを解釈できないブラウザには、レガシーデザインのCSSしか読ませない」という方針です。
この方針でデザインを作ると、何かと手間が掛からない気がします。
ちなみに、Internet ExplorerがMedia Queriesに対応するのはIE9以降です。
「IE8以下にもMedia Queriesを解釈させるスクリプト」は存在しますが、それは使わないでおいて、「IE8以下にはレガシーブラウザ向けのCSSだけを読ませる」という方針の方が、楽にうまくデザインできる気がします。
……という話を、そのうちAll Aboutで記事にしてみようかな……と、なんとなく考えています。(^_^;)
おぼろげに考えているだけですが。
