Why is the internet so slow? (And how can we fix it).

JavaScript is everywhere on the Internet. It is involved in almost every aspect of what we do online. Whenever we use Facebook, YouTube or Google, we rely on JavaScript code to give us the interactive feel we expect from the Internet today. JavaScript gives us everything from web basics like loading turntables, browser alerts and page transitions to advanced features like web games, 3D displays, and interactive maps.

Unfortunately, there is a rarely discussed but very poignant downside to all this interaction that threatens our browsing experience and the future of the web itself: JavaScript bloat. This term refers to a website that relies on a lot of JavaScript to run at its maximum speed and capacity. As a professional web developer or internet business owner, keeping your website running at maximum efficiency is essential to your bottom line, so it is very important to understand and solve the JS bloat issue.

What is JavaScript Bloat?

JavaScript bloat refers to a website that relies on a lot of JavaScript to run at maximum speed and capacity. Every time you use your browser (for example, Chrome or Firefox) to visit a webpage, you need to download some instructions, usually HTML, JavaScript, and CSS, that tell your browser how to compile and prepare the website for use. A bloated website has a lot of javascript for its content. It’s normal for a complex and feature-rich website to have more JavaScript, and that’s okay. The problem occurs when a simple site contains a large amount of JavaScript that the user must download.

More from Alex Zito-WolfHeadless vs Integrated Architecture: What’s the Difference?

Why is this a problem?

Over the past 10 years, the use of JavaScript on websites has increased exponentially by all accounts. Since 2017, the weight of a JavaScript file Desktop site KBs increased 78 percent, while JS requests increased 17 percent. Some of this increase can be attributed to the fact that the average website has become more complex over the past five years. However, a lot of that is due to bad practices, broken integrations, or unnecessary code. Whatever the reason, all that bloating is making the internet slower for everyone.

Photo: screenshot by author.

If you are not familiar with how your internet browser downloads JavaScript, This introductory article Explains the basics well. Every time you use your browser (like Chrome or Firefox) to visit a webpage, you need to download some instructions, usually programming languageAnd the JavaScript And the CSSwhich tells your browser how to compile and prepare the website for use.

So, what does bloat look like?

An oversized website is one that has a lot of javascript relative to its content. For example, it’s normal for a complex and feature-rich website to have more JavaScript, and that’s fine. The problem occurs when a simple site contains a large amount of JavaScript that the user must download. This calculator Provides the widely used standard algorithm for identifying JavaScript bloat. Using a screenshot of the website in question as a proxy for its overall complexity, the calculator compares this complexity to the amount of JavaScript downloaded as well as the number of JS requests.

Screenshot of a calculator for using JavaScript
Photo: screenshot by author.

JavaScript bloat can happen for many reasons, but websites generally swell for one of the following four reasons. Fortunately, you can implement solutions to solve these problems.

4 Reasons Why JavaScript Bloat

  1. Weak pressure.
  2. Complex framework code.
  3. JQuery by default.
  4. Oversized texts for third parties.

weak pressure

Minifying and compressing JS and CSS files is a must for a production website. You can write a 200KB script that can be minified to 100KB and then compressed to just 15KB, which is only 7.5 percent of the original script size. If you don’t configure your server to apply the correct compression rules to every JS and CSS file, you are setting yourself up for failure.

To fix this problem, use proper compression and reduction. This article was written by Chris Coyer It explains the differences between the two, and gives you a few ways to make sure you’re applying both processes correctly. In short, you should be able to configure your server to use a compression algorithm of your choice, generally using either Brotli or Gzip compression.

complex framework code

Libraries like Angular and React are of great benefit to businesses and developers today. However, when you choose to use a framework, you are accepting some significant overhead when it comes to the totality of JS it will use, and even more so for full-featured or enterprise-wide frameworks. If you choose to use a complex framework when you have a simplified use case, you are guaranteed to run a bloated site.

The remedy, of course, is to only use frameworks when you have to. Frameworks offer many advantages You can code with the latest cutting-edge design tools, templates, and a network of plug-ins to quickly achieve advanced results. But you should still write basic JavaScript for most projects and only apply frameworks to more complex pages or applications.

jQuery by default

jQuery is a library of DOM processors based on nearly 90% of the worlds . sites. If you are able to get rid of this dependency, you will be able to get rid of it 80 KB of JS thumbnail.

The solution to this problem is to wean yourself from the jQuery addiction. jQuery is a great convenience and time saver, yet it gets overused. Its use for simple tasks is often unnecessary with today’s browsers because these types of tasks have powerful, native applications that perform jQuery-style functions on their own. So, again, try to stick with native JavaScript whenever possible.

Oversized third-party scripts

When you add a third party script to your website, you are responsible for keeping track of the size of that script and making sure the code is as simple as possible. Third-party scripts generally come in two versions: either loaded dynamically, such as Google Analytics, or bundled with your application code, such as NPM . units. Both packages can add unnecessary baggage to your website. Dynamically loaded scripts have the added harm of sometimes slowing down your site rendering blockingwhich essentially causes your website to wait for Google’s servers to respond before your site can load.

To reduce this kind of bloating, limit your use of monitoring scripts and monitor your NPM packages closely. The third party tracking code is responsible for much of the weight gain of JS on the Internet. Web users are often still held hostage by websites that insist on loading large amounts of cookie-tracking ad code before the page is usable. Look for scripts that are causing your website to make many requests to ad trackers because they can put your website’s speed in the hands of Google.

When it comes to NPM packages, keep track of your dependencies and their weight. Before adding a new dependency to your app, use a site like this to test the size. You don’t need to keep track of your dependencies in this way too obsessively, but as a rule of thumb, if you’re adding more than 100KB of thumbnail JS to your site, you need to dig a little deeper as to why this script needs so many lines.

More in Software EngineeringYou can use AI to fix your broken code

LeavesDe-plot the web!

JavaScript bloat is a common problem. As technology professionals and web developers, the task of managing and controlling it is on us. By following the simple steps above, you should have a blueprint for properly selecting the necessary scripts for your website and for properly optimizing the scripts you choose to employ.