WordPressの「過剰なDOMサイズを避ける」警告を解決する

Google PageSpeed InsightsやLighthouseから、WordPressサイトのパフォーマンスに関する警告を受け取っていませんか?

これは多くのWordPressサイト所有者にとって一般的な問題であり、迅速に対処することが不可欠です。

ご存じないかもしれませんが、DOMサイズが大きいと、サイトがコンテンツや画像を表示する速度が遅くなる可能性があります。また、メモリ使用量が増え、インタラクションが鈍く感じられ、スクリプトの動作も遅くなり、サイトのパフォーマンスとユーザーエクスペリエンスを損ないます。

WordPressサイトを高速化し、ユーザーエクスペリエンスを向上させるには、大きなDOMサイズの問題に取り組む必要があります。この問題を解決する方法を見ていきましょう。

DOMを理解する

DOM、つまりDocument Object Modelは、WordPressサイトの構造とコンテンツを表します。見出し、コンテンツ、ビジュアル、ボタンなどの要素を特定の順序で整理し、HTML、CSS、JavaScriptなどのプログラミング言語を使ってアクセスや変更を容易にします。

DOMを家系図のようなものと考えてください。両親、子供、親戚がいる家系図のように、WordPressサイトにはさまざまなレベル(深さ)を持つ複数の要素(ノード)があります。この階層は最後の要素(子ノード)に達するまで続きます。ノードが多すぎるDOMは**「過剰なDOMサイズ」**と呼ばれます。

主要な概念:

• ノード: HTMLタグとも呼ばれ、DOMの本質的な要素です。
• 深さ: DOMツリー内でブランチがどれだけ深く進むかを指します。
• 子要素: 別の要素の下にリストされた要素で、開きタグと閉じタグの間にあります。例:
  Hello World

これでDOMを理解できました。

過剰なDOMサイズの原因

DOMサイズが大きくなるのは、WebページにHTMLタグが多すぎる場合や、深くネストされすぎている場合です。これによりユーザーのブラウザがより多くの作業を行うことになり、ページの読み込み時間が遅くなり、ページ速度スコアが低下します。

JavaScriptやCSSの実行が遅いのは、ブラウザがより多くのノードを処理する必要があるためで、ページのレンダリングが遅延します。

膨大なDOMはメモリ使用量を増やし、スタイル処理を遅らせ、コストのかかるレイアウトリフローを引き起こします。DOMオブジェクトを変更することで、ユーザーに表示されるページ要素を制御できます。ブラウザのDevToolsや要素の検査画面でこれを確認できます:

ただし、Google Lighthouseのようなツールを使用すると、それに関するパフォーマンス警告が表示されることがあります。

メッセージは明確です:**’Avoid an excessive DOM size’**を守るべきです。Google Lighthouseは、この警告を3つの領域で報告します:

1. 要素の合計数: ページのDOMツリー内に800を超える要素がある場合、警告が表示されます。
2. 最大DOM深さ: この値は、最も深くネストされた要素のあるコードセクションを示します。
3. 多くの子ノードを持つ親ノード: Lighthouseは、60を超える子ノードを持つ親ノードにフラグを立てます。

これはLighthouseの**「診断」ですが、DOMサイズを小さく保つことでサイトのパフォーマンスとユーザーエクスペリエンスが向上し、Core Web Vitals**のスコアが上がります。

過剰なDOMサイズの理由

DOMサイズが大きいと、Webページが大幅に遅くなる可能性があります。この問題に寄与する主要な要因は次のとおりです:

1. 過負荷のページ: 複雑なデザインや冗長なコードのために要素が多すぎるWebページは、過負荷なDOMツリーをもたらします。これはページを遅くするだけでなく、ユーザーエクスペリエンスも低下させます。
2. 過剰なネスト: 深くネストされたHTML構造は複雑なDOMツリーを作成し、ブラウザがページを効率的にレンダリングするのを難しくします。これによりCSSやJavaScriptの処理が遅くなります。
3. 肥大化したテーマとプラグイン: テーマとプラグインは、JavaScriptやCSSなどの不要な要素を追加することがよくあります。多くのテーマにはDOMを肥大化させるデフォルト機能が付属しており、プラグインは追加のスクリプトとスタイルを導入し、これらの機能が使用されていなくても読み込み時間を増やします。

