HTMLページの最適化例を詳しく解説-htmlチュートリアル-php.cn

HTMLページの最適化例を詳しく解説

黄舟

リリース： 2017-07-27 09:57:34

オリジナル

1627 人が閲覧しました

1. HTTP リクエストの数を減らします。

(1) JSファイルとCSSファイルを結合します。

(2) フレーム画像と比較的変更の少ない画像を1つに結合し、CSSの背景カットを経てレンダリングを完了します。

(3) JS/CSS/IMAGEをキャッシュするためにローカルキャッシュを適切に使用します。

2. 要求されたファイルのサイズを減らし、要求されたデータが占有するネットワーク帯域幅を減らします。

(1) JS サイズの圧縮: JS 内の空白行区切り、コメント、混乱を削除し、長い変数を短い変数に置き換えます。

(2) CSS サイズを圧縮する: CSS コメントを削除し、可能な限り略語を使用します。

(3) (X)HTML+CSS を使用して Web サイト構造を構築し、CSS の再利用性を提供して (X)HTML ファイルサイズを削減します。

(4) サーバーサイドの GZIP を使用して JS/CSS ファイルを圧縮し、転送されるファイルのサイズを削減します。

3. バージョン管理を通じてクライアントのキャッシュを制御します。

これらのキャッシュされたファイルを時間内に更新するにはどうすればよいですか?簡単な構成により、JS バージョンを変更することで、これらのファイルを再度リクエストする必要があり、ブラウザーキャッシュ内のデータを引き続き使用しないことをブラウザーに適切に通知できます。解決策はいくつかあります:

(1) これらの JS のファイル名を手動で変更します。

(2) これらの JS のパスを手動で変更します。

(3) URL Rewrite により JS パスを再配置します。

(4) どの JS ファイルをこのページにリンクする必要があるかを、高応答サーバー上の JS 設定を通じてページに通知します。

(5) キャッシュを効率的に利用するために、大きいバージョンは変更されず、小さいバージョンは継続的に追加され、一定期間後に一律に更新されます。

4. ページの軽量化を支援します。

5. ページ上の不要なコンテンツを削除します。

主に、冗長なスペース、タブ、空行、二重引用符、一重引用符、コメントなどを指します。

6. Web ページのコード内の空のステートメントを削除します。

例:

<span style=&#39;font-family:宋体&#39;>你好<span lang=EN-US><o:p></o:p></span></span>

ログイン後にコピー

明らかに、「Hello」の後の文は影響を及ぼさないため、削除できます。

7. HTMLのデフォルト属性を削除します。

HTML 言語には配置、フォント、色などの多くのデフォルト属性がありますが、Web ページ作成ソフトウェアはこれらの無駄なコードを追加します。たとえば、align 属性のデフォルトは左揃えなので、左揃えにする場合は「align=left」と記述する必要はありません。

8. CSS を最適化します。

例: 短縮された CSS を使用します。

または:

<p class="decorated">1</p>
    <p class="decorated">2</p>
    <p class="decorated">3</p>
    <p class="decorated">4</p>

ログイン後にコピー

p を使用して次を含めることができます:

  <p class="decorated">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </p>

ログイン後にコピー

9 表示よりも表示が高速です。

10. 同じ URL に対して大文字と小文字を一致させます。

Internet Explorer のバッファーも、大文字と小文字の文字列を別々に扱います。したがって、Web 開発者は、同じリンクの URL 文字列の大文字化を、異なる場所でも一貫して保つようにする必要があります。そうしないと、同じ場所の異なるファイルのバックアップがブラウザのバッファに保存され、同じ場所からコンテンツをダウンロードするリクエストの数も増加します。

11. マークに始まりと終わりを持たせます。

12. ページのコンテンツ全体をテーブルに詰め込まないでください。

すべてのコンテンツを追加してからテーブルを表示するため、一部のコンテンツにアクセスできない場合、ページ全体のアクセス速度が遅くなります。正しいアプローチは、コンテンツをすべて 1 つのテーブルに詰め込むのではなく、同じ形式の複数のテーブルに分割することです。

13. iframe を使用して別のページをネストします。

広告コードを挿入する必要があり、速度に影響を与えたくない場合は、iframe を使用するのが最適です。ページの表示は広告コードの遅延による影響を受けません。

14. JavaScriptをHTMlファイルの最後に移動します。

JavaScript は処理中に後続のページの表示をブロックし、HTML リクエストもブロックするためです。

15. フレンドリーリンクの知識。

(1) テキストリンクのみを作成します。テキストリンクを作成しても、Web ページの速度は遅くなりません。

(2) すべてのリンクを別のページ領域に配置し、ホームページ上のページにリンクします。

(3) フレンドリーリンクをホームページに表示する必要がある場合、ページは上から下に 1 行ずつ表示されるため、リンクが配置されているテーブル全体をページの下部に配置してください。

(4) まずフレンドリーリンクのロゴ画像をダウンロードし、それを自分の Web スペースにアップロードします。

16. 画像の最適化。

(1) 写真の数を減らす：不要な写真を削除します。

(2) 画質を下げる: JPG 形式の写真の場合、5% 縮小した写真はあまり変わっていないように見えますが、ファイルサイズは大幅に変化します。

(3) 適切な形式を使用します。JPG は一般に、風景、人物、芸術的な写真の写真作品を表示するために使用され、コンピューターのスクリーンショットで使用されることもあります。GIF は色数が少ないため、色要件が必要ない場所で使用できます。 Web サイトのロゴ、ボタン、絵文字などの PNG 形式は、透明な背景を提供でき、通常、透明な背景表示が必要な Web ページや、より高い画質要件が必要な Web ページで使用されます。

17. URLの後にスラッシュを追加します。

サーバーがそのようなアドレスを受信すると、このアドレスのファイルタイプを判断するのに時間がかかります。 220 がディレクトリの場合、URL の後に余分なスラッシュを追加すると、サーバーはディレクトリ内のインデックスまたはデフォルトファイルにアクセスしたいことが一目でわかり、時間を節約できます。

18.高さと幅をマークします。

設定がない場合、ブラウザは画像のダウンロード中にサイズを計算します。画像が多い場合、ブラウザは常にページを調整する必要があり、速度に影響するだけでなく、ブラウジングエクスペリエンスにも影響します。ブラウザーが高さと幅を認識している場合、画像を表示できない場合でも、ページ上に画像用のスペースを確保し、次のコンテンツの読み込みを続けます。その結果、読み込みが速くなり、ブラウジングエクスペリエンスが向上します。

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