free web page counters

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

Sedang Trending 1 bulan yang lalu

The ‘Avoid an excessive DOM size’ informing tin look successful Google Lighthouse aliases different website velocity testing tools. It fundamentally intends your website has excessively galore elements, which tin slow down loading times and frustrate visitors.

Luckily, location are a fewer things you tin do to trim nan DOM size and amended your WordPress performance. We person tried retired a bunch of methods to velocity up our ain websites, truthful we cognize what really makes an effect connected WordPress performance.

And successful this article, we will show you our tried and tested ways for really to hole an excessive DOM size successful WordPress.

How to Fix Excessive DOM Size successful WordPress

What Does nan ‘Avoid an Excessive DOM Size’ Warning Mean?

Ever tally a website velocity trial connected your WordPress tract and travel crossed a informing called ‘Avoid an excessive DOM size’?

This informing pops up successful speed testing tools for illustration Google Lighthouse, Google PageSpeed Insights, aliases GTMetrix. It indicates that your website has excessively galore elements, which tin slow down its loading speed.

Avoid an excessive DOM size informing successful PageSpeed Insights

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

DOM stands for Document Object Model. Think of your WordPress tract arsenic a large character structure. Each constituent connected your page, for illustration matter headings, images, menus, and buttons, is for illustration a branch aliases a leafage connected this tree. These individual elements are called DOM nodes.

The full number of nodes successful your website’s character building is its DOM size. The much elements you person connected your page, nan larger nan DOM character becomes.

For instance, a elemental page pinch conscionable a heading and a paragraph mightiness person a smaller DOM size compared to a analyzable page pinch aggregate sections, images, contact forms, and embedded content.

How Does Excessive DOM Size Affect Website Performance?

A ample DOM size tin negatively effect your WordPress website’s performance successful a fewer ways.

Think astir really you create a caller page successful WordPress. You mightiness adhd elements for illustration headings, paragraphs, images, galleries, forms, buttons, and societal media icons. Each of these elements translates to a DOM node successful nan character structure.

While each constituent individually mightiness look small, nan full number tin quickly adhd up, creating an excessive DOM size.

If your DOM nodes support increasing, nan browser will return longer to read, understand, and load nan building of your website. This is because a analyzable DOM building requires much representation usage and processing powerfulness from nan user’s instrumentality to show nan page.

All of this leads to slower loading times, which tin frustrate visitors and origin them to bounce disconnected your site earlier they moreover spot your content.

These days, users expect websites to load quickly. A slow-loading website tin beryllium for illustration waiting successful a agelong statement – it discourages group from sticking around.

Plus, hunt engines for illustration Google prioritize websites that connection a bully personification experience, including accelerated loading speeds. So, an excessive DOM size tin indirectly wounded your WordPress SEO and, ultimately, website conversions.

How Many DOM Elements Are Too Many for Google?

While there’s nary strict limit group successful stone, Google Lighthouse and different testing devices emblem websites pinch an excessive DOM size. Here’s a breakdown of what these flags mightiness indicate:

  • Warning: Google Lighthouse flags a informing erstwhile nan assemblage constituent of your page has much than astir 800 nodes.
  • Error: If nan assemblage constituent reaches complete 1,400 nodes, Lighthouse throws an error.

Let’s put this successful discourse to understand what benignant of websites mightiness autumn into these categories.

Without due optimization, a azygous page pinch matter content, images, a navigation menu, basal layout elements, and aggregate plugins for forms aliases social sharing could easy scope astir 800 nodes.

On nan different hand, pages exceeding 1,400 nodes are apt much analyzable and mightiness see a higher number of elements. These tin see aggregate sliders aliases carousels pinch large images, elaborate layouts pinch galore nested elements and sections, aliases aggregate embedded content.

These are conscionable wide examples. Don’t fto these illustrations scare you from building a civilization website nan measurement you want to. That said, if you want to make judge group enactment connected your site, past you will request to debar excessive DOM size.

Thankfully, we’ve put together a broad guideline for you to trim DOM size successful WordPress. You tin usage nan speedy links beneath to study much astir a DOM capacity optimization method:

