WebサイトのDOMサイズを縮小するためのキー

公開: 2020-11-17

Webページでの良好なSEOポジショニングの達成に影響を与える側面の1つは、その読み込みパフォーマンスです。 そして、これはページのDOMサイズが重要な役割を果たす主題です。

そのため、DOMを過度に大きいと見なす方法と、それを減らす方法について説明します。

さぁ、始めよう!

目次

DOMとは何ですか?

簡単に言えば、DOMについて話すときは、ブラウザがページをロードするたびに生成するオブジェクトの構造を指します その名前は、頭字語のDocumentObjectModelに由来しています。

ドキュメントオブジェクトモデル
画像ソース:ウィキペディア

これは、さまざまなオブジェクトがあり、その一部が他のオブジェクトに依存している階層構造です。 他のセカンダリアイテムが依存するメインオブジェクトがあるため、構造はツリーに似ています。 DOMは、ページのHTML構造を、一連のタグで構成されるツリーとして表します。

つまり、ブラウザが表示するページを準備すると、HTML構造に基づいて、ページのすべての要素で構成されるオブジェクトツリーが構築されます。

ブラウザがHTMLドキュメントを受信するたびに、それをこのツリーのような構造に変換する必要があります。これをDOMまたはDOMツリーと呼びます。 JavaScriptコードは、そのDOMにアクセスして変更できます。

DOMサイズはWebパフォーマンスにどのように影響しますか?

Webパフォーマンス

真実は、DOMのサイズがページのパフォーマンスに影響を与えるということです。 DOMが大きすぎると、次のような影響があるため、Webサイトの速度が低下する可能性があります。

  • ネットワーク効率と負荷パフォーマンス。 DOMが大きすぎると、ユーザーが最初にページを読み込んだときに表示されないHTML要素が含まれることが多く、データ消費量が不必要に増加し、サイトの読み込みが遅くなります。
  • ランタイムパフォーマンス。 ユーザーとスクリプトがページを操作するとき、ブラウザーはHTMLタグの位置とスタイルを継続的に再計算する必要があります。
  • メモリパフォーマンス DOMツリーが大きすぎる場合、ブラウザはそれを処理するためにより多くのメモリを必要とする可能性があります。

DOMのサイズを技術的に縮小するにはどうすればよいですか?

Webパフォーマンスに悪影響を与えないようにDOMサイズを縮小するには、不要なすべてのHTML要素を削除する必要があります。 これまで見てきたように、必要な対策を講じないと、ページの速度が低下する理由がいくつかあります。

このコードを使用する代わりに;

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

これを使用する方が良いでしょう。

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

ツリー構造に関しては、次の用語を知っておく必要があります。

  • ノード DOMのすべてのHTML要素。 それらは、木の「葉」としても知られています。
  • セカンダリノード:ブランチがなくなったノード。

とは言うものの、最良のことは、木の深さが次のように形成されることです。

  • 32ノード未満。
  • 各ノードあたり60未満のセカンダリノード。

Googleは、Webサイトを開発するときに、ページに含まれるDOMノードが1,500未満であることをお勧めします。これは、デザインが複雑すぎないことを意味します。

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

WordPressでDOMのサイズを縮小する方法はいくつかあります。

大きなページを複数のページに分割する

サイトのさまざまな種類のコンテンツを表示する単一のページがありますか? たとえば、お問い合わせフォーム、ブログ投稿、製品など。

その場合、それらすべての要素を異なるページに分類し、ナビゲーションバーを介してそれらをリンクすることをお勧めします。

遅延読み込みプラグインをアクティブにして、すべての可能な要素をページに分割します

遅延読み込みモジュールは、それを許可するすべての要素で有効にできます。 これは、YoutubeLiteまたはWordPressWP-RocketのLazyLoadを使用して、YouTubeの動画で行うことができます。

ブログページあたりの投稿数を制限することも不可欠です 妥当な最大投稿数は1ページあたり10です。 この方法は、各ページに表示される製品の数にも適用されます。

1ページあたりの投稿数を変更するオプションがあります。 [設定]メニュー>[読み取り]サブメニューに移動し、ブログページの表示を最大値に変更して変更を保存します

また、関連する出版物の数を最大3つまたは4つに制限することをお勧めします。

デフォルトのWPテーマに含まれている不要なアイテムを削除します

場合によっては、製品ページの[カートに追加]ボタン、発行日、作成者情報など、 WordPressテーマにデフォルトで付属している特定の要素を削除する必要があります。

WordPressテーマの構成をチェックして、これらの要素を削除するオプションがあるかどうかを確認し、ない場合は、対応するPHPコードを探して削除します。

適切にコーディングされたテーマまたはページビルダーを使用する

WordPressテーマ品質は、DOMのサイズに直接影響します。 したがって、AstraやGeneratePressなどの適切にコーディングされたテーマを使用することをお勧めします。

また、ページビルダーは多くの場合divタグを挿入しすぎるため、不要な要素を挿入せず、HTML構造をより細かく制御できるOxygenBuilderのようなソリューションを使用することが重要です。

HotJarのようなツールを使用すると、ユーザーが何を使用していて、何が機能していないかを確認できます。 適切なDOMサイズを取得するには、綿密な分析を実行することが基本です。

最終的な考え

Domサイズが大きすぎると、Webのパフォーマンスが低下し、ページの読み込み時間が遅くなります。 不要な要素がなく、HTML構造をシンプルに保ちます DOMツリーを確認し、サイトに価値を付加しないノードを取り除きます。 Webサイトを高速化するだけでなく、より優れたUXを提供します。

Googleは間違いなく、今後数か月以内にリリースされるPageExperienceアップデートのDOMサイズを検討します。 Webのパフォーマンスに影響を与えないように、適切なものを用意してください。