過剰なDOMサイズの特定: ツールとテクニック

最適なパフォーマンスのために、サイトのDOMサイズを理解し管理することは不可欠です。この問題を特定し対処するためのツールとテクニックを紹介します:

1. Google Lighthouse

Google Lighthouseは無料のオープンソースツールで、過剰なDOMサイズを含むWebサイトのパフォーマンス問題を特定するのに役立ちます。使用方法は次のとおりです:

• Chromeを開き、Webページに移動します。
• ページを右クリックし、**「検証」**を選択して開発者ツールを開きます。
• **「Lighthouse」タブをクリックし、次に「Analyze page load」**をクリックします。

2. Chrome DevTools

Chrome DevToolsはWebページのDOMを詳細に表示します。DOMノードのカウントや、大きなDOMサイズに寄与する要素の特定に役立ちます。次の手順に従ってください:

• ChromeでWebページを開きます。
• 右クリックして**「検証」**を選択し、DevToolsを開きます。
• 「Elements」タブでDOMツリーを表示し、ノードを数えます。

3. WebPageTest

WebPageTestは、DOM要素の内訳を含むWebページのパフォーマンスの詳細な分析を提供するオンラインツールです。使用方法は次のとおりです:

• WebPageTest.orgにアクセスします。
• WebページのURLを入力します。
• **「Start Test」**をクリックします。

4. GTmetrix

GTmetrixはWebページのパフォーマンス(DOMサイズを含む)を分析するもう1つの貴重なツールです。使用方法は次のとおりです:

• GTmetrix.comにアクセスします。
• WebページのURLを入力します。
• **「Test your site」**をクリックし、DOM関連の指標に注目して詳細レポートを確認します。

5. PageSpeed Insights

GoogleのPageSpeed Insightsは、DOMサイズの問題を含むWebページのパフォーマンスに関する洞察を提供します。使用方法は次のとおりです:

• PageSpeed Insightsにアクセスします。
• WebページのURLを入力します。
• **「Analyze」**をクリックして、DOMサイズの最適化に関する具体的な推奨事項を含む、Webページのパフォーマンスに関する詳細レポートを取得します。

これらのツールを使用すると、サイトのDOMサイズを効果的に診断し、パフォーマンス向上のために最適化できます。

過剰なDOMサイズの問題を修正する: コツとヒント

「avoid excessive-DOM size」警告を修正する前に、その原因を特定する必要があります。

まず、Google Lighthouseを使用して、最大DOM深さと最大子要素を見つけます。次に、WebブラウザのDOMインスペクタを使用してDOMを確認します。

目標は、過剰なDOMノード数の原因を特定することです。

1. 質の悪いコードのプラグインとテーマを避ける

タイムライン、カレンダー、スライダーのようにDOMノードを多く作成するプラグインを使用すると、Webサイトが遅くなる可能性があります。パフォーマンスを向上させるために、より効率的なプラグインに切り替えてください。

同様に、コードの質が悪いテーマやテンプレートはサイトの速度を損なう可能性があります。スリムなエディタを使用して不要なコードを排除するか、テンプレートを変更することで、Webサイトを改善できます。

2. JavaScriptのDOMノードを削減する

JavaScriptは時にページにDOMノードを多く追加し、Webサイトを遅くすることがあります。例えば、チャットウィジェットが過剰な数のノードを作成することがあります。

問題のあるJavaScriptファイルを削除するか、より効率的なウィジェットに切り替えることを検討してください。このシンプルな変更で、サイトのパフォーマンスと速度を大幅に向上させることができます。

3. 過剰なHTMLを生成するページビルダーを避ける

WP Bakery、Elementor、Gutenbergなどのページビルダーは、時にDOMノードを多く生成し、サイトを遅くすることがあります。これらのツールは便利ですが、かさばる非効率なコードを作成する可能性があります。

これを修正するには、余分なコードをクリーンアップし、ワークフローを最適化してください。最近、Elementorの開発者は肥大化を減らし効率を向上させるための改善を行っています。一方、GutenbergはよりクリーンなHTMLを生成する傾向があり、よりスリムな構造を維持するのに役立ちます。

