読み込みが速い HTML ページを作成するための Tips

これらの Tips は、一般の知識や実験に基づくものです。

最適化された Web ページは訪問者に対して応答性のよいサイトを提供するだけでなく、Web サーバやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、ニュース速報のような緊急事態で通信量が急増するサイトでは重要でしょう。

ページの読み込みパフォーマンスの最適化は、ナローバンドのダイヤルアップ接続やモバイルデバイスの利用者向けコンテンツのためだけではありません。それはブロードバンド向けコンテンツでも重要であり、高速接続の利用者であっても劇的に改善するでしょう。

Tips

ページの量の削減

ページの量は、ページ読み込みパフォーマンスにおいて断然重要な要素です。

最小化として知られる不要なホワイトスペースやコメントの削除、インラインのスクリプトや CSS の外部ファイルへの移動によりページの量を削減することで、ページの構造変更を最小限にしてダウンロードのパフォーマンスを向上できるでしょう。

HTML Tidy のようなツールを利用すると、妥当な HTML ソースから行頭のホワイトスペースや過剰な空行を自動的に取り除くことができます。他に JavaScript ソースを、書式変更や難読化および長い識別子を短いものに置き換えることで "縮小 (compress)" するツールもあります。

最小限のファイル数

Web ページが参照するファイル数を削減することで、ページのダウンロードに必要な HTTP コネクションの数が減ります。

ブラウザのキャッシュ設定に従い、CSS、JavaScript、画像のファイルについて過去にダウンロードしたときからファイルが変更されたかを確認するためにブラウザは If-Modified-Since リクエストを Web サーバに送ることがあります。

Web ページが参照するファイルの数を削減することで、それらのリクエスト送信やレスポンス受信にかかる時間も減ります。

CSS で多量の背景画像を使用している場合は、いわゆるスプライトで画像を 1 つに結合することで必要な HTTP 参照の数を減らすことができます。すなわち、背景として用いる画像は毎回同じものを適用し、それを適切な x/y 座標に調整します。これは寸法が限られている要素について最善の方法ですが、適用できない場合もあるでしょう。しかし、HTTP リクエストを少なくして単一の画像をキャッシュすることで、ページの読み込み時間を削減できます。

ページのレンダリングを行う前に各 CSS や JavaScript ファイルの更新時間を確認する必要があるため、参照するファイルの最終更新時間の確認に長い時間がかかると、Web ページが最初に表示されるのが遅れてしまいます。

ドメイン検索の削減

ドメインが分かれていると DNS 検索に時間がかかるため、CSS の link や JavaScript および画像の src でドメインが分かれている数の多さに応じてページ読み込み時間が延びていくでしょう。

現実的でない場合があるかもしれませんが、ページがあるドメインと異なるドメインの使用数は必要最低限にするよう注意すべきです。

キャッシュを再利用するコンテンツ

どんなコンテンツでも、キャッシュできること、キャッシュされること、キャッシュの期限が適切であることを確認しください。

特に、Last-Modified に注意を払ってください。これは、効率のよいページキャッシュを可能にします。このヘッダにより、必要なファイルを読み込もうとしているユーザエージェントにそれがいつ更新されたかといった情報を伝えます。多くの Web サーバは静的なページ (たとえば .html や .css) について、ファイルシステムに保存している更新日時をもとに Last-Modified を自動的に付加します。動的なページ (たとえば .php や .aspx) では、ファイルシステムから取得できませんのでそのヘッダを送信しません。

よって特に、動的に生成されるページのためにこの問題について調べることは有益です。多少複雑ですが、通常キャッシュできないページでのページリクエストの多くを節約できるでしょう。

詳細情報:

ページのコンポーネントの最適な順序

始めに初期表示に必要な CSS や JavaScript と合わせてコンテンツをダウンロードすることで、ページの読み込み中に最速の明らかなレスポンスを得ることができます。このコンテンツは一般的にテキストであり、それゆえ転送時に文字列圧縮の恩恵を得ることでユーザにさらなる素早いレスポンスを与えます。

ページで必要になる、使用する前に読み込みを完了しておく動的機能は、始めは無効化しておきページの読み込み後にのみ有効化するようにしましょう。これにより JavaScript はページコンテンツの後に読み込まれるようになり、またページの読み込み後にのみ利用可能になります。

インラインスクリプト数の削減

パーサーは、インラインスクリプトがパース中にページの構造を変えることがあると考えなければならないため、ページの読み込みにおいて不経済です。一般的にはインラインスクリプトの使用を減らし、また特に document.write() を用いたコンテンツの出力を減らすことで、ページ読み込みのパフォーマンスが向上するでしょう。document.write() に基づく旧来のコンテンツ操作方法ではなく、現行のブラウザ向けの方法である AJAX を使用してください。

