WordPress で「過剰な DOM サイズを避けてください」という警告を修正する方法

公開: 2024-01-10
主要
@Cloudwaysをフォローしてください

WordPress サイトで作業していると、突然「過剰な DOM サイズを避けてください」という警告が表示されたことがありますか? そうですね、ちょっと頭が痛いですね。 この警告は、Web ページのドキュメント オブジェクト モデル (DOM) サイズが推奨サイズを超えた場合に表示されます。

ただし、心配しないでください。WordPress サイトを最適化することでこの問題を解決できます。 これには、ページ上の要素を減らし、HTML を効率的に構造化することが含まれます。 また、プラグインとテーマを選択する場合は、DOM サイズが大きくなる可能性があるので注意してください。

このブログ投稿が役に立ちます。 「過剰な DOM サイズを避ける」警告を修正するための実践的な手順を示します。 最終的には、WordPress サイトを最適化し、速度を上げ、ユーザー エクスペリエンスを向上させる準備が整います。 始めましょう！

目次
  • 「過度の DOM サイズを避けてください」という警告とは何ですか?
  • 大規模な DOM はサイトの速度と UX にどのような影響を与えますか?
  • DOM サイズが大きすぎる理由は何ですか?
  • 過剰な DOM サイズを診断するためのツールとテクニック
  • 「過剰な DOM サイズを避けてください」という警告を修正するにはどうすればよいですか?
  • 過剰な DOM サイズを防ぐためのベスト プラクティス

「過度の DOM サイズを避けてください」という警告とは何ですか?

「過剰な DOM サイズを避ける」警告は、 Google の Lighthouse などの Web サイト監査ツールからのパフォーマンス フラグです。 これは、Web ページのドキュメント オブジェクト モデル (DOM) のノードが多すぎることを示します。 これはサイトのパフォーマンスに悪影響を与える可能性があります。

DOM は、ブラウザがサイトを表示するために使用する Web ページを表現したものです。 これは、タグやテキストなどの HTML 要素であるノードで構成されます。 DOM にノードが多すぎる場合、それは「過剰な DOM サイズ」と呼ばれます。

最適なパフォーマンスを維持するには、 DOM ノードの数を 1,500未満にすることが一般的に推奨されます。
ページ上で。 DOM の深さは、ネストされたレベル 32未満に最小限にする必要があります。 これにより、DOM の複雑さが軽減されます。

また、 60 を超える子ノードを持つ親ノードを避けることをお勧めします。 これにより、単一のノードが複雑になりすぎることがなくなります。 これらのプラクティスは、「過剰な DOM サイズ」警告を回避するのに役立ちます。

Google Lighthouse Showing Recommendations

– Google Lighthouse による推奨事項の表示

大規模な DOM はサイトの速度と UX にどのような影響を与えますか?

ウェブサイトのパフォーマンスはユーザー エクスペリエンスに直接影響するため、非常に重要です。

適切なパフォーマンスの Web サイトの読み込みは、ユーザーの操作に即座に応答し、スムーズなブラウジング エクスペリエンスを提供します。 これは、ユーザーがデジタル エクスペリエンスに高い期待を寄せている時代においては特に重要です。

一方で、Web サイトのパフォーマンスが低いと、読み込み時間が長くなったり、インターフェイスが応答しなくなったりする可能性があります。 これらの問題は、ユーザー エクスペリエンスにストレスを与え、直帰率の上昇やユーザー エンゲージメントの低下につながる可能性があります。

最終的に、パフォーマンスの低下はコンバージョンや売上の損失につながる可能性があります。 したがって、DOM サイズの管理を含め、最適な Web サイトのパフォーマンスを維持することは、Web サイトの成功には不可欠です。

サイトの速度とUXを改善したいですか? 今すぐクラウドウェイに切り替えてください!

Cloudways は、最適化されたサーバー構成と高度なキャッシュにより、DOM のサイズに関係なく、WordPress サイトがスムーズに動作することを保証します。

今すぐ体験してください！

DOM サイズが大きすぎる理由は何ですか?

DOM サイズが大きいため、Web ページが遅くなり、パフォーマンスが低下する可能性があります。 これは、Web パフォーマンスを最適化するときに検討する価値のある一般的な問題です。 この問題の主な原因を見てみましょう。

1. ページ上の要素が多すぎる

複雑なデザインや冗長なコードにより、ページ上の要素が多すぎる可能性があります。 デザインがパフォーマンスを考慮して合理化されていない場合、乱雑な DOM ツリーが作成されます。 これにより、ページの速度が低下し、ユーザー エクスペリエンスに影響を与える可能性があります。

