Webページの表示は、一つのファイルで行われているわけではなく、HTML、CSS、Javascriptなどの様々な要素を読み込んでいます。
DOMとは、Document Object Modelの略で、簡単に言ってしまえば、そのWebページを表示させるためのもので、様々なファイルをノードで結合したモデルのことです。
そして、DOMサイズとは、Webページを表示させるのに必要なファイル数のことです。ファイル数が多くなることで、読み込みの時間が長くなったり、表示が安定しなくなります。また、ファイルを読み込むまでに経由したフォルダ数が深さとなり、深ければ深いほど読み込み時間がかかることになります。
Page Speed Insightでは以下のようにDOMサイズについて説明をしています。
DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。
特に、WordPressのようなコアファイル以外にWordPressテーマやプラグインが関わってくるCMSでは、DOMサイズが大きくなり、過大になりがちです。現在の検索エンジンは、MFI（Mobile First Index）であり、モバイル検索が重視されます。モバイルでは、３Gや4Gといった通信速度の遅い回線が使われており、内容が良質であることに加えて、ストレスなく表示される検索結果になります。
そのため、過大なDOMサイズの回避は、Page Speed Insightの中の改善項目の１つとして挙げられています。つまり、優先的に改善が必要なポイントの１つと言えます。
WordPressで過大なDOMサイズを回避する方法とは？
オウンドメディアやWebサイトはWordPressで構築されていることが多いため、WordPressユーザー向けに過大なDOMサイズの回避方法を解説します。ここでは、最初にコンテンツを開いた時に、必要なノードを減らすことを目指します。
WordPressテーマを選択する。
WordPressには、無料で活用できるWordPressテーマのライブラリーがあります。
無料で利用できるメリットがある反面、DOMサイズが大きいWordPressテーマがとても多いです。そのため、明らかに表示速度に難があり、実は出力されるファイルも安定していないものも含まれます。
できるだけ、DOMサイズが小さなWordPressテーマを選択するのが基本になります。例えば、このWebサイトで使われているSANGOやWebマーケティング会社であるWebライダーが提供する賢威８がDOMサイズが小さなWordPressテーマです。
CSSやJavascriptを増やすWordPressのプラグインを使わない。
WordPressプラグインの中には、Shortcode Ultimateのような表現の方法を豊富にする便利なプラグインがあります。また、フォームを組み込む機能性豊かなプラグインも存在するのがメリットです。
しかし表現が豊かになり、機能が拡充するということは、それだけファイルが増えることを意味していますので、当然ノード数も増えます。
そのため、できる限りプラグインは使わず、表現や機能の拡充を行います。表現は、WordPressテーマに付属している機能を活用すると、元々のCSSを利用することになるため、CSSを新たに増やしません。問い合わせフォームは、HTMLでWordPress外に作ることで、WordPress自体のノード数は増やしません。
CSSを結合する。
プラグインを使い、CSSを結合することでノード数を減らすこともできます。以前は、ヘッダー領域を軽減するHead Cleanerがあったのですが、プラグインの更新がされていないため導入はセキュリティーに問題があります。
Cache系プラグインであるWP Fastest Cacheがよく使われているため、CSSの結合にチェックを入れます。SEO系プラグインにもCSSの結合は含まれていることが多いので、重複しないように気をつけます。
Javascriptなどを極力使わない。
外部サイトを読み込むJavascriptは、ノード数を増やす他に、外部サイトからの応答を待つ必要があるためメインスレッドが表示されるまでの時間も長くします。
アドセンスや動画の埋め込みは仕方ないとして、SNSのアカウントを紹介する目的で組み込むウィジェットは、バナーで代用することができます。
まとめ
コンテンツSEOでは、良質なコンテンツを発信することが重視されますが、唯一の要素ではありません。スマホで検索するユーザーが多いということは、通信速度が不安定であることを前提にしたページ作りを行う必要性があります。
そのためには、CSS、Javascript、画像などできる限り絞り込み、DOMサイズを小さくします。
