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

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

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

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

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

JS を圧縮する

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

4.

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

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

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