過大なDOMサイズの回避とは？PSIでの対処法を解説

2021年6月よりページエクスペリエンスアップデートが行われ、UI/UXがランキング指標に追加されました。

その結果、DOMサイズはPageSpeed Insightsの結果からも分かるようにSEOにおいて重要な指標となっております。

PSIでサイトの表示速度を計測していると、「過大なDOMサイズの回避」という警告が出てきて、対処法に困っている方もいらっしゃると思います。

そこで、本記事では過大なDOMサイズの回避についての概要と対処法を解説します。

DOMとは

DOMとはDocument Object Modelの略称で、HTMLをツリー構造で考えた際の深さや要素の数を指します。

Googleのデベロッパーツールを使用し、サイトを見たときにHTMLが▼＜div class=～ のように表示され、更にその下に「▶_」がいくつか表示されるはずです。

「▶_」をクリックすると、下にある階層が表示され、また「▶_」をクリックすると、更に下の階層が見られるかと思います。

これがDOMです。

また、この枝分かれしていった要素をノードといいます。

GoogleはDOMについて、以下の状態を推奨してます。

• ページに含まれる DOM の要素数が 1,500 個未満
• ツリーの深さは32要素まで
• 子や親の要素数は60個まで

「ページに含まれる DOM の要素数が 1,500 個未満」というのは、HTMLタグが1,500個を越えないことを表しています。

「ツリーの深さ32要素まで」というのは、デベロッパーツールでいう「▶_」で開く回数が32回を超えないことを意味しています。

また、「親や子の要素数は60個まで」というのは、1つの親要素（ulタグやolタグ）に対して子要素（liタグ）が60個まででないといけないということです。

DOMサイズの回避する方法

DOMサイズが肥大する原因として、ウィジェットを多く使用している、記事が長すぎる、外部埋め込みファイルを読み込ませる仕様になっているなどがあります。

よって、DOMサイズを回避する方法は下記の通りです。

• ウィジェットを使いすぎない
• DOMの少ないテーマを使用する
• 子要素を入れ込み過ぎない
• 段落を使用しすぎない

また、JavascriptやCSSの多用はノード数を増やす原因になるので注意しましょう。

なお、DOMの少ないテーマの判断は、いくつか候補としてあがっているテーマのデモサイトをPSIにかけて、「過大なDOMサイズの回避」という項目で、件数を比較する方法が良いでしょう。

まとめ

今回は、過大なDOMサイズの回避についての概要と対処法について解説しました。

過大なDOMサイズの回避を改善してもPSIの結果に大きな影響を与えることはありません。

しかし、PSIの項目を一つずつ対処することが、結果的にユーザービリティの改善に繋がり、SEO施策になります。

また、うまくDOMを理解し、適切なサイズ縮小をすることが難しいと考えるご担当者様もいらっしゃるかと思います。

弊社では、Webサイトの表示スピードを改善する「表示速度改善サービス」をご用意しています。ご相談は無料ですので、ぜひお気軽にお問い合わせください。

表示速度改善のサービスページはこちら

無料Webサイト高速化診断で課題を見える化！【毎月5社限定】

株式会社デジタルアイデンティティでは、毎月先着5社限定で無料の高速化診断を実施しています！

高速化に関するこんなお悩みはありませんか？

• 高速化でどこから手をつければいいかわからない…
• 自社で高速化をしてみたが、効果が上がらない…
• PageSpeed Insightsのスコアが良くならない…
• 高速化ができるリソースがない / 人材がいない…

Webサイト高速化は、同じ項目であってもサイトの状況によって、対応するべきポイントが変わる難易度の高い施策です。
自社での対応が可能な場合もありますが、難易度の高い施策が必要な場合もあります。

そんな時は、無料の高速化診断をお試しください！
様々なサイトの高速化を実現してきたプロが、あなたのWebサイトを分析！
高速化に必要な施策と施策毎の難易度、改善後のインパクトまで、まとめてご報告します！

• どんな施策をすれば良いか？
• どの施策から実施するか？
• どの程度、スピードを改善できそうか？

など、高速化施策の方針が明確化します！

ただし、毎月先着5社様限定となっておりますので、お早めにお申し込みください！

無料の高速化診断に申し込む