Elementor パフォーマンスのヒント: DOMサイズを縮小してウェブサイトを高速化 - Photon Flux｜専門家のWordPress修理サービス、グローバルなリーチ、迅速な対応

DOM出力が多いサイトはHTMLのサイズが大きくなり、サイトのパフォーマンスを低下させる可能性がある。しかし、ウェブサイトのDOMサイズを小さくするテクニックがあります。この記事では、HTMLのサイズを最小化するさまざまな戦略を使用することで、Elementorウェブサイトを強化する方法を見ていきます。

DOMオーバーサイズ」問題を理解する

DOM（ドキュメント・オブジェクト・モデル）はウェブページの構造を表しており、DOMのサイズが大きいということは、通常、DOMの構造が複雑であることを示しています。多くの場合、HTML要素が多すぎたり、ノードが入れ子になっていたり、動的コンテンツが注入されていたりすることが原因です。HTML要素の数が多いページは読み込みが遅くなる傾向があり、アニメーションやその他のユーザー・インタラクションを妨げる可能性があります。

DOMサイズがページのパフォーマンスに与える影響

DOMサイズが大きくなるとレンダリング時間が長くなり、ページのレンダリング遅延や読み込み時間の低下を招く。これは、ブラウザが各ノードを解析してレンダリングする必要があるためです。さらに、各DOMノードはブラウザのメモリを必要とするため、システムリソースの枯渇やメモリ消費量の増加につながる可能性があります。これは、特にローエンド・デバイスでのパフォーマンス低下につながる可能性があります。

加えて、大きなDOMはユーザーとのインタラクションを遅くし、サイト利用時のレスポンスを低下させます。大きなDOM要素には多くのイベント・リスナーが含まれていることが多く、これがオーバーヘッドとなり、ユーザー・インタラクションを遅くします。すべての理由については言及しませんが、経験則では、HTMLが大きければ大きいほど、ページは遅くなります。

外部ツールを使ってDOMサイズを測定するには？

DOMサイズがサイトのパフォーマンスに与える影響を測定するには、以下のツールを使用できます：

グーグル・クローム・デブツールズ要素パネルで DOM 要素とその入れ子の深さを調べます。パフォーマンスタブを使用して、レンダリングパフォーマンスを評価し、DOM操作に起因する潜在的なボトルネックを発見します。

灯台: Lighthouseの監査では、「DOMサイズ」、「DOMの深さ」、「最大DOMの深さ」といったDOMサイズの指標に関する洞察が得られ、改善点が指摘されました。改善点

ウェブページテスト DOMの複雑さとページのロード時間の関係を理解するために、ウォーターフォール図とパフォーマンス結果でDOMサイズの指標を評価する。

より大きなDOMサイズとは？

灯台以下のように、DOMツリーを使ってページをマークアップする：

