Web Performance 101 - Gil Givati
Upcoming SlideShare
Loading in...5

Web Performance 101 - Gil Givati






Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.scoop.it 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Web Performance 101 - Gil Givati Web Performance 101 - Gil Givati Presentation Transcript

  • ‫נעים להכיר ...‬‫‪ ‬חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות‬ ‫בכלל ומערכות מבוססות דפדפן בפרט‬‫‪ ‬מנהלי ‪Israel Web Performance Optimization meetup‬‬ ‫‪ ‬נציגי, מטמיעי ומפתחי פתרונות תוכנה בתחומים:‬ ‫‪ ‬האצת אתרים‬ ‫‪ ‬ניטור ואיתור תקלות בזמן אמת‬ ‫‪www.efficens-software.com ‬‬ ‫‪Twitter: efficens ‬‬ ‫‪ :Facebook ‬אפיסנס סופטוור בע"מ‬ ‫‪http://www.meetup.com/wpo-il ‬‬
  • ‫בתוכנית היום‬ 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
  • ‫"הזמן הנתפס על ידי המבקר באתר‬ ‫בין פעולה (כמו לחיצה) עד לתגובה‬ ‫משמעותית"‬‫‪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 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
  • 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
  • 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 שניה מונע הסחת דעת ומאפשרת רצף מחשבתי‬ ‫‪‬‬ ‫01 שניות שומרות על תשומת לב הגולש‬ ‫‪‬‬ ‫8 שניות הוא הזמן הממוצע שלוקח לגולש לקבל החלטה האם‬ ‫‪‬‬ ‫הוא נשאר בדף או עובר למקום אחר‬‫‪Jakob Neilsen. http://www.useit.com/alertbox/response-times.html‬‬
  • 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
  • ‫מרכיבי זמן התגובה‬ ‫קריטי ליישומי‬ ‫0.2 ‪Web‬‬‫‪Server side‬‬ ‫‪Content delivery‬‬ ‫‪Rendering‬‬ ‫מחוץ למסגרת המערכת אבל‬ ‫עדיין באחריותנו‬ ‫%09-08 מהזמן נצרך מחוץ לגבולות השרת‬ ‫91‬
  • Bandwidth & Latency
  • ‫הורדת ‪ 200KB‬בקווי‬ ‫‪1.5Mb/Sec‬‬ ‫אורכת כשנייה‬
  • ‫לא הבטיחו לנו ממשק אחיד, פשוט ורזה ?‬
  • 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
  • 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
  • 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
  • ? ‫מה מודדים‬ ‫• בדיקות מבוססות זמן‬ Time to first byte • Time to first impression • onLoad • Fully loaded time •‫• "ציוני תקן" המבוססים על מתודולוגיות ידועות‬ Yahoo! YSlow • Google Page Speed • dynaTrace AJAX edition •
  •  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
  •  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
  • ? ‫מה חשוב‬http://www.httpArchive.org
  • ? ‫מה חשוב‬http://www.httpArchive.org
  • ‫מהירות טעינה‬ ‫מספר בקשות‬ 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
  • ? ‫רוצים עוד‬ Http KeepAlive • Async JS Load • DOM Elements • CDN •
  • http://www.efficens-software.com/2011/07/understanding_waterfall_charts/
  • 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(
  • https://developers.google.com/pagespeed/
  • ‫על מה להסתכל ?‬
  • http://www.gomez.com/instant-test-pro/
  • What’s the #1cause of slowweb pages?
  • 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 = function(){ document.getElementById("btn").onclick = function(){ //do something };};</script>
  • Before ClickUI Threadtime UI Queue
  • When ClickedUI Threadtime UI Queue UI Update onclick UI Update
  • When ClickedUI Thread UI Updatetime UI Queue onclick Draw down state UI Update
  • When ClickedUI Thread UI Update onclicktime UI Queue UI Update
  • When ClickedUI Thread UI Update onclick UI Updatetime UI Queue Draw up state
  • 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> <p>See ya!</p></body></html>
  • 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
  • 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 UI updates, the longer the page takes to render
  • Technique #1: Load scriptsdynamically
  • 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
  • Downloads no longer blockthe UI thread
  • 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
  • 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);}
  • 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"></script> <p>See ya!</p> <!-- even more markup --></body></html>
  • 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 Similar to dynamic script nodes, but with a guarantee that execution will happen last
  • Timing Note: Although scripts always execute after UI updatescomplete, the order of multiple <script defer> scripts is not guaranteed across browsers
  • Technique #3: Asynchronousscripts
  • <!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>
  • Support for <script async>3.6 7.0 5.0 10 ?
  • 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
  • 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() schedules a functionto be added to the UI queue aftera delay
  • 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-Driven API  Data is serialized going into and out of the worker  No access to DOM or BOM  Separate execution environment
  • ‫כלים - סיכום‬ 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
  •  Books - High Performance Web Sites - Even Faster Web Sites - Website Optimization - Complete Web Monitoring -High Performance JavaScript
  • gil@efficens-software.com 054-2552060 @efficens