過大な DOM サイズを回避

公開日 更新日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

大規模な DOM ツリーは、さまざまな方法でページのパフォーマンスを低下させる可能性があります。

  • ネットワーク効率と読み込みパフォーマンス

    大規模なDOMツリーには、ユーザーが最初にページを読み込んだときに表示されないノードが多数含まれていることがよくあります。これにより、ユーザーのデータコストが不要に増加し、読み込み時間が遅くなります。

  • ランタイムのパフォーマンス

    ユーザーとスクリプトはページと対話するため、ブラウザはノードの位置とスタイルを絶えず再計算する必要があります。複雑なスタイルルールが伴う大規模な DOM ツリーは、レンダリングを大幅に遅らせる可能性があります。

  • メモリのパフォーマンス

    JavaScript が document.querySelectorAll('li') などの一般的なクエリセレクターを使用している場合、非常に多数のノードへの参照を無意識のうちに保存している可能性があり、これによりユーザーのデバイスのメモリ機能を抑え込む可能性があります。

Lighthouse の DOM サイズ監査が失敗する原因

Lighthouse は、ページの DOM 要素の合計、ページの最大 DOM 深度、およびその最大子要素を報告します。

Lighthouse の「過大な DOM サイズを回避」監査のスクリーンショット

Lighthouse は DOM ツリーのあるページに以下のようなフラグを設定します。

  • Body 要素に約 800 を超えるノードがあることを警告します。
  • Body 要素に約 1,400 を超えるノードがある場合はエラーとなります。

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

DOM サイズを最適化するには

一般に、必要な場合にのみ DOM ノードを作成し、不要になったら破棄する方法を探してください。

現在、大規模な DOM ツリーを公開している場合は、ページを読み込んで、度のノードを表示するかを手動で指定するようにします。おそらく、表示されていないノードは最初に書見込まれるドキュメントから除去し、スクロールやボタンクリックといった関連するユーザー操作の後にのみ作成するようにすることができます。

ランタイム時に DOM ノードを作成する場合は、DOM 変更ブレークポイントでサブツリーの変更を使用すると、ノードが作成されるタイミングをピンポイントするのに役立ちます。

大規模な DOM ツリーを避けられない場合は、CSS セレクターを単純化することで、レンダリングのパフォーマンスを改善することができます。詳細は、Google の「スタイル計算の範囲と複雑さを軽減する」をご覧ください。

スタック特定のガイダンス

Angular

大規模なリストをレンダリングする場合は、Component Dev Kit(CDK)の仮想スクロールを使用してください。

React

  • ページで多数の反復要素をレンダリングしている場合は、react-window などの「ウィンドウイング」ライブラリを使用して、作成される DOM の数を最小限に抑えてください。
  • shouldComponentUpdatePureComponent、または React.memo を使って、不要な再レンダリングを最小限に抑えてください。
  • ランタイムのパフォーマンスを改善するために Effect フックを使用している場合は、特定の依存関係が変更するまでのみ効果をスキップしてください。

リソース

最終更新日: 記事を改善する

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.