TABLE OF CONTENTS

What is DOM?
How to optimize DOM

Oxygen is known as one of the WordPress website builders with the best loading speed today.

Fastest doesn't mean it's the best. When first launched in 2019, Oxygen Builder was like a breath of fresh air. It is completely different from the rest in the WordPress Page Builder and Theme Builder ecosystem.

Oxygen is the pioneer of Speed Builder. To this day, there are dozens of Builders that offer amazing speeds similar to Oxygen, typically Bricks, Cwicly, Zion,... Along with the release of Breakdance, a new product from the same family as Oxygen, it seems Oxygen is gradually falling behind.

But it won't go away, we need to make it better.

What is DOM?

Simply put, the DOM is the test buttons in the HTML language.

Document node: is the highest node in the DOM tree, representing the entire document. In the case of HTML documents, the root node is usually represented by a tag <html>.
element node: these are nodes that represent HTML elements, including tags like <head>, <body>, <section>, <div> and many other types of elements. These tags are HTML elements, and each tag can contain child nodes.
Text node: each paragraph of text in an HTML document will be considered a text node in the DOM tree. These pieces of text often appear in tags like <p>, <span>, and even in tags like <title> or <h1>. This node has no child nodes.

For example I have HTML code like this:

<html>
<head></head>
<body>
    <section>
        <h1>heading</h1>
    </section>
</body>
</html>

The DOM structure of the above code will be understood like this:

document
   ├── head
   └── body
         └── section
               └── h1

In there:

document is the document node of the HTML document.
head and body are element nodes.
section is an element node that contains child nodes h1.
h1 is a text node.

Large DOM trees can slow down your site's performance:

Network efficiency and load performance: Large DOM trees often include many nodes that are not visible when the user first loads the page, which unnecessarily increases data costs for the user and slows load times.
Time performance: When the user interacts or when the page loads, the browser must be persistent recalculate the position and style of the buttons . Large DOM trees combined with complex CSS rules can slow down rendering.
Memory performance: If your JavaScript uses a generic query selector like document.querySelectorAll('li'), you could accidentally store references to a very large number of nodes, which could overwhelm the available memory on the user's device.

How to optimize DOM

After reading the above section, you can have a basic understanding of the DOM structure in the website.

To optimize the DOM, you need to limit the nesting of elements if not necessary.

For example above, tag <h1> Can completely lie on its own without needing to be nested inside <section>

In Oxygen, when you add a section, it will create an additional container inside and you cannot do anything with the container element inside. This unintentionally creates an extra DOM node if that element is not Full-width.

To overcome this problem, we can create each type separately from Section → Container using the tools available in Oxygen and save it as "Re-usable part" to use anytime, anywhere.

Create Section:

Add a new DIV element.
Primary → Tag → Select "section".
Customize margins and padding to your liking.
Double click on the element in the Structure bar to rename it.
Click on the pen icon in Structure → Select "Make Re-Usable" → Enter the name of the element to save and click OK.

Create Container:

Add a new DIV element.
Primary → Tag → Select "section".
Customize margins and padding to your liking.
Add this container element 1 Class "ct-section-inner-wrap".
In this Class you customize width = calc(100% - 20px). 20px is the padding divided equally into the left and right sides, 10px on each side.
Double click on the element in the Structure bar to rename it.
Click on the pen icon in Structure → Select "Make Re-Usable" → Enter the name of the element to save and click OK.

Or you can Import the json code below to refer to the sample you created.

Section:

{"component":{"id":14,"name":"ct_div_block","options":{"ct_id":14,"ct_parent":0,"selector":"div_block-14-4205","original":{"tag":"section","margin-top":"50","margin-bottom":"50"},"nicename":"ARTRU-section","activeselector":false},"depth":1},"classes":{}}

Containers:

{"component":{"id":16,"name":"ct_div_block","options":{"ct_id":16,"ct_parent":0,"selector":"div_block-16-4205","original":{},"nicename":"ARTRU-container","classes":["ct-section-inner-wrap"],"activeselector":false},"depth":1},"classes":{"ct-section-inner-wrap":{"key":"ct-section-inner-wrap","original":{"width-unit":" ","width":"calc(100% - 20px)"}}}}

Disable Translatepress in Oxygen Builder

COMMENT

Optimize DOM in Oxygen Builder

What is DOM?

How to optimize DOM