Reducing the “DOM size” can be used to resolve “Avoid an excessive DOM size” warnings in Google Page Speed Insights.
“DOM size” can be simplified to the amount of code that your site relies on. The DOM size is largely impacted by ads, but complex plugins, themes and page builders can also have a significant impact on the DOM size.
Google recommends that the DOM count be under 1,500. Note that very large counts have been known to cause the post to lose its rich snippet.
Common fixes
Usually we see two major contributors to DOM counts: comments and ads.
Comments
The HTML structure of comments, particularly with nested replies, is complex and verbose. The easiest fix is to limit the number of comments a page loads.
Lazy load
To load zero comments by default, then bring them ALL in when the reader nears the end of the article, lazy load them with the help of this plugin:
Note that you’ll want to clear your cache after installing this plugin. We do not recommend using this plugin and comment pagination, discussed below.
Pagination
Comment pagination adds “next” and “previous” links below your comment list. When clicked, the page reloads, though the reader remains on the comment section.
To enable comment pagination, go to Settings > Discussion > Other comment settings and check the box next to “Enable threaded (nested) comments __ levels deep” (we recommend using a lower number, like 10).
Note that this pagination number is based on the count of top-level comments. If you reply to every comment on your site, you might see 20 comments, total, instead of 10 (the 10 initial comments, plus the 10 replies).
Ratings
If you’re using WP Recipe Maker, make sure you’re on the latest version. Brecht has included an option to display simpler ratings, which will help, particularly if you’ve opted for paginated comments (vs. lazy loaded comments).
To enable this, go to WP Recipe Maker > Settings > Advanced > Performance > Output Combined Stars in Comments.
Note that the color of these ratings cannot be customized at this time. They will display using the default black/dark gray color.
Ads
Ad optimization
Enabling ad optimization, if you’re working with Mediavine, will significantly improve this number as well.
Finding other sources of DOM Bulk
If something on your site, other than the above, is causing an excess of code, it’s possible to narrow down where that’s coming from by slowly deactivating your plugins and changing themes.
When found, the source of the DOM bulk should be replaced with a comparable theme or plugin, if possible.
Usually the above fixes suffice.