HTML Web ページを最適化する方法

HTML では、見栄えの良い Web ページを作成するだけでなく、Web ページの最適化も考慮する必要があることがわかりました。そこで、今日は HTML Web ページを最適化する方法について 5 つのポイントをまとめました。見てください。

テーブルを div レイアウトに変更するだけです

table タグ レイアウト html を div レイアウトに再構築してみてください。これにより、コードの少なくとも 40% を節約できます。 div コードはテーブル レイアウトの HTML Web ページよりも少ないため、検索エンジンのインデックスの重みもテーブル レイアウトの HTML Web ページよりも優れています。 div、span、ul li およびその他の一連のタグを削減して合理化します

DIV+CSS Web ページをレイアウトするとき、DIV レイアウト コードの一部を保存してコードの量を減らすことができる場合があります。

次のケース コード:

<div class="div"> 
　　<ul> 
　　<li>DIV</li> 
　　<li>DIV</li> 
　　<li>DIV</li> 
　　</ul> 
</div>

は、次のように変更できます:

lass="div"> 
　　<li>DIV</li> 
　　<li>DIV</li> 
　　<li>DIV</li> 
</ul>

これにより、div タグのペアが保存され、それによって HTML コードの量が削減され、HTML が圧縮されます。このように、css スタイル クラスに ul の名前を直接付けることで、ページ上のさまざまな場所での ul li list タグの使用を区別できます。

余分なスペースの削除

余分なスペースと改行を削除します。これにより、HTML コードが占めるバイト数を効果的に圧縮できます。通常、開発が完了した後、HTML コード内の改行とスペースを削除できます。

DW ソフトウェアを使用して、HTML のタグ間のスペースを一括削除できます
例:

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

スペースと改行を削除できます:
これにより、スペースや改行によって占有されるバイト数を節約できます。

Web パブリッシング バージョンでは、DW を使用して冗長なスペースや空白行を削除できることに注意してください。再度編集したい場合は、DW ソフトウェアに移動してコードをフォーマットします。

table

タイプのレイアウトの場合は、divレイアウトの代わりにtableを使用するのが適切です

テーブルデータリストレイアウトの場合は、テーブルを選択することをお勧めします。これは、テーブルレイアウトにテーブルを使用する方がdivレイアウトよりも優れているためです。テーブル レイアウトを使用すると、div レイアウトよりも経済的です HTML タグ

コードを作成して CSS スタイルを保存します。

下の表に示すように、データ型

は、TABLEタグ+CSSスタイルのレイアウトを使用することをお勧めします

html Webページのコード圧縮テーブルタグレイアウトテーブル

このリスト型テーブルテーブルと同様に、使用することを推奨しますtable タグのレイアウト

Web ページの GZIP 圧縮

Web ページの GZIP 圧縮機能は、ご自身のサーバーに設定することをお勧めします。

1. GZIP を開くメリットは何ですか?

回答: Gzip をオンにすると、ユーザーのブラウザに出力されるデータが圧縮されるため、ネットワークを介して送信されるデータ量が削減され、閲覧速度が向上します。

2. IIS の Gzip 圧縮機能を有効にする方法:

回答: まず、静的ファイル (HTML) を圧縮する必要がある場合は、ハードディスク上にディレクトリを作成し、ユーザーに書き込み権限を与える必要があります。 IUSR_マシン名」。動的ファイル (PHP、asp、aspx) を圧縮する場合、そのページは毎回動的に生成され、圧縮後に放棄されるため、その必要はありません。次に、IIS マネージャーで、[Web サイト] - [プロパティ] を右クリックします。下の特定のサイトではなく、Web サイト全体を選択します。 「サービス」タブに入り、「動的コンテンツ圧縮と静的コンテンツ圧縮を有効にする」を選択します。次に、Web サイトの下のサーバー拡張機能を選択し、新しいサーバー拡張機能を作成します。名前は重要ではありません。以下のファイルを追加するパスは c:windowssystem32inetsrvgzip.dll で、この拡張機能を有効にします。現時点では、静的コンテンツは圧縮できますが、動的コンテンツの場合、aspx ファイルは圧縮範囲外です。デフォルトの圧縮可能ファイルにはこの拡張子がついていないためです。また、管理インターフェースには拡張機能を追加する場所が見つかりません。現時点では、

設定ファイル

を変更することしかできません。 c:windowssystem32inetsrv に MetaBase.xml ファイルがあり、これをメモ帳で開くと、deflate、gzip、および Parameters という同じ名前の 3 つのセクションがあります。 2 つのセクションは基本的に同じです。これらの 2 つの段落のパラメータ HcScriptFileExtensions の下に aspx の行を追加します。圧縮する他の動的プログラムがある場合は、それらもここに追加します。 HcDynamicCompressionLevel は 9 に変更されます (0 ～ 10、9 が最もコスト効率が高いです)。次に、圧縮後の速度を体験するには、IIS サービスを再起動する必要があります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:


Js がウィンドウ オブジェクトの赤いボックスを操作するための実装手順

以上がHTML Web ページを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。