Five Performance Optimization Tools for Web developers
I got idea about this post after attending O’Reilly’s Velocity 2011 Conference. The conference is all about web performance and operations. I loved the vibe and energy of the crowd. Smart companies, innovative products, passionate people and a lot of knowledge sharing. I want to talk about several projects that I found very useful for each web development team. They all help you tremendously to make your web site or mobile application faster and keep it this way. Optimize your web site for performance, monitor it constantly and
create best experience for your users. It’s not news that web site performance have a direct correlation on business bottom line. There are numerous case studies available to prove the fact,
1. The first tool I found indispensable is webpagetest.org. Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.
- client CPU utilization – because tests run from a real browser, you can see CPU Utilization
- detailed waterfall diagram
- filmstrip view
- Video – how you website is showing up for the user. This is awesome feature. Very useful to show problem or improvements to business people.
- Compare with you competitors web site or industry web pages
- Webpage test could be install locally for continuous testing
- Export result as .har file for further analysis
There is advanced tab and I highly recommend explore it
2. Dynatrace Ajax Edition.
This is awesome tool. I did not use it before, but at the conference people I talked to gave a great feedback for the tool. They simply love it and convince me to give it a try. Unfortunately supported platform are only Windows XP (32 bit), 2003, Vista (32/64 bit), or 7 but I use virtual machine on my mac to try it out.
Major points are:
- It’s free.
- It can be integrated with their commercial back end monitoring/profiling tool for complete investigation from client to backend DB call.
- Web Test Automation- Automated performance analysis across both IE and Firefox without having to modify your test scripts . Support for Selenium, Watir and more. I love the idea of knowing my performance metric during integration testing.
- Diagnose Cross Browser – Firefox & IE. They can have absolutely different results for the same code base.
- Training videos to get you started.
3, Next great product came from Google Lab. PageSpeed was released in November of last year and already gained popularity and respect in web performance community.
It consist of extension, new online tools and mod for apache.
The Page Speed browser extensions, available for Chrome and Firefox, allow you to evaluate the performance of your web pages and to get suggestions on how to improve them.
Page Speed Online is a new web-based tool that allows users to analyze pages at any time, in any browser, without downloading an extension. It also features Page Speed Mobile analysis, which lets developers analyze their site as viewed by a mobile browser, and get suggestions specific to mobile optimization.
Page speed from google lab
I am fan of the mod_pagespeed Apache module. It provide page speed optimization on the fly, because this Apache module automatically rewrites pages and resources to improve performance. It has sophisticated image optimization mechanism to optimize images for the web, combine and add cache headers to other resources like .js and .css files. Mod_pagespeed des not do something special, just apply best practices for speed optimization on the fly, freeing you from doing this task yourself. If you site already optimized, you may not see any gain, even performace degradation, but for not optimized sites it worth to deploy.
4, ShowSlow takes a little different approach than previous tools and allow you to monitor performance over the time. I think this is a killer feature allowing you to see how changes to your website affect user experience over the time. Show Slow is an open source tool that helps monitor various website performance metrics over time. It captures the results of YSlow, Page Speed and dynaTrace AJAX Edition rankings and graphs them, to help you understand how various changes to your site affect its performance.
The tool can be installed on your own server. I would love to see it to monitor our dev, stage and production. Really cool.
5. Last tool worth mentioning is YSlow. It has a new version of extensions and YSlow for Mobile/Bookmarklet. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. Feature highlights:
- Grades web page based on one of three predefined ruleset or a user-defined ruleset;
- It offers suggestions for improving the page’s performance;
- Summarizes the page’s components;
- Displays statistics about the page;
- Provides tools for performance analysis, including Smush.it™ and JSLint.
Please share what is your favorite performance tools and why?
- HTTP Archive Tracks World’s Top 18000 Websites – Are You Listed? (quickonlinetips.com)
- 15 surefire ways to speed up your site | Feature | .net magazine (netmagazine.com)
- Google Instant Pages: Instant Page Loading, Unless Google Guesses Wrong (searchenginewatch.com)