Web フロントエンドのパフォーマンス最適化の概要_html/css_WEB-ITnose

最適化の方向

• ページの読み込み速度。
• コードの実行速度。

最適化方法

1. 最適化目標を指定します。目標は具体的かつ測定可能である必要があります。たとえば、1 秒あたり 50Kb のネットワーク環境では、最初の画面をロードするのに 2 秒もかかりません。
2. 大きな頭から最適化します。ページの読み込み速度を向上させたい場合は、読み込みに最も時間がかかるリソースを最適化することを検討してください。コードの実行速度を上げたい場合は、最も時間のかかる操作を最適化することを検討してください。
3. 最適化戦略を開発して実装します。
4. 検証。

ページの読み込み速度を向上させます

• HTTP キャッシュ。
  • 強力なキャッシュ。
  • キャッシュをネゴシエートします。
• HTTP で送信されるコンテンツのサイズを削減します。
  • gzip などのサーバー側の圧縮サービスを有効にします。
  • ファイルコンテンツの圧縮。
  • 無駄なコードを削除します。
  • 静的リソースを配置するには、Cookie のないドメインを使用してください。
  • 適切な画像形式を選択します。 Webp 形式の画像の使用を検討してください。
• HTTP の数を減らします。
  • 複数のリソースファイルを 1 つに結合します。 JS、CSS、画像 (小さなアイコンには画像スプライトまたはアイコン フォントを使用できます)。
  • 最初の画面の一部の CSS はインラインと見なすことができます。
  • 比較的小さな画像はインラインとみなされます。
  • 空の src と href は避けてください。
• リソースのダウンロード速度を向上させます。
  • CDN を使用します。
  • スクリプトのノンブロッキング読み込み。
• DNS ルックアップ時間を短縮します。
  • ドメイン名の数を減らします。
• リダイレクトを避けてください。
• その他。
  • CSSはに記述され、JSはの前に記述されます。

コードの実行速度を向上させます

JS

• 時間のかかるループを最適化します。
• パフォーマンスを消費するいくつかの中間結果をキャッシュします。
• 時間のかかる作業は従業員に任せましょう。
• メモリリークを防ぎます。
• アルゴリズムの改善。

CSS

• CSS スタイルを動的に変更する必要がある場合は、リフローをできるだけ少なくトリガーするようにしてください。
• セレクターの最適化。
• CSS 式の使用は避けてください。

HTML

• iframe は使用しないようにしてください。
• DOM の数を減らします。

ツール

• YSlow は Web サイトを分析し、Web サイトのパフォーマンスを向上させるための提案を行います。
• アリババは、さまざまな地域でのウェブサイトのアクセス状況をテストします。
• Chrome 開発ツールのプロファイルとタイムライン。
• jsPerf JS 実行効率テスト。
• Benchmark.js jsPerf と同じ。

---

この記事はクリエイティブ コモンズ CC BY-NC-SA 4.0 契約に準拠しています オンライン プラットフォームで再版する必要がある場合は、確認のために私に連絡してください。