Websites Are Getting Bloated With Unused Code

I'll start with one anecdote. Would you go for a 3-day trek in the mountains with 8 kg extra in your backpack that you know you won't need at all? Because that's what we do with the majority of websites.

On average, almost 50% of the code we require visitors to download goes completely unused. Mainly JavaScript and CSS.

The impact goes beyond just performance and business metrics. Think about your smartphone battery. Your mobile CPU has to process every line of code, even when it's completely unused. Every unnecessary script drains power for no reason.

But let's step back and focus mainly on performance and business metrics.

The Amount of JavaScript Is Growing

With faster internet and more powerful devices, the amount of JavaScript is growing too. Year over year, there is a growth of about 14%.

The main source of the problem is static generators, mainly developed for apps, but used even for websites. WordPress plugins add to this mess, too. For example, contact form plugins often load related JavaScript and CSS on every page, not only on the page where the form is actually used. With the implemented reCAPTCHA, this takes several megabytes of code on every single page.

Before we blame reCaptcha, Google Tag Manager, and other analytics scripts for this, keep in mind that in over 80% of cases, first-party code is responsible for JavaScript waste, not third-party.

Bloated websites also consume our limited mobile data packages on smartphones faster than we can eat our dinner. But the problem is also on the side of crawlers. When Google has to load megabytes of unused JavaScript code, it reduces the number of pages it will visit. This reduces the possibility of getting crawled and indexed.

Just imagine, Google needs approximately 9x more resources to crawl and render a JavaScript-heavy page compared to a plain HTML page.

jQuery Everywhere

Years ago, jQuery was the most popular JavaScript library. It helped a lot. Even I, as a developer, used it. However, over time, I started to prefer plain JavaScript code, and it speeds up page loads significantly.

Unfortunately, even in 2024, jQuery was still on almost 75% of mobile pages. jQuery Migrate for backwards compatibility was still on 33% of pages. Both of them have together 101 kilobytes of code. Mostly unused and unnecessary.

On a desktop with unlimited fast internet and a good enough CPU, nobody really sees those 101 KB of extra code. However, on mobile, when parsing and compiling code takes up to 5x longer, the feeling of slowness becomes very real.

CSS Is Bloating Too, Along With Excessive DOM

There is one more problem, and we shouldn't blame only JavaScript. CSS is the source of slow websites, too.

We can talk, for example, about Elementor - one of the most popular drag-and-drop builder in WordPress. Elementor often adds over 300 KB of CSS without even adding any elements to the page. There are some features that try to minimize it, but it's still not efficient enough. Elementor pages are simply bloated with tons of unused code.

On the other side, page builders, such as Elementor, have problems with excessive DOM, too. For the same simple element where Gutenberg needs only 8 DIVs, Elementor uses over 40. For the browser and device CPU, this adds a lot of work to download, process, and render the content.

How to Resolve It?

The solution is probably not easy in most cases. Personally, I believe that each company that takes business seriously on the internet should invest in its website to optimize it and bring visitors a better user experience.

Faster and lighter websites help everybody. Crawlers, visitors, and even website owners that will have more money in their pockets from increased conversions.