Ever wonder why your website gradually slow down after each release? In the tech world, it is widely believed that the main culprit behind lies in what we call JavaScript Bloat.
Table Of Contents
State of JavaScript
In today's fast-paced world, JavaScript has become an integral part of almost all modern websites, enabling rich and interactive website experiences.
Think about the following:
- An interactive map that can display real-time traffic updates
- A slider/carousel that switches images every few seconds
- A video player that plays YouTube videos
- And more…
All of the above use JavaScript to achieve the desired functionality.
For the last 10 years, JavaScript's usage has been increasing substantially by every measure.
Stats from HTTP Archive shows an average based on thousands of tested websites for the past decade (HTTP Archive performs tests every month).
Its observed that 10 year ago the median page serves only 168.1 KB of JavaScript (107.2 KB for mobile). Now that number has risen to 508.5 KB (468.7 KB for mobile). Its gone up ~200% (~330% for mobile) in just a decade.
What is JavaScript Bloat
JavaScript is like chocolate in a cake: it enriches the experience. But add too much and you'll spoil the taste.
JavaScript Bloat refer to a website that relies excessive amount on poorly optimized JavaScript.
A feature-rich, complex website in exchange for providing modern, interactive experience naturally going to have more assets that consume more users' resources, from CPU and GPU to memory and network.
According to HTTP Archive, the median web page weight around 2.2 MB of data split across 71 HTTP requests. This is a huge increase from 800 KB average of 10 year ago.
JavaScript is the highest contributor to the significant increase in page weight behind images (and videos).
Why more JavaScript mean Worse Performance
To display a web page, the browser parses the HTML content to build the DOM. As soon as the parser comes across a <script>...</script> tag, it stops the DOM building, waits for the script to download, parses it, executes it and only then can it process the rest of the page.
Depending on how large each scripts is, especially on slower connections, there will be a significant delay before users will be able to see your HTML.
That's why the delayed time between first load and interactive has increasing steadily according to HTTP Archive
When your website have lots of third-party scripts, they'll block your own JavaScript and have a drastic effect on your web page performance.
Here is an example of a simple HTML website before and after install a 3rd-party plugin.
Summary
It's true that JavaScript slow down our webpage. However, it doesn't mean that you shouldn't use JavaScript at all.
In the next article in this series, we’ll discuss some advanced techniques you can use to optimize your website.
Top comments (0)