From 00eefb70502334834a169fe9b26aa307b89607d7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 13 May 2021 00:39:06 +0900 Subject: conflicting から Learn/HTML/Howto/Author_fast-loading_HTML_pages を移動 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit conflicting ディレクトリ内の翻訳文の方が新しいので、こちらのファイルを本来の場所に移動した。 --- .../author_fast-loading_html_pages/index.html | 202 ------------- .../author_fast-loading_html_pages/index.html | 313 +++++++++++++-------- 2 files changed, 197 insertions(+), 318 deletions(-) delete mode 100644 files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html diff --git a/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html deleted file mode 100644 index 3badead64e..0000000000 --- a/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: 読み込みが速い HTML ページを作成するための Tips -slug: conflicting/Learn/HTML/Howto/Author_fast-loading_HTML_pages -tags: - - Advanced - - Guide - - HTML - - NeedsUpdate - - Performance - - Web - - Web Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages -original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages ---- -

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

- -

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

- -

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

- -

豆知識

- -

ページの量の削減

- -

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

- -

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

- -

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

- -

ファイル数の最少化

- -

ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な HTTP コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。

- -

ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの If-Modified-Since ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。

- -

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

- -

コンテンツ配信ネットワーク (CDN) を使用する

- -

この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。

- -

CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、待ち時間が短縮されます。

- -

参考文献:

- - - -

ドメイン検索の削減

- -

ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。

- -

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

- -

再利用されるコンテンツのキャッシュ

- -

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

- -

特に、Last-Modified ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (.html、.css など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に Last-Modified ヘッダーを追加します。もちろん、動的なページ (.php、.aspx など) については取得できないので、ヘッダーを送信しません。

- -

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

- -

詳細情報:

- -
    -
  1. HTTP Conditional Get for RSS Hackers
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. Wikipedia の HTTP ETag の記事
    4. -
  4. Caching in HTTP
    5. -
- -

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

- -

最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。

- -

使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。

- -

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

- -

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

- -

最新の CSS と正しいマークアップの使用

- -

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

- -

正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)

- -

さらに、正しいマークアップをすることによって、ウェブページをプリプロセスができる他のツールが自由に利用できるようになります。例えば、HTML Tidy はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。

- -

コンテンツをまとめる

- -

テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに floats、positioning、フレックスボックス、グリッドを使用してください。

- -

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

- -

以下のように深い入れ子のテーブルを使用する代わりに、

- -
<table>
-  <table>
-    <table>
-          ...
-    </table>
-  </table>
-</table>
- -

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

- -
<table>...</table>
-<table>...</table>
-<table>...</table>
-
- -

CSS Flexible Box Layout と CSS Grid Layout の仕様書も参照してください。

- -

SVG の資産を最小化し圧縮する

- -

多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。

- -

画像を縮小して圧縮する

- -

画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 Compress Jpeg、Tiny PNG、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。

- -

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

- -

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

- -

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

- -
  table-layout: fixed;
-
- -

そして、 <col> 要素および <colgroup> 要素を用いて列の幅を指定しましょう。

- -

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

- -

ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。

- -

理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。

- -

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

- -

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

- -

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

- -

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

- -

ページ構造の例

- -

· HTML

- -
-
· HEAD
-
- -
-
-
-
· LINK ...
- ページの外観に必要な CSS ファイルです。管理のために関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
-
-
-
- -
-
-
-
· SCRIPT ...
- ページの読み込み中に必要な機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。
-
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
-
-
-
- -
-
· BODY
-
· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。
-
- -
-
-
-
· SCRIPT ...
- DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。
-
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
-
ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。
-
-
-
- - - - diff --git a/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html index 0a2b8dc697..3badead64e 100644 --- a/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html @@ -1,121 +1,202 @@ --- -title: Tips for Authoring Fast-loading HTML Pages -slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +title: 読み込みが速い HTML ページを作成するための Tips +slug: conflicting/Learn/HTML/Howto/Author_fast-loading_HTML_pages tags: + - Advanced + - Guide - HTML -original_slug: Tips_for_Authoring_Fast-loading_HTML_Pages + - NeedsUpdate + - Performance + - Web + - Web Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Web/Guide/HTML/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）については、これは行われず、ヘッダは送られません。 -

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

