悩めるWEB担当者様のための最新ノウハウをお届け

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

私がご紹介します

Tanaka Yuta

TanakaYuta SEO Div. コンサルタント

現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇 効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。

執筆者の投稿をみる

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

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

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

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

【今だけ無料】PageSpeed Insightsを100ページ一括自動診断！

「トップページは改善したが、下層ページは放置気味…」「1ページずつ手動で計測するのは手間がかかる…」
そんなお悩みを解決！最大100ページを自動で計測し、修正優先度付きのレポートを無料で作成します。サイト全体の「健康状態」を把握したい方は、今すぐお申し込みください。

【今だけ無料】一括診断のお申し込みはこちら

DOMとは

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

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

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

これが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サイトの表示スピードを改善する「表示速度改善サービス」をご用意しています。ご相談は無料ですので、ぜひお気軽にお問い合わせください。

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

数時間の作業を一瞬で！PageSpeed Insights最大100ページを一括診断！

PageSpeed Insightsを手動でチェックすると、3〜5分程度かかってしまいます。
一定規模、以上のWebサイトで全ページをチェックしようとすると、数時間以上のリソースが必要になります。

デジタルアイデンティティでは、「トップページ以外の速度状況がわからない」「ページ数が多くて管理しきれない」という企業様向けに、PageSpeed Insightsで最大100ページをまとめて計測する「サイトスピード一括診断ツール」を提供しています。

WebサイトのURLを入力するだけで、モバイル・PC両方のスコアやCore Web Vitals指標を全自動で取得。単なるスコアだけでなく、「どのページから直すべきか」がわかる修正優先度リストや、SEOリスクの可視化レポート（PDF・Excel）を無料で納品します。

こんなお悩み、ありませんか？

  • 1ページずつPSIで計測するのが面倒で放置している…
  • トップページは早いが、記事や商品ページの速度が不安…
  • どのページが足を引っ張っているのか特定できない…
  • 社内報告用にサイト全体のパフォーマンスを数値化したい…
  • 改善インパクトの大きいページから効率よく対策したい…

「点」ではなく「面」でサイトの課題を把握し、ユーザー体験とSEO評価を底上げしましょう。
サービスリリース記念で今だけ無料で診断いたします！

【今だけ無料】一括診断に申し込む

デジタルマーケティングを端から端まで徹底解説! セミナー多数開催中! 「参加無料 お申込みはこちら」

関連記事