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
While reading Stoyan Stefanov's web performance daybook I have encountered the following:
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.
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
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?
It depends on the size, count of your scripts and how many of them you use at any time.
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.