How to Fix Excessive DOM Size in WordPress (11 Expert Tips)

The ‘Keep away from an extreme DOM measurement’ warning can seem in Google Lighthouse or different web site velocity testing instruments. It mainly means your web site has too many parts, which might decelerate loading instances and frustrate guests.

Fortunately, there are some things you are able to do to cut back the DOM measurement and enhance your WordPress efficiency. We have now tried out a bunch of strategies to hurry up our personal web sites, so we all know what really makes an affect on WordPress efficiency.

And on this article, we are going to present you our tried and examined methods for easy methods to repair an extreme DOM measurement in WordPress.

What Does the ‘Keep away from an Extreme DOM Dimension’ Warning Imply?

Ever run a web site velocity take a look at in your WordPress web site and are available throughout a warning referred to as ‘Keep away from an extreme DOM measurement’?

This warning pops up in speed testing tools like Google Lighthouse, Google PageSpeed Insights, or GTMetrix. It signifies that your web site has too many parts, which might decelerate its loading velocity.

However what precisely is DOM, and why does its measurement matter? Let’s break it down.

DOM stands for Doc Object Mannequin. Consider your WordPress web site as a giant tree construction. Every ingredient in your web page, like textual content headings, photos, menus, and buttons, is sort of a department or a leaf on this tree. These particular person parts are referred to as DOM nodes.

The full variety of nodes in your web site’s tree construction is its DOM measurement. The extra parts you might have in your web page, the bigger the DOM tree turns into.

For example, a easy web page with only a heading and a paragraph might need a smaller DOM measurement in comparison with a fancy web page with a number of sections, photos, contact forms, and embedded content material.

How Does Extreme DOM Dimension Have an effect on Web site Efficiency?

A big DOM measurement can negatively affect your WordPress website’s performance in just a few methods.

Take into consideration the way you create a brand new web page in WordPress. You would possibly add parts like headings, paragraphs, photos, galleries, types, buttons, and social media icons. Every of those parts interprets to a DOM node within the tree construction.

Whereas every ingredient individually may appear small, the entire quantity can shortly add up, creating an extreme DOM measurement.

In case your DOM nodes hold growing, the browser will take longer to learn, perceive, and cargo the construction of your web site. It is because a fancy DOM construction requires extra reminiscence utilization and processing energy from the consumer’s machine to show the web page.

All of this results in slower loading instances, which might frustrate guests and trigger them to bounce off your site earlier than they even see your content material.

Lately, customers count on web sites to load shortly. A slow-loading web site may be like ready in a protracted line – it discourages folks from sticking round.

Plus, search engines like google and yahoo like Google prioritize web sites that supply a superb consumer expertise, together with quick loading speeds. So, an extreme DOM measurement can not directly damage your WordPress SEO and, in the end, web site conversions.

How Many DOM Components Are Too Many for Google?

Whereas there’s no strict restrict set in stone, Google Lighthouse and different testing instruments flag web sites with an extreme DOM measurement. Right here’s a breakdown of what these flags would possibly point out:

• Warning: Google Lighthouse flags a warning when the physique ingredient of your web page has greater than roughly 800 nodes.
• Error: If the physique ingredient reaches over 1,400 nodes, Lighthouse throws an error.

Let’s put this in context to grasp what sort of web sites would possibly fall into these classes.

With out correct optimization, a single web page with textual content content material, photos, a navigation menu, primary format parts, and a number of plugins for types or social sharing may simply attain round 800 nodes.

Alternatively, pages exceeding 1,400 nodes are seemingly extra advanced and would possibly embrace a better variety of parts. These can embrace a number of sliders or carousels with large images, elaborate layouts with many nested parts and sections, or a number of embedded content material.

These are simply basic examples. Don’t let these illustrations scare you from constructing a customized web site the best way you wish to. That stated, if you wish to make certain folks keep in your web site, then you’ll need to keep away from extreme DOM measurement.

Fortunately, we’ve put collectively a complete information so that you can scale back DOM measurement in WordPress. You need to use the short hyperlinks beneath to study extra a couple of DOM efficiency optimization methodology:

1. Use a WordPress Pace Optimization Plugin

Our first advice is to put in a strong WordPress velocity optimization plugin. These plugins are designed to research your web site and make it sooner in numerous methods.

A velocity optimization plugin can care for the technical stuff wanted to hurry up your web site. This manner, you may concentrate on managing and creating your content material.

Right here at WPBeginner, we suggest utilizing WP Rocket. We really use it ourselves on the WPBeginner web site, which you’ll be able to study extra about in our article on how we boost page load speed on WPBeginner.

Whereas WP Rocket is primarily often known as a caching plugin, it has many options that may assist with DOM measurement as effectively. These options embrace file optimization, lazy loading, and deferring JavaScript.

