Sometimes, while constructing the Document Object Model (DOM) tree, NitroPack’s parser may incorrectly place an element at a different level in the DOM hierarchy.

This error typically results in an element being shifted up one level.

Common problems that can arise include, but are not limited to, issues like:

Finding a misplaced element is actually quite straightforward.

You only need to open two tabs in your browser: one tab should display the optimized version of your webpage, and the other should show the non-optimized version, which you can access by adding “?nonitro” to the end of the URL.

Next, open the Chrome Inspector tool. You can do this by pressing 'F12' or by right-clicking on the element you think might be out of place and selecting 'Inspect'.

Once you have both versions of the page open in the Inspector, compare the code of both pages.

Look for the element in question and see if it's positioned differently in the DOM tree between the two versions.

Let’s examine this up close:

When NitroPack optimized a page, the li elements are one level up the DOM tree, which places them outside the ul parent:

When we inspect the same element on the non-optimized version, we can see that the li elements are under the ul parent, which is the correct behaviour:

Fortunately, in such cases where the DOM tree which NitroPack produced is invalid, the HTML Normalization option, comes in handy.

The option maps to the infamous Preparser setting and normalizes the HTML prior to optimizing it, resolving such issues with misaligned elements.

The option can be enabled from the NitroPack dashboard > Cache Settings > HTML & CSS > HTML normalization:

Finally, don’t forget to clear your cache. Go to your dashboard and click “Purge all cache”:

📌 If you need any assistance or have questions, you can contact our Support team using the chat bubble on the bottom right of this page.