• Home
  • blog
  • How to Improve Loading Time with basket.js

How to Improve Loading Time with basket.js

For modern Web pages, scripts are obviously a crucial element. Their weight is growing in terms of importance and the amount of bytes. For instance, think of single page applications and the amount of code they need to give us all the features and animations required, without having to hit the Reload button on our browser. The total size of scripts in a page is far from the one of video and audio files, but it’s getting closer to the size of images.

In this article, I’ll test the performance of two of the most visited websites, Facebook and Twitter, highlighting some of their major issues. Then, I’ll focus on how to improve the loading time of the scripts of a page by introducing you to a library called basket.js.

Measuring the Performance of Facebook and Twitter

Before covering what basket.js is and what problem it solves, let’s start with a real-world example. Let’s use a tool like the Chrome Developer Tools or F12 Developer Tools to measure the number of bytes transferred and the loading time of the Facebook wall. To perform this task in a reliable way, you have to hard reload the page in your browser and empty the cache, of course. If you need more instructions, this tweet by Addy Osmani will help you.

Said that, what’s the total size of scripts loaded for the average Facebook wall (ballpark) and what’s the ratio images/scripts? And regarding the challenge of CSS versus JavaScript, which one is going to be heavier? Take a guess and write your answers down but… don’t cheat!

Continue reading %How to Improve Loading Time with basket.js%