PageSpeed Insightsでサイトを計測していると、度々見かける「過大な DOM サイズの回避」の警告をみることがあります。
『過大なDOMサイズの回避』とは具体的にページに含まれるDOMの数を1,500以下にすることを推奨しているのです。またツリーの深さは32要素まで、さらに要素のネスト（親＞子＞孫など）は60個までが望ましいとされています。
その詳細と解決策についてお伝えいたします。
[ad2]
PageSpeedInsightsで『過大なDOMサイズの回避』とは？
「過大な DOM サイズの回避」の警告をみることがあります。
2018年11月よりスコア付けが厳しくなりました。「過大なDOMサイズの回避」についてはスコア付けは11項目から22項目に増えています。
SEOとしてもより厳しい観点で見られています。これはなぜ表示されるのでしょうか。まずはDOMとは何かから説明いたします。
DOMとは
JavaScriptsからHTMLへの入出力はDOMというAPIを通して行います。
Javascriptsのソースコード中では直接HTMLを扱うことはできません。例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があります。しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ません。
DOMインターフェースをもつDOMオブジェクトを通してHTMLの情報を扱うことになります。
そのためDOMとはJavascriptsで扱うためのHTML文章のオブジェクトのモデルという意味になります。
DOMは以下のような特徴をもっています。
- ツリー構造とも呼ばれる階層構造を取る
- それぞれノードという言葉で説明される
- WEBページとJavaScriptなどのプログラミング言語とを繋ぐ
DOMツリー
DOMオブジェクトを通して「HTML情報を取得・変更する」にはどうすればよろしいのでしょうか。
先ほど説明したDOMツリーとなります。Documentオブジェクトを利用します。Documentオブジェクトには、HTMLの構造がDOMオブジェクトに変換された状態でツリー構造で格納されています。このツリー構造をDOM構造と呼びます。
DOMツリーを構成する個々のオブジェクトは、Nodeと呼びます。NodeにはテキストやHTMLコメント、またHTMLタグの種別があります。
つまり現在は、「過大なDOMサイズの回避」とは、かいつまんでいうとサイト内のHTMLノード数を多くしすぎないようにすべき、ということになります。
つまりサイトのオブジェクト数を減らすように心がけるということを指します。
また、DOMツリーを形成する一つ一つのオブジェクトをノード（Node）といいます。
Domのノード（Node）とは？
ノードの種類は下記のようなものになります。
| ノードの種類 | 概要 |
|---|---|
| ドキュメントノード | ドキュメント全体を表すDocumentオブジェクト |
| 要素ノード | 要素を表すオブジェクト |
| テキストノード | テキストを表すオブジェクト |
| コメントノード | コメントを表すオブジェクト |
| 属性ノード | 属性を表すオブジェクト |
[ad2]
Wordpresでの原因
PageSpeed Insightsでの「過大な DOM サイズの回避」の詳細には以下のようにあります。
ブラウザ エンジニアは、ページに含まれる DOM の要素数が 1,500 個を超えないようにすることを推奨しています。ツリーの深さは 32 要素まで、子や親の要素数は 60 個までにするのが最適です。DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生する可能性があります。
DOMの要素数1500個以内っていうのは、htmlタグが1500個を超えないようにするのが良いってことなんだね。私は1663個でしたね。ただ、この上限に達していなくても警告されるようです。おそらく800個ほどでも表示されるようですね。PageSpeed Insightsでは具体的な数を教えてくれます。
ツリーの深さ32要素っていうのは、デベロッパーツールでいう「▼」で開くやつが最大で32回になるとダメ。
子や親の要素数は60個 までっていうのは、例えばリストタグ<ul>を親要素とすると、子要素<li>が60個までじゃないとダメ。
っていうことか。
[ad2]
Dom減らす解決・改善の方法
DOMとは冒頭のお伝えしましたが、ウェブサイトのHTML要素をオブジェクトの集合として捉えるモデルとなります。
オブジェクト数が多いとページ全体を読み込むのに時間がかかり、その遅滞さがページのSEO評価を下げることになります。複雑すぎるページ構成になっている場合は読み込みに時間がかかり、ユーザーフレンドリーではないと判断されてしまいまうのです。
このスコアを向上させるためにはユーザーの利用環境を想定して改善策を考えていきます。
YoutubeやSNSの埋め込みを減らす
動画サイトを埋め込んでみたり、各種SNSタイムラインの読み込みなどをページに埋め込むことでノード数が増えます。
外部ファイルを読み込むために余計に時間がかかりますから、PageSpeed Insightsにおいては評価が下がり、ひいてはそれがサイト全体のSEOにも悪い影響を与えます。したがって過大なDOMを回避するためには、そのような埋め込みを極力減らすことが望ましいでしょう。
別ページへ埋め込み、リンクを貼るなどの対策は必要です。閲覧を希望するユーザーをその別ページへ誘導するようにサイトデザインを再構築するなどが必要になるかと思います。
DOMの少ないテーマを使用する
私はフリーで最も評判のよりテーマのCocoonを利用しているにも関わらず「過大な DOM サイズの回避」が表示されましたので、こちらは有料のテーマが優れているのでしょうね。
子要素を入れ込み過ぎない
サイドバーやフッターでのカテゴリ一覧とかアーカイブにDomのコードを入れ込みすぎないようにすることです。子カテゴリ―で仕訳けて表示したり、アーカイブもプラグインとかでうまく整理するのがよいですね。
[ad2]
まとめ
結果として解決・改善策を対処することで『過大なDOMサイズの回避』の表示をさせなくなることができました。ただ、これはページ数が多ければ多いほど改善するには難しいですね。
大規模サイトの場合は人のリソースが必要になるかもしれません。
コメント