1. Use a WordPress Speed Optimization Plugin

Our first proposal is to instal a powerful WordPress velocity optimization plugin. These plugins are designed to analyse your website and make it faster successful different ways.

A velocity optimization plugin tin return attraction of nan method worldly needed to velocity up your website. This way, you tin attraction connected managing and creating your content.

Here astatine WPBeginner, we urge utilizing WP Rocket. We really usage it ourselves connected nan WPBeginner website, which you tin study much astir successful our article connected how we boost page load velocity connected WPBeginner.

WP Rocket

While WP Rocket is chiefly known arsenic a caching plugin, it has galore features that tin thief pinch DOM size arsenic well. These features see record optimization, lazy loading, and deferring JavaScript.

We’ll explicate each these features successful much item later successful nan article. You tin besides publication our WP Rocket review for much information.

But for now, utilizing a velocity booster plugin for illustration WP Rocket is simply a awesome first measurement towards fixing DOM size and making your website faster, moreover if you are caller to WordPress.

You tin publication our WP Rocket installation and setup guide to get nan plugin up and running.

2. Check Your Theme and Plugins

While WordPress plugins and themes are awesome for adding functionality and style to your WordPress website, they tin sometimes lend to an excessive DOM size.

First, not each themes and plugins are created equal. Poorly-coded plugins and themes tin consequence successful a bloated HTML archive pinch unnecessary elements. This tin importantly summation your DOM size.

WordPress themes and plugins often travel pinch other features that you whitethorn not need. These tin adhd unwanted elements to your website’s structure, moreover if you are not actively utilizing them.

By taking a person look astatine what’s installed connected your website, you tin place imaginable culprits contributing to DOM size.

If you deliberation a peculiar taxable aliases plugin mightiness beryllium causing issues, effort temporarily switching to a default WordPress theme aliases deactivating plugins 1 astatine a time.

Deactivate each nan plugin isolated from WooCommerce

Then, spot if nan DOM size informing disappears successful velocity testing devices aft making these changes. This tin thief you pinpoint nan problematic element.

When choosing themes and plugins, you will want to instrumentality pinch reputable sources for illustration nan WordPress directory aliases well-known developers. These resources person strict coding standards, reducing nan chance of bloated codification that could harm your website’s performance.

If you want to get trusted plugin and taxable recommendations, past cheque retired WPBeginner Solution Center. This is wherever we test, review, and urge WordPress software. We only urge solutions that we cognize will beryllium adjuvant for our readers.

WPBeginner's WordPress Solution Center

3. Use an Optimized Page Builder

Page builder plugins are WYSIWYG editors that are utilized for creating beautiful and functional WordPress websites without needing to code. However, immoderate of these devices tin really lend to an excessive DOM size.

One logic is that they often usage further HTML elements, for illustration div tags pinch civilization classes aliases attributes, to style your contented and power its layout. While these elements let for flexibility, they tin besides adhd a batch of bloat.

Plus, built-in blocks aliases widgets, for illustration sliders aliases interactive elements created pinch a page builder, are often built utilizing circumstantial HTML structures.

Many page builders besides trust connected shortcodes to insert their functionalities. While these shortcodes mightiness not beryllium visually displayed connected your website, they tin adhd other codification to your DOM down nan scenes.

If you deliberation your page builder mightiness beryllium contributing to DOM size issues, you tin trial this mentation connected a staging site. Try deactivating your page builder and spot if nan informing disappears successful website velocity testing tools. This tin thief you find if it’s nan guidelines cause.

If you determine to not usage your aged page builder anymore, past you tin usage 1 of nan built-in WordPress devices to creation your website (like nan Full-Site Editor aliases Theme Customizer).

They connection power complete your website creation without needing a abstracted plugin. They besides typically person a smaller effect connected DOM size.

That said, these devices are not nan astir flexible. In this case, we urge utilizing an optimized page builder for illustration SeedProd.

Here astatine WPBeginner, we’ve tested various page builders, and SeedProd has shown faster capacity (93 connected PageSpeed Insights) compared to competitors for illustration Divi (91) and Elementor (90).

