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

高速化

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

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

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

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

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

この記事の執筆者

田中雄太

twitterアイコン Facebookアイコン

アダムテクノロジーズ執行役員
SEOコンサルタント

株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。

目次 プラスマーク 表示 プラスマーク 閉じる

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サイト表示スピード高速化サービス資料 無料ダウンロードする

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。

成果報酬型WordPressサイトの高速化サービス 『HP爆速くん for WP』の詳細はコチラ

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。