現行の CSS と妥当なマークアップの使用

現行の CSS を用いるとマークアップの量を削減し、レイアウトの点で (スペーサーの) 画像使用を減らし、また多くの場合スタイル付けした文字列の画像を置き換えることが可能です。画像は CSS および文字列の組み合わせに比べ、多大なコストがかかります。

妥当なマークアップの使用にはほかにも利点があります。第一に、ブラウザが HTML をパースする際にエラー訂正を行う必要がなくなります。((ユーザの記述法の多様性を認めるか、言い換えると許容範囲をなくした厳密なマークアップを強いるかという哲学的な問題は別として、プログラム的に "正しく" または正規化しましょう))

さらに妥当なマークアップは、Web ページに プリプロセス を行うツールを自由に使用することを可能にします。たとえば、HTML Tidy はホワイトスペースや省略可能な終了タグを除去することができます。ところが、重大なマークアップの誤りがあるページではツールを実行できません。

コンテンツの並べ方

レイアウト用のテーブルは陳腐化した方法であり、もはや使うべきではありません。レイアウトには <div> ブロックを利用してください。なお近い将来はこれに代わり、CSS3 Multi-column レイアウトや CSS3 Flexible Box レイアウトを利用すべきでしょう。

テーブルは現在も妥当なマークアップと考えられていますが、表形式のデータを表示するために用いるべきです。ブラウザがページを迅速に表示するためには、テーブルを入れ子にしないようにしてください。

以下のようにテーブルを深い入れ子にしないでください:

<TABLE>
  <TABLE>
    <TABLE>
          ...
    </TABLE>
  </TABLE>
</TABLE>

以下のように入れ子にしないテーブルやdivを用いてください:

<TABLE>...</TABLE>
<TABLE>...</TABLE>
<TABLE>...</TABLE>

参考情報: CSS3 Multi-column Layout Spec および CSS3 Flexible Box Layout

画像やテーブルのサイズ指定

ブラウザが直ちに画像やテーブルの高さや幅を決めることができれば、ブラウザはコンテンツの再配置を行うことなく Web ページを表示できます。これはページの表示を高速化するだけでなく、ページの読み込みが完了するまでにレイアウトが不安定に変化することを防ぎます。よって、可能な限り画像には height と width を指定するべきです。

テーブルは以下のセレクタとプロパティの組み合わせを用いるべきです:

  table-layout: fixed;

そして、HTML タグ COL および COLGROUP を用いて列の幅を指定しましょう。

ユーザエージェント要件の賢い選択

ページデザインを最大限に改善するため、プロジェクトで程々のユーザエージェント要件を定めるようにしてください。コンテンツがすべてのブラウザ、特に旧バージョンのブラウザを除いたものにおいて、ピクセル単位で正確に見えることを求めないでください。

理想的な基本の最小要件は、適切な標準仕様をサポートする現行ブラウザを考慮するべきです。これは以下のブラウザが含まれます: 各プラットフォームの Firefox 3.6+、Windows の Internet Explorer 8.0+、Windows の Opera 10+、Mac OS X の Safari 4。

ただし、この記事に記載している秘訣の多くはあらゆるユーザエージェントに適用できる汎用的なテクニックであり、かつブラウザのサポート要件にかかわらずどのような Web ページにでも適用できます。

ページ構造の例

· HTML

· HEAD

· LINK ...
ページの外観に必要な CSS ファイルです。管理のために関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。

· SCRIPT ...
ページの読み込み中に必要な機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。

管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。

· BODY

· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。

· SCRIPT ...
DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。

管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。

ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。

可能なら async や defer を使用する

特に複数の script タグを置く場合は、可能であれば JavaScript のスクリプトを async および defer に対応するようにして、async を使用しましょう。
これにより、ページで JavaScript が読み込み中である間はレンダリングを中断できます。さもなければ、ブラウザはこれらの属性を持たない script タグの後にあるコンテンツをレンダリングしないでしょう。

注意: これらの属性が初回のページ読み込みに大きな効果があるとしても、属性は使用するべきですがすべてのブラウザで動作するとは考えないようにしてください。よい JavaScript コードを作るためのガイドラインすべてに従っていれば、コードを変更する必要はありません。

Original Document Information

Author(s): Bob Clary, Technology Evangelist, Netscape Communications
Last Updated Date: Published 04 Apr 2003
Note: This reprinted article was originally part of the DevEdge site.