We’ll clarify all these options in additional element later within the article. You can too learn our WP Rocket review for extra info.

However for now, utilizing a velocity booster plugin like WP Rocket is a good first step in direction of fixing DOM measurement and making your web site sooner, even if you’re new to WordPress.

You may learn our WP Rocket installation and setup guide to get the plugin up and operating.

2. Examine Your Theme and Plugins

Whereas WordPress plugins and themes are nice for including performance and elegance to your WordPress website, they’ll generally contribute to an extreme DOM measurement.

First, not all themes and plugins are created equal. Poorly-coded plugins and themes may end up in a bloated HTML doc with pointless parts. This may considerably enhance your DOM measurement.

WordPress themes and plugins usually include further options that you could be not want. These can add undesirable parts to your web site’s construction, even if you’re not actively utilizing them.

By taking a more in-depth have a look at what’s put in in your web site, you may establish potential culprits contributing to DOM measurement.

For those who assume a selected theme or plugin may be inflicting points, strive briefly switching to a default WordPress theme or deactivating plugins one at a time.

Then, see if the DOM measurement warning disappears in velocity testing instruments after making these adjustments. This may also help you pinpoint the problematic ingredient.

When selecting themes and plugins, it would be best to stick to respected sources just like the WordPress listing or well-known builders. These sources have strict coding requirements, decreasing the prospect of bloated code that might hurt your web site’s efficiency.

If you wish to get trusted plugin and theme suggestions, then try WPBeginner Solution Center. That is the place we take a look at, assessment, and suggest WordPress software program. We solely suggest options that we all know might be useful for our readers.

3. Use an Optimized Web page Builder

Web page builder plugins are WYSIWYG editors which might be used for creating stunning and practical WordPress web sites without having to code. Nonetheless, a few of these instruments can really contribute to an extreme DOM measurement.

One purpose is that they usually use extra HTML parts, like div tags with customized courses or attributes, to fashion your content material and management its format. Whereas these parts enable for flexibility, they’ll additionally add lots of bloat.

Plus, built-in blocks or widgets, like sliders or interactive parts created with a web page builder, are sometimes constructed utilizing particular HTML constructions.

Many web page builders additionally depend on shortcodes to insert their functionalities. Whereas these shortcodes may not be visually displayed in your web site, they’ll add further code to your DOM behind the scenes.

For those who assume your web page builder may be contributing to DOM measurement points, you may take a look at this concept on a staging site. Attempt deactivating your web page builder and see if the warning disappears in web site velocity testing instruments. This may also help you establish if it’s the foundation trigger.

For those who determine to not use your outdated web page builder anymore, then you need to use one of many built-in WordPress instruments to design your web site (just like the Full-Site Editor or Theme Customizer).

They provide management over your web site design without having a separate plugin. Additionally they usually have a smaller affect on DOM measurement.

That stated, these instruments are usually not essentially the most versatile. On this case, we suggest utilizing an optimized web page builder like SeedProd.

Right here at WPBeginner, we’ve examined varied web page builders, and SeedProd has proven sooner efficiency (93 on PageSpeed Insights) in comparison with rivals like Divi (91) and Elementor (90).

You may learn extra about it in our Elementor vs. Divi vs. SeedProd assessment.

Past efficiency, SeedProd additionally has 350+ skilled theme template kits, integrations with widespread e-mail advertising instruments, and an AI assistant to assist velocity up your website-building course of.

4. Optimize Your Photographs and Movies

Unoptimized photos and movies can have huge file sizes. These giant recordsdata can contribute to DOM measurement as a result of they turn into further parts the browser must course of.

Optimizing your photos can considerably scale back their file measurement with out sacrificing high quality. This helps your web site load sooner and improves the general consumer expertise.

A plugin like Optimole could be a nice resolution for optimizing your photos. Optimole is designed to work out of the field, mechanically optimizing your web site’s photos as you add them.

You can too fine-tune its settings to regulate the compression high quality or resize photos that exceed a sure measurement, additional decreasing their file measurement and DOM footprint.

For those who don’t wish to use too many plugins, you need to use free on-line instruments like TinyPNG to compress your photos earlier than importing them to your WordPress web site.

For an in-depth information on picture optimization, try our article on how to optimize images for web performance without losing their quality.

Relating to movies, we don’t recommend uploading them directly to WordPress. Giant video recordsdata can considerably decelerate your web site’s loading time.

A greater strategy is to make use of a video internet hosting service like YouTube or Vimeo. These providers deal with storing and streaming your movies, taking the load off your web site’s server, and decreasing DOM measurement.

You may then embed the movies immediately into your pages utilizing embed codes supplied by the internet hosting service.

We have now one other useful article on how to optimize videos for your WordPress site that dives deeper into video optimization methods.

