How To: Identify 10 Performance Patterns in 10 Seconds
Analyzing web performance doesn’t have to take long…in fact, it doesn’t have to take much longer than a web page takes to load! Thanks to innovative visual tools like the waterfall chart, it’s possible to identify basic patterns in web performance in seconds. Read on to learn 10 red flags to look for when testing web performance. We promise you wont have to skip lunch.
First, though, you’ll need a testing tool. The best free tools are WebsiteTest.com (which Yottaa developed) and WebPageTest.org. These tools allow you to run tests on your website from a variety of locations, browser types, and connectivity levels. WebsiteTest.com offers multivariate testing with the ability to test from multiple locations or browsers at once.
1. Slow Backend Performance
Look at the very first line in the waterfall chart. If it’s longer than most of the other lines in the chart, that’s not good. It should be very short. Improvements to web infrastructure in the last decade have made rapid content delivery the Internet standard. If your time to last byte, aka total delivery time, is longer than 2 seconds, consider pursuing a plan to improve it.
2. Too many Assets
Just some of CNN.com?s 172 assets
When you’re looking at your waterfall chart, start scrolling down. Keep going. And going. If your index finger gets tired before getting to the bottom of your waterfall chart you have too many assets! The median number of assets on a website is 47, though some types of sites, such as eCommerce sites, may require more to provide their users a quality experience. However, if your assets number in the hundreds, as some sites’ do, it may be time to consider cutting content or employing WPO techniques like script concatenation and data URIs to reduce your requests.
3. “OBA” – One Bad Asset
Here’s a simple one: Look for a long bar in the waterfall. Any asset, be it a JPEG, JavaScript, or an asset served from a third party, can drag down your entire site. There are dozens of possible reasons why an otherwise innocent-looking asset could take seconds and seconds to load, but in the short term the important thing is identifying it and removing or fixing it so that the rest of your site doesn?t suffer.
4. Network issues (DNS and Connection issues)
Look for abnormally long sections of bars that indicate DNS time or connection to the server. (In WebsiteTest.com, this means the blue and green sections of bars.) Long DNS and Connection times indicate issues with the backend delivery. You may notice that these issues crop up most often in third-party assets.
5. Slow Download Time
For the inverse of #4, look for bars that are mostly gray (in WebsiteTest.com) and take more than a few hundred milliseconds to download. In these cases, the backend is working fine, but the asset itself is bogging down the process – usually because it’s heavy. A heavy asset means there’s simply more bytes for the browser to download and render, which takes longer to do. Techniques like GZIP, image compression, and code minification exist for different types of assets that can put your heavy website on a diet.
6. JavaScript Blocking Behavior
Ideally, the waterfall would be a flat diagonal line. You would be able to trace evenly down a waterfall cutting across the starting points for all the assets – load bars. Unfortunately, that’s almost never the case. It’s easy to see where the smooth pattern breaks: there’s a wide left-to-right gap from one line to the next down. This gap indicates that an asset, usually a third party script, activated blocking behavior as it executed, which stalled other asset downloads. This behavior can be overcome by forcing that asset to load asynchronously.
7. Errors
Scan the HTTP response column for any numbers 400 or over. Any time a 400- or 500-level error occurs it’s a matter of concern since errors can often have ripple effects on performance, aside from the obvious failure indicated for that one asset. Each case begs investigation.
8. Ordering Problems
A site’s assets should load roughly in the order of importance. That means content like a company logo, and above-the-fold images should come first — not a Twitter widget or a tracking script. If anything that’s not immediately important to show the visitor is loading ahead of anything that is, order of execution should be adjusted.
9. Chatty 3rd party assets
Some third party assets, such as social media widgets served by Facebook or Twitter servers, can cause problems because they’re “chatty.” This means a number of requests are required in order to load a relatively simple widget or button. If this is the case, it may be best to find a different version of the widget.
Beyond the Waterfall
Aside from the waterfall chart, other visualizations help put together the picture of performance. Page load screen shots and video clips show exactly what you would have seen if you’d accessed the site with the same criteria (location, browser version, etc.) the current test used. These clips can instantly show a lot about the user experience on the site.
10. Long Time to Start Render?
The moment the first visual element shows up on the page is important: it shows the user that the site is real and is on the way. As more time ticks away with nothing visible in the browser, the likelihood of a visitor bouncing away rises steeply.
The median time for something to appear in the browser is around 2.5 seconds, but shoot for better. If it?s much longer than that, there could be a problem with your JavaScript configuration.
Try it out!
The tools are free and the time spend is minimal, so give it a shot. Let us know what you find. If you’re already a guru of the waterfall chart, tell us: what patterns do you look for most often? Is there anything you’d add to this list?