Webサイトを高速でユーザーフレンドリーに保つために、HTMLを定期的に確認し、簡素化してください。これにより、より速い読み込み時間と訪問者により良い体験が保証されます。

4. WordPressサイトのHTMLを最適化する

WordPressサイトのHTMLの整理を最適化するためにできることは次のとおりです:

不要な要素なしでページをクリーンに保つ、Hello ElementorやElementorのようなシンプルなテーマを選択してください。

WordPressエディタでページと投稿を確認します。未使用のショートコード、余分なdivタグ、空の要素を削除します。

WordPressサイトを右クリックして**「View Page Source」を選択するか、「CTRL + U」**を押します。同じクラスやスタイル属性を持つ複数のdivタグなど、繰り返されるコードセクションを探します。

WordPressダッシュボード → 「外観」 → **「テーマエディタ」**に移動します。ここでテーマのPHPファイルを編集できます。

不要なネストされたコードを削除します。

変更を加えた後、ファイルを保存し、サイトをテストしてすべてが正しく機能することを確認します。

サイトを右クリックして**「検証」を選択します。Lighthouseタブに移動し、「Analyze page load」をクリックしてレポートを生成します。これにより、「Avoid an Excessive DOM Size」**に関する警告が確認されます。

5. スクリプトを管理してWebサイトの負荷を軽減する

WebサイトのDOMサイズを効果的に減らすには、使用するスクリプトとプラグインを慎重に管理することが不可欠です。ステップバイステップのアプローチは次のとおりです:

プラグインを監査する:Webサイトにインストールされているすべてのプラグインを確認します。どれが必須で、どれが使用されていないかを特定します。使用されていないプラグインや、サイトを大幅に遅くするプラグインは、サイトのパフォーマンスを合理化するために無効化または完全に削除する必要があります。

スクリプトを最適化する:WP RocketやAsset CleanUpのようなプラグインの使用を検討してください。これらのツールはスクリプトを最小化および結合することで役立ちます。最小化は、機能を変更せずにコードから不要な文字を削除します。

対照的に、スクリプトの結合は、ユーザーのブラウザがダウンロードする必要のあるファイルの総数を減らし、リクエストを減らし、DOMサイズを最小化します。

パフォーマンス向上のためのDOMサイズを減らすヒント

WebサイトのDOMサイズを減らすことに興味がありますか?実用的なヒントをいくつか紹介します:

• 遅延読み込みと無限スクロールを使用する – 遅延読み込みは、カテゴリページの画像など、必要になるまでサイトの特定の部分の読み込みを遅らせます。製品ページのブログ投稿やアイテムの数を約10に制限することも、読み込み時間を短縮できます。
• 長いページを複数のページに分割する – 多くのコンテンツ(ブログ、お問い合わせフォーム、製品など)を含む1つの長いページの代わりに、それぞれに別のページを作成します。ナビゲーションバーを使用してそれらをリンクします。
• CSSでページレンダリングを強化する – CSSの’content-visibility’プロパティを試してください。これにより、ブラウザは要素が必要になるまでレンダリングをスキップし、パフォーマンスを向上できます。
• CSSとJavaScriptを簡素化する – 複雑なCSSスタイルや重いJavaScriptコードを避けてください。これらはDOMサイズを増やし、サイトを遅くする可能性があります。これらを簡素化することで大きな違いを生み出せます。

結論

それがWordPressで**「Avoid Excessive DOM Size」**警告に取り組む方法です!問題について学び、それを解決する方法を探り、Webサイトをより合理化され応答性の高いものにしました。

すべての最適化により、サイトはより速く、より効率的で、より使いやすくなります。Webスキルを開発する際に、これらのヒントを心に留めておいてください。

関連記事

• WordPressエラー「サイドバーが表示されない」の修正方法
• WordPressが遅い理由と修正方法
• WordPressにデータバックアップと災害復旧が必要な理由
• WordPressデータベースの修復と最適化方法
• WordPressで変更を元に戻す方法(リビジョン、自動保存、スナップショット)