WordPressでDOMサイズを縮小する方法

またはGTmetrixで「DOM要素の数を減らす」：

DOMとは何ですか？

ブラウザがHTMLドキュメントを受信したら、CSSとJavaScriptを使用したレンダリングと描画に使用されるツリー構造に変換する必要があります。

このツリー構造は、DOMまたはドキュメントオブジェクトモデルと呼ばれます。

結び目 DOM内のすべてのHTML要素はノードと呼ばれます。（別名「葉」は木の上にあります）。
深さ –「ブランチ」がツリー内を移動する時間は深さと呼ばれます。たとえば、上の図では、imgタグの深さは3です（HTML-> body-> div-> img）。
子要素 –ノードのすべての子ノード（さらに分岐することなく）は子です。

LighthouseとGooglePageSpeedInsightsは、次のいずれかの条件が満たされた場合にページのフラグ付けを開始します。

DOMのサイズが大きすぎると、さまざまな方法でパフォーマンスに影響を与える可能性があります。

より高い解析およびレンダリング時間（FCP） 。大きなDOMツリーと複雑なスタイルのルールは、ブラウザーにとって素晴らしい仕事をします。ブラウザは、HTMLを解析し、レンダリングツリーを構築する必要があります。ユーザーが対話したり、HTMLの何かが変更されたりするたびに、ブラウザはそれを再度計算する必要があります。
メモリ使用量を増やします -JavaScriptコードには、DOM要素にアクセスするための関数が含まれている場合があります。 DOMツリーが大きくなると、JavaScriptはそれらを処理するためにより多くのメモリを使用するようになります。例として、クエリセレクタがあります。document.querySelectorAll（ 'img'）これは、遅延読み込みライブラリで一般的に使用されるすべての画像を一覧表示します。
TTFBを増やします – DOMのサイズが大きくなると、HTMLドキュメントのサイズも大きくなります（KB単位）。より多くのデータをネットワーク経由で転送する必要があるため、これによりTTFBが増加します。

たとえば、DOMのサイズを縮小することは技術的に簡単です。

利用方法：

<ul id="navigation-main">etc..</ul>

それ以外の：

<div id="navigation-main"><ul>etc..</ul></div>

基本的に、考えられるすべてのHTML要素を取り除きます。 FlexboxまたはGridを使用して、DOMサイズをさらに縮小することもできます。

しかし、WordPressを使用しているので、これはあまり役に立ちません！

サイトにすべてが掲載されたページはありますか？サービス、お問い合わせフォーム、製品、ブログ投稿、お客様の声などのように？

それらを複数のページに分割し、ヘッダー/ナビゲーションバーからリンクしてみてください。

あらゆる種類の要素の遅延読み込み。ここではいくつかの例を示します。

YouTubeビデオの遅延読み込み -WP YouTubeLyteまたはWPRocketによるLazyLoadを使用します。
1ページあたりのブログ投稿/製品の数を制限する –私は通常、ページごとに最大10のブログ投稿を保持し、残りをページ分割しようとします。
ブログ投稿/製品の遅延読み込み – [さらに読み込む]ボタンまたは無限スクロールを追加して、ブログの投稿や製品をさらに読み込みます。
遅延読み込みコメント -Disqusを使用しているので、Disqusの条件付き読み込みを使用しています。独自のコメントを使用している場合は、Lazy Load forCommentsなどのプラグインを使用してください。
コメントのページ付け -何百ものコメントがある場合、これはDOMサイズにも影響を与える可能性があります。コメントをページ付けするには、[設定]-> [ディスカッション]-> [コメントのページ付け]に移動します。
関連する投稿の数を制限する –関連する投稿の数を3または4に制限してみてください。

注：画像の遅延読み込みによってDOMのサイズが縮小されることはありません