ページ上の最適化を実行するにはどうすればよいですか? _html/css_WEB-ITnose

ページ上の最適化を行う理由

1. 高速化: ページの読み込みが速くなり、顧客がより速く認識できるようになります。

2. 読みやすい: 検索エンジンがページの焦点を把握しやすくなり、目の見えない人にとっても読みやすくなります。 : 自分や同僚が後で読みやすくなります コードを理解し、見つけ、変更し、展開します。

3. ページを最適化する方法

html

セマンティック

• 読み込み順序: CSS は head に配置されます (ユーザーにはスムーズなページが表示されます)、js は末尾に配置されます (dom レンダリングがブロックされ、dom ツリーが構築されていない場合、js での dom 操作に問題が発生します)

• ページリクエストを減らす: img をマージし、 CSS をマージし、CSS ファイルを導入するために @import を使用しないでください

• ファイル サイズを削減します :

• 主に img ファイルのサイズを削減し、適切な形式を選択し、圧縮ツール (ImageOptim、ImageAlpha、JPEGmini) を使用します

  • 不要なタグを削除

  css

セレクター: シンプルで短いほど良い、セレクターの結合も同じスタイル

• css 値の省略形: マージンなど、値が 0 の単位は省略、

• ファイル サイズを減らす: YUI Compressor、cssmin

• パフォーマンスを消費する属性の使用を減らす: エクスプレッション、ボーダー半径、フィルター、ボックス シャドウ、グラデーションなど

• 画像の幅と高さを設定するブラウザのリフローと再描画を減らすために、拡大縮小しません。

• すべてのパフォーマンスは CSS で実装されます

• モジュール化

• 命名規則、セマンティクス

• ハッキングを最小限に抑える

• javascript

ページの遅延読み込み

• dom オペレーションの使用を減らす

• 注釈を追加