Tips for Authoring Fast-loading HTML Pages

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. これらの秘訣は、よく知られた知識や実験を元にしています。ウェブページの読込のパフォーマンスを向上させる助けとなる、さらなる助言をお持ちであれば、Discussion page of this articleにて提案してください。

最適化されたウェブページは、訪問者により素早く反応するサイトをもたらすだけでなく、ウェブサーバやインターネットへの接続負荷を軽減します。これは、大規模なサイト、あるいはニュース速報などの例外的な状況によってトラフィックが急増するサイトにとって、とても重大なことです。

ページの読込パフォーマンスの最適化とは、単に、低速なダイアルアップ回線の訪問者が見るであろうコンテンツを用意することではありません。高速回線向けのコンテンツについても同じくらい重要であり、最高速の回線を持つ訪問者にとってさえ、劇的な向上をもたらすことができます。

早く読み込まれるHTMLページを作成する秘訣

ページ容量を減らしましょう

ページ容量は、ページの読込パフォーマンスにおいて圧倒的に最重要の要因です。

不要な空白やコメントを除去したり、HTMLに直接書き込まれたスクリプトやCSSを外部ファイルに移すことで、ページの構造の変化は最小限で、ダウンロードのパフォーマンスを向上できます。

HTML Tidyのようなツールは、validなHTMLソースから、先頭の空白や余計な空行を自動的に取り除きます。そのほかのツールは、JavaScriptを、再フォーマット、あるいはソースの難読化や長い識別子を短いものへ縮めることにより、「圧縮」することができます。

ファイルの数をできるだけ少なくしましょう

一つのページ内で参照されるファイルの数を減らせば、ページのダウンロードに必要なHTTP接続の数が減ります。

ブラウザのキャッシュの設定によっては、CSS、JavaScriptあるいは画像ファイルのそれぞれについて、最後にダウンロードされたときから更新されているかどうかを確かめるため、サーバにIf-Modified-Sinceリクエストを送信するかもしれません。

ウェブページ内で参照されるファイルの数を減らすことにより、ブラウザからこれらのリクエストが送られ、それに対する返答が届くまでに必要となる時間が減ります。

ファイルの最終更新日時についての問い合わせに多くの時間が費やされると、ウェブページの最初の表示が遅れます。ブラウザはページのレンダリングを行う前に、CSSやJavaScriptファイルそれぞれの更新日時を問い合わせねばならないためです。

ドメイン検査を減らしましょう

分割された別々のドメイン一つ一つについてDNS検査するのは時間がかかるため、CSS、JavaScript、または画像を参照するのに用いる異なるドメインの数を減らすことで、ページ読込の時間が減ります。

これは必ずしも実用的であるとは限りません。しかしながら、ページにおける異なるドメインの数は、可能な限り最小で使うよう常に気をつけておくべきです。

再利用されるコンテンツをキャッシュしましょう

キャッシュされうるどのようなコンテンツでも、適切な期限切れまでの間、キャッシュされているかを確かめてください。

具体的にはLast-Modifiedヘッダに注意してください。これは効率的なページのキャッシュを可能にします。このヘッダを用いると、ロードしようとしているファイルが最後にいつ更新されたかについての情報が、ユーザ・エージェントに伝えられます。ほとんどのウェブサーバーは、静的なページ（例えば.htmlや.css）については、ファイルシステムに記録されている最終更新日時に基づき、自動的にLast-Modified headerを付加します。動的なページ（例えば.phpや.aspx）については、これは行われず、ヘッダは送られません。

従って、特に動的に生成されるページでは、この件について少し調べるだけでも有益です。多少複雑になることもありますが、通常はキャッシュされえないページへの多くのリクエストを抑えてくれるでしょう。

さらなる情報:

ページの構成要素を並べ替えましょう

初めにページの内容をダウンロードさせることで、利用者はページ読込のさい明白に最も早い応答を得られます。

最初の表示に必要ないかなるCSSやJavaScriptよりも、ページの内容が第一にダウンロードされるべきです。この内容は通常は本文（htmlファイル）であり、これを圧縮することで、利用者に素早い応答を返すという恩恵が得られます。

どのようなDHTMLの機能も、それが実行される前にページが完全に読み込まれている必要があるので、初めは無効にしておき、読込の後になって有効にするべきです。

インラインスクリプトの数を減らしましょう

インラインスクリプト（HTMLに直接書き込まれたスクリプト）は、パーサが「インラインスクリプトはページ構造を修正する」と仮定してしまうので、ページの読込に高くつきます。一般に、インラインスクリプトわけても内容を出力するdocument.write()の利用を減らすことは、総合的なページの読込を向上させます。

最新のブラウザでページの内容を操作するには、document.write()に基づいた古い手法ではなく、最新のW3C DOMメソッドを用いましょう。

コンテンツを分割しましょう

ページの内容が完全にダウンロードされる前にページを表示できるように、<table>で作られたレイアウトを<div>のブロックに置き換えるか、表をより小さな表に分割しましょう。

次のような、深く入れ子になったtableよりも、

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

次のような、入れ子になっていないtableやdivを使いましょう。

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

画像や表のサイズを指定しましょう

もしブラウザが画像や表の高さか幅あるいはその両方を即座に決定できたら、内容をリフローする必要なくウェブページを表示することができるでしょう。これはページの表示を早めるだけでなく、読み込みが完了するときにページのレイアウトがうっとうしく変化するのを防ぎます。

画像（img）は、heightやwidthを指定されるべきです。

表（table）は、CSSのtable-layout: fixed規則を用い、縦列の幅をCOLやCOLGROUPタグを用いることで指定しておくべきです。

ユーザー・エージェントの必要条件を賢く選びましょう

ページデザインで最大の改善を達成するために、そのプロジェクトに適切なユーザー・エージェントの必要条件が特定されているかを確かめてください。

コンテンツが、すべてのブラウザとりわけ下位のブラウザで、１ピクセルのずれもなく同じに見えるようには要求しないでください。

理想的には、必要最小限の環境は、同じ標準に対応している現代的なブラウザに基づくべきです。それには次のブラウザが含まれます。すべてのプラットフォームのNetscape 7/Gecko 1.0.2+、WindowsのInternet Explorer（バージョン5.5以上）、WindowsのOpera（バージョン7以上）、Mac OS XのSafariです。

しかしながら、この技術文書に列挙されている秘訣の多くが、常識的な技法であることを気にとめておいてください。これらは、どのようなユーザー・エージェントにも適用されるし、あるページがブラウザの必要条件を満たしているかどうかに関係なく、どのようなページにも適用されうるのです。

ページ構造の例

· HTML

· HEAD

· LINK ...
ページの外観に必要なCSSファイル。ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないCSSは、保全のため別々のファイルにしておきましょう。

· SCRIPT ...
ページ読込の間に「必要」な機能のためのJavaScriptファイル。ただし、ページが読み込まれたあとでようやく動作できるDHTMLではありません。

·ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。

· BODY

小さな塊（複数のtable / 複数のdiv）に分けられた、ページの内容。ページ全体がダウンロードされるのを待たずに表示されます。

· SCRIPT ...
DHTMLを実行するために使われうる、あらゆるスクリプト。DHTMLは通常は、ページが完全に読み込まれ、全ての必要なオブジェクトが初期化された後に、ようやく動作できます。ページ内容の前にこれらのスクリプトを読み込む必要はありません。読込の初期のページ表示を遅くするだけです。

ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。

ロールオーバー効果のために画像を用いるときは、ページ内容がダウンロードされた後に、ここでそれらを先読みしておくべきです。

元になった文書の情報

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.