 What is Web Performance How does Web Performance affects our bottom line The web Performance building blocks Knowing ...
Efficens Software                                                                                                       ...
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 us...
Performanc               e    improvemen                                                                      6 secs   8 s...
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
                                                                                                                        ...
Web performance anatomy                                        Latency                        HTTP AJAX/XHR      IE Firefo...
Web 2.0Server side   Content delivery       Rendering                                 -                                   ...
Bandwidth & Latency
200KB1.5Mb/Sec
It’s a Multi-Browser World: Different for Each                                Customer BaseGlobal Browser Market Share    ...
Load Time       Perceived RenderSeconds          Source: Gomez Real-User Monitoring             Real users around the worl...
Fragmented, ra    • Who is #1 today? Tomorrow?pidly-changing                                                       7market...
•       Time to first byte •Time to first impression •                 onLoad •      Fully loaded time •                  ...
Minimize HTTP Requests                         Remove Duplicate Scripts     Use a Content Delivery Network                ...
Avoid bad requests                                        Minimize redirects      Avoid CSS expressions                   ...
http://www.httpArchive.org
http://www.httpArchive.org
1.Reduce Page Size (<500Kb)2.Enable (Gzip) Compression3.Reduce the number of roundtrips (<40 per page…)4.HTTP Cache Header...
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...
 Books    - High Performance Web Sites    - Even Faster Web Sites    - Website Optimization    - Complete Web Monitoring ...
gil@efficens-software.com       054-2552060         @efficens
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Web Performance 101
Upcoming SlideShare
Loading in...5
×

Web Performance 101

1,167

Published on

By Gil Givati
IL Tech Talks at PicScout

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,167
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • מחקר שהתפרסם לפני כחודש מראה שמהירות ההורדה הממוצעת בישראל היא 300KB, מה שאומר שבשביל לעמוד בזמן של 3 שניות צריך להוריד לא יותר מ-1.2 מ&quot;ב, אבל זה לא כולל זמן ציור והפעלת סקריפטים.
  • 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&apos;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&apos;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&apos;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&apos;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&apos;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&apos;s LINK tag and the image IMG tag. The result, for some browsers, is that the image isn&apos;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&apos;t execute until after the stylesheet is downloaded and parsed (in case the inline script block depends on CSS rules in the stylesheet). It&apos;s important to preserve the order of the stylesheet rules being applied to the page, followed by executing the inline script block, but there&apos;s no reason other resources shouldn&apos;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.
  • Web Performance 101

    1. 1.  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
    2. 2. Efficens Software      www.efficens-software.com  Twitter: efficens  Facebook 
    3. 3. Stephan Thair, Seriti consulting
    4. 4. http://velocityconf.com/velocity2010/public/schedule/detail/13019
    5. 5. “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
    6. 6. 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
    7. 7. http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
    8. 8. http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
    9. 9. http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
    10. 10.    Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
    11. 11. 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
    12. 12. Web 2.0Server side Content delivery Rendering - 18
    13. 13. Bandwidth & Latency
    14. 14. 200KB1.5Mb/Sec
    15. 15. 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
    16. 16. Load Time Perceived RenderSeconds Source: Gomez Real-User Monitoring Real users around the world 466 million page measurements Broadband connections only 200+ sites
    17. 17. 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
    18. 18. • Time to first byte •Time to first impression • onLoad • Fully loaded time • • Yahoo! YSlow • Google Page Speed •dynaTrace AJAX edition •
    19. 19. 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
    20. 20. 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
    21. 21. http://www.httpArchive.org
    22. 22. http://www.httpArchive.org
    23. 23. 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
    24. 24. Http KeepAlive •Async JS Load •DOM Elements • CDN •
    25. 25. http://www.efficens-software.com/2011/07/understanding_waterfall_charts/
    26. 26. https://developers.google.com/pagespeed/
    27. 27. http://www.gomez.com/instant-test-pro/
    28. 28. - 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
    29. 29.  Books - High Performance Web Sites - Even Faster Web Sites - Website Optimization - Complete Web Monitoring -High Performance JavaScript
    30. 30. gil@efficens-software.com 054-2552060 @efficens

    ×