HTMLまたはXHTMLのページサイズを縮小するための一般的な最適化

HTMLまたはXHTMLのページサイズを縮小するために実行される一般的な最適化は何ですか？思い浮かぶのは次のとおりです。

• コメントの削除、
• 余分な空白を削除し、
• 繰り返しのインラインスタイルをCSSスタイルシートに移動し、
• 等

他には何がありますか？最大の価値を提供するのはどれですか、それともツールやモジュールによって自動的に実行できますか？

Googleは、ペイロードサイズを最小化するための推奨事項の概要を説明しました。次のテクニックが含まれます。

1. 圧縮を有効にする
2. 未使用のCSSを削除する
3. JavaScriptを縮小する
4. CSSを縮小
5. HTMLを縮小
6. JavaScriptの読み込みを延期する
7. 画像を最適化する
8. スケーリングされた画像を提供する
9. 一貫したURLからリソースを提供する

これらの提案は、Page Speedと呼ばれるオープンソースのFirefox / Firebugアドオンプロジェクトの一部です。Yahoo!のYSlowプラグインに似ています。実際のPage Speedアドオンは、そのリストで詳細に説明されているよりも多くの最適化をチェックします。ページ速度の使用方法も説明されています。

Yahoo!のWebサイトを高速化するためのベストプラクティスでは、同様のベストプラクティスが特定されています。

1. HTTPリクエストを最小限に抑える
2. コンテンツ配信ネットワークを使用する
3. ExpiresまたはCache-Controlヘッダーを追加する
4. Gzipコンポーネント
5. スタイルシートを上部に配置する
6. スクリプトを最下部に配置する
7. CSS式を避ける
8. JavaScriptとCSSを外部にする
9. DNSルックアップを削減
10. …

（Yahoo!のリストは最大35項目で、全体を引用する必要はありません。）

YSlow（画像リンク）とPage Speed（画像リンク）の両方を使用すると、ページでテストを実行し、実行できることを提案し、推奨事項のうち既に実装されているものを示すことができます。

誰かがマークアップをGzipで圧縮する必要があると言っているので、私もそうです。

ApacheとIISでGzipをセットアップする方法に関するリンクを含むGzipの詳細な説明を次に示します。

WebReferenceの記事には、Apacheモジュールmod_gzipを使用すると、次のパフォーマンスの向上が見られることが記載されています。

通常、ウェブマスターは、このモジュールを使用すると、Webサーバーのパフォーマンスが150〜160％向上し、HTML / XML / JavaScriptの帯域幅が70％〜80％削減されます。全体的な帯域幅の節約は約30〜60％です

それはおそらく価値がありません。

HTMLの空白を少し削除してみましたが、 gzip後のペイロードのサイズが10％しか減少しませんでした。

現実的には、空白と改行の削除は、圧縮が私たちのために行っている作業を行っています。私たちは、人間が補助する効率を少しだけ追加しています。

                  生圧縮
最適化されていないCSS 2,299バイト671バイト
最適化されたCSS 1,758バイト615バイト

（はい、これはCSSと言いますが、同じ基本ルールがHTMLにも適用されます）

問題は、

1. GZIPは作業の90％をあなたのために行っているので、これはクレイジーなマイクロ最適化です。多分あなたがグーグルかヤフーなら。
2. 10％の追加のサイズ削減は、「ソースの表示」で完全に読めないHTMLのかなり高いコストで発生します

わかりました、小さなもの：タグの名前と属性を小文字で一貫性を保ちます（ところで、標準の義務として）。圧縮率が1〜2パーセント増加します。

非常に大規模なサイトである場合、HTMLページとスタイル設定に使用されるCSSページの両方のサイズを縮小するため、超短エンティティIDとクラス名の使用を検討する必要があります。

また、過度に構造化されたサイト構成にも注意してください。本当に必要ない場合は、divセクションとspanセクションを簡単に追加できます。また、大きな結果セットや同様の出力のページングなどの戦略を検討することもできます。

実際には、これらの最適化は、Googleと同じトラフィックカテゴリにないサイトに対して価値があるため、非常に限られた回収率（およびページング戦略、潜在的なSEOの欠点）を持っています。jessegavinの推奨事項に従って、GZip / Deflate圧縮を有効にし、それを実行してください。

