Web Performance 101

 What is Web Performance How does Web Performance affects our bottom line The web Performance building blocks Knowing your audience: understanding Browser behaviors Measuring Performance using YSlow and Google PageSpeed Understanding Waterfalls Knowing Fiddler/HttpWatch Working with WebPageTest Working with DynaTrace Ajax Edition

Efficens Software      www.efficens-software.com  Twitter: efficens  Facebook 

Stephan Thair, Seriti consulting

http://velocityconf.com/velocity2010/public/schedule/detail/13019

“Brain wave analysis from the experiment revealed that participants had to concentrate up to 50% more when using badly performing websites, while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods.http://www.ca.com/Files/SupportingPieces/final_webstr ess_survey_report_229296.pdf

Performanc e improvemen 6 secs 8 secs 2 secs 4 secs t (seconds) -8% - - -25% - -33% Percentage -38% change in - page abandonme - nt - - -urce: Gomez 2010 Study of 500 Million End-User Interactions Across 200+ Web Sites

http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/

   Jakob Neilsen. http://www.useit.com/alertbox/response-times.html

Web performance anatomy Latency HTTP AJAX/XHR IE FirefoxChrome Browser Internet Server Safari Opera Images CSS JavaScript Cache Flash Parsing DNS 3rd-party Layouting Server servers Rendering

Web 2.0Server side Content delivery Rendering - 18

Bandwidth & Latency

200KB1.5Mb/Sec

It’s a Multi-Browser World: Different for Each Customer BaseGlobal Browser Market Share Jan 2010 - Jan 2011 % IE Firefox IE IE Firefox Firefox Chrome Chrome Chrome Safari Safari Chrome Chrome Opera Firefox Opera Opera Chrome Firefox Opera Source: http://arstechnica.com/web/news/2011/02/chrome-takes-10-usage-share-ie-continues-to-haemorrhage.ars; http://gs.statcounter.com/#browser_version-ww-monthly-201001-201101

Load Time Perceived RenderSeconds Source: Gomez Real-User Monitoring Real users around the world 466 million page measurements Broadband connections only 200+ sites

Fragmented, ra • Who is #1 today? Tomorrow?pidly-changing 7market • Who is #1 with your customers? 6 8Different • Number of parallel connectionsoperational • JavaScript processingcharacteristics • Etc.  BrowserProcessing • Percentage of totalmoving to the  Networkbrowser response time  Infrastructure • PerformanceMajor impact on • Functionalityuser experience • Appearance

• Time to first byte •Time to first impression • onLoad • Fully loaded time • • Yahoo! YSlow • Google Page Speed •dynaTrace AJAX edition •

Minimize HTTP Requests Remove Duplicate Scripts Use a Content Delivery Network Configure ETags Add an Expires or a Cache- Make AJAX Cacheable Control Header Use GET for AJAX Requests Gzip Components Reduce the Number of DOM Put StyleSheets at the Top Elements Put Scripts at the Bottom No 404s Avoid CSS Expressions Reduce Cookie Size Make JavaScript and CSS Use Cookie-Free Domains for External Components Reduce DNS Lookups Avoid Filters Minify JavaScript and CSS Do Not Scale Images in HTML Avoid Redirects Make favicon.ico Small & Cacheablehttp://developer.yahoo.com/yslow/help/#guidelines

Avoid bad requests Minimize redirects Avoid CSS expressions Optimize images Combine external CSS Optimize the order of styles and scripts Combine external JavaScript Parallelize downloads across Defer loading of JavaScript hostnames Enable compression Put CSS in the document head Leverage browser caching Remove unused CSS Leverage proxy caching Serve resources from a consistent Minify CSS URL Minify HTML Serve scaled images Minify JavaScript Serve static content from a cookieless domain Minimize request size Specify a character set early Minimize DNS lookups Specify image dimensionshttp://code.google.com/speed/page-speed/docs/rules_intro.html Use efficient CSS selectors

http://www.httpArchive.org

1.Reduce Page Size (<500Kb)2.Enable (Gzip) Compression3.Reduce the number of roundtrips (<40 per page…)4.HTTP Cache Headers (cache long & prosper!)5.Structure the page (to improve render & download) a) CSS First b) Javascript last

Http KeepAlive •Async JS Load •DOM Elements • CDN •

http://www.efficens-software.com/2011/07/understanding_waterfall_charts/

https://developers.google.com/pagespeed/

http://www.gomez.com/instant-test-pro/

- Google Page Speed Tools Family http://code.google.com/speed/page-speed/ dynaTrace AJAX Edition http://ajax.dynatrace.com/ajax/en/ Yahoo! YSlow http://developer.yahoo.com/yslow/ WebPagetest http://www.webpagetest.org/ Show Slow http://www.showslow.com/ Lets Make the Web Faster http://code.google.com/intl/en-EN/speed/tools.html

 Books - High Performance Web Sites - Even Faster Web Sites - Website Optimization - Complete Web Monitoring -High Performance JavaScript

gil@efficens-software.com 054-2552060 @efficens

Web Performance 101

by Uri Lavi

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Web Performance 101 Presentation Transcript