SeedProd page capacity test

You tin publication much astir it successful our Elementor vs. Divi vs. SeedProd review.

Beyond performance, SeedProd besides has 350+ master taxable template kits, integrations pinch celebrated email trading tools, and an AI adjunct to thief velocity up your website-building process.

Insert nan AI image generated by SeedProd

4. Optimize Your Images and Videos

Unoptimized images and videos tin person large record sizes. These ample files tin lend to DOM size because they go other elements nan browser needs to process.

Optimizing your images tin importantly trim their record size without sacrificing quality. This helps your website load faster and improves nan wide personification experience.

A plugin for illustration Optimole tin beryllium a awesome solution for optimizing your images. Optimole is designed to activity retired of nan box, automatically optimizing your website’s images arsenic you upload them.

 The image optimization plugin's lazy loading feature

You tin besides fine-tune its settings to set nan compression value aliases resize images that transcend a definite size, further reducing their record size and DOM footprint.

If you don’t want to usage excessively galore plugins, you tin usage free online devices for illustration TinyPNG to compress your images earlier uploading them to your WordPress website.

For an in-depth guideline connected image optimization, cheque retired our article connected how to optimize images for web capacity without losing their quality.

When it comes to videos, we don’t urge uploading them straight to WordPress. Large video files tin importantly slow down your website’s loading time.

A amended attack is to usage a video hosting work for illustration YouTube aliases Vimeo. These services grip storing and streaming your videos, taking nan load disconnected your website’s server, and reducing DOM size.

You tin past embed nan videos straight into your pages utilizing embed codes provided by nan hosting service.

Embedding a YouTube video successful WordPress

We person different adjuvant article connected how to optimize videos for your WordPress site that dives deeper into video optimization strategies.

5. Implement Lazy Loading

When you unfastened a agelong web page pinch tons of content, each of these elements will usually load astatine once. This process tin return a while, particularly connected slower net connections.

Lazy loading takes a smarter approach. It delays nan loading of non-critical elements, for illustration images and videos. They will only beryllium loaded erstwhile they are really needed by nan personification arsenic they scroll down nan page.

This intends nan basal contented that appears first (like matter and layout) loads faster. In turn, this results successful a quicker first page load and a smoother personification experience.

Setting up lazy loading is easy, particularly if you’re already utilizing a WordPress velocity optimization plugin for illustration WP Rocket.

Simply navigate to Settings » WP Rocket successful your WordPress dashboard. Then, click connected nan ‘Media’ tab.

Here, conscionable cheque disconnected each nan options for enabling lazy loading for images, videos, and iFrames.

Enabling lazy loading successful WP Rocket

If you want to show an image gallery, past we urge utilizing a gallery plugin pinch a lazy loading feature.

Envira Gallery is simply a awesome illustration of this. Besides lazy loading, you tin group a circumstantial clip hold for erstwhile nan images are loaded.

Enabling nan lazy loading characteristic successful Envira Gallery

Additionally, you tin lazy load your comments section.

For this, you tin usage Thrive Comments, which offers features to optimize WordPress comments.

After nan plugin is active, spell to Thrive Dashboard » Thrive Comments. Then, unfastened nan ‘Advanced Settings’ tab and spell to nan ‘Page velocity optimization’ section.

Enabling lazy loading successful Thrive Comments

Here, conscionable cheque disconnected nan boxes that whitethorn use to your remark section. You tin load nan remark conception until nan personification scrolls down to nan bottommost of nan page, and/or load comments progressively successful pages arsenic users click nan ‘Load much comments’ button.

You tin besides take to load avatar images wrong comments until they travel into view.

Excessively agelong posts aliases remark sections typically person a ample DOM size that slow down your website’s loading times. Here’s wherever pagination comes successful handy.

Pagination fundamentally splits your contented into manageable chunks, making it easier for users to navigate and digest information.

If you find yourself penning in-depth articles, see splitting them into logical sections utilizing pagination. This allows readers to return breaks betwixt sections and debar emotion intimidated by a elephantine wall of text.

Luckily, you tin easy break up agelong posts utilizing nan ‘Page Break’ artifact successful nan artifact editor.

