Even Faster Web Sites

Last few months I just become void and search something to do or learn on technically. And I went to my company library and searching for some books, and found this one “Even Faster Web Sites”.

If your are front end developer or loves web page designing, you would come across few rules for making web page faster – “High Performance Web Sites” book, even lot of articles, forum, blogs explains about those 10 rules. Steve Souders, who wrote the book High Performance Web Sites made the web development to improve 80% faster.

He and other folks contributed the book “Even Faster Web Sites”. I think why he named it even faster is because already he written a book for performance which makes the web fast. So obviously the next one should be even more faster right.

The book covers 15 chapters and some performance tools. And I can’t give all the details over  here, because you should read the book to learn more deeper. Here I will talk about some of the things which made me to surprise/shocks me on the behavior of web and browser.

 

1) Splitting the initial payload

If you talk a look at top 10 US web sites, 75% of the JavaScript are not executed on page load. So why do we need to load those stuff on before load and makes page delay. Idea over here is to use Defer rendering, where we can load the scripts(scripts not executing before page load) after page gets loaded.

2) Scripts Blocking other components

This topic was new to me and surprised that web and browsers are behaving in such a manner.

Scripts tag will blocks other components(images, style, iframe, anything) to execute or render until it downloaded and executed

Why this is happening is because of script is capable of changing the web page(by style, or new components and many features). So to preserve the order of the execution and page rendering, it blocks others components.

So  if you are having scripts which will not do anything of the web page modification, you can execute or render without blocking the other components by set of technics like XHR Eval, XHR Injection, Script in Iframe, Script DOM element, Script Defer, document.write Script tag.

And even CSS style also will block other components to execute or render, reason as same as script blocks.

Best way is to position the CSS Styles at top and Scripts at bottom to load the page in efficient way.

3) Writing Efficient JavaScript

In JavaScript lifecycle, we have execution context(scope), global context and scope chain. So whatever variable we refer or use, will start search from active execution conetext (scope) and it continues to the upper stack and atlast goes to global context.

We need to be more careful of using the global variable, and for the local variable don’t forget to put var keyword, most of the developer won’t do that which leads that to global variable. And store the repeatedly using variables into local variable to process fast.

Processing DOM element is most costly in the JavaScript, where we mostly to use the DOM document or any elements like ( document.getElementById(‘..’) ) which needs to be stored in to local variable in case of it is used in more than one statement, which makes the access scope search easier and faster.

Loop tip:

To improve the performance of a loop is to decrement the iterator towards 0 rather than incrementing will save up to 50% of original execution time depend upon the complexity of loop.

4) Going Beyond Gzipping:

Even if Gzipping support is enabled in your server and the browser, sometimes nearly 15% of users are not getting the Gzipped version.

This happens because of these two culprits ( web proxies, PC security software’s ), which will make the original header to mangled like (X-cept-EncodXng: XXXXX). So the server and browser couldn’t understand the encoding format and gets failed to serve Gzipped content.

To overcome this we can use cookie to share that the browser supports Gzip format and server can serve the Gzipped content.

5) Sharding Dominant Domains

There is a W3C rule that browser needs to make max async call to single domain. If you take look at the older browser, it supports only 2 parallel call at a time to single domain. But newer browsers supports up to 6 parallel calls to single domain.

If a web page supports maximum parallel downloads, will make the page maximum to load faster. In order to download max parallel connection, we can go for multiple domains as the rule applies to single domain. So if components are shared with multiple domains like (CSS, images and JS are put into two domains), CSS and JS will download at same time from different domains.

And an important concept here is that this restriction to max parallel calls is not only the webpage, it applies to all the window, tab of that browser. So If you are loading YouTube in 2 tabs at a time and one tab start max downloading the components of page from that domain(YouTube), other tab needs to wait for the first tab to gets completed. As the MAX connection applies to whole browser at a time.

To use multiple domains, it doesn’t mean that we need to have 2 different servers, because browser won’t look for IP address to check MAX connection. It just checks the url hostname. So we can have CNAME (alias ) for the same server and use the alias for some components.

6) Simplifying CSS selectors

In the current Web 2.0 applications we use lot of CSS selectors to apply different styles.

How the CSS selectors executes and apply the styles is “browser tries to match the CSS selectors with the elements in the document.  The amount of matching the browser must perform depends on how the CSS selectors are written”.

Our mentality of writing the selectors is as same as our writing way, starts from left to right. Ex: to apply a bg color as red to all the span inside div under div(with class middle) will be

div > div.middle > span { background-color: red; }

But how the browser reads or executes the selectors are from right to left. So all our selectors should be turned to filter most of elements on right most one. For the above example browser selects all span, and check each span whether its child of div.middle.

CSS selectors should be on right to left

 

Performance Tools:

There are lot of tools which shared in the book, am just list the major hits in the web developers circle.

HttpWatch

Fiddler

Firebug

YSlow

 

Here the link to see the examples of the EFWS,

http://stevesouders.com/efws/links.php?ex

Hope it will be some way helpful to you, and am trying to write the blog in interesting way. If it bored am sorry. Anyway read the books “Even Faster Best Sites” and “High Performance Web Sites” to get into it deeper with lot more information’s.