DOMとは？「過大なDOMサイズを回避」する方法とは

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自体のノード数は増やしません。