2. 深く入れ子になった構造

HTML での深いネストはパフォーマンスの問題を引き起こす可能性があります。 埋め込みが多い場合、DOM ツリーは複雑になります。 この複雑さにより、ブラウザがページを効率的にレンダリングすることが難しくなり、CSS や JavaScript の処理が遅くなる可能性があります。

3. 最適化されていないテーマとプラグイン

テーマやプラグインによって、不要な要素、JavaScript、または CSS が追加される場合があります。 多くの場合、テーマには DOM を肥大化させるデフォルトの機能が含まれていますが、プラグインには、それらの機能が使用されていない場合でも、読み込み時間を増加させるスクリプトやスタイルが追加される場合があります。

過剰な DOM サイズを診断するためのツールとテクニック

この問題を診断し、最適化の取り組みをガイドするのに役立ついくつかの効果的なツールとテクニックを見てみましょう。

1. Google ライトハウス

Google Lighthouse は、過剰な DOM サイズなど、Web サイトのパフォーマンスに関するさまざまな問題の診断に役立つ無料のオープンソース ツールです。 使用するには:

  1. Chrome ブラウザを開き、分析する Web ページに移動します。
  2. ページを右クリックして「検査」を選択し、Chrome の開発者ツールを開きます。
  3. [Lighthouse]タブをクリックし、 [ページ読み込みの分析]をクリックします。

2.Chrome デベロッパーツール

Chrome DevTools は、ウェブページの DOM の詳細なビューを提供します。 これを使用して、DOM ノードをカウントし、大きな DOM サイズに寄与している要素を特定できます。 その方法は次のとおりです。

  1. Chrome で Web ページを開きます。
  2. 右クリックして「検査」を選択し、DevTools を開きます。
  3. [Elements]タブでは、DOM ツリーを表示し、ノードをカウントできます。

3. Webページテスト

WebPageTest は、Web ページのパフォーマンスの詳細な分析を提供するオンライン ツールです。 これには、ページの DOM 要素の内訳が含まれています。 使用するには:

  1. WebPageTest.orgに移動します。
  2. テストする Web ページの URL を入力します。
  3. [テストの開始]をクリックします。

「過剰な DOM サイズを避けてください」という警告を修正するにはどうすればよいですか?

「過剰な DOM サイズを避ける」警告を修正するには、Web ページを最適化して DOM 内の要素の数を減らす必要があります。 次のテクニックを使用してこれにアプローチする方法は次のとおりです。

1. HTML 構造を合理化する

WordPress サイトの場合、次のテクニックに従って HTML 構造を合理化できます。

  • WordPress サイトには、Astra や Elementor などのシンプルなテーマを選択してください。 これらにより、ページに不必要な要素が追加されることはありません。
  • WordPress エディターでページと投稿を確認します。 未使用のショートコード、余分な div タグ、空の要素を削除します。
  • WordPress サイトを右クリックし、 [ページのソースを表示]を選択します。

select View page source

  • 同じクラス属性またはスタイル属性を持つ複数の div タグなど、繰り返し存在するコード セクションを探します。

Look for code sections

  • WordPress ダッシュボードに移動し、
    外観→テーマエディター。 ここで、テーマの PHP ファイルが表示されます。
  • 不要な入れ子構造を削除します。

Remove any unnecessary nested structures

  • 変更を加えた後、ファイルを保存します。 常にサイトをテストして、すべてが正しく機能することを確認してください。
  • Web サイトを右クリックし、「検査」を選択します。 「Lighthouse」タブに移動し、 「ページ負荷の分析」をクリックしてレポートを生成します。 これにより、「過剰な DOM サイズを避ける」という警告があるかどうかが表示されます。

Analyze page load

ここでは、「過剰な DOM サイズを避ける」という警告は表示されません。

no warning

2. コンテンツの多いページのページ分割または無限スクロール

