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).
The
yahoo performance-team proved this very well.
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:
User comes to homepage…
…goes to the a photoalbum…
…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%.
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
thx for the tip!
Comment by Rivu — 24. April 2009 @ 15:15
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
Can you elaborate how you get ‘time’ metrics for IE7?
Comment by Alexandr — 27. April 2009 @ 18:37
@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
@Alexandr
Hi, I profiled js by using “new Date().getTime()”
Comment by Rivu — 30. April 2009 @ 11:57
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
Try http://code.google.com/p/web-optimizator.
The product is designed specifically for PHP
Comment by And — 23. September 2009 @ 14:37