‫נעים להכיר ...‬‫‪ ‬חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות‬                     ‫בכלל ומערכות מבוססות דפדפן ב...
‫בתוכנית היום‬ What is Web Performance How does Web Performance affects our bottom line The web Performance building bl...
‫"הזמן הנתפס על ידי המבקר באתר‬    ‫בין פעולה (כמו לחיצה) עד לתגובה‬             ‫משמעותית"‬‫‪Stephan Thair, Seriti consul...
‫תפיסת הזמן‬http://velocityconf.com/velocity2010/public/schedule/detail/13019
‫איטיות והמוח שלנו‬“Brain wave analysis from the  experiment       revealed  that  participants had to concentrate  up to ...
10     Performanc               e            5    improvemen                                                              ...
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/
‫מהם ביצועים טובים ?‬               ‫1.0 שניות נותן תחושה של תגובה מיידית‬                ‫‪‬‬        ‫1 שניה מונע הסחת ד...
Web performance anatomy                                        Latency                        HTTP AJAX/XHR      IE Firefo...
‫מרכיבי זמן התגובה‬                                             ‫קריטי ליישומי‬                                           ...
Bandwidth & Latency
‫הורדת ‪ 200KB‬בקווי‬     ‫‪1.5Mb/Sec‬‬    ‫אורכת כשנייה‬
‫לא הבטיחו לנו ממשק אחיד, פשוט ורזה ?‬
It’s a Multi-Browser World: Different for Each                             Customer BaseSource: http://arstechnica.com/web...
Load Time       Perceived Render          25          20          15Seconds          10           5           0           ...
Fragmented,        • Who is #1 today? Tomorrow?rapidly-changing                                                      7mark...
? ‫מה מודדים‬                     ‫• בדיקות מבוססות זמן‬                  Time to first byte •          Time to first impr...
 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
