『過大な DOM サイズの回避』とは？PageSpeed Insightsの警告対処法！

今回はこの問題を解消します。

DOMの意味とは？
解消方法は？

結論から言うと、WebサイトのHTML要素を減らせばOKです。
ウィジェットなどで大量にカテゴリを表記していると警告がでます。
無駄な要素は省きましょう。


※正直そんなに重要な要素ではありません。

DOMとは？

HTMLをツリー構造で考えた時の要素の数や深さ

DOMとはDocument Object Modelの略称です。
直訳すると「ドキュメントを物と考える形」です。


Googleのデベロッパーツールなどを使って、自分のサイトを見てください。
HTMLがツリー上になっていますよね。
▾＜div class=○○＞みたいな感じになっているはずです。

▾を押すとどんどん下の構造が見れます。

これがDOMです。


「過大なDOMサイズの回避」とは、このツリー構造になっている階層の深さや数をを減らしてほしいという警告です。

○
│ー○ー○
　│ー○ー○　←みたいな構造の事です。

原因は？

ノードが増える原因として、ウィジェットの多用や記事の長さなどがあります。

PageSpeed Insights見るとある程度わかる

• 合計で1,500以上のノードがある。
• 深度が32ノードを超えている。
• 60を超える子ノードを持つ親ノードがある。

⇧の場合が最低ライン？のようです。

Avoid an excessive DOM size

Learn how a large DOM can reduce your web page's performance and how you can reduce the size of your DOM at load time.

web.dev

合計 DOM 要素数		800
DOM の最大深さ	要素	15
子要素の上限数	要素	50

診断結果が⇧のように出ているはずです。

私の試した体感で言うと
合計 DOM 要素数⇦これが810ぐらいを超えると警告に
他はあまり影響はなかったです。

対処方法は？

やれることとして

• カスタマイズをやりすぎない
• ウィジェットを使いすぎない
• カテゴリやタグを表示しすぎない
• 段落を多用しない
• シンプルなテーマを利用する

⇧こんな感じです。

ウィジェット減らせばたいていはなんとかなるはずです。

対策するほどでもない

正直この警告を対処したからといって、大幅にスコアが上がることはありません。

綺麗な構造でHTMLを記述するのはいいことですが、あんまり気にしなくてもいいと思います。
あくまでユーザーファーストなので、この対策のせいで記事を探しにくくなったとかになると本末転倒です。

まとめ

そんなに気にしなくていいですが、気になる人は
無駄なウィジェットがないか、メニューバーに無駄なカテゴリが表記されていない確認しましょう！