Even faster web sites summary

I’ve written a summary of first book about performance written by Steve Souders few months ago. And also few weeks ago, maybe months I’ve finished the next part of Souders performance books. But this book wasn’t written only by the web performance guru I read chapters written by: Douglas Crockford, Ben Galbraith, Dion Almaer, Nicholas C. Zakas, Dylan Schiemann, Tony Gentilcore, Stoyan Stefanov, Nicole Sullivan,  It’s about time to write something about it! I’ll just put here my notes, I put down on a piece of paper while reading.

with() statement in JavaScript

I had no idea there is such a statement in JavaScript! And actually that’s good I’ve never heard of it. If you don’t know something exists you won’t use it And basically this is what to do with with() statement in JavaScript — don’t use it!

Use local variables

I think at Wikia we all agree to use more often var than not to use it :p Of course there are some edge-cases when you want to use a global scope variable but you have to be very careful then. In case of performance in the book we can read it’s a very good habit to use local variables instead of property or array look-ups. There is a very nice graph showing that the fastest way to access data is accessing it via local variable. The differences between data access time for literal, local variable, array item and object property are different in different browsers but in all browsers we can observe that accessing a local variable is faster than an array item or an object property. So, do this:

function process(dataObj) {
   var count = dataObj.count;
   if( count > 0 ) {
      for( var i=0; i < count; i++ ) {
         processData(dataObj.el[i];
      }
   }
}

instead of this:

function process(dataObj) {
   if( dataObj.count > 0 ) {
      for( var i=0; i < dataObj.count; i++ ) {
         processData(dataObj.el[i];
      }
   }
}

Decrementation instead of incrementations in loops

But later in the same chapter we can read that the good example above can be optimalized even more in terms of performance. How? Look at this:

function process(dataObj) {
   var count = dataObj.count;
   if( count > 0 ) {
      for( ; count > 0; count-- ) {
         processData(dataObj.el[i];
      }
   }
}

It reads that decrementing the iterator toward 0 can result in savings of up to 50%!

Gziping can be ignored

There is a warning in chapter 9 that not all of our users gets gziped content once we configured the server to provide gziped content. There are third-party softwares which change the HTTP headers! Mostly, they are firewalls, anti-virus applications or ad-blocks. So, be aware of it, monitor your systems to find out if there are such poor users with “bad” software which changes HTTP headers and try to help those users.

pngcrush!

Shortly after Performance Team at Wikia got created the first thing the team did was optimizing our images. We’ve saved more than unnecessary 8MB to be served to our users! During our daily development we any new assets are being changed by us with pngcrush application. And this small but pretty useful piece of software was mentioned in this book as well. Use pngcrush on your images to remove from them data which won’t be used by your end user.

Domains sharing

In the first book, I’ve written about previously, we are encourage to use more than one domain to make browsers possible to send requests in parallel. This time Steve Souders did more tests and proved that probably the optimal amount of domains used on our website is two.

Iframes are bad

That’s because they block the parent window’s onload event when used in typical way. And, as it’s proven in the book, it slows the performance of the page. Author also gives us also some tricks we can use to make it working faster. Unfortunately, there aren’t the same ways which works in all browsers. For Chrome&Safari setting the iframe src attribute value dynamically works, for all other browsers we need to set the src attribute after onload event.

CSS optimalization!

This was the part I’ve enjoyed the most! Since, most of this book as the previous one touched front-end optimization and some back-end ways to make the performance better (apaches configuration mostly). I don’t say it’s wrong because it’s probably the most important part since Steve Souders formed the golden rule of performance but it was only about JavaScript. The last chapter in this book touches CSS!

It describes different types of selectors and how efficient they are. Then it gets to advices of how to use CSS selectors in more efficient way: rightmost first, avoid universal rules, don’t qualify ID selectors (div#toc), don’t qualify class selectors, make rules as specific as possible, avoid descendant selectors, avoid tag-child selectors, question all usages of the child selectors, rely on inheritance.