WordPress テーマにページネーションを追加するには、
関数.php
テーマのファイルと、場合によってはページネーションを表示するテンプレート ファイル。

  • WordPress ダッシュボードに移動し、次の場所に移動します。
    外観→テーマエディター。 アクティブなテーマを選択します。
  • function.phpファイルを見つけてクリックして編集します。 ここで、カスタム関数を追加してページネーション リンクを作成できます。
  • 次の関数をfunctions.phpファイルに追加します。
 関数 my_custom_pagination() {

    グローバル $wp_query;

    $big = 999999999;

    echo paginate_links( array(

        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),

        'format' => '?paged=%#%',

        'current' => max( 1, get_query_var('paged') ),

        '合計' => $wp_query->max_num_pages

    ) );

}
  • ページネーションを行うテンプレート ファイル (たとえば、 index.php ) を開きます。 ページネーション リンクを配置する場所に次のコードを追加します。
 <?php my_custom_pagination(); ?>
  • WP_Queryを使用して新しいループを作成する場合は、ページネーションが処理されることを確認してください。 これを行うには、次のコードを追加します。
 $args = 配列(

    'posts_per_page' => 10、

    'paged' => get_query_var('paged') ? get_query_var('ページ') : 1

);

$my_query = 新しい WP_Query( $args );
  • コードを追加した後、functions.php ファイルとページネーション呼び出しを追加したテンプレート ファイルに変更を保存します。

3. 不要なスクリプトとプラグインを最適化または削除する

スクリプトとプラグインを管理することで、DOM サイズ超過の警告問題を修正することもできます。

そのためには:

  1. インストールしたプラグインを確認し、使用していないプラグインやページに不必要な肥大化をもたらすプラグインを非アクティブ化またはアンインストールします。
  2. WP RocketやAutoptimizeなどのプラグインを使用してスクリプトを縮小および結合し、リクエストと DOM 要素を減らします。

4. サーバー側レンダリングと遅延ロードを活用する

DOM サイズの警告を修正するには、WordPress Web サイトでサーバー側のレンダリングと遅延読み込みを有効にします。

1. サーバーサイド レンダリング (SSR)

SSR には、クライアント側の JavaScript に依存するのではなく、サーバー上で Web ページの最初の HTML が処理およびレンダリングされます。

これにより、Web サイトの読み込み時間と全体的なパフォーマンスが大幅に向上します。 WordPress サイトで SSR を有効にする詳細な手順については、この詳細ガイドに従ってください。

2. 遅延読み込み

これは、ロード時間を最適化し、DOM サイズの問題に対処するもう 1 つの効果的な手法です。 ビューポートに表示される画像など、必要なときに必要なコンテンツのみをロードすることで機能します。 これにより、ページの初期読み込み時間が短縮されます。

WordPress サイトに遅延読み込みを実装するには、この詳細なガイドに従ってください。 また、よりスムーズな実装のために、最適な遅延読み込みプラグインの1 つを使用することを検討してください。

過剰な DOM サイズを防ぐためのベスト プラクティス

WordPress の「過剰な DOM サイズ」警告を回避するための予防策をいくつか示します。

  1. シンプルなテーマを選択します。
    ページに不必要な要素を追加しないシンプルなテーマを選択してください。 Astra や Elementor などのテーマが良い選択です。
  2. プラグインの使用を制限する:
    各プラグインは、DOM に追加の要素を追加できます。 必要なプラグインのみを使用し、使用していないプラグインは定期的に確認して削除してください。
  3. ページをクリーンアップする:
    WordPress エディターでページと投稿を定期的に確認してください。 未使用のショートコード、余分な div タグ、空の要素を削除します。
  4. 画像を最適化します:
    大きな画像を DOM サイズに追加できます。 画像最適化プラグインを使用して、品質を損なうことなくサイズを縮小します。
  5. 遅延読み込みを実装する:
    遅延読み込みでは、必要な要素のみを読み込むことで、初期 DOM サイズを削減できます。
  6. ページネーションを使用する:
    コンテンツの多いページの場合は、ページネーションまたは無限スクロールを使用して、同時に読み込まれる要素の数を制限することを検討してください。
  7. コードを縮小します。
    ツールを使用して HTML、CSS、JavaScript を縮小します。 これは、DOM 全体のサイズを削減するのに役立ちます。
  8. サイトを定期的に監視します。
    Google Lighthouse などのツールを使用してサイトのパフォーマンスを監視し、DOM サイズの問題を早期に発見します。

まとめ

それで、これで完成です！ WordPress の「過剰な DOM サイズを避ける」警告を修正する方法を詳しく説明しました。 問題の理解から解決策の実装まで、Web サイトと UX の最適化に向けて重要な一歩を踏み出しました。

最適化に向けたあらゆるステップが、Web サイトの高速化、スムーズ化、そしてユーザーフレンドリー化に貢献することを忘れないでください。 したがって、これらのヒントを手元に置いて、Web 開発の旅を続けてください。 ご質問がございましたら、コメントにご記入ください。