5. Implement Lazy Loading

If you open a protracted net web page with a number of content material, all of those parts will usually load directly. This course of can take some time, particularly on slower web connections.

Lazy loading takes a better strategy. It delays the loading of non-critical parts, like photos and movies. They may solely be loaded when they’re really wanted by the consumer as they scroll down the web page.

This implies the important content material that seems first (like textual content and format) masses sooner. In flip, this ends in a faster preliminary web page load and a smoother consumer expertise.

Organising lazy loading is simple, particularly for those who’re already utilizing a WordPress velocity optimization plugin like WP Rocket.

Merely navigate to Settings » WP Rocket in your WordPress dashboard. Then, click on on the ‘Media’ tab.

Right here, simply examine off all of the choices for enabling lazy loading for images, movies, and iFrames.

If you wish to show a picture gallery, then we suggest utilizing a gallery plugin with a lazy loading function.

Envira Gallery is a good instance of this. Moreover lazy loading, you may set a particular time delay for when the pictures are loaded.

Moreover, you may lazy load your comments section.

For this, you need to use Thrive Comments, which affords options to optimize WordPress feedback.

After the plugin is lively, go to Thrive Dashboard » Thrive Feedback. Then, open the ‘Superior Settings’ tab and go to the ‘Web page velocity optimization’ part.

Right here, simply examine off the bins that will apply to your remark part. You may load the remark part till the consumer scrolls right down to the underside of the web page, and/or load feedback progressively in pages as customers click on the ‘Load extra feedback’ button.

You can too select to load avatar images inside feedback till they become visible.

Excessively lengthy posts or remark sections usually have a big DOM measurement that decelerate your web site’s loading instances. Right here’s the place pagination is useful.

Pagination primarily splits your content material into manageable chunks, making it simpler for customers to navigate and digest info.

If you end up writing in-depth articles, take into account splitting them into logical sections utilizing pagination. This enables readers to take breaks between sections and keep away from feeling intimidated by an enormous wall of textual content.

Fortunately, you may simply break up lengthy posts utilizing the ‘Web page Break’ block within the block editor.

For step-by-step directions, you may try our article on how to split WordPress posts into multiple pages.

We even have a useful information on how to paginate comments in WordPress. However primarily, all you must do is log in to your WordPress admin space and go to the Settings » Discussions web page.

Then, examine the field subsequent to ‘Break feedback into pages’ and customise the variety of feedback you wish to see on every web page.

Additionally, we recommend avoiding infinite scroll. Whereas they’ll hold folks in your web site longer as they received’t have to change between pages manually, this may trigger efficiency points in your server.

7. Minify CSS and JavaScript Recordsdata

Your web site’s performance and visible fashion depend on code recordsdata like CSS and JavaScript. Whereas important, these recordsdata can contribute to a bigger DOM measurement if not correctly optimized.

Minification can clear up this subject by eradicating pointless parts from the code, corresponding to feedback, areas, and line breaks. This smaller measurement interprets to sooner loading instances and a smaller DOM measurement.

That stated, it’s vital to notice that minification can generally introduce compatibility points with sure themes or plugins.

Earlier than minifying your code, it’s a good suggestion to create a backup of your web site and take a look at the adjustments in a staging or local environment if attainable. This lets you establish any potential points earlier than they have an effect on your reside web site.

Then, you may learn our information on how to minify CSS and JavaScript files in WordPress for step-by-step directions.

As you’ll see within the information, minifying your code is simple for those who’re already utilizing a plugin like WP Rocket. All you must do is go to Settings » WP Rocket and change to the ‘File Optimization’ tab.

Then, simply allow the options to minify CSS and JavaScript recordsdata.

Some WordPress internet hosting suppliers additionally provide built-in options for minifying CSS and JavaScript recordsdata.

For example, SiteGround (which is the place we host WPBeginner) affords the Pace Optimizer plugin to minify CSS.

Hostinger additionally affords the same function by means of their built-in CDN, obtainable on their Marketing strategy and better tiers.

8. Cut back Render-Blocking JavaScript and CSS

One other strategy to optimize CSS and JavaScript recordsdata is by decreasing render-blocking.

Render-blocking sources are like basis supplies that forestall the home (your web site content material) from being constructed till these sources are delivered and in place. The longer it takes for these sources to load, the longer it takes for customers to see your web site’s content material.

WP Rocket has built-in options to cut back render-blocking CSS and JavaScript.

For instance, you may mix CSS and JavaScript recordsdata, which can scale back the variety of HTTP requests your web site must make. Fewer requests imply much less ready time for the browser to load the whole lot and render your content material.

You can too remove any CSS code that isn’t actually used in your pages.

