Site Performance: Your Site's DOM Order
2 min read
Your site's DOM order refers to the reading order of elements on your pages. This order is important for visitors using assistive technologies such as the Tab key or screen readers, as it determines the order in which they can view or interact with these elements.
We recommend ensuring that the DOM order matches the visual order of elements on your pages, so every visitor can navigate through your site with ease. As well as improved accessibility, matching the loading order also prevents layout issues on your site.
In this article, learn more about:
DOM order and site performance
The DOM determines the sequence in which elements load on your site. If the DOM order does not match the visual order of elements, it can impact your site's loading.
For example, if a button appears at the bottom of a page but is first in the DOM order, it loads before the elements above it. As additional content loads, the page's layout may shift and move around to accommodate the other elements.
Furthermore, if a visitor attempts to click that button while the rest of the content loads, they may accidentally select another element and be taken to another page or section.
Your site's DOM order should match the visual order of the page, regardless of the reading sequence of the language (left-to-right or right-to-left script) to ensure that it loads correctly, and is a smoother experience for visitors.
DOM order on a Wix Editor site
Automatic DOM order is automatically enabled on your desktop Editor site. This means that any changes you make to the visual order of elements are automatically applied to the DOM order, so you don't need to do anything.
When you build a site with the desktop Editor, a mobile version of your site is created. The DOM order of your mobile site is also automatically arranged, and doesn't require any manual changes.
Important:
The automatic DOM order on desktop Editor sites has been built for left-to-right scripts (e.g. English, Spanish, etc.). If your site uses a right-to-left script such as Arabic or Hebrew, you need to manually re-arrange the DOM order in the Layers panel.
Note:
Automatic DOM order is only applied to changes on desktop when you save your site.
DOM order on an Editor X site
Most of your Editor X site does not have an automatic DOM order, and you therefore need to arrange it manually in order to improve your site's performance. You can adjust the order of components on your Editor X site through the Layers panel.
For example, sections need to be ordered from top to bottom, and you can do so by clicking Bring to Front in the panel. Stacks and repeaters are automatically ordered, however we recommend using the Reorganize DOM Order feature to ensure that it is correct.
Did this help?
|