Like it or not, your end-users will judge your website. If, in their judgment, it is perceived to be slow, that judgment will partly determine how often they return. It will also affect their friends’ decisions insomuch as user experiences are shared. That’s why monitoring the user experienceis so important.Now on to the next step. We’ve monitored user experience and our monitors are telling us that things could be better (or couldn’t be worse). So what do we do about it? We know the transaction is slow, but how do we identify the source of the problem?We can search the Internet for suggestions, but we would quickly find way too many tips and varying opinions about their relative importance. Lack of information is not the problem here. The problem is that there is too much information with a wide variety of opinions interspersed.Fortunately, someone is trying to help us wade through the mass of opinions. Based on research rather than opinion, Google and Yahoo have each published their own version of the best-of-the-best performance tips for web applications. Yahoo has also provided implicit rankings for their tips. Finally, both have created tools you can use to judge your own web pages. Yahoo created YSlow and Google created Page Speed. Google and Yahoo are not the only reputable sources of information out there, but they seem to have given the matter reasonable thought and have produced some usable tools.
Best-of-the-Best Tips
The best-of-the-best from Google and Yahoo include tips related to 404’s, importing, Ajax, CSS, DNS, DOM, HTTP Headers, JavaScript, browsers, caching, compression, content delivery networks, cookies, duplication, entity tags, event handlers, favicon.ico, filters, flushing, iframes, images, imports, links, mobile devices, multipart documents, multiple domains, overhead, payload size, postloading, preloading, proxies, redirects, rendering, round-trip times, size, src attributes, and synchronicity.
That’s quite a list! Google made an attempt to divide them into categories, but it’s still a lot to fathom. I would like to tell you all about their tips, but that’s way too much for this little article. Since some tips are related to or affect others, I will instead write additional articles to describe the tips in a more categorized manner.
How Not to Use the Tips
Some people try to resolve performance issues by focusing on performance tips. The tips will surely help us as we develop or modify webapps, but they are not a good methodology for resolving existing problems. Neither Google nor Yahoo have suggested they be used in this manner.
A better approach is to profile the transaction as it makes its way through the various application layers and system services. This tells us which part of the application or system is responsible for the slowdown. We can then do some application component deep dive monitoring to more closely identify the trouble spot. Once we know where the trouble is, we can skip right over the tips that have nothing to do with our problem and focus on the ones that may help.
As with any problem, identifying the cause must always come before implementing a solution. Anything else is hit and miss.
References
Best Practices for Web Performance
Best Practices for Speeding Up Your Web Site by Yahoo’s Exceptional Performance Team. Published by Yahoo at developer.yahoo.com/performance/rules.html. Accessed 2011.11.30.
Fourteen Rules for Faster-Loading Web Sites by Steve Souders. Published by Steve Souders at SteveSouders.com/hpws/rules.php. Accessed 2011.11.30.
Ten Tips for Writing High-Performance Web Applications by Rob Howard. Published 2005/01 by Microsoft at msdn.microsoft.com/en-us/magazine/cc163854.aspx. Accessed 2011.11.30.
Top Ten Web Performance Tuning Tips by Patrick Killelea. Published 2002.06.27 by O’Reilly at OReilly.com/pub/a/javascript/2002/06/27/web_tuning.html. Accessed 2011.11.30.
Web Performance Best Practices. Published by Google at code.google.com/speed/page-speed/docs/rules_intro.html. Accessed 2011.11.30.
Web Performance Tips: 10 JavaScript Best Practices by Dr. Doris Chen. Published 2011.03.17 by Microsoft at blogs.msdn.com/b/dorischen/archive/2011/03/17/web-performance-tips-10-javascript-best-practices.aspx. Accessed 2011.11.30.
Adherence Measurement Tools
Page Speed. Published by Google at code.google.com/speed/page-speed. Accessed 2011.11.30.
YSlow. Published by Yahoo at developer.yahoo.com/yslow/. Accessed 2011.11.30.
YSlow Ruleset Matrix. Published by Yahoo at developer.yahoo.com/yslow/matrix. Accessed 2011.11.30. Yahoo’s implicit rankings can be inferred from the second column of the table (weight). The bigger the number, the more important Yahoo considers the tip to be.
YSlow User Guide. Published by Yahoo at developer.yahoo.com/yslow/help/. Accessed 2011.11.30.
Other Articles
Let’s Make the Web Faster. Published by Google at code.google.com/speed/articles. Accessed 2011.11.30.
This is a directory of 20 links to performance-related articles.
The Not So Good Web Performance Tips by José Manuel Perez. Published 2010.12.28 by José Manuel Perez at blog.josemanuelperez.es/2010/12/yahoo-tips-website-performance-flush-bottom. Accessed 2011.11.30. José explains that two common tips do not work – putting scripts at the bottom of the page and flushing inside a <div> tag. See the following article by Nicholas Zakas for solutions to these issues.
Performance on the Yahoo! Homepage by Nicholas C. Zakas. Published approximately 2010/12 by SlideShare.net at www.slideshare.net/nzakas/performance-yahoohomepage. Accessed 2011.11.30. This slideshow shows how to dynamically load JavaScript without blocking rendering. It also discusses where to flush and advises us to keep JSON data small.