さらなる情報: -

-
  1. HTTP Conditional Get for RSS Hackers -
  2. HTTP 304: Not Modified -
  3. On HTTP Last-Modified and ETag -
-

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

-

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

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

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


-

-

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

-

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

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

-

最新のCSSと妥当なマークアップを用いましょう

-

最新のCSSの利用は、マークアップの量を減らし、レイアウトに関する画像の必要性を減らすことができます。また、実質的には文章を画像にしただけで、それと同等の見た目を得られるCSSと文章よりも負担の大きい画像を、多くの場合に差し替えることができます。 -

妥当なマークアップの利用には、そのほかの利点があります。妥当なマークアップは、ブラウザがHTMLを構文解析する際に「誤り訂正」を行わせないばかりでなく、ウェブページの前処理を行うことができる他のツールを自由に利用することも可能にします。例えば、HTML Tidyは、空白や任意の終了タグを省略することができますが、深刻なマークアップの誤りのあるページでは動作するのを拒みます。 -

-

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

-

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

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

-
<TABLE>
-  <TABLE>
-    <TABLE>
+
これらの豆知識は、一般の知識や実験に基づくものです。

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

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

+
+
豆知識

+
+
ページの量の削減

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

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

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

+
+
ファイル数の最少化

+
+
ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な HTTP コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。

+
+
ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの If-Modified-Since ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。

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

+
+
コンテンツ配信ネットワーク (CDN) を使用する

+
+
この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。

+
+
CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、待ち時間が短縮されます。

+
+
参考文献:

+
+
+
+
ドメイン検索の削減

+
+
ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。

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

+
+
再利用されるコンテンツのキャッシュ

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

+
+
特に、Last-Modified ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (.html、.css など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に Last-Modified ヘッダーを追加します。もちろん、動的なページ (.php、.aspx など) については取得できないので、ヘッダーを送信しません。

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

+
+
詳細情報:

+
+
    
+ 
  1. HTTP Conditional Get for RSS Hackers
    2. 
+ 
  2. HTTP 304: Not Modified
    3. 
+ 
  3. Wikipedia の HTTP ETag の記事
    4. 
+ 
  4. Caching in HTTP
    5. 
+

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

+
+
最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。

+
+
使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。

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

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

+
+
最新の CSS と正しいマークアップの使用

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

+
+
正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)

+
+
さらに、正しいマークアップをすることによって、ウェブページをプリプロセスができる他のツールが自由に利用できるようになります。例えば、HTML Tidy はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。

+
+
コンテンツをまとめる

+
+
テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに floats、positioning、フレックスボックス、グリッドを使用してください。

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

+
+
以下のように深い入れ子のテーブルを使用する代わりに、

+
+
<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
-
  •  Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
-
  •  Note: This reprinted article was originally part of the DevEdge site.
-

-

-

-

-{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML", "zh-cn": "cn/Tips_for_Authoring_Fast-loading_HTML_Pages" } ) }}
+    </table>
+  </table>
+</table>
+ +

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

+ +
<table>...</table>
+<table>...</table>
+<table>...</table>
+
+ +

CSS Flexible Box Layout と CSS Grid Layout の仕様書も参照してください。

+ +

SVG の資産を最小化し圧縮する

+ +

多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。

+ +

画像を縮小して圧縮する

+ +

画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 Compress Jpeg、Tiny PNG、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。

+ +

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

+ +

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

+ +

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

+ +
  table-layout: fixed;
+
+ +

そして、 <col> 要素および <colgroup> 要素を用いて列の幅を指定しましょう。

+ +

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

+ +

ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。

+ +

理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。

+ +

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

+ +

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

+ +

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

+ +

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

+ +

ページ構造の例

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ ページの外観に必要な CSS ファイルです。管理のために関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
+
+
+ +
+
+
+
· SCRIPT ...
+ ページの読み込み中に必要な機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。
+
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
+
+
+ +
+
· BODY
+
· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。
+
+ +
+
+
+
· SCRIPT ...
+ DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。
+
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。
+
+
+
+ + + + -- cgit v1.2.3-54-g00ecf