Web Performance Daybook |

Stoyan Stefanov

Mentioned 2

Performance is critical to the success of any website, and help with using today’s new tools is key. In this remarkable guide, 32 leading web performance experts offer practical tips, techniques, and advice for optimizing your site’s user experience. Originally written for an online calendar, this collection of articles will inspire you to squeeze every ounce of performance from your site—whether you’re a web developer, mobile developer, or web designer. Check the table of contents and you’ll be convinced. In order of appearance, Web Performance Daybook authors include: Patrick Meenan Nicholas Zakas Guy Podjarny Stoyan Stefanov Tim Kadlec Brian Pane Josh Fraser Steve Souders Betty Tso Israel Nir Marcel Duran Éric Daspet Alois Reitbauer Matthew Prince Buddy Brewer Alexander Podelko Estelle Weyl Aaron Peters Tony Gentilcore Matthew Steele Bryan McQuade Tobie Langel Billy Hoffman Joshua Bixby Sergey Chernyshev JP Castro Pavel Paulau David Calhoun Nicole Sullivan James Pearce Tom Hughes-Croucher Dave Artz

More on Amazon.com

Mentioned in questions and answers.

While reading Stoyan Stefanov's web performance daybook I have encountered the following:

Google and Bing store JavaScript and CSS in localStorage to improve their mobile site performance

and the link to the blog with a description. Nonetheless I read it (and have reasonable experience working with localstorage), I sill can not understand what is the point of such action. In my opinion the browser is already doing a job of caching CSS and JS and there is absolutely no point to store them in localstorage.

Can anyone explain in simple English what is the reason?

P.S. In the beginning I thought that may be it has something to do with the size of the cache of mobile browsers, but when I checked I found that they have more then 20Mb of cache which (in my opinion) is pretty enough to make sure that such popular sites like google and bing will have place to be cached.

+1, Nice question. The only reason I can think of is for speed of load time, in those cases were it is no longer stored in the cache. Also, as the post you linked to pointed out, it makes their HTML files a lot smaller ---200kb to39kb is a big difference.

EDIT:

You asked in what conditions would it no longer be in the cache. From my understanding of how the cache works, I believe that the cache size is fixed, so after a while those files would get pushed out to make room for more files. Hope it helps

I'm new to JavaScript.

How should I split my functions across external scripts? What is considered good practice? should all my functions be crammed into one external .js file or should I group like functions together?

I would guess more files mean more HTTP requests to obtain the script and that could slow down performance? However more files keep things organized: for example, onload.js initializes things on load, data.js retrieves data from the server, ui.js refer to UI handlers...

What's the pros advice on this?

Thanks!

It depends on the size, count of your scripts and how many of them you use at any time.

Many performance good practices claim (and there's good logic in this) that it's good to inline your JavaScript if it's small enough. This leads to lower count of HTTP requests but it also prevents the browser from caching the JavaScript so you should be very careful. That's why there're a practices even to inline your images (using base64 encoding) in some special cases (for example look at Bing.com, all their JavaScript is inline).

If you have a lot of JavaScript files and you're using just a little part of them at any time (not only as count but as size) you can load them asynchronously (for example using require.js). But this will require a lot of changes in your application design if you haven't considered it at the beginning (and also make your application complexity bigger).

There are practices even to cache your CSS/JavaScript into the localStorage. For further information you can read the Web Performance Daybook

So let's make something like a short retrospection. If you have your JavaScript inline this will reduce the first load of the page. The inline JavaScript won't be cached by the browser so every next load of your page will be slower that if you have used external files.

If you are using different external files make sure that you're using all of them or at least big part of them because you can have redundant HTTP requests for files which actually are unnecessary loaded. This will lead to better organization of your code but probably greater load time (still don't forget the browser cache which will help you).

To put everything in at single file will reduce your HTTP requests but you'll have one big file which will block your page loading (if you're using synchronous loading of the JS file) until the file have been loaded completely. In such case I can recommend you to put this big file in the end of the body.

For performance tracking you can use tools like YSlow.