WordPressの「DOMサイズが大きすぎる」という警告は、ページにHTML要素が多すぎて遅くなっていることを意味します。
これを修正する最善の方法は、WP Rocketのようなパフォーマンスプラグインを使用すること、画像やギャラリーの読み込み方法を最適化すること、そして軽量なテーマまたはページビルダーを選択することです。
この警告は、Google Lighthouseやその他の速度テストツールに表示されることがあり、技術的に聞こえます。しかし、その概念は単純です。ウェブサイトは部品の集合体であり、部品が多すぎるとブラウザが overwhelm される可能性があります。
WPBeginnerでは、この問題を解決するためにトラフィックの多い自社ウェブサイトを最適化しただけでなく、数え切れないほどのユーザーのサイト速度向上を支援してきました。
この記事では、問題を解決し、WordPressのパフォーマンスを向上させるための専門家による11の方法を詳しく説明します。
「DOMサイズの過剰化を避ける」という警告の意味は何ですか？
「DOMサイズの過剰化を避ける」という警告は、Google PageSpeed Insightsのようなスピードテストツールで、ウェブページにブラウザが効率的に処理するには多すぎるHTML要素がある場合に表示されます。
DOMはDocument Object Model（ドキュメントオブジェクトモデル）の略です。これは、ウェブページ上のすべてのオブジェクトを表すツリーのような構造です。ヘッダー、段落、画像、ボタンなどの各要素は、このツリー上の「ノード」です。
これらのノードの総数がDOMサイズを構成します。この数が大きすぎると、ブラウザはページをレンダリングするためにより多くの時間とリソースを必要とし、ウェブサイトの速度が低下する可能性があります。
DOMサイズが過剰になるとウェブサイトのパフォーマンスにどのような影響がありますか？
DOMサイズが大きいと、WordPressウェブサイトのパフォーマンスにいくつかの重要な方法で悪影響を与えます。テキストや画像からフォームやメニューまで、ページに追加する各要素はDOMノード数を増加させます。
この複雑さには次の影響があります。
- ページの表示速度低下: ブラウザは、ページを表示する前にDOMツリー全体を解析する必要があります。ツリーが大きいほど処理に時間がかかり、訪問者がコンテンツを目にするまでの時間が遅延します。
- メモリ使用量の増加：複雑なDOM構造は、ユーザーのデバイスにより多くのメモリと処理能力を必要とします。これは、特に携帯電話で顕著になる可能性があります。
- ユーザーエクスペリエンスの低下：これらのパフォーマンスの低下は、読み込み時間の遅延につながります。これにより、訪問者はイライラし、サイトが読み込まれる前にサイトを離れてしまう可能性があります。
- ネガティブSEOへの影響: Googleのような検索エンジンは、ページの速度をランキング要因として使用します。読み込みの遅いページは、WordPress SEOに悪影響を与え、ウェブサイトのコンバージョンを低下させる可能性があります。
GoogleにとってDOM要素が多すぎるのは何個か？
Google Lighthouseのようなテストツールは、DOMサイズが過剰であるとフラグを立てるために1つの数値だけを使用するわけではありません。代わりに、3つの特定の基準を見ています。
- 合計DOMノード数: ページ上のHTML要素（ノード）の総数が1,500を超えると警告がトリガーされます。これが警告の最も一般的な原因です。
- 最大DOM深度: 要素が互いに深くネストされている場合、警告がトリガーされます。Lighthouseは、ネストが32レベルを超えるとページにフラグを立てます。
- 最大子要素数：単一の親要素に直接60個を超える子要素がある場合、警告がトリガーされます。これは、コードが不十分なメガメニューやギャラリーでよく発生します。
複数のスライダー、多くのネストされたセクションを持つ複雑なレイアウト、または多数の埋め込みアイテムがあるページは、これらの制限を超える可能性が高くなります。ただし、この問題を解決するためにデザインを犠牲にする必要はありません。
この問題を解決するための包括的なガイドをご用意しました。WordPressのDOMサイズを削減し、パフォーマンスを向上させるための実証済みの11の方法をご紹介します。
- WordPressスピード最適化プラグインを使用する
- テーマとプラグインを確認する
- 最適化されたページビルダーを使用する
- 画像と動画を最適化する
- 遅延読み込みを実装する
- コメントやコンテンツの多い投稿をページ分割する
- CSSおよびJavaScriptファイルを最小化する
- レンダリングをブロックするJavaScriptとCSSを削減する
- WordPressキャッシュを有効にする
- WordPress CDNを使用する
- WordPressデータベースを最適化する
特定の最適化方法について詳しく知るには、上記のクイックリンクを自由にご利用ください。
1. WordPressのスピード最適化プラグインを使用する
最初のおすすめは、強力なWordPressスピード最適化プラグインをインストールすることです。これらのプラグインは、ウェブサイトを高速化するために必要な技術的な最適化を処理します。
これにより、プラグインがバックグラウンドで動作している間に、コンテンツの管理と作成に集中できます。
WPBeginnerでは、WP Rocketを使用しており、推奨しています。当社自身のウェブサイトでキャッシュ管理、ファイル最適化、遅延読み込みに使用しており、これについてはWPBeginnerのページ読み込み速度を向上させる方法に関する記事で詳しく説明しています。
WP Rocketは主にキャッシュプラグインとして知られていますが、その機能の多くは、大きなDOMによって引き起こされる問題に対処するのに役立ちます。これには、ファイル最適化、遅延読み込み、JavaScriptの遅延実行が含まれます。
これらの機能については、記事の後半で説明します。詳細については、WP Rocketのレビュー全体を読むか、設定ガイドを使用して開始してください。
2. テーマとプラグインを確認する
WordPressのプラグインやテーマは、WordPressウェブサイトに機能性とスタイルを追加しますが、DOMサイズが過剰になる原因にもなり得ます。
コードの悪いテーマやプラグインは、不要な HTML 要素を追加してページの構造を肥大化させる可能性があります。同様に、使用しない追加機能を持つプラグインやテーマは、コードを読み込む可能性があり、DOM を増加させます。
特定のプラグインまたはテーマが原因かどうかを確認するには、プラグインを1つずつ無効にするか、一時的にデフォルトのWordPressテーマに切り替えることができます。変更ごとにスピードテストを実行して、DOMサイズの警告が消えるかどうかを確認してください。
この問題を回避するために、常に公式WordPressディレクトリや有名な開発者など、信頼できるソースからテーマやプラグインを選択してください。これらのリソースは通常、より厳格なコーディング基準を持っています。
信頼できるおすすめについては、WordPressのソフトウェアをテストおよびレビューしているWPBeginner Solution Centerをご覧ください。
3. 最適化されたページビルダーを使用する
ページビルダーはコードなしでカスタムレイアウトを設計するための優れたツールですが、DOMサイズが過剰になる原因となるものもあります。これらは、スタイリングやレイアウトを制御するために、コンテンツを余分なHTML要素でラップすることがよくあります。
たとえば、最適化されていないページビルダーは、配置やスタイリングのために、単一のボタンを複数のネストされた<div>コンテナで囲むことがあります。これらのコンテナのそれぞれがDOMに別のノードを追加し、総数を急速に増加させます。
ページビルダーが原因だと疑われる場合は、ステージングサイトで無効にして、DOMサイズを再度確認することでテストできます。組み込みのフルサイトエディターなどのツールを使用できますが、柔軟性に欠ける場合があります。
柔軟性とパフォーマンスの最適なバランスを得るために、SeedProdのようなスピード最適化されたページビルダーの使用をお勧めします。当社のテストでは、他の人気ビルダーよりも一貫して優れたパフォーマンスを発揮しました。
Elementor vs. Divi vs. SeedProd 分析で、他のものと比較してどのように見えるかを確認できます。
WPForms や Duplicator を含む多くのパートナーブランドは、SeedProd を使用してウェブサイトを構築しています。
4. 画像と動画を最適化する
画像がDOMサイズにどのように関連するかを明確にすることが重要です。画像のファイルサイズ（KBまたはMB）は、DOMノードの数に影響しません。<img>タグは、画像ファイルのサイズに関係なく、単一のノードです。
ただし、画像の表示方法によってはDOMサイズが増加する可能性があります。一部のテーマやギャラリープラグインでは、スタイリング、ライトボックス、またはキャプションのために、各画像を複数の<div>コンテナでラップします。これらの余分なラッパー要素がDOMカウントを増加させる原因であり、画像自体ではありません。
画像を圧縮して最適化することはページ速度にとって非常に重要ですが、クリーンなコードを生成するギャラリープラグインを選択することも重要です。Optimoleのようなプラグインは、画像圧縮と遅延読み込みに役立ちます。
動画については、WordPressに直接アップロードしないことをお勧めします。
代わりに、YouTubeやVimeoのようなサービスでホストし、埋め込みます。これにより、サーバーの負荷が軽減され、DOMがクリーンに保たれます。
5. 遅延読み込みを設定する
遅延読み込み（Lazy loading）は、画像や動画などの重要度の低い要素を、ユーザーのビューポートに入りそうになるまで読み込みを遅延させる技術です。これにより、ブラウザはページの初期表示部分をはるかに速くレンダリングできます。
すべてを一度に読み込むのではなく、遅延読み込みはブラウザの初期処理負荷を軽減し、よりスムーズなユーザーエクスペリエンスを生み出します。
プラグインであるWP Rocketを使用すると、遅延読み込みの設定は簡単です。WordPressダッシュボードで、設定 » WP Rocketに移動し、「メディア」タブを開きます。ここで、画像、動画、iframeの遅延読み込みをワンクリックで有効にできます。
ギャラリーには、Envira Galleryのような、ネイティブの遅延読み込み機能を備えたギャラリープラグインの使用をお勧めします。
プラグインを使用してコメントセクションを遅延読み込みすることもできます。たとえば、Thrive Commentsのようなプラグインを使用すると、さらにパフォーマンスを向上させることができます。
6. コメントやコンテンツの多い投稿をページネーションする
非常に長い投稿やコメントセクションは、DOMサイズを大幅に増加させ、読み込み時間を遅くする可能性があります。ページネーションは、そのコンテンツを複数の小さなページに分割することでこれを解決します。
これにより、ブラウザと読者の両方にとってコンテンツが管理しやすくなります。WordPressエディターで「ページ区切り」ブロックを追加することで、長い投稿を簡単に分割できます。詳細な手順については、WordPressの投稿を複数のページに分割する方法に関するガイドを参照してください。
同様に、コメントをページ分割することもできます。WordPress管理画面の設定 » ディスカッションに移動し、「コメントをページに分割する」の横にあるチェックボックスをオンにして、1ページあたりのコメント数を設定します。
WordPressでコメントをページネーションする方法については、ガイドで詳しく読むことができます。WordPressでコメントをページネーションする方法。
DOMに新しい要素が継続的に追加され、パフォーマンスの問題につながる可能性があるため、無限スクロールは避けることをお勧めします。
7. CSSおよびJavaScriptファイルを最小化する
この手法はDOMノードの数を直接減らすわけではありませんが、パフォーマンスを大幅に向上させ、大きなDOMの悪影響を軽減します。
ミニフィケーションは、CSSおよびJavaScriptファイルからコメント、スペース、改行などの不要な文字を削除します。これによりファイルサイズが削減され、ブラウザでのダウンロードと処理が高速化されます。
WP Rocketのようなプラグインはこれを簡単にします。設定 » WP Rocketに移動し、「ファイル最適化」タブに切り替えて、CSSおよびJavaScriptファイルを最小化する機能を有効にします。詳細については、CSSおよびJavaScriptファイルを最小化する方法に関するガイドを参照してください。
ミニファイ（圧縮）する前に、サイトのバックアップを作成することをお勧めします。まれに、ミニファイが特定のテーマやプラグインで問題を引き起こす可能性があります。
8. レンダリングをブロックするJavaScriptとCSSを削減する
これはDOMノードを直接削減するわけではありませんが、ファイルの読み込み方法を変更することで、体感パフォーマンスを大幅に向上させる別のテクニックです。
ブラウザがページを読み込むのを、絵を描くことに例えてみてください。レンダリングブロックリソースは、完全に読み込まれるまでブラウザにウェブページの描画を停止させます。それらを遅延させることで、メインコンテンツが先に描画されるため、ユーザーはより速くあなたのサイトを見ることができます。
WP Rocketには、これに対処する機能があります。ファイルを結合してHTTPリクエストを削減し、クリティカルでないJavaScriptの読み込みを遅延させることができます。これは、バックグラウンドスクリプトの読み込みが完了していなくても、ユーザーはコンテンツをより速く見ることができることを意味します。
WordPressでレンダリングをブロックするリソースを修正する方法に関する記事で詳細を確認できます。
9. WordPressキャッシュを有効にする
キャッシュはDOMノードの数を直接減らすわけではありませんが、特に再訪問者のページ読み込み時間を劇的に短縮します。これにより、DOMの読み込みと表示がはるかに速くなります。
キャッシュは、サイトの静的バージョンを保存します。ユーザーが再訪問すると、ブラウザはページをゼロから再構築するのではなく、保存されたバージョンをロードできるため、はるかに高速です。これにより、サーバーへの負荷も軽減され、DOMをより迅速に処理できるようになります。
WP Rocketのようなプラグインを使用すると、キャッシュの設定が簡単になります。このプラグインは、アクティベーション時に最適なキャッシュ設定を自動的に有効にします。キャッシュ機能の詳細については、WP Rocketのインストールガイドをご覧ください。
10. WordPress CDNを使用する
CDN（コンテンツデリバリーネットワーク）は、DOMを直接変更することなく、DOMサイズが大きい場合の影響を軽減するのにも役立ちます。CDNは、ウェブサイトの静的ファイル（画像、CSS、JavaScript）のコピーを保存するサーバーのグローバルネットワークです。
ユーザーがあなたのサイトを訪問すると、CDNはユーザーの物理的な場所から最も近いサーバーからこれらのファイルを配信します。これにより、ダウンロード時間が大幅に短縮され、ブラウザはDOMの処理をより速く開始できます。
WPBeginnerではCloudflareのCDNを使用しています。なぜそれを選んだのかは、SucuriからCloudflareに切り替えた理由に関する投稿で学ぶことができます。
その他のオプションについては、最高のWordPress CDNサービスのリストをご覧ください。
11. WordPressデータベースの最適化
これは別の間接的な最適化です。データベースはDOMの一部ではありませんが、肥大化したデータベースはサーバーの応答時間を遅くする可能性があります。この遅延により、サイトの読み込みに時間がかかり、DOMが大きいとさらに遅く感じられることがあります。
時間の経過とともに、データベースには投稿リビジョン、スパムコメント、古いプラグインデータなどの不要なデータが蓄積される可能性があります。これらをクリーンアップすることで、ウェブサイトの効率が向上します。
WordPressデータベースを最適化する方法に関するガイドでは、プラグインを使用してデータベースを安全かつ迅速にクリーンアップする方法を説明しています。
DOMサイズだけでなく、WordPress全体のパフォーマンスに注力する
WordPressで「DOMサイズが大きすぎる」という警告に対処することは、ウェブサイトの速度にとって重要ですが、考慮すべき唯一の要因ではありません。
機能が多い、またはユニークなフォーマットを持つウェブサイトは、自然にDOMが大きくなることがありますが、それは問題ありません。重要なのは、サイトのパフォーマンスと機能のバランスを見つけることです。
そのため、DOMサイズ以外にも、コアウェブバイタルのような他の指標にも注意を払うと良いでしょう。これらは、Googleがウェブサイトのユーザーエクスペリエンスを測定するために使用する特定の指標です。
DOMサイズが大きくなりすぎる場合のよくある質問
WordPressでDOMサイズの問題を修正することについて、よく寄せられる質問とその回答を以下に示します。
ウェブページの良いDOMサイズとは何ですか？
Googleのガイドラインによると、良い目標はDOMサイズを合計1,500ノード未満に保ち、最大ネスト深度を32レベルにし、単一の要素が60個以上の子供を持たないようにすることです。
ページビルダーを使用すると、常にDOMサイズは大きくなりますか？
必ずしもそうではありません。SeedProdのようなモダンでパフォーマンス重視のページビルダーは、クリーンで効率的なコードを生成するように設計されています。しかし、古い、またはコードが不十分なページビルダーは、DOMサイズを増加させる多くの不要なラッパー要素を追加する可能性があります。
ウェブサイトのDOMサイズを無料で確認するにはどうすればよいですか？
Google PageSpeed InsightsやGTmetrixのような無料のオンラインツールを使用できます。ブラウザで直接確認することもできます。Google Chromeでは、ページを右クリックし、「検証」を選択し、「コンソール」タブに移動して、document.querySelectorAll('*').lengthと入力してEnterキーを押します。
WordPressパフォーマンスに関する追加リソース
このチュートリアルで、WordPressでDOMサイズが大きすぎる問題を修正する方法を学べたことを願っています。
ウェブサイトのパフォーマンスを向上させるための、これらの関連ガイドもチェックすることをお勧めします。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
モイヌディン・ワヒード
適切なプラグインを使用することで、多くの手間を省き、DOMサイズを過剰に削減してウェブサイトのパフォーマンスを向上させることができることに気づきました。
キャッシュにはWP Rocketを使用していますが、このプラグインでこれほど多くのことができるとは知りませんでした。
WP Rocketの簡単な設定を有効にするだけで、CSSとJavaScriptファイルを最小化し、CSSとJavaScriptのレンダリングブロックを削減できます。
DOMサイズの削減とウェブサイトパフォーマンスの向上に関する明確な手順をありがとうございます。
イジー・ヴァネック
PageSpeed Insightsは、DOMが大きいという警告を何度も出してくれましたが、どこから手をつけて減らせばいいのか分かりませんでした。この記事には、この問題に対処するためのヒントがたくさんあります。このガイドは明確なステップを提供しており、素晴らしいです。
モイヌディン・ワヒード
最近まで、ページスピードインサイトに表示されるこれらの指標が何なのか知りませんでした。
しかし、このような非常に役立つ記事のおかげで、これらの詳細についての理解が深まり、良い結果を達成するのに役立ちました。