web-dev-qa-db-ja.com

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

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

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

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

optimizationhtmlperformancexhtmlpage-size
15
Chris W. Rea

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 （画像リンク）の両方を使用すると、ページでテストを実行でき、できることを提案して、推奨事項は既に実装されています。

5
Bryson

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

Gzip と Apache および IIS の設定方法に関するリンクを含む詳細な説明を次に示します。

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

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

18
jessegavin

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

私は HTMLの空白を削除して遊んだ を少し試しましたが、gzip後のペイロードのサイズが10％しか縮小しませんでした。

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

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

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

問題は、

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

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

6
Thomas Bonini

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

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

実際には、これらの最適化は、Googleと同じトラフィックカテゴリにないサイトに対して価値があるため、非常に限られた投資回収（およびページング戦略、潜在的なSEOのマイナス面）があります。 jessegavinの推奨 に従うだけで、GZip/Deflate圧縮を有効にして完了します。

4
JasonBirch

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

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

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

3
mcrumley

他の人が言ったように、最大​​のメリットは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>
3
DisgruntledGoat

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

解決策は 。netコード内 です。

2
Julien N

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

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

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

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

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

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

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

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

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

よく見落とされている戦略は、ページからすべての不要な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/

1
dzollman