[Resolved] Avoid an excessive DOM size

Home Forums Support [Resolved] Avoid an excessive DOM size

Home Forums Support Avoid an excessive DOM size

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1812510
    HT

    I see issues with Avoid an excessive DOM size as per Google Page speed

    I have seen the comments like “A common culprit if you’ve ‘failed’ this audit in PageSpeed Insights is your WordPress theme. Heavy themes often add large volumes of elements to the DOM, and may also include convoluted styling that slows your site down.”

    Is this something we can do to reduce from the perspective of a theme.. I have seen previous threads but not sure it is relevant or not.

    #1812524
    Leo
    Staff
    Customer Support

    Hi there,

    The theme itself is already optimized for performance so I’m not sure if the issue is coming from the theme itself:
    https://generatepress.com/fastest-wordpress-theme/

    The only optimizing tips we adapt for our site is to use Autopimize:
    https://docs.generatepress.com/article/configuring-autoptimize/

    #1812528
    HT

    Well, I’m already using Autoptimize with similar configuration ;(

    #1812531
    Leo
    Staff
    Customer Support

    Have you tried disabling all plugins except GP Premium to test?

    Perhaps this thread provides some useful info:
    https://generatepress.com/forums/topic/how-to-reduce-excessive-dom-size/

    #1812816
    HT

    Can we do reverse engineering to understand or troubleshoot this issue rather than going through the pain of disabling all the plug-ins….

    If that make sense?

    #1812869
    Elvin
    Staff
    Customer Support

    Hi there,

    Can we do reverse engineering to understand or troubleshoot this issue rather than going through the pain of disabling all the plug-ins….

    The issue with this is, it’s possible that it’s not just 1 culprit.

    But to be specific, the element being flagged on the page you’ve linked isn’t exactly added by the theme, but by the user. The DOM structure isn’t controlled by the theme as excessive DOM size flags are dependent on content.

    The elements being flagged are the tables on the page. It’s added by a WordPress core block (table block). The flag is basically saying “you have contents that have too many nested elements within it”.

    A wise man once said:
    "Have you cleared your cache?"

    #1812893
    HT

    Sure. I got your point. Can you give some hint how to troubleshoot further apart from disabling all plugins 😀

    #1813188
    David
    Staff
    Customer Support

    Hi there,

    You’re actually being flagged for two issues:

    1. Total DOM elements: 1848 – anything over 1500 will report this error.
    Every single piece of content added to a post eg. paragraph, heading, image, table, adverts, comments etc all count towards the total DOM elements.

    2. Maximum Child Elements: 63 – anything over 60 will be flagged. The culprit on your page is the Table titled:

    1607 – Windows 10 Build Numbers – it has 63 rows…

    The same as #1 applies here for that specific element.

    The only way within WordPress to reduce the DOM elements is to remove content from the post, whether that be what you write/add to your post or content being added by plugins or other 3rd party scripts such as adverts.

    If its not possible to reduce the amount of content, there there isn’t much you can do about this and you have to accept that it ‘may’ impact the page load performance.

    #1815376
    HT

    Thank you much for the details.

    Is there any option for very long posts to load only when the user scrolls down “similar to Lazy Load Comments” could help? or it is not going to help at all?

    #1815920
    David
    Staff
    Customer Support

    There isn’t any out of the box method to ‘lazy load’ HTML.
    The simplest method would be to add Page Breaks to the post – so you split the post in to two pages.

    But personally i would ignore it – its only a diagnostic report, it has no direct impact on performamce. It only becomes a problem if you the site requires a lot of CSS and/or JS files to calculate its layout – none of which is being flagged under Opportunities in the PSI report.

    #1818109
    HT

    Thank you!

    #1818387
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.