Code Faster, Lighter Javascript

JavaScript is the most expensive resource for web browsers to process on mobile phones. In this feature Addy Osmani covers how to load JavaScript quickly without throwing out the kitchen sink.

- Addy Osmani

Building interactive websites can involve sending JavaScript to your users. Often, too much of it. Have you been on a web page on your phone that looked like it had loaded only to tap on a link or try to scroll and nothing happens? We all have. Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones because it can delay interactivity in significant ways (bit.ly/interactivity-matters). Today we’ll cover some strategies for delivering JavaScript efficiently to your users on mobile while still giving them a valuable experience.

The web is bloated by too much user ‘experience’

When users access your site you’re probably sending down a lot of files, many of which are scripts. Perhaps you added a quick JavaScript library or plugin but didn’t have a chance to check just how much code it was pulling in? It’s happened to many of us. As much as I love JavaScript, it’s always the most expensive part of your site. I’d like to explain why this can be a major issue.

Many popular sites ship megabytes of JavaScript to their mobile web users. The median webpage today currently ship a little less – about 350kB of minified and compressed JavaScript (bit.ly/state-of-js). Uncompressed, that bloats up to over 1MB of script a browser needs to process. Experiences that ship down this much JavaScript take more than 14 seconds to load and get interactive on mobile devices (bit.ly/loading-speed).