ウェブサイトのパフォーマンスの最適化と仕上げ_html/css_WEB-ITnose

1. リクエストの数を最小限に抑える

共通の CSS を抽出し、モジュール化し、他をマージします。 JavaScript にも同じことが当てはまります (ページ読み込みのブロックを回避できます)。

ページ上の小さなアイコン、背景、その他の画像を結合して、リクエストの数を減らします。

2. ページサイズを減らす

JS を圧縮する

3. CSS と HTML のリファクタリング

CSS セレクターの使用を禁止する

!重要

4.

通常、ページに多くの画像があり、ページの高さまたは幅が数画面である場合、ページが最初に読み込まれるときに、ページがスクロールされるときに表示領域内の画像のみが表示されます。を再度読み込むと、画像が表示領域に表示され、ページの読み込み速度が大幅に向上し、同時の画像リクエストが減ることでサーバーへの負荷も軽減されます。ユーザーが最初の画面にのみ留まる場合は、データを保存することもできます。 TAB に多くの画像がある場合は、TAB にも適用でき、TAB がトリガーされたときに画像がロードされます。

原則: 画像を 1*1 のプレースホルダー画像に置き換えます (プレースホルダー画像を実際の画像の幅と高さに設定できれば最適です)。実際のアドレスはカスタム属性 (lazy-src) にキャッシュされます。 ) ,

可視領域に入る (または可視領域から一定の距離) まで待機し、プレースホルダー画像の src を置き換えると、実際の画像の読み込みが開始されます。

最適化の方向	最適化の手段
リクエストの数	スクリプトとスタイルシートのマージ、スプライト、分割初期化ロード、メインドメインを分割
帯域幅をリクエストする	GZip を有効にし、JavaScript を効率化し、重複したスクリプトを削除し、画像を最適化する
キャッシュ使用率	CDN を使用する、外部 JavaScript と CSS を使用する、Expires ヘッダーを追加する、DNS ルックアップを減らす、設定しますETag 、AjaX をキャッシュ可能にする
ページ構造	スタイルシートを上部に配置し、スクリプトを下部に配置し、ドキュメントの出力をできるだけ早く更新します
コード検証	リダイレクトを回避するには CSS 式を使用しないでください