For step-by-step instructions, you tin cheque retired our article connected how to divided WordPress posts into aggregate pages.

Adding a page break successful nan WordPress artifact editor

We besides person a adjuvant guideline connected how to paginate comments successful WordPress. But essentially, each you request to do is log successful to your WordPress admin area and spell to nan Settings » Discussions page.

Then, cheque nan container adjacent to ‘Break comments into pages’ and customize nan number of comments you want to spot connected each page.

Break comments successful pages

Also, we propose avoiding infinite scroll. While they tin support group connected your tract longer arsenic they won’t person to move betwixt pages manually, this tin origin capacity issues connected your server.

7. Minify CSS and JavaScript Files

Your website’s functionality and ocular style trust connected codification files for illustration CSS and JavaScript. While essential, these files tin lend to a larger DOM size if not decently optimized.

Minification tin lick this rumor by removing unnecessary elements from nan code, specified arsenic comments, spaces, and statement breaks. This smaller size translates to faster loading times and a smaller DOM size.

That said, it’s important to statement that minification tin sometimes present compatibility issues pinch definite themes aliases plugins.

Before minifying your code, it’s a bully thought to create a backup of your website and trial nan changes successful a staging aliases local environment if possible. This allows you to place immoderate imaginable issues earlier they impact your unrecorded website.

Then, you tin publication our guideline connected how to minify CSS and JavaScript files successful WordPress for step-by-step instructions.

As you’ll spot successful nan guide, minifying your codification is easy if you’re already utilizing a plugin for illustration WP Rocket. All you request to do is spell to Settings » WP Rocket and move to nan ‘File Optimization’ tab.

Then, conscionable alteration nan features to minify CSS and JavaScript files.

Minifying files utilizing nan WP Rocket caching plugin for WordPress

Some WordPress hosting providers besides connection built-in features for minifying CSS and JavaScript files.

For instance, SiteGround (which is wherever we big WPBeginner) offers nan Speed Optimizer plugin to minify CSS.

Hostinger besides offers a akin characteristic done their built-in CDN, disposable connected their Business scheme and higher tiers.

Minifying CSS successful SiteGround plugin

8. Reduce Render-Blocking JavaScript and CSS

Another attack to optimize CSS and JavaScript files is by reducing render-blocking.

Render-blocking resources are for illustration instauration materials that forestall nan location (your website content) from being built until those resources are delivered and successful place. The longer it takes for these resources to load, nan longer it takes for users to spot your website’s content.

WP Rocket has built-in features to trim render-blocking CSS and JavaScript.

For example, you tin harvester CSS and JavaScript files, which will trim nan number of HTTP requests your website needs to make. Fewer requests mean little waiting clip for nan browser to load everything and render your content.

Minifying CSS, JavaScript, and iFrame successful WP Rocket

You tin besides remove immoderate CSS codification that isn’t really used connected your pages.

This not only reduces render blocking but besides minimizes wide page size and nan number of HTTP requests.

Removing unused CSS successful WP Rocket

Additionally, location is simply a characteristic called ‘Load JavaScript Deferred.’ This tells nan browser to hold connected loading immoderate JavaScript files until aft nan main contented of your website (the HTML) has been displayed.

This way, users spot your website’s contented faster, moreover if each nan inheritance functionalities haven’t loaded yet.

Delay loading non-essential JavaScript code

You tin study much astir enabling these features successful our article connected how to trim render-blocking CSS and JavaScript successful WordPress.

9. Enable WordPress Caching

Caching doesn’t straight trim DOM size, but it importantly improves your website’s perceived performance.

Here’s what happens erstwhile caching is enabled: erstwhile a personification revisits your website, their browser tin cheque its cache first. If nan files are already stored locally, they tin beryllium loaded overmuch faster, importantly reducing page load times.

This makes nan DOM load and show faster, resulting successful a smoother acquisition for visitors.

Caching besides helps your server tally much efficiently by lightening its workload. This frees it up to attraction connected important tasks for illustration processing nan DOM, which yet speeds up your loading time.

