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

8 Comments

  1. Great work! I especially like the number at the end of page views going up 20%. I can recommend looking into Jiffy if you want to continue tweaking load times – I’ve had success with it at local.ch.

    Comment by Patrice — 23. April 2009 @ 22:41

  2. thx for the tip!

    Comment by Rivu — 24. April 2009 @ 15:15

  3. Hi Rivu,

    that’s a great result. Did this have a positive impact on revenues?

    - Aaron

    Comment by Aaron Peters — 27. April 2009 @ 09:54

  4. Can you elaborate how you get ‘time’ metrics for IE7?

    Comment by Alexandr — 27. April 2009 @ 18:37

  5. @Aaron
    Hi, it is hard to tell. because the advertisment-market has not his best time currently.

    but the authorized traffic-stats are an important factor for the advertisers to decide where to place their ads. and if the nubers go up… its good :-)

    Comment by Rivu — 30. April 2009 @ 11:50

  6. @Alexandr
    Hi, I profiled js by using “new Date().getTime()”

    Comment by Rivu — 30. April 2009 @ 11:57

  7. Hi, it amazes me that so many websites don’t test their speed around the world – it gives such a better user experience and competitive advantage especially if your market is global.

    When we launched one of our websites, that was quite image heavy, I managed the incoming email and noticed people complaining a about slow page load – after some testing I was shoocked that our site was so slow in different parts of the world – it pays to take feedback seriously. I looked into fixes for this and even though I know you can do a lot of hand tweaking we found some software called aptimize and put that on and that worked wonders.

    Every time we build a site now, speed testing around the world, especially those countries where we do the most buiness is a priority.

    Comment by jono — 14. May 2009 @ 00:31

  8. Try http://code.google.com/p/web-optimizator.
    The product is designed specifically for PHP

    Comment by And — 23. September 2009 @ 14:37

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

© 2014 tilllate Schweiz AG - Powered by WordPress