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

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

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

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

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

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

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

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

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

Editor X では DOM 順序が自動で調整されないため、手動で調整してサイトのパフォーマンスを向上させる必要があります。Editor X でのコンポーネントの順序の調整は、レイヤーパネルから行うことができます。

たとえば、セクションを上から下に並べる必要がある場合は、レイヤーパネルで「最前面へ移動」をクリックして並べ替えることができます。なお、スタックとリピーターは自動的に並べ替えられますが、それが正しいかを確認するには「DOM 順序を再編成」機能を使用することをおすすめします。