サイトパフォーマンス：サイトの DOM 順序

サイトの DOM 順序とは、ページ上の要素の読み取り順序のことを指します。ページの各要素は、この順序に基づいて表示されるため、Tab キーやスクリーンリーダーなどの支援技術を使用してサイトを操作する訪問者にとって、非常に重要なものとなります。

すべての訪問者が快適にサイト内を移動できるよう、DOM 順序はページの要素の視覚的な順序と一致させることをおすすめします。これにより、アクセシビリティの向上に加え、サイト読み込み時のレイアウトの崩れも防ぐことができるようになります。

DOM は、サイト上の要素の読み込み順序を指定します。DOM 順序が要素の視覚的な順序と一致しない場合は、サイト読み込み時のレイアウトに影響を与える可能性があります。

たとえば、ボタンがページ下部にあるにも関わらず、DOM 順序で最初に表示されるよう指定してある場合、ボタンはページ上部にある要素よりも先に読み込まれてしまいます。そのため、他のコンテンツが読み込まれるにつれ、それらの表示とともにページのレイアウトが小刻みにずれたり移動したりすることがあります。

さらに、訪問者が残りのコンテンツが読み込まれている間にボタンをクリックしようとすると、誤って他の要素を選択して、別のページやセクションに移動してしまう恐れもあります。

従って、サイトの DOM 順序は、ページが正しく読み込まれて訪問者がスムーズに操作できるよう、ページの視覚的な順序とそのサイトの言語の方向（左横書き文字 / 右横書き文字）を一致させる必要があります。

デスクトップの Wix エディタでは、自動 DOM 順序が自動的に有効になります。つまり、要素の視覚的な順序に加えた変更は、自動的に DOM 順序にも適用されるため、何もする必要はありません。

また、デスクトップエディタでサイトを作成するとモバイル版のサイトが作成されますが、モバイルサイトの DOM 順序も自動で調整されるため、手動で変更を加える必要はありません。

自動 DOM 順序は、Wix Studio エディタで構築したサイトで自動的に有効になります。要素を追加、配置、サイズ変更すると、順序が自動的に並べ替えられるため、常に最適な状態を保つことができます。

Wix Studio エディタサイトで DOM 自動順序整理を無効にし、必要に応じて手動で変更を加えることができます。 Wix Studio エディタの DOM 順序に関する詳細はこちら

Wix は、Harmony エディタサイトの DOM 順序を整理します。この順序は、パーツを追加、サイズ変更、移動すると自動的に調整されます。そのため、手動で変更を加える必要はありません。

ただし、必要に応じて、 個々のセクションとコンテナの DOM 順序を手動で調整することができます。