‫מהירות טעינה‬   ‫מספר בקשות‬   YSLOW ‫ציון‬   PS ‫ציון‬    ‫שם האתר‬   2.258           4            94         77      Ro...
? ‫רוצים עוד‬              Http KeepAlive   •              Async JS Load    •              DOM Elements     •             ...
http://www.efficens-software.com/2011/07/understanding_waterfall_charts/
Webmaster Tools           Google Analytics What is measured       Time from Initial Page Request to “Document             ...
https://developers.google.com/pagespeed/
‫על מה להסתכל ?‬
http://www.gomez.com/instant-test-pro/
What’s the #1cause of slowweb pages?
JAVASCRIPT!
JavaScript performance         directlyaffects user experience
The browser UI thread is responsible forboth UI updates and JavaScript execution           Only one can happen at a time
<button id="btn" style="font-size: 30px; padding: 0.5em1em">Click Me</button><script type="text/javascript">window.onload ...
Before ClickUI Threadtime                  UI Queue
When ClickedUI Threadtime                  UI Queue                    UI Update                    onclick               ...
When ClickedUI Thread UI Updatetime                          UI Queue                            onclick        Draw down ...
When ClickedUI Thread UI Update   onclicktime                       UI Queue                         UI Update
When ClickedUI Thread UI Update   onclick       UI Updatetime                                       UI Queue              ...
No UI updates whileJavaScript is executing
Loadtime TechniquesDont let JavaScript interfere with page load performance
<!doctype html><html><head>    <title>Example</title></head><body>    <p>Hello world!</p>    <script src="foo.js"></script...
ResultUI Thread Hello world!   Download   Parse   Run   See ya!time  The UI thread needs to wait for the script to  downlo...
Translation:The page doesnt render whileJavaScript is downloading,parsing, or executing duringpage load
ResultUI Thread JavaScript   UI Update   JavaScript   UI Update   JavaScripttime  The more scripts to download in between ...
Technique #1: Load scriptsdynamically
Basic Techniquevar script = document.createElement("script"),    body;script.type = "text/javascript";script.src = "foo.js...
Downloads no longer blockthe UI thread
Using Dynamic ScriptsUI Thread Hello world!   See ya!            Run   UI Updatetime                Download   ParseOnly c...
function loadScript(url, callback){var script = document.createElement("script"),    body = document.body;script.type = "t...
UsageloadScript("foo.js", function(){      alert("Loaded!");});
Timing Note:Script execution beginsimmediately after downloadand parse – timing ofexecution is not guaranteed
Technique #2: Defer scripts
<!doctype html><html><head>    <title>Example</title></head><body>    <p>Hello world!</p>    <script defer src="foo.js"></...
Support for <script defer>3.5   7.0   5.0    4.0       ?
Deferred scripts begin todownload immediately,but dont execute until all UIupdates complete
Using <script defer>UI Thread Hello world!   See ya!    More UI   More UI   Runtime                Download     Parse   Si...
Timing Note:   Although scripts always   execute after UI updatescomplete, the order of multiple  <script defer> scripts i...
Technique #3: Asynchronousscripts
<!doctype html><html><head>    <title>Example</title></head><body>    <p>Hello world!</p>    <script async src="foo.js"></...
Support for <script async>3.6   7.0   5.0    10    ?
Using <script async>UI Thread Hello world!   See ya!            Run   UI Updatetime                Download   ParseDownloa...
Note:Order of execution is explicitly      not preserved for   asynchronous scripts
Timers
//create a new timer and delay by 500ms  setTimeout(function(){      //code to execute here  }, 500);setTimeout() schedule...
Web Workers
Support for Web Workers3.5   4.0   4.0   10 10.6
Web Workers Asynchronous JavaScript execution Execution happens outside the UI thread    Doesn’t block UI updates Data...
‫כלים - סיכום‬ Google Page Speed Tools Family       http://code.google.com/speed/page-speed/ dynaTrace AJAX Edition     ...
 Books    - High Performance Web Sites    - Even Faster Web Sites    - Website Optimization    - Complete Web Monitoring ...
gil@efficens-software.com       054-2552060         @efficens
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Upcoming SlideShare
Loading in...5
×

Web Performance 101 - Gil Givati

841

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
841
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web Performance 101 - Gil Givati"

  1. 1. ‫נעים להכיר ...‬‫‪ ‬חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות‬ ‫בכלל ומערכות מבוססות דפדפן בפרט‬‫‪ ‬מנהלי ‪Israel Web Performance Optimization meetup‬‬ ‫‪ ‬נציגי, מטמיעי ומפתחי פתרונות תוכנה בתחומים:‬ ‫‪ ‬האצת אתרים‬ ‫‪ ‬ניטור ואיתור תקלות בזמן אמת‬ ‫‪www.efficens-software.com ‬‬ ‫‪Twitter: efficens ‬‬ ‫‪ :Facebook ‬אפיסנס סופטוור בע"מ‬ ‫‪http://www.meetup.com/wpo-il ‬‬
  2. 2. ‫בתוכנית היום‬ 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 Working with WebPageTest Working with DynaTrace Ajax Edition JavaScript and you
  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. 10 Performanc e 5 improvemen 6 secs 8 secs 2 secs 4 secs t (seconds) 0 -5 -8% -10 -25% -15 -33% Percentage change in -20 -38% page abandonme -25 nt -30 -35 -40urce: 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. ‫מהם ביצועים טובים ?‬ ‫1.0 שניות נותן תחושה של תגובה מיידית‬ ‫‪‬‬ ‫1 שניה מונע הסחת דעת ומאפשרת רצף מחשבתי‬ ‫‪‬‬ ‫01 שניות שומרות על תשומת לב הגולש‬ ‫‪‬‬ ‫8 שניות הוא הזמן הממוצע שלוקח לגולש לקבל החלטה האם‬ ‫‪‬‬ ‫הוא נשאר בדף או עובר למקום אחר‬‫‪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. ‫מרכיבי זמן התגובה‬ ‫קריטי ליישומי‬ ‫0.2 ‪Web‬‬‫‪Server side‬‬ ‫‪Content delivery‬‬ ‫‪Rendering‬‬ ‫מחוץ למסגרת המערכת אבל‬ ‫עדיין באחריותנו‬ ‫%09-08 מהזמן נצרך מחוץ לגבולות השרת‬ ‫91‬
  13. 13. Bandwidth & Latency
  14. 14. ‫הורדת ‪ 200KB‬בקווי‬ ‫‪1.5Mb/Sec‬‬ ‫אורכת כשנייה‬
  15. 15. ‫לא הבטיחו לנו ממשק אחיד, פשוט ורזה ?‬
  16. 16. It’s a Multi-Browser World: Different for Each Customer BaseSource: 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
  17. 17. Load Time Perceived Render 25 20 15Seconds 10 5 0 Source: Gomez Real-User Monitoring Real users around the world 466 million page measurements Broadband connections only 200+ sites
  18. 18. Fragmented, • Who is #1 today? Tomorrow?rapidly-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
  19. 19. ? ‫מה מודדים‬ ‫• בדיקות מבוססות זמן‬ Time to first byte • Time to first impression • onLoad • Fully loaded time •‫• "ציוני תקן" המבוססים על מתודולוגיות ידועות‬ Yahoo! YSlow • Google Page Speed • dynaTrace AJAX edition •
  20. 20.  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
  21. 21.  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
  22. 22. ? ‫מה חשוב‬http://www.httpArchive.org
  23. 23. ? ‫מה חשוב‬http://www.httpArchive.org
  24. 24. ‫מהירות טעינה‬ ‫מספר בקשות‬ YSLOW ‫ציון‬ PS ‫ציון‬ ‫שם האתר‬ 2.258 4 94 77 Roninsight 8.042 8 92 88 Roninsight (WP) 4.05 90 74 76 ionroad 22.856 149 70 64 ELAL 13.29 53 73 83 rompr
  25. 25. ? ‫רוצים עוד‬ Http KeepAlive • Async JS Load • DOM Elements • CDN •
  26. 26. http://www.efficens-software.com/2011/07/understanding_waterfall_charts/
  27. 27. Webmaster Tools Google Analytics What is measured Time from Initial Page Request to “Document Complete” How it’s measured Google Toolbar Navigation Timing + Google Toolbar on IEBrowsers measured Firefox 2-4 IE 9+ IE 6-9 Chrome 6+ with Google Toolbar & Firefox 7+ PageRank Enabled Android 4+ IE 6-8 with Google Toolbar Sampling rate All Clients (assumed) 1% of clients, max 10K/dayAveraging techniques 7-day running weighted 30-day simple average average (popular pages (average the individual matter more) page’s average load times(
  28. 28. https://developers.google.com/pagespeed/
  29. 29. ‫על מה להסתכל ?‬
  30. 30. http://www.gomez.com/instant-test-pro/
  31. 31. What’s the #1cause of slowweb pages?
  32. 32. JAVASCRIPT!
  33. 33. JavaScript performance directlyaffects user experience
  34. 34. The browser UI thread is responsible forboth UI updates and JavaScript execution Only one can happen at a time
  35. 35. <button id="btn" style="font-size: 30px; padding: 0.5em1em">Click Me</button><script type="text/javascript">window.onload = function(){ document.getElementById("btn").onclick = function(){ //do something };};</script>
  36. 36. Before ClickUI Threadtime UI Queue
  37. 37. When ClickedUI Threadtime UI Queue UI Update onclick UI Update
  38. 38. When ClickedUI Thread UI Updatetime UI Queue onclick Draw down state UI Update
  39. 39. When ClickedUI Thread UI Update onclicktime UI Queue UI Update
  40. 40. When ClickedUI Thread UI Update onclick UI Updatetime UI Queue Draw up state
  41. 41. No UI updates whileJavaScript is executing
  42. 42. Loadtime TechniquesDont let JavaScript interfere with page load performance
  43. 43. <!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p></body></html>
  44. 44. ResultUI Thread Hello world! Download Parse Run See ya!time The UI thread needs to wait for the script to download, parse, and run before continuing
  45. 45. Translation:The page doesnt render whileJavaScript is downloading,parsing, or executing duringpage load
  46. 46. ResultUI Thread JavaScript UI Update JavaScript UI Update JavaScripttime The more scripts to download in between UI updates, the longer the page takes to render
  47. 47. Technique #1: Load scriptsdynamically
  48. 48. Basic Techniquevar script = document.createElement("script"), body;script.type = "text/javascript";script.src = "foo.js";body.insertBefore(script, body.firstChild);Dynamically loaded scripts are non-blocking
  49. 49. Downloads no longer blockthe UI thread
  50. 50. Using Dynamic ScriptsUI Thread Hello world! See ya! Run UI Updatetime Download ParseOnly code execution happens on the UI thread, which means less blocking of UI updates
  51. 51. function loadScript(url, callback){var script = document.createElement("script"), body = document.body;script.type = "text/javascript";if (script.readyState){ //IE <= 8 script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } };} else { //Others script.onload = function(){ callback(); };}script.src = url;body.insertBefore(script, body.firstChild);}
  52. 52. UsageloadScript("foo.js", function(){ alert("Loaded!");});
  53. 53. Timing Note:Script execution beginsimmediately after downloadand parse – timing ofexecution is not guaranteed
  54. 54. Technique #2: Defer scripts
  55. 55. <!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p> <script defer src="foo.js"></script> <p>See ya!</p> <!-- even more markup --></body></html>
  56. 56. Support for <script defer>3.5 7.0 5.0 4.0 ?
  57. 57. Deferred scripts begin todownload immediately,but dont execute until all UIupdates complete
  58. 58. Using <script defer>UI Thread Hello world! See ya! More UI More UI Runtime Download Parse Similar to dynamic script nodes, but with a guarantee that execution will happen last
  59. 59. Timing Note: Although scripts always execute after UI updatescomplete, the order of multiple <script defer> scripts is not guaranteed across browsers
  60. 60. Technique #3: Asynchronousscripts
  61. 61. <!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p> <script async src="foo.js"></script> <p>See ya!</p> <!-- even more markup --></body></html>
  62. 62. Support for <script async>3.6 7.0 5.0 10 ?
  63. 63. Using <script async>UI Thread Hello world! See ya! Run UI Updatetime Download ParseDownload begins immediately and execution is slotted in at first available spot
  64. 64. Note:Order of execution is explicitly not preserved for asynchronous scripts
  65. 65. Timers
  66. 66. //create a new timer and delay by 500ms setTimeout(function(){ //code to execute here }, 500);setTimeout() schedules a functionto be added to the UI queue aftera delay
  67. 67. Web Workers
  68. 68. Support for Web Workers3.5 4.0 4.0 10 10.6
  69. 69. Web Workers Asynchronous JavaScript execution Execution happens outside the UI thread  Doesn’t block UI updates Data-Driven API  Data is serialized going into and out of the worker  No access to DOM or BOM  Separate execution environment
  70. 70. ‫כלים - סיכום‬ 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
  71. 71.  Books - High Performance Web Sites - Even Faster Web Sites - Website Optimization - Complete Web Monitoring -High Performance JavaScript
  72. 72. gil@efficens-software.com 054-2552060 @efficens
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×