This not solely reduces render blocking but in addition minimizes total web page measurement and the variety of HTTP requests.

Moreover, there’s a function referred to as ‘Load JavaScript Deferred.’ This tells the browser to attend on loading some JavaScript recordsdata till after the principle content material of your web site (the HTML) has been displayed.

This manner, customers see your web site’s content material sooner, even when all of the background functionalities haven’t loaded but.

You may study extra about enabling these options in our article on how to reduce render-blocking CSS and JavaScript in WordPress.

9. Allow WordPress Caching

Caching doesn’t immediately scale back DOM measurement, but it surely considerably improves your web site’s perceived efficiency.

Right here’s what occurs when caching is enabled: when a consumer revisits your web site, their browser can examine its cache first. If the recordsdata are already saved domestically, they are often loaded a lot sooner, considerably decreasing web page load instances.

This makes the DOM load and show sooner, leading to a smoother expertise for guests.

Caching additionally helps your server run extra effectively by lightening its workload. This frees it as much as concentrate on vital duties like processing the DOM, which in the end hastens your loading time.

Thankfully, establishing browser caching is straightforward with a plugin like WP Rocket. It is because the plugin mechanically allows caching with optimum settings to your web site.

Even higher, WP Rocket repeatedly caches your web site always. At any time when the cache will get cleared (manually or mechanically), WP Rocket mechanically generates new cache recordsdata.

WP Rocket additionally supplies you with the flexibility to clear the WordPress cache at any time. This may be helpful for those who make important adjustments to your web site and wish to guarantee customers see the most recent model.

For extra particulars about WP Rocket’s caching options, you may check with the setting up caching options section of our WP Rocket set up information.

10. Use a WordPress CDN

A CDN (Content Delivery Network) is a community of servers unfold out all over the world. Whereas a CDN doesn’t immediately change the scale of your web site’s code, it makes your web site really feel prefer it masses sooner.

It is because a CDN shops copies of your web site’s static content material (photos, scripts, stylesheets) on servers in numerous areas. When somebody visits your web site, their pc downloads the content material from the CDN server closest to them.

This considerably cuts down on obtain instances in comparison with fetching the whole lot out of your authentic server, which may be far-off. This sooner supply makes processing the DOM a lot sooner.

Plus, a CDN helps your authentic server work sooner by sharing the content material supply load. This enables the server to concentrate on what issues most, like processing the DOM. In flip, this makes your web site render faster total.

For those who want CDN suggestions, now we have a information to the best WordPress CDN services that will help you choose the correct one to your web site.

We use Cloudflare’s CDN on our web site right here at WPBeginner. It really works effectively for our giant weblog with a number of guests.

For those who’re fascinated with studying extra, you may try our insider put up on why WPBeginner switched from Sucuri to Cloudflare. This text explains what we regarded for when selecting a CDN supplier.

11. Optimize Your WordPress Database

Your WordPress web site depends on a database to retailer all its vital info, like posts, feedback, consumer accounts, and even configurations.

Over time, this database can maintain an excessive amount of pointless information, corresponding to outdated revisions of posts, spam comments, or leftover info from deleted plugins.

Whereas the database itself isn’t a part of the DOM, a bloated database can decelerate your web site. A slower web site could make it seem to be the DOM measurement is bigger as a result of the whole lot takes longer to load and render.

Optimizing your database by eradicating pointless information helps your web site run smoother and might not directly enhance perceived DOM measurement.

Take a look at our useful information on how to optimize your WordPress database in one click. This information walks you thru the method of utilizing a plugin to scrub up your database and guarantee it runs effectively.

Concentrate on Total WordPress Efficiency, Not Simply DOM Dimension

Whereas addressing the ‘Keep away from an extreme DOM measurement’ warning in WordPress is vital for web site velocity, it’s not the one issue to think about.

A web site with lots of performance or distinctive formatting might naturally have an even bigger DOM, and that’s okay.

The secret’s to seek out the correct stability between web site efficiency and options. So, except for DOM measurement, you might wish to take note of different metrics like Core Web Vitals. These are particular metrics that Google makes use of to measure a web site’s consumer expertise.

For those who’ve used lots of completely different optimization strategies and your web site nonetheless feels sluggish, then take into account in search of assist from our Site Speed Optimization Services.

Our professional staff can analyze your web site and establish the simplest methods to streamline its efficiency.

All service plans embrace professional caching configuration to your web site wants, picture optimization with out decreasing your visible high quality, database autoload optimization, and a lot extra. Plus, we assure that your web site will get an A or B+ on our PageSpeed Instrument.

We hope this tutorial helped you discover ways to repair extreme DOM measurement in WordPress. You may additionally wish to try our information on how to speed up WooCommerce performance or our complete WordPress speed and performance guide.

For those who favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Facebook.