一般的なcss、画像、javascriptを1つのファイルに結合します。これはファイルサイズを削減しませんが、httpリクエストの数を削減します。ファイルが小さい場合、httpのオーバーヘッドがダウンロード時間をはるかに上回ります。cssファイルとjavascriptファイルを結合するスクリプトを簡単に作成できるため、開発中にそれらを簡単に管理できますが、単一のファイルにデプロイできます。

画像の組み合わせの詳細については、http：//css-tricks.com/css-spritesを参照してください。

また、 Google Closure Compilerご覧ください。私は使用していませんが、javascriptのダウンロードと実行を高速化すると主張しています。

他の人が言ったように、最大​​のメリットはgzipから得られます。

適切なHTML要素を使用していることを確認してください。の代わりに<div class="page-title">Hello World</div>、を使用します<h1>Hello World</h1>。

そして明らかなのは、レイアウトにテーブルを使用しないことです！960.gsのような単純なグリッドシステムを使用します（または、独自の軽量バージョンをロールします）。特にネストされたテーブルでは、HTMLサイズに大きな違いが生じる可能性があります。比較：

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

そして

<div class="colSmall">...</div>
<div class="colLarge">...</div>

ASP.NET Webサイトを使用している場合は、ViewStateに注意してください。ページ内に非常に大きな隠しフィールドを生成し、必要ではないが頻繁にオーバーロードすることがあります（ViewStateがページの残りの部分よりも重いことは既にわかっています）。
AJAXを使用する場合は特に重要です。ViewStateはリクエストごとに送受信され、Webサイトが遅くなり、トラフィック量が増加するためです。

ただし、解決策は.netコードにあります。

たくさんあります 無料のWebパフォーマンス分析および最適化ツールます。生成するレポートから独自の大きなチェックリストをコンパイルできます。

Zoompfのパフォーマンス評価のいくつかの言い換え点を以下に示します-

• 動的に生成されるコンテンツ（画像）を避けます。代わりに、静的な画像ファイルとしてオフラインで画像を描画またはサイズ変更することを検討してください。
• 寸法のない画像タグの使用は避けてください。
• Google Analytics（＆Ads）は、JavaScriptファイルの非同期読み込みをサポートしています。使用する場合は、非同期でロードすることを選択できます。

よく見落とされている戦略は、ページからすべての不要なHTMLコードを削除することです。

どのプロジェクトでも、使用している（X）HTMLバージョンとWebサイトの使用方法に基づいて、これらの戦略のどれを採用するかを決定する必要があります。

（どうやら、私は新しいユーザーなので、回答ごとに複数のハイパーリンクを投稿できないので、これらのURLをコピーして貼り付ける必要があります...

• HTML4およびHTML5では、多くの要素について、終了タグは必要ありません。body要素の開始タグも必要ありません。見る：

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• HTTP URLのプロトコル（http :)部分は省略できます。

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• <br>のようなタグを使用すると、実際にXHTMLを使用する必要がない限り、XHTML構文（<br />）で使用されるスラッシュを単純に省くことができます。

• 小さなHTMLドキュメント構造の例を次に示します。

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

他の人はそれを言ったが、彼らはちょうどポイントを十分に家に突っ込んでいない：gzipping。

1. 実質的に労力や欠点はありません。
2. 私の限られた経験では、HTMLサイズを60％から90％削減します。

HTMLに対して行うことができる他のすべての調整には、より多くの労力/メンテナンスが必要であり、単にgzipして忘れることに比べてほとんど効果がありません。あなたがGoogleでない限り、時間の価値はありません。あなたはGoogleではありません。

（ただし、他の人が述べたように、HTMLの一貫性が高いほど、gzipの効果は大きくなります。私の限られた理解によれば、gzipはファイル内の同一の文字列を探し、繰り返される各インスタンスを、オリジナルです。したがって、属性を同じ順序に保ち、すべての大文字小文字を同じにするなどのオーサリングプラクティスは、gzipが機能するのに役立ちます。）

ああ—そして、ビルド/提供プロセスのある時点でHTMLを自動的に縮小している場合、それ以上の労力/メンテナンスは必要ありません。いくつかのHTMLミニファイヤは次のとおりです。

/programming/728260/html-minification