Search code examples
htmlcsslazy-loadingelementorpagespeed

Lazy Load to "Avoid an excessive DOM size" on PageSpeed Insights

I am using Wordpress with Elementor Pro to build a Woocommerce webshop. Google PageSpeed Insights is giving me the error Avoid an excessive DOM size. I can reduce the DOM size a little by simplifying my page layout, but not enough to make a difference.

I found that a can render div elements below the fold later, by using the following CSS property:

content-visibility: auto;

This CSS property does not work on Safari. Is there any way to lazy load a div element across all standard browsers?

Thanks & regards

Hans

I found that a can render div elements below the fold later, by using the following CSS property:

content-visibility: auto;

Solution

  • The DOM size will not be reduced if you just tell the renderer to not render it, it will still be present in the DOM.

    From https://nitropack.io/blog/post/avoid-an-excessive-dom-size

    1. Avoid poorly coded plugins and themes
    2. Minimize JavaScript-based DOM nodes
    3. Page builders that generate bloated HTML
    4. Don’t copy/paste text into the WYSIWYG editor
    5. Break down your one-page website into multiple pages
    6. Don’t hide unwanted elements using display:none
    7. Avoid using complicated CSS declarations and JavaScript

    The goal is to reduce the HTML. As you are using wordpress, make sure your theme is well optimized and does not add too much unecessary DOM nodes. Since wordpress has a WYSIWYG, make sure the produced HTML is optimal (I would assume they worked a great deal on this themselves but double check it).

    Keep in mind that you are receiving this error because at least one of the three assertions about your page DOM is true:

    • It has more than 1,500 DOM nodes in total.
    • It has a maximum node depth greater than 32 nodes.
    • A parent node has more than 60 child nodes.

    Lazy loading won't change anything, it will make the first draw faster, but the rest will be as slow since in the end you'll end-up with the same amount of DOM nodes. Also, playing with the DOM can be costly, so maybe lazy-loading will make things worse during loading.