Fortunately, mounting up browser caching is elemental pinch a plugin for illustration WP Rocket. This is because nan plugin automatically enables caching pinch optimal settings for your website.

How to group up nan WP Rocket caching plugin

Even better, WP Rocket continuously caches your website astatine each times. Whenever nan cache gets cleared (manually aliases automatically), WP Rocket automatically generates caller cache files.

WP Rocket besides provides you pinch nan expertise to clear nan WordPress cache astatine immoderate time. This mightiness beryllium useful if you make important changes to your website and want to guarantee users spot nan latest version.

How to clear nan WP Rocket cache manually

For much specifications astir WP Rocket’s caching features, you tin mention to nan setting up caching options section of our WP Rocket installation guide.

10. Use a WordPress CDN

A CDN (Content Delivery Network) is simply a web of servers dispersed retired astir nan world. While a CDN doesn’t straight alteration nan size of your website’s code, it makes your website consciousness for illustration it loads faster.

This is because a CDN stores copies of your website’s fixed contented (images, scripts, stylesheets) connected servers successful different locations. When personification visits your website, their machine downloads nan contented from nan CDN server closest to them.

This importantly cuts down connected download times compared to fetching everything from your original server, which mightiness beryllium acold away. This faster transportation makes processing nan DOM overmuch faster.

Plus, a CDN helps your original server activity faster by sharing nan contented transportation load. This allows nan server to attraction connected what matters most, for illustration processing nan DOM. In turn, this makes your website render quicker overall.

If you request CDN recommendations, we person a guideline to nan best WordPress CDN services to thief you prime nan correct 1 for your website.

We use Cloudflare’s CDN connected our website present astatine WPBeginner. It useful good for our ample blog pinch tons of visitors.

Cloudflare world network

If you’re willing successful learning more, you tin cheque retired our insider station connected why WPBeginner switched from Sucuri to Cloudflare. This article explains what we looked for erstwhile choosing a CDN provider.

11. Optimize Your WordPress Database

Your WordPress website relies connected a database to shop each its important information, for illustration posts, comments, personification accounts, and moreover configurations.

Over time, this database tin clasp excessively overmuch unnecessary data, specified arsenic aged revisions of posts, spam comments, aliases leftover accusation from deleted plugins.

While nan database itself isn’t portion of nan DOM, a bloated database tin slow down your website. A slower website tin make it look for illustration nan DOM size is larger because everything takes longer to load and render.

Optimizing your database by removing unnecessary information helps your website tally smoother and tin indirectly amended perceived DOM size.

Check retired our adjuvant guideline connected how to optimize your WordPress database successful 1 click. This guideline walks you done nan process of utilizing a plugin to cleanable up your database and guarantee it runs efficiently.

Focus connected Overall WordPress Performance, Not Just DOM Size

While addressing nan ‘Avoid an excessive DOM size’ informing successful WordPress is important for website speed, it’s not nan only facet to consider.

A website pinch a batch of functionality aliases unsocial formatting whitethorn people person a bigger DOM, and that’s okay.

The cardinal is to find nan correct equilibrium betwixt tract capacity and features. So, speech from DOM size, you whitethorn want to salary attraction to different metrics for illustration Core Web Vitals. These are circumstantial metrics that Google uses to measurement a website’s personification experience.

Core Web Vitals study example

If you’ve utilized a batch of different optimization techniques and your website still feels slow, past see seeking thief from our Site Speed Optimization Services.

Our master squad tin analyse your website and place nan astir effective ways to streamline its performance.

 Site Speed Optimization Service

All work plans see master caching configuration for your website needs, image optimization without reducing your ocular quality, database autoload optimization, and truthful overmuch more. Plus, we guarantee that your website will get an A aliases B+ connected our PageSpeed Tool.

We dream this tutorial helped you study really to hole excessive DOM size successful WordPress. You whitethorn besides want to cheque retired our guideline connected how to velocity up WooCommerce performance aliases our complete WordPress velocity and capacity guide.

If you liked this article, past please subscribe to our YouTube Channel for WordPress video tutorials. You tin besides find america on Twitter and Facebook.