Why is this a problem?
So, what does bloat look like?
- Weak pressure.
- Complex framework code.
- JQuery by default.
- Oversized texts for third parties.
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.
jQuery by default
jQuery is a library of DOM processors based on nearly 90% of the world“s . 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.
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.
LeavesDe-plot the web!