Web Performance 101 - Gil Givati
1 like717 views
The document discusses improving web performance and optimization. It provides an overview of key performance metrics such as time to first byte, time to first impression, onLoad time and fully loaded time. It also discusses tools for measuring performance like Yahoo! YSlow and Google PageSpeed which provide guidelines and scores on items that impact performance. Overall page speed, number of requests, YSlow and PageSpeed scores are important metrics to consider.
Web Performance 101 - Gil Givati
- 2. נעים להכיר ... חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות בכלל ומערכות מבוססות דפדפן בפרט מנהלי Israel Web Performance Optimization meetup נציגי, מטמיעי ומפתחי פתרונות תוכנה בתחומים: האצת אתרים ניטור ואיתור תקלות בזמן אמת www.efficens-software.com Twitter: efficens :Facebook אפיסנס סופטוור בע"מ http://www.meetup.com/wpo-il
- 3. בתוכנית היום 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
- 5. "הזמן הנתפס על ידי המבקר באתר בין פעולה (כמו לחיצה) עד לתגובה משמעותית" Stephan Thair, Seriti consulting
- 8. איטיות והמוח שלנו “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
- 9. 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 -40 urce: Gomez 2010 Study of 500 Million End-User Interactions Across 200+ Web Sites
- 14. מהם ביצועים טובים ? 1.0 שניות נותן תחושה של תגובה מיידית 1 שניה מונע הסחת דעת ומאפשרת רצף מחשבתי 01 שניות שומרות על תשומת לב הגולש 8 שניות הוא הזמן הממוצע שלוקח לגולש לקבל החלטה האם הוא נשאר בדף או עובר למקום אחר Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
- 18. 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
- 19. מרכיבי זמן התגובה קריטי ליישומי 0.2 Web Server side Content delivery Rendering מחוץ למסגרת המערכת אבל עדיין באחריותנו %09-08 מהזמן נצרך מחוץ לגבולות השרת 91
- 22. הורדת 200KBבקווי 1.5Mb/Sec אורכת כשנייה
- 23. לא הבטיחו לנו ממשק אחיד, פשוט ורזה ?
- 24. It’s a Multi-Browser World: Different for Each Customer Base 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
- 25. Load Time Perceived Render 25 20 15 Seconds 10 5 0 Source: Gomez Real-User Monitoring Real users around the world 466 million page measurements Broadband connections only 200+ sites
- 27. Fragmented, • Who is #1 today? Tomorrow? rapidly-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
- 29. ? מה מודדים • בדיקות מבוססות זמן Time to first byte • Time to first impression • onLoad • Fully loaded time • • "ציוני תקן" המבוססים על מתודולוגיות ידועות Yahoo! YSlow • Google Page Speed • dynaTrace AJAX edition •
- 30. 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
- 31. 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
- 35. מהירות טעינה מספר בקשות 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
- 37. ? רוצים עוד Http KeepAlive • Async JS Load • DOM Elements • CDN •
- 52. 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 IE Browsers 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/day Averaging techniques 7-day running weighted 30-day simple average average (popular pages (average the individual matter more) page’s average load times(
- 57. על מה להסתכל ?
- 59. What’s the #1 cause of slow web pages?
- 60. JAVASCRIPT!
- 61. JavaScript performance directly affects user experience
- 62. The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
- 63. <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ //do something }; }; </script>
- 64. Before Click UI Thread time UI Queue
- 65. When Clicked UI Thread time UI Queue UI Update onclick UI Update
- 66. When Clicked UI Thread UI Update time UI Queue onclick Draw down state UI Update
- 67. When Clicked UI Thread UI Update onclick time UI Queue UI Update
- 68. When Clicked UI Thread UI Update onclick UI Update time UI Queue Draw up state
- 69. No UI updates while JavaScript is executing
- 70. Loadtime Techniques Don't let JavaScript interfere with page load performance
- 71. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p> </body> </html>
- 72. Result UI 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
- 73. Translation: The page doesn't render while JavaScript is downloading, parsing, or executing during page load
- 74. Result UI Thread JavaScript UI Update JavaScript UI Update JavaScript time The more scripts to download in between UI updates, the longer the page takes to render
- 75. Technique #1: Load scripts dynamically
- 76. Basic Technique var script = document.createElement("script"), body; script.type = "text/javascript"; script.src = "foo.js"; body.insertBefore(script, body.firstChild); Dynamically loaded scripts are non-blocking
- 77. Downloads no longer block the UI thread
- 78. Using Dynamic Scripts UI Thread Hello world! See ya! Run UI Update time Download Parse Only code execution happens on the UI thread, which means less blocking of UI updates
- 79. 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); }
- 80. Usage loadScript("foo.js", function(){ alert("Loaded!"); });
- 81. Timing Note: Script execution begins immediately after download and parse – timing of execution is not guaranteed
- 82. Technique #2: Defer scripts
- 83. <!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>
- 84. Support for <script defer> 3.5 7.0 5.0 4.0 ?
- 85. Deferred scripts begin to download immediately, but don't execute until all UI updates complete
- 86. Using <script defer> UI Thread Hello world! See ya! More UI More UI Run time Download Parse Similar to dynamic script nodes, but with a guarantee that execution will happen last
- 87. Timing Note: Although scripts always execute after UI updates complete, the order of multiple <script defer> scripts is not guaranteed across browsers
- 89. <!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>
- 90. Support for <script async> 3.6 7.0 5.0 10 ?
- 91. Using <script async> UI Thread Hello world! See ya! Run UI Update time Download Parse Download begins immediately and execution is slotted in at first available spot
- 92. Note: Order of execution is explicitly not preserved for asynchronous scripts
- 93. Timers
- 94. //create a new timer and delay by 500ms setTimeout(function(){ //code to execute here }, 500); setTimeout() schedules a function to be added to the UI queue after a delay
- 95. Web Workers
- 97. Support for Web Workers 3.5 4.0 4.0 10 10.6
- 98. 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
- 99. כלים - סיכום 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/ Let's Make the Web Faster http://code.google.com/intl/en-EN/speed/tools.html
- 100. Books - High Performance Web Sites - Even Faster Web Sites - Website Optimization - Complete Web Monitoring -High Performance JavaScript
- 102. gil@efficens-software.com 054-2552060 @efficens