PageSpeed Insightsで色々なサイトを計測していると、度々見かける「過大な DOM サイズの回避」の警告。

何となくクリアする方法は分かるけど・・・。

DOMってなんやねん！

っということで、理解を深めるためにも調べてみました。

WordPressでどう対策すればいいかも考えたよ☆

DOMとは

目次へ戻る

イメージ的にはhtmlタグの階層とか深さのことだと思います。

DOMツリーっていうのもよく見かけるけど、Google Chromeのデベロッパーツールで

こういう「▼」で閉じたり開いたりするやつっしょ。

デベロッパーツールはCSSをいじる時にチェックすることが多いけど、見やすくて便利なので愛用してます(*´ω`*)

PageSpeed Insightsの詳細のリンク先を読むと「ノード」っていう言葉も出てくるけど、ノードについて一番分かりやすかったのは以下のサイトです。

https://wa3.i-3-i.info/word1300.htm

ま、ノードは言い換えればhtmlタグの要素って思ってればOKかな！？

「過大なDOMサイズの回避」の詳細

目次へ戻る

PageSpeed Insightsでの「過大な DOM サイズの回避」の詳細には以下のようにあります。

ブラウザ エンジニアは、ページに含まれる DOM の要素数が 1,500 個を超えないようにすることを推奨しています。ツリーの深さは 32 要素まで、子や親の要素数は 60 個までにするのが最適です。DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生する可能性があります。

DOMの要素数1500個以内っていうのは、htmlタグが1500個を超えないようにするのが良いってことなんだね。

ツリーの深さ32要素っていうのは、デベロッパーツールでいう「▼」で開くやつが最大で32回になるとダメ。

子や親の要素数は60個 までっていうのは、例えばリストタグ<ul>を親要素とすると、子要素<li>が60個までじゃないとダメ。

っていうことか。

意外と余裕でクリアできそうだけど・・・。

上限はあくまで上限であり、目安である

目次へ戻る

実はこの上限に達していなくても警告されますorz

具体的にいくつなら警告されないか試してみたところ、恐らく850くらいです。

▼873件の要素はオレンジ

▼815件の要素はグリーン

上記の差から、そう思いました。

CSSでデザインを組んでいるとついつい<div>や<span>で何十にも囲いたくなるけど、やり過ぎないように注意しよう。

PageSpeed Insightsは教えてくれる

目次へ戻る

どこが一番深くて、どこの子要素が一番多いかを。

「過大な DOM サイズの回避」をクリックして開くと次のようなものが出てきます。

この表の通りなんだけど、

  • 合計DOM要素数が873件
  • DOMの一番深いところは<span>
  • 子要素が一番多いところは<select>内

っていうのが読み取れます。

この例はWordPressのテストデータを使っています。

<select>タグ内の子要素が多いって言われてるけど、テストデータだとカテゴリーがめちゃめちゃ使われているんだよね。

それを「カテゴリー」ウィジェットで表示させたところです。

カテゴリの作り過ぎはユーザビリティも良くないし、うまく整理・うまく表示させる仕組みが欲しいね。

WordPressで「過大なDOMサイズの回避」を回避するには？

目次へ戻る

ここまで見てきて考えられることは、

  • DOMの少ないテーマを使用する
  • 子要素を入れ込み過ぎない

一般的にはこの2点。

テーマをカスタマイズする人なら、

  • 装飾の時にhtmlタグで深く囲い過ぎない

ってこともかな。

DOMの少ないテーマを使用するには？

テーマのデモサイトをPageSpeed Insightsにかけて、「過大なDOMサイズの回避」の項目をチェック。

警告が出ていなくても、「合格した監査」の方から見てみよう。

件数が少なければ少ないほどいいね。

記事を書く時はDOMの制限とか気にしたくないでしょ？

そうするとテーマ側で余裕でクリアしていることが望ましいと思う。

子要素を入れ込み過ぎないようにするには？

やりがちなのはサイドバーやフッターでのカテゴリ一覧とかアーカイブだと思う。

ズラズラと長いリストになる場合は、子カテゴリ―で仕訳けて表示したり、アーカイブもプラグインとかでうまく整理したい。

あとはめちゃめちゃ長い記事でも引っかかった経験があります(>_<)

記事部分を囲う<div id=”main”>内に、大量の段落タグ<p>を使ったLPでね。

まぁ、これは仕方がない部分だと諦めたけど。

最低限全ページに表示されることになるであろう、サイドバーやフッターには気を付けたいところです。

まとめると

目次へ戻る

「過大な DOM サイズの回避」をWordPressで回避するには、テーマ選びやサイドバー・フッターのリスト管理が大事っていうことです。

ただし、あくまで「過大な DOM サイズの回避」からの観点。

実際にはどれくらいJavascriptが使われているか、非同期読み込みや遅延読み込みはなされているかの方が大事です。

つまり、「過大な DOM サイズの回避」は、わたしのようなページ表示速度にこだわるマニア向けの指標だと思います☆

あとがき

目次へ戻る

そういえば<table>タグがめちゃめちゃDOMをくっていた例があった。

<table>タグはヤバいね。

<tr>に<td>に、更に表が大きければ大きいほどいっぱい使うし。

LPでも思ったけど、どうしても無理なものはあるはず。

このDOMの要素数が多いと、どれくらいページ表示速度が低下するのかって話。

たぶん、YouTubeやTiwtterの埋め込みの方がよっぼど遅くなると思う。

PageSpeed Insightsのスコアもぶっちゃけ90点以上（緑）なら大して変わらない気もするよね。

SEO対策で早さは大事だけど、ある程度に達していれば同条件とみなされるんじゃない？

90点になるかならないかの瀬戸際に立っている場合は、こういうところを詰めていく恩恵はあるかな～。