「過大な DOM サイズの回避」とは?改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「過大な DOM サイズの回避」とはどういう意味か、また診断結果を改善する方法についても解説します。

WordPressテーマを変えて表示速度を高速にする方法

 

「過大な DOM サイズの回避」とは?

PageSpeed Insightsの仕様変更により、2018年11月よりスコア付けが厳しくなりました。以前は11項目のみで検証されていましたが、22項目に検証項目が増え、なかでも「過大なDOMサイズの回避」についてはスコア付けが厳しくなっています。

「過大なDOMサイズの回避」とは、かいつまんでいうとサイト内のHTMLノード数を多くしすぎないようにすべき、ということです。つまりサイトのオブジェクト数を減らすように心がけるということを指します。

PageSpeed Insightsは具体的に、ページに含まれるDOMの数を1,500以下にすることを推奨しているのです。またツリーの深さは32要素まで、さらに要素のネスト(親>子>孫など)は60個までが望ましいとされています。

SEO初心者でも瞬時に表示速度を改善できる

「過大な DOM サイズの回避」の改善方法

DOMとはDocument Object Modelの略で、ウェブサイトのHTML要素をオブジェクトの集合として捉えるモデルのことです。オブジェクト数が多いとページ全体を読み込むのに時間がかかり、その遅滞さがページの評価を下げることになります。

他の部分で有効なSEO対策をとっていたとしても、複雑すぎるページ構成になっている場合は読み込みに時間がかかり、ユーザーフレンドリーではないと判断されてしまいまうのです。

特にモバイルサイトにおいてはユーザーが3Gや4Gなどを使用して屋外で読み込むことを前提にスコアが出されますから、wifi環境だけに依存してサイトを構築していても自社サイトの読み込み速度を正確に確認することができません。

つまりPageSpeed Insightsが評価するサイトは、必要な情報がたとえどんな通信環境下であっても、待機時間などのストレスなくページを開くことができる、またそのための有効な対策をとっているサイトということになります。

したがって、このスコアを向上させるためにはユーザーの利用環境を想定して改善策を考えていきます。

まずノード数が跳ね上がる原因として考えられることは、外部埋め込みファイルを読み込ませる仕様になっていることです。たとえば動画サイトを埋め込んでみたり、各種SNSタイムラインの読み込みなどをページに埋め込むことでノード数が激増します。外部ファイルを読み込むために余計に時間がかかりますから、PageSpeed Insightsにおいては評価が下がり、ひいてはそれがサイト全体のSEOにも悪い影響を与えます。したがって過大なDOMを回避するためには、そのような埋め込みを極力減らすことが望ましいでしょう。

もちろん動画サイトなどの埋め込みはページ全体にとって有益であるケースも多々あります。しかし、少なくとも最初に読み込まれるトップページに直接コーディングするのではなく、別ページへ埋め込み、リンクを貼るなどの対策は必要です。閲覧を希望するユーザーをその別ページへ誘導するようにサイトデザインを再構築するなどの工夫が大切になります。

PHPやJavaScriptを理解できない人がブログを高速化するには?

このテーマの関連記事はこちら