View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
1 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsIdentifyProblemsin SecondsPerformanceHow toWeb
2 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsA waterfall chart is a web performance tool that visually displays each and every asset that composesa web page, in the order that they downloaded. It uses horizontal bars to show how long eachasset took to download, and uses colors to display various stages within each asset’s downloadprocess. At the most basic level, a longer bar is a longer downloadtime. However, keep in mind that the lengths of the bars are relativeto each other, so be sure to look at the numbers at the right side ofeach bar that show the time (in seconds or milliseconds) that theasset took to download to add perspective to what you’re viewing.In addition, the other columns in the chart give information on WHATthe asset is (you can click the link to see it displayed in a new tab inyour browser), WHERE the asset comes from (the Host -- be it yourorigin server, or a third party), how HEAVY the asset is (in bytes, kb, mb), and the STATUS of the asset(if there was an error involved or not).Analyzing web performance doesn’t have to take long – in fact, it doesnt have to take much longerthan the page takes to load! Thanks to innovative visual tools like the waterfall chart, it’s possibleto identify basic problems with web performance in seconds. Read on to learn about 10 red flags toWhat IS a Waterfall?Get the Most out of this eBook• Before you start reading, go to WebsiteTest.com• Run a report of your own website (it’s free and provides thesame waterfall chart you’ll see used throughout the document)• Bookmark the results page or keep the tab open so you canrefer to it as you learn tips for reading into the chart• Learn about ways to improve performance on your site!Learn about 10 red flagsto look for when testingweb performance. Wepromise you wont have toskip lunch.look for when testing web performance. Wepromise you wont have to skip lunch.First, though, youll need a testing tool. Thebest free tools are WebsiteTest.com (whichYottaa developed) and WebPageTest.org.These tools allow you to run tests on yourwebsite from a variety of locations, browsertypes, and connectivity levels. WebsiteTest.com offers "multivariate testing" with theability to test from multiple locations orbrowsers at once.
3 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsThe IdealBefore we show you how to find everything that’s WRONG in a waterfall, look at the chart below.It’s not the fastest site in the world, but it’s quite good, and it produces a nice looking waterfall.Notice that the assets download in a fairly uniform line, no assets are major performance outliers,and it has relatively few assets in total (40). Even the assets with the longest bars are well withinthe realm of good performance, at a few hundred milliseconds each.
4 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsLook at the very first line in the waterfall chart. If it’s longer than most of the other lines in thechart, that’s not good. It should be very short. Improvements to web infrastructure in the lastdecade have made rapid content delivery the Internet standard. If your “time to last byte,” aka totaldelivery time, is longer than 1 second, consider pursuing a plan to improve it.1. Slow Backend Performance2. Too many AssetsJust some of CNN.com’s 172 assetsWhen you’re looking at your waterfall chart, startscrolling down. Keep going. And going. If your indexfinger gets tired before getting to the bottom of yourwaterfall chart you have too many assets! The mediannumberofassetsonawebsiteis47,thoughsometypesof sites, such as eCommerce sites, may require moreto provide their users a quality experience. However,if your assets number in the hundreds, as some sitesdo, it may be time to consider cutting content oremploying WPO techniques like script concatenationand data URIs to reduce your requests.Click here to view an example of slow backend performanceClick here to view an example of a page with toomany assets
7 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsA sites assets should load roughly in the order of importance. That means content like a companylogo, and above-the-fold images should come first -- not a Twitter widget or a tracking script. Ifanything thats not immediately important to show the visitor is loading ahead of anything that is,order of execution should be adjusted.8. Ordering ProblemsScan the HTTP status column for anything other than “200 OK.” Any time an error occurs it’s amatter of concern since errors can often have ripple effects on performance, aside from the obviousfailure indicated for that one asset. Each case begs investigation.7. ErrorsClick here to view an example of a page with several errorsClick here to view an example of a page with ordering problemsIn this example, widgets and thumbnails loadbefore the marquee page content – degradingthe user experience
9 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsTry it FreeYottaa Site Monitor• Start regularly monitoring your site for performanceproblems with Yottaa’s free Site Monitor account• 24/7 Site Monitoring is always on alert & ready tohelp• See what your users see from any device, anylocation, & any browserTry Yottaa Site Monitor FreeThe tools are free and the time spend is minimal, so give it a shot. Let us know what you find. Ifyoure already a guru of the waterfall chart, tell us: what patterns do you look for most often? Isthere anything youd add to this list?Try it out!Like this eBook?Share it!Managing a Web PerformanceOptimization Project17 Performance Metrics YouShould Care AboutLearn MoreYottaa eBooks