How we improved our Web Site Performance Rank from D to A
Timed with our new product launch we also updated our corporate website. Not only did we update the content, we also applied some of the Best Practices that Alois and I have been talking about in the past 12 months. When we introduced the new Performance Report in dynaTrace AJAX Edition 2.0 Beta we got feedback from several community members who tested this feature on our website. They showed us that our website didn’t really do that well in the ranking. The Rank we had back then was somewhere between C and D. The first thing I therefore did after the site was launched was to look at the Performance Report of the main landing pages of our new site to see whether our improvements made a difference:
Looks much better than what we had before. As I mentioned before - in order to improve web site performance we implemented some of the Best Practices described in our Best Practices on Web Site Performance Optimization. In this blog I want to give you a quick overview of what we have done:
First Best Practice that we follow is to merge images in order to reduce roundtrips. This technique is called CSS Sprites. We use it for certain menu elements as you can see in the following image:
Using sprites reduces the number of resources a user has to download from our site and therefore reduces the roundtrips from the browser to the server. Especially for users with high latency or users with browsers that only open a 2 physical connections per domain this change greatly improves page load time.
Using Images Domains
Depending on how many images you have on your site this change can have a significant performance improvement. We do not have too many images but using a separate domain saves us several hundred milliseconds.
Leverage Browser Caching
Leveraging the Browser Cache not only speeds up web site performance for revisiting users. It also reduces unnecessary roundtrips and therefore reduces the load on the server and network.
Content Delivery Network
For or larger multimedia files, e.g.: flash content we decided to use a content delivery network (CDN) in order to speed up download of these larger resources for users that are not close to our web server. CDN’s are great as they can be much closer to the end-user as your servers and are therefore faster in delivering static content that doesn’t require interaction with your application server.
There are many providers for CDNs out there allowing you to serve your static content faster to your remote users and therefore again speeding up web site performance
Reduced SSL Connections
Fixing this include to use HTTP instead of HTTPS saved us 500ms on average. This time was mainly saved in the Connect Time which also includes the SSL Handshake.
Fixing this problem using protocol relative URLs saved almost 600ms on our public non-secure pages. It is therefore worth double checking all embedded resources on both secure and non-secure pages of your site.
All measures we have taken were rather simple but had a great positive impact on page load time. For further reading I recommend the blog on Top 10 Client-Side Performance Problems. Once you worked over your site and fixed the main problems it is time to constantly analyze your page to make sure that changes don’t negatively impact the end-user. For that you can find more on Automate Performance Analysis in Test and CI as well as End-User Experience Management.