Descobrindo problemas de performance em 10 segundos
Upcoming SlideShare
Loading in...5
×
 

Descobrindo problemas de performance em 10 segundos

on

  • 566 views

Performance

Performance

Statistics

Views

Total Views
566
Views on SlideShare
564
Embed Views
2

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 2

https://www.rebelmouse.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Descobrindo problemas de performance em 10 segundos Descobrindo problemas de performance em 10 segundos Document Transcript

  • 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
  • 5 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsHere’s a simple one: Look for an extremely 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 dozensof possible reasons why an otherwise innocent-looking asset could take seconds and seconds toload, but in the short term the important thing is identifying it and removing or fixing it so that therest of your site doesn’t suffer.3. “OBA” - One Bad AssetLook for abnormally long sections of bars that indicate DNStime or connection to the server. (In WebsiteTest.com, thismeans the blue and green sections of bars.)Long DNS and Connection times indicate issues with thebackend delivery. You may notice that these issues crop upmost often in third-party assets.4. Network issues (DNS and Connection issues)Click here to view an example of a page with “one bad asset”Click here to view an example of a pagewith a long initial DNS timeClick here to view an example of a page with along connection times
  • 6 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsFor the inverse of #4, look for bars that are mostlygray (in WebsiteTest.com) and take more than a fewhundredmillisecondstodownload. Inthesecases,thebackend is working fine, but the asset itself is boggingdown the process – usually because it’s heavy. Aheavy asset means there’s simply more bytes for thebrowser to download and render, which takes longerto do. Techniques like GZIP, image compression, andcode minification exist for different types of assetsthat can put your heavy website on a diet.5. Slow Download TimeIdeally, the waterfall would be a flat diagonal line. You would be able to trace evenly down a waterfallcutting across the starting points for all the assets’ load bars. Unfortunately, thats almost never thecase. It’s easy to see where the smooth pattern breaks: there’s a left-to-right gap from one lineto the next down. This gap indicates that an asset, usually a third party script, activated blockingbehavior as it executed, which stalled other asset downloads. This behavior can be overcome byforcing that asset to load asynchronously (if JavaScript).6. Third Party Asset Blocking BehaviorClick here to view an example of a site with third-party asset blocking behavior(click “show 50 more requests” at the bottom until you get to the very end of the waterfall)
  • 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
  • 8 www.yottaa.comHow To ID 10 Web Performance Problems in 10 SecondsSome third party assets, such as social media widgets served by Facebook or Twitter, can causeproblems because they’re “chatty.” This means a number of requests are required in order to loada relatively simple widget or button. If this is the case, it may be best to find a different version ofthe widget.9. Chatty 3rd Party Assets10. Long “Time to Start Render”The moment the first visual element shows up on the page is important: it shows the user thatthe site is real and is on the way. As more time ticks away with nothing visible in the browser, thelikelihood 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.Click here to view an example of a site with chatty third party assetsClick here to view an example of a site with a long Time to Start Render
  • 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