WordPressの「DOMサイズが大きすぎる」という警告は、ページにHTML要素が多すぎて遅くなっていることを意味します。
これを修正する最善の方法は、WP Rocketのようなパフォーマンスプラグインを使用すること、画像やギャラリーの読み込み方法を最適化すること、そして軽量なテーマまたはページビルダーを選択することです。
この警告は、Google Lighthouseやその他の速度テストツールに表示されることがあり、技術的に聞こえます。しかし、その概念は単純です。ウェブサイトは部品の集合体であり、部品が多すぎるとブラウザが overwhelm される可能性があります。
WPBeginnerでは、この問題を解決するためにトラフィックの多い自社ウェブサイトを最適化しただけでなく、数え切れないほどのユーザーのサイト速度向上を支援してきました。
この記事では、問題を解決し、WordPressのパフォーマンスを向上させるための専門家による11の方法を詳しく説明します。
クイックアンサー：WordPressでDOMサイズが大きすぎる問題をどう修正するか？
WP Rocketのようなスピードプラグインを使用して、キャッシュ、遅延読み込み、ファイル最適化を自動的に処理します。次に、テーマとプラグインを監査してコードの肥大化を確認し、必要に応じてSeedProdのような軽量ページビルダーに切り替えます。
「DOMサイズの過剰化を避ける」という警告の意味は何ですか？
「DOMサイズが大きすぎる」という警告は、ウェブページにブラウザが効率的に処理するには多すぎるHTML要素がある場合に、Google PageSpeed Insightsのようなスピードテストツールに表示されます。
DOMはDocument Object Modelの略です。これは、ウェブページ上のすべてのオブジェクトを表すツリーのような構造です。見出し、段落、画像、ボタンなどの各要素は、このツリーの「ノード」です。
これらのノードの総数がDOMサイズを構成します。この数が大きすぎると、ブラウザはページをレンダリングするためにより多くの時間とリソースを必要とし、ウェブサイトの速度が低下する可能性があります。
DOMサイズが大きすぎるとサイトにどのような悪影響がありますか？
肥大化したDOMはブラウザに余分な負荷をかけ、WordPressウェブサイトのパフォーマンスを低下させ、訪問者をいらだたせます。
- 読み込み時間の遅延と高い直帰率 — 訪問者はサイトが読み込まれる前にサイトから離れる可能性があります
- 検索順位の低下 — Googleはページの速度をWordPress SEOの要因として使用します
GoogleにとってDOM要素が多すぎるのは何個か？
Google Lighthouseのようなテストツールは、DOMサイズが大きすぎるというフラグを立てるために単一の数値を使用するわけではありません。代わりに、3つの特定の基準を見ています。
| メトリック | 警告しきい値 | その意味 |
|---|---|---|
| DOMノードの合計数 | 約800（警告）/約1,400（エラー） | ページ上のHTML要素の合計数 |
| DOMの最大深度 | 32レベル | 要素が互いにどれだけ深くネストされているか |
| 子要素の最大数 | 親あたり60 | 単一の親要素内の直接の子要素 |
複数のスライダー、多くのネストされたセクションを持つ複雑なレイアウト、または多数の埋め込みアイテムがあるページは、これらの制限を超える可能性が高くなります。ただし、この問題を解決するためにデザインを犠牲にする必要はありません。
この問題を解決するための包括的なガイドをご用意しました。WordPressのDOMサイズを削減し、パフォーマンスを向上させるための実証済みの11の方法をご紹介します。
- WordPressスピード最適化プラグインを使用する
- テーマとプラグインを確認する
- 最適化されたページビルダーを使用する
- 画像と動画を最適化する
- 遅延読み込みを設定する
- コメントやコンテンツの多い投稿をページ分割する
- CSSおよびJavaScriptファイルを最小化する
- レンダリングをブロックするJavaScriptとCSSを削減する
- WordPressキャッシュを有効にする
- WordPress CDNを使用する
- WordPressデータベースを最適化する
- 【ボーナス】DOMサイズだけでなく、WordPress全体のパフォーマンスに注力する
- DOMサイズが大きすぎる問題の修正に関するよくある質問
- WordPressパフォーマンスに関する追加リソース
特定の最適化方法について詳しく知るには、上記のクイックリンクを自由にご利用ください。
1. WordPressのスピード最適化プラグインを使用する
最初のおすすめは、強力なWordPressスピード最適化プラグインをインストールすることです。これらのプラグインは、ウェブサイトを高速化するために必要な技術的な最適化を処理します。
これにより、プラグインがバックグラウンドで動作している間に、コンテンツの管理と作成に集中できます。
WPBeginnerでは、WP Rocketを使用および推奨しています。私たちは自身のウェブサイトで、キャッシュ、ファイル最適化、遅延読み込みの管理に使用しており、WPBeginnerでのページ読み込み速度を向上させる方法に関する記事で詳細を確認できます。
WP Rocketは主にキャッシュプラグインとして知られていますが、その機能の多くは、大きなDOMによって引き起こされる問題に対処するのに役立ちます。これには、ファイル最適化、遅延読み込み、JavaScriptの遅延などが含まれます。
これらの機能については、記事の後半で説明します。詳細については、完全なWP Rocketレビューを読むか、セットアップガイドを使用して開始してください。
2. テーマとプラグインを確認する
WordPressのプラグインやテーマは、WordPressウェブサイトに機能性とスタイルを追加しますが、DOMサイズが過剰になる原因にもなり得ます。
コードの悪いテーマやプラグインは、不要な HTML 要素を追加してページの構造を肥大化させる可能性があります。同様に、使用しない追加機能を持つプラグインやテーマは、コードを読み込む可能性があり、DOM を増加させます。
特定のプラグインまたはテーマが原因かどうかを確認するには、プラグインを1つずつ非アクティブ化するか、一時的にデフォルトのWordPressテーマに切り替えることができます。各変更後にスピードテストを実行して、DOMサイズ警告が消えるかどうかを確認してください。
この問題を回避するために、常に公式WordPressディレクトリや有名な開発者など、信頼できるソースからテーマやプラグインを選択してください。これらのリソースは通常、より厳格なコーディング基準を持っています。
信頼できる推奨事項については、WPBeginner Solution Centerをご覧ください。ここではWordPressソフトウェアをテストおよびレビューしています。
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でのコメントのページネーション方法に関するガイドで詳細を読むことができます。
無限スクロールは、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サイズ以外にも、Core Web Vitalsのような他の指標に注意を払う必要があるかもしれません。これらは、Googleがウェブサイトのユーザーエクスペリエンスを測定するために使用する特定の指標です。
DOMサイズが大きすぎる問題の修正に関するよくある質問
WordPressでDOMサイズの問題を修正することについて、よく寄せられる質問とその回答を以下に示します。
ウェブページの良いDOMサイズとは何ですか？
Googleのガイドラインによると、警告を回避するためにbody要素を約800ノード未満に保つことを目指してください。Lighthouseは、約1,400 bodyノードを超えるとエラーをフラグ付けします。また、ネストは32レベル未満、親要素あたりの子要素は60個以下に保ってください。
ページビルダーを使用すると、常にDOMサイズは大きくなりますか？
必ずしもそうではありません。SeedProdのようなモダンでパフォーマンス重視のページビルダーは、クリーンで効率的なコードを生成するように設計されています。しかし、古い、またはコードが不十分なページビルダーは、DOMサイズを増加させる多くの不要なラッパー要素を追加する可能性があります。
ウェブサイトのDOMサイズを無料で確認するにはどうすればよいですか？
Google PageSpeed InsightsやGTmetrixのような無料のオンラインツールを使用できます。ブラウザで直接確認することもできます。Google Chromeでは、ページを右クリックし、「検証」を選択し、「コンソール」タブに移動して、document.querySelectorAll('*').lengthと入力してEnterキーを押します。
画像のファイルサイズはDOMノード数に影響しますか？
いいえ。<img>タグは、画像のファイルサイズに関係なく、単一のDOMノードです。ただし、スタイリングやライトボックスのために画像を余分な<div>コンテナで囲むギャラリープラグインは、より多くのノードを追加します。クリーンで最小限のマークアップを生成するプラグインを選択してください。
キャッシュはDOMサイズを削減できますか？
キャッシュは実際のDOMノード数を削減しません。しかし、保存された静的バージョンを訪問者に提供することでページの配信を劇的に高速化し、ブラウザがDOMをより迅速に処理および表示できるようにします。
WordPressパフォーマンスに関する追加リソース
このチュートリアルで、WordPressでDOMサイズが大きすぎる問題を修正する方法を学べたことを願っています。
ウェブサイトのパフォーマンスを向上させるための、これらの関連ガイドもチェックすることをお勧めします。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
モイヌディン・ワヒード
適切なプラグインを使用することで、多くの手間を省き、DOMサイズを過剰に削減してウェブサイトのパフォーマンスを向上させることができることに気づきました。
キャッシュにはWP Rocketを使用していますが、このプラグインでこれほど多くのことができるとは知りませんでした。
WP Rocketの簡単な設定を有効にするだけで、CSSとJavaScriptファイルを最小化し、CSSとJavaScriptのレンダリングブロックを削減できます。
DOMサイズの削減とウェブサイトパフォーマンスの向上に関する明確な手順をありがとうございます。
イジー・ヴァネック
PageSpeed Insightsは、DOMが大きいという警告を何度も出してくれましたが、どこから手をつけて減らせばいいのか分かりませんでした。この記事には、この問題に対処するためのヒントがたくさんあります。このガイドは明確なステップを提供しており、素晴らしいです。
モイヌディン・ワヒード
最近まで、ページスピードインサイトに表示されるこれらの指標が何なのか知りませんでした。
しかし、このような非常に役立つ記事のおかげで、これらの詳細についての理解が深まり、良い結果を達成するのに役立ちました。