<body>要素が818ノードを超えると警告する。
(落とす<body>要素のノード数が1,400を超えるとエラーが発生します。

しかし、これらの指標は将来変更される可能性があります。さらに、ツールによって、過剰なDOMサイズを警告する閾値が異なる場合があります。

ElementorのDOMサイズを小さくする

Elementorは、ページに要素を追加するプロセスを簡素化するビジュアルなドラッグ＆ドロップWebサイトビルダーです。Elementorを使用しても、通常、ウェブサイトのパフォーマンスに悪影響を与えることはありません。しかし、構築されたページをさらに最適化するために実行できるステップがいくつかあります。これには、デザインに影響を与えずにDOMを最小化するHTML要素の数を減らすことが含まれます。

効果的に最適化するためには、Elementorのレイアウト要素の構造を理解することが役立ちます。ここではレイアウト要素に焦点を当てます。一般的なページにはこれらの要素が何十個も含まれているため、これらを最適化することでより大きな効果が期待できるからです。

レイアウト要素を最適化するために推奨される3つのテクニックがあります：

セクション/カラムからコンテナへの移行。
コンテナを平らにするには、ネストされた単一のコンテナを使用する。
ネストされたコンテナは、可能な限りボックス幅ではなくフル幅で実装する。

ElementorのDOMサイズを小さくする方法について詳しく説明します。

Elementor エレメントタイプ

Elementorには2種類の要素があります：

ウィジェット見出し、画像、アイコン、ボタン、仕切りなど、ウェブサイトを構築するために使用されるすべての通常の要素。
レイアウト要素セクション/カラムやコンテナなどの構造要素。これらの要素はウィジェットをラップし、それらをグループ化します。

レイアウト要素に焦点を当て、DOMサイズを小さくする方法を見る。

レイアウト要素のHTML構造

Elementor では、各構造要素は 2 つの<div>タグの構成: 外側<div>と内側の <div>これは、構造レイアウト要素内のHTML要素の数を減らす方法を学ぶので重要です。これは、構造レイアウト要素内のHTML要素の数を減らす方法を学ぶので重要です。

セクション/コラムのHTML構造：

セクションとカラムを使用する場合、最終的なHTMLは2つのレイアウトレベルで構成されます。<div>要素、2つはパート用、2つはカラム用である。合計で4つの<div>エレメント・パッケージ・ウィジェット：

<div class="elementor-section">
	<div class="elementor-container" >

		<div class="elementor-column">
			<div class="elementor-widget-wrap">

				<!-- widget –>
				<!-- widget –>
				<!-- widget –>

			</div>
		</div>

	</div>
</div>

コンテナのHTML構造：

Elementorは、無駄のない構造とDOMでページを構築する方法としてコンテナを導入している。

コンテナに切り替えると、出来上がったHTMLには、以下の2つのみが含まれる。<div>つまり、半分のエレメントで同じデザインが得られるということだ。<div>.

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

コンテナによるHTML構造のフラット化

かつてのウェブサイトは、セクションやカラムを使って構成されることが多かった。今日、モダンなウェブサイトでは、CSSフレックスとCSSグリッドを使用して、コードの量を減らしながら、同じ視覚的構造を実現しています。このため、Elementorは容器.構造要素をコンテナに変換することで、HTML構造を単純化し、不必要な冗長性を排除することができます。

列は横並びに配置されるが、セクションは積み重ねられる。一方、コンテナは内部要素を行や列に積み重ねることができる。これらの違いは、いくつかの構造を最適化するために利用できる。

セクションに複数の列がある場合、変換後の構造は、単一の列方向コンテナと複数の行方向コンテナを持つことになる。しかし、セクションに列が1つしかない場合は、コンテナに変換する際に構造を最適化することができます。デザインに影響を与えることなく、コンテナ・レベルを削除することができる。<div>要素をわずか2つに減らします。これに1ページあたりのレイアウト要素数をかけて、サイトへの影響を計算してみましょう。

注目すべきは、入れ子になった内側のセクションのセクション/カラム要素のDOMサイズを実際に小さくすることが可能だということです。このような場合、要素<div>8レベル要素は、ウィジェットが表示される前に使用されます。コンテナに変換すると、8レベル要素から減少します。<div>場合によっては2つの要素に減らすこともできる。<div>.

セクション／カラムのレイアウト構造をまだ使用しているのであれば、コンテナに移行する時です。そうすることで得られるメリットは、移行作業にかかる労力を上回ります。移行を簡単にするために、Elementorには便利な「変換」ボタンまで用意されています。

ボックス型と全幅

DOMサイズを最適化するもうひとつの方法は、ボックス型コンテナと全角コンテナを区別することだ。

ボックス型コンテナには最大幅があるため、Elementor の内部要素が必要になります。<div>.一方、横方向に伸ばしたフルワイドコンテナには、1.5cmの幅しか必要ない。<div>要素。

箱入り：

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

フルワイド構造：

<div class="e-con">

	<!-- widget –>
	<!-- widget –>
	<!-- widget –>

</div>

ネストしたコンテナ構造の最適化

ボックス型コンテナと全幅コンテナのHTML構造の違いを理解したところで、サイトのDOM出力、特に他のコンテナを入れ子にするコンテナの最適化を始めることができる。

ボックス幅を使う親コンテナがある場合、ネストしたコンテナをすべてフル幅にすることができる。こうすることで、同じデザインをより少ないHTMLで実現できます。

<div class="e-con e-con-parent">
	<div class="e-con-inner">

		<div class="e-con e-con-child">
			...
		</div>

		<div class="e-con e-con-child">
			...
		</div>

	</div>
</div>

上のHTML構造には、ボックスを持つ親コンテナがある。2つの子コンテナも枠で囲まれている場合、各コンテナは2層の<div>要素が構成される。しかし、それらが全角である場合、それらは単に<div>つ使ってください。

繰り返しになるが、この最適化は親コンテナがボックス化されている場合にのみ機能する。

はんけつをくだす

おわかりのように、レイアウト要素のDOMサイズを最適化するには、次の3つの簡単な戦略があります：パート／カラム・レイアウト要素をコンテナに置き換える、1つの入れ子コンテナを持つコンテナは広げることができる、入れ子コンテナが使用され、親コンテナがボックス化されている場合は、すべての内部コンテナを全幅に設定する。これらの戦略は<div>ウェブサイトのHTMLから多数の不要な要素を排除し、ウェブページ全体のパフォーマンスを向上させます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み