23. April 2009, 10:34, by Riv-Alain Vakili

Website performance optimization: Don’t forget the client-side!

Regarding the topic “optimizing page-loading-times” too many people still set the focus only on the server-side, ignoring the fact that most of the loading time is spent getting all the components of the page(CSS, JavaScript, images, ads).


Also, pages (like tilllate.com) more often make heavy use of JavaScript with the goal of providing a better user experience. The problem is, that most developers work on modern hardware and develop on their favourite web browser – which is usually a recent one. They forget that a big amount of visitors still surf with their first computer bought 7 years ago at Interdiscount and is mostly surfing on the developers least favourite browser (like IE 6). As a result, those visitors often do not get the optimal user-experience and the website loses traffic (=money).



The conclusion out of this is:



  • We have to optimize our page following yahoo’s findings.

  • We have to optimize our JavaScript-execution.

Where to start?


Most of our traffic is generated through the photo album. We analyzed and improved following use-case in terms of loading-speed and responsiveness:


homepage


User comes to homepage…


thumbnails


…goes to the a photoalbum…


photo


…clicks through the photos


Tweaks


We then did the following things:



  • Reduced HTTP requests needed to load the JavaScript files: from 45 to 1-2 requests by merging the multiple files into a single one.

  • reduced file sizes of CSS- and JavaScript files by using yui-compressor

  • reduced amount of external scripts (like Google Analytics) or load them after everything else to reduce the dependency on third party hosts

Also with the photo album being a JavaScript app we went through the code and implemented the following improvements:



  • reduced DOM-operations

  • reduced amount of written code by refactoring

  • found and removed some common memory leak-patterns

  • removed fancy fading-effects as they were useless and took a lot of CPU time

The results


For example on IE7 (50% of our users are using it) we had following improvements:



  • time loading and set up the photoalbum decreased from 4.8 to 2.9 seconds

  • time switching between thumbnailpages decreased from 1.3 to 0.3 seconds

  • the general loading/parsing-time of JavaScript decreased from 1,2 to 0.6 respectively 0.5 to 0.3 seconds (Firefox).

Once we released the tweaks, the pageviews per visit increased by 20%.

Filed under: Web Development

© 2014 tilllate Schweiz AG - Powered by WordPress