Web Performance 101

  • 933 views
Uploaded on

By Gil Givati …

By Gil Givati
IL Tech Talks at PicScout

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
933
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • מחקר שהתפרסם לפני כחודש מראה שמהירות ההורדה הממוצעת בישראל היא 300KB, מה שאומר שבשביל לעמוד בזמן של 3 שניות צריך להוריד לא יותר מ-1.2 מ"ב, אבל זה לא כולל זמן ציור והפעלת סקריפטים.
  • 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.

Transcript

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