DOM (ドキュメント オブジェクト モデル) HTML タグのツリー構造の一般的な名称です。ページのレンダリング中に HTML 構造が複雑になるほど、ページの速度が遅くなるという影響があります。

ライトハウスによると、 DOM構造は3つの指標で測定されるこれらのメトリックに参照ポイントを提供するには:

  • タグの総数は 1500未満
  • タグの最大深度は 32未満
  • 子タグの最大数は 60未満

上記の例では、タグの総数は少なく、タグの最大深度は良好ですが、子タグの最大数は少なくなっています。

DOM 要素の最適化は、フロントエンドの関係者の責任です。ページ コードが最初に作成されるときにランダムまたは任意に選択されたすべてのタグは、プロジェクトが完了するとコストがかかります。そのため、すべてのフロントエンド開発者に黙祷を捧げ、目を覚ましてもらうようお願いしたいと思います。

膨張した DOM がページのパフォーマンスに悪影響を及ぼすポイントは次のとおりです。

  • 多数のノード（タグ）を持つページでは、 ネットワークの混雑とサイズが大きいため読み込みが困難これにより、TTFB (最初のバイトまでの時間) が増加します。
  • ロードしたノードをレンダリングして作成する 彼らのポジションとスタイルには時間がかかるこれにより、FCP (First Contentful Paint) が増加します。
  • ノード数が増えると、必要な負荷は JavaScriptの操作はメモリに負担をかけるTFT (Time to Interactive) が増加します。

非常に単純な例で DOM の最適化を説明するために、DOM の数と深さの両方が削減される次の例を考えてみましょう。

<div id="nav-element">
 <ul>
 </ul>
</div>

次のようにする代わりに:

<ul id="nav-element">
</ul>

これを実行する必要があります。DOMサイズを削減するための最も推奨される2つの方法は、遅延読み込みとページネーションです。リストページのカード構造には多くのDOMが含まれるため、無限スクロールまたはページネーションが推奨されます。ページネーションのアイテム数を決定するときは、DOM測定基準を必ず考慮する必要があります。通常、DOMサイズを削減するために考慮される時間は、 ページネーション内の商品数は15～20秒ですただし、この部分は実際には DOM サイズを考慮してフロントエンドのステークホルダー側で計算する必要があります。

非常に簡単な解決策の1つは、要素を追加しないことです ページ上で見えないものをCSSで隠さずにHTMLに書き込む要素を表示する必要がある場合は、後で呼び出してユーザーに表示される必要があります。CSS で要素を非表示にすると、DOM が拡大することに注意してください。

ソース：