More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![Client-side Web Performance Optimization [paper]](https://cdn.slidesharecdn.com/ss_thumbnails/2011-01-18jakob-schroeterclient-side-optimization-110125033543-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Web Performance 101
- 2. What isWeb 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
- 3. Efficens Software www.efficens-software.com Twitter: efficens Facebook
- 5. Stephan Thair, Seriticonsulting
- 6.
- 8. “Brain wave analysisfrom 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
- 9. 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
- 10.
- 11.
- 12.
- 14. Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
- 17. Web performance anatomy Latency HTTP AJAX/XHR IE Firefox Chrome Browser Internet Server Safari Opera Images CSS JavaScript Cache Flash Parsing DNS 3rd-party Layouting Server servers Rendering
- 18. Web 2.0 Server side Content delivery Rendering - 18
- 20.
- 21.
- 23. It’s a Multi-BrowserWorld: Different for Each Customer Base Global 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
- 24. Load Time Perceived Render Seconds Source: Gomez Real-User Monitoring Real users around the world 466 million page measurements Broadband connections only 200+ sites
- 26. Fragmented, ra • Who is #1 today? Tomorrow? pidly-changing 7 market • Who is #1 with your customers? 6 8 Different • Number of parallel connections operational • JavaScript processing characteristics • Etc. Browser Processing • Percentage of total moving to the Network browser response time Infrastructure • Performance Major impact on • Functionality user experience • Appearance
- 28. • Time to first byte • Time to first impression • onLoad • Fully loaded time • • Yahoo! YSlow • Google Page Speed • dynaTrace AJAX edition •
- 29. 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 & Cacheable http://developer.yahoo.com/yslow/help/#guidelines
- 30. 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 dimensions http://code.google.com/speed/page-speed/docs/rules_intro.html Use efficient CSS selectors
- 31.
- 32.
- 33. 1.Reduce Page Size(<500Kb) 2.Enable (Gzip) Compression 3.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
- 36. Http KeepAlive • Async JS Load • DOM Elements • CDN •
- 48.
- 56.
- 57.
- 58. - Google PageSpeed 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/ Let's Make the Web Faster http://code.google.com/intl/en-EN/speed/tools.html
- 59. Books - High Performance Web Sites - Even Faster Web Sites - Website Optimization - Complete Web Monitoring -High Performance JavaScript
- 61. gil@efficens-software.com 054-2552060 @efficens
Editor's Notes
- #22 מחקר שהתפרסם לפני כחודש מראה שמהירות ההורדה הממוצעת בישראל היא 300KB, מה שאומר שבשביל לעמוד בזמן של 3 שניות צריך להוריד לא יותר מ-1.2 מ"ב, אבל זה לא כולל זמן ציור והפעלת סקריפטים.
- #26 Script:script: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other scripts in the page.Script:stylesheet: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other stylesheets in the page.Script:image: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other images in the page.Script:iframe: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other iframes in the page.Script:async: HTML5 introduced the async attribute for script tags. This allows page authors to specify that their scripts can safely load in the background, independent of the other scripts in the page. This test determines if the browser supports the async attribute.Css-inline script: A lesser known performance problem is the problems caused when a stylesheet is followed by an inline script block. If a browser doesn't block when downloading stylesheets (as measured by the previous test), then a stylesheet followed by an image could both be downloaded in parallel. But suppose an inline script block was placed between the stylesheet's LINK tag and the image IMG tag. The result, for some browsers, is that the image isn't downloaded until the stylesheet finishes. The reason is that the image download must occur after the inline script block is executed (in case the script block itself inserts images or in some other way manipulates the DOM), and the inline script block doesn't execute until after the stylesheet is downloaded and parsed (in case the inline script block depends on CSS rules in the stylesheet). It's important to preserve the order of the stylesheet rules being applied to the page, followed by executing the inline script block, but there's no reason other resources shouldn't be downloaded in parallel and not applied to the page until after the inline script block is executed. A subtlety of this test is that if the test is determined to be a failure if the inline script is executed before the stylesheet is done downloading - although this is faster it could lead to unexpected behavior.