Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CODE MASH 2011
 DEVELOPING HIGH
PERFORMANCE WEB
       APPS
      Timothy Fisher
       Compuware
     January 14, 2011
WHO AM I?

                              Timothy Fisher
                              Technical Consultant
               ...
AGENDA
• Why   Front-end Performance Matters
• Optimize   Page Load
• Responsive   Interfaces
• Loading   and Executing Ja...
AGENDA

• DOM     Scripting
• Tools

• Performance    Monitoring
• Questions


An overview to spark thought and further in...
TRAIL BLAZERS

• Steve   Souders

• Nicholas   Zakas

• Stoyan    Stefanov

• Patrick   Meenan

• Sergey    Chernyshev
Why Front-end
Performance matters
According to Yahoo:
“80% of end-user response time is
spent on the front-end”

According to Steve Souders (Google performa...
Ads
                                     CDN’s




   Services
          Syndicated Content


Integration is happening on ...
OPTIMIZING FRONT END


•   Majority of end user response time spent on front end

•   Easier to optimize front end

•   Ti...
OPTIMIZE PAGE LOAD
PAGE LOAD TIME
              IS IMPORTANT
Page load time is critical to the success of a web site/app
         Google: +50...
BEST PRACTICES
•   Reduce HTTP Requests
    •   reduce overhead of page load

    •   combine javascript and css into less...
BEST PRACTICES
•   Make Pages Cacheable
    •   add expires header to pages

    •   use on all static content

    •   re...
BEST PRACTICES
•   Place Stylesheets at the Top
    •   browser needs style info first to avoid repaints/reflows later
     ...
BEST PRACTICES

•   Minify JavaScript and CSS
    •   save bandwidth / download time

    •   lots of tools to automate th...
BEST PRACTICES
•   Maximize Paralell Downloads
•   Split components across domains

•   each browser limits paralell downl...
CSS SPRITES

•   One image contains
    multiple web images

•   CSS styles used to
    display correct web
    image, i.e...
RESPONSIVE INTERFACES
A SINGLE BROWSER THREAD
SINGLE THREAD
                   IMPLICATIONS
• Single   UI Thread for both UI updates and JavaScript execution

  • only ...
“0.1 second is about the limit for having the user feel
 that a system is reacting instantaneoulsy”
   - Jakob Nielsen, Us...
No limit to how long this can run...
  function processData(items, processor, callback) {
      for (var i=0, len=items.le...
WEB WORKERS

• Commonly     associated with HTML5

• Allow   for asynchronous JavaScript execution

• JS   runs in a seper...
Calling a Web Worker
    var worker = new Worker("worker.js");
    // Watch for messages from the worker
    worker.onmess...
LOADING & EXECUTING
     JAVASCRIPT
WHY JAVASCRIPT?

•   Poorly written JavaScript is the most common reason
    for slow client-side performance

    • Loadi...
TYPICAL JAVASCRIPT
             PLACEMENT
<html>
    <head>
        <link href=”style.css” rel=”stylesheet” type=”text/css...
BETTER JAVASCRIPT
           PLACEMENT
<html>
    <head>
        <link href=”style.css” rel=”stylesheet” type=”text/css”/>...
COMBINE JAVASCRIPT FILES
•   Each script request requires HTTP performance overhead

•   Minimize overhead by combining sc...
MINIFY JAVASCRIPT

• Removes     all unecessary space/comments from your JS files

• Replace   variables with short names

...
NON-BLOCKING LOADS

• AddJavaScript to a page in a way that does not block the
 browser thread

 ‣ Dynamic Script Elements...
DYNAMIC SCRIPT ELEMENTS


• JavaScript
          is downloaded and executed without blocking
 other page processes.

  var...
SCRIPT INJECTION
• Use Ajax to get script
• Can control when script is parsed/executed
• JavaScript must be served from sa...
RECOMMENDED
       NONBLOCKING LOAD

• Include the code necessary to dynamically load the the rest
 of the JS required for...
REAL WORLD USE

• This
     technique is used by many JavaScript libraries including
 YUI and Dojo.

   <script type="text...
OPEN SOURCE JS LOADERS

Lots of libraries available to help with the JS load problem:

         •   ControlJS

         • ...
CONTROLJS


• Progessive   Enhancement is core to ControlJS philosophy

• downloads    scripts asynchronously

• delays   ...
CONTROLJS
                    Async JS Loading
        var cjsscript = document.createElement('script');
        cjsscript...
CONTROLJS

                          Delayed Execution

<script data-cjsexec=false type="text/cjs" data-cjssrc="jquery.min...
LABJS

                   Async JS Loading


<script src="LAB.js"></script>




Load these scripts asynchronously:
$LAB.sc...
SUMMARY

• Browser    UI and JS share a single thread

• Code  execution blocks other browser processes such as UI
 painti...
DATA ACCESS
ACCESSING DATA
How you store and access data can have a significant
impact on performance...

         JavaScript Scope Cha...
SCOPE CHAIN

Bad (deeper scope chain referencing repeatedly)
function innerHTMLLoop() {
    document.getElementById('ctrl1...
DOM SCRIPTING
DOCUMENT OBJECT MODEL


 • Document Object Model (DOM) is a language
  independent API for working with HTML and XML


 • ...
DOM/JS ISOLATION

•   DOM and JavaScript implementations are independent
    of each other in all major browsers

•   This...
BAD DOM SCRIPTING

Bad (we cross the bridge 1500 times!)
function innerHTMLLoop() {
    for (var count = 0; count < 1500; ...
REPAINTS AND REFLOWS
  A reflow occurs whenever you change the
  geometry of an element that is displayed on the
  page.

 ...
AVOIDING REPAINTS/REFLOWS
  This will potentially cause 3 repaints/reflows...
  var el = document.getElementById('mydiv');
...
TOOLS
TOOLS ARE YOUR FRIEND
The right tools can help a developer identify and fix
performance problems related to client-side beh...
FIREBUG
•Firefox plugin
•Debug JavaScript
•View page load waterfall:
PAGE SPEED
•Extension to Firebug from Google
•Provides tips for improving page performance
Y-SLOW

•Extension to Firebug from Yahoo
•tips for improving page performance
DYNATRACE AJAX EDITION

•extension for IE, coming soon for Firefox
•deeper client-side tracing than the firebug extensions
SPEED TRACER

•performance extension for Google Chrome
•similar features to Dynatrace Ajax
YUI PROFILER
•profile JavaScript performance
•developer must insert JS code
MORE TOOLS...

Internet Explorer Developer Tools

Safari Web Inspector

Chrome Developer Tools


Lots of developer tools t...
PERFOMANCE MONITORING
SHOWSLOW

 collects:
   YSlow
   PageSpeed
   Dyantrace

Integrate with
WebPageTest
to run tests.



                 http...
WEB PAGE TEST

Tests against
dedicated nodes.

Agent deployed
on test nodes.

Image capture




                     http:...
BOOMERANG
                              <html>
                                <head>

JavaScript library for Real
       ...
W3C WEB PERFORMANCE
New W3C Working Group focused on web performance.

First recommendations:
 Navigation Timing - how fas...
DON’T WANT TO DO
ALL OF THIS YOURSELF???
End-to-end application performance monitoring
RESOURCES
•   Yahoo Exceptional Performance
    http://developer.yahoo.com/performance/

•   Google Web Performance
    ht...
QUESTIONS
Developing High Performance Web Apps - CodeMash 2011
Upcoming SlideShare
Loading in …5
×

of

Developing High Performance Web Apps - CodeMash 2011 Slide 1 Developing High Performance Web Apps - CodeMash 2011 Slide 2 Developing High Performance Web Apps - CodeMash 2011 Slide 3 Developing High Performance Web Apps - CodeMash 2011 Slide 4 Developing High Performance Web Apps - CodeMash 2011 Slide 5 Developing High Performance Web Apps - CodeMash 2011 Slide 6 Developing High Performance Web Apps - CodeMash 2011 Slide 7 Developing High Performance Web Apps - CodeMash 2011 Slide 8 Developing High Performance Web Apps - CodeMash 2011 Slide 9 Developing High Performance Web Apps - CodeMash 2011 Slide 10 Developing High Performance Web Apps - CodeMash 2011 Slide 11 Developing High Performance Web Apps - CodeMash 2011 Slide 12 Developing High Performance Web Apps - CodeMash 2011 Slide 13 Developing High Performance Web Apps - CodeMash 2011 Slide 14 Developing High Performance Web Apps - CodeMash 2011 Slide 15 Developing High Performance Web Apps - CodeMash 2011 Slide 16 Developing High Performance Web Apps - CodeMash 2011 Slide 17 Developing High Performance Web Apps - CodeMash 2011 Slide 18 Developing High Performance Web Apps - CodeMash 2011 Slide 19 Developing High Performance Web Apps - CodeMash 2011 Slide 20 Developing High Performance Web Apps - CodeMash 2011 Slide 21 Developing High Performance Web Apps - CodeMash 2011 Slide 22 Developing High Performance Web Apps - CodeMash 2011 Slide 23 Developing High Performance Web Apps - CodeMash 2011 Slide 24 Developing High Performance Web Apps - CodeMash 2011 Slide 25 Developing High Performance Web Apps - CodeMash 2011 Slide 26 Developing High Performance Web Apps - CodeMash 2011 Slide 27 Developing High Performance Web Apps - CodeMash 2011 Slide 28 Developing High Performance Web Apps - CodeMash 2011 Slide 29 Developing High Performance Web Apps - CodeMash 2011 Slide 30 Developing High Performance Web Apps - CodeMash 2011 Slide 31 Developing High Performance Web Apps - CodeMash 2011 Slide 32 Developing High Performance Web Apps - CodeMash 2011 Slide 33 Developing High Performance Web Apps - CodeMash 2011 Slide 34 Developing High Performance Web Apps - CodeMash 2011 Slide 35 Developing High Performance Web Apps - CodeMash 2011 Slide 36 Developing High Performance Web Apps - CodeMash 2011 Slide 37 Developing High Performance Web Apps - CodeMash 2011 Slide 38 Developing High Performance Web Apps - CodeMash 2011 Slide 39 Developing High Performance Web Apps - CodeMash 2011 Slide 40 Developing High Performance Web Apps - CodeMash 2011 Slide 41 Developing High Performance Web Apps - CodeMash 2011 Slide 42 Developing High Performance Web Apps - CodeMash 2011 Slide 43 Developing High Performance Web Apps - CodeMash 2011 Slide 44 Developing High Performance Web Apps - CodeMash 2011 Slide 45 Developing High Performance Web Apps - CodeMash 2011 Slide 46 Developing High Performance Web Apps - CodeMash 2011 Slide 47 Developing High Performance Web Apps - CodeMash 2011 Slide 48 Developing High Performance Web Apps - CodeMash 2011 Slide 49 Developing High Performance Web Apps - CodeMash 2011 Slide 50 Developing High Performance Web Apps - CodeMash 2011 Slide 51 Developing High Performance Web Apps - CodeMash 2011 Slide 52 Developing High Performance Web Apps - CodeMash 2011 Slide 53 Developing High Performance Web Apps - CodeMash 2011 Slide 54 Developing High Performance Web Apps - CodeMash 2011 Slide 55 Developing High Performance Web Apps - CodeMash 2011 Slide 56 Developing High Performance Web Apps - CodeMash 2011 Slide 57 Developing High Performance Web Apps - CodeMash 2011 Slide 58 Developing High Performance Web Apps - CodeMash 2011 Slide 59 Developing High Performance Web Apps - CodeMash 2011 Slide 60 Developing High Performance Web Apps - CodeMash 2011 Slide 61 Developing High Performance Web Apps - CodeMash 2011 Slide 62 Developing High Performance Web Apps - CodeMash 2011 Slide 63 Developing High Performance Web Apps - CodeMash 2011 Slide 64 Developing High Performance Web Apps - CodeMash 2011 Slide 65 Developing High Performance Web Apps - CodeMash 2011 Slide 66 Developing High Performance Web Apps - CodeMash 2011 Slide 67 Developing High Performance Web Apps - CodeMash 2011 Slide 68 Developing High Performance Web Apps - CodeMash 2011 Slide 69
Upcoming SlideShare
Web Performance & You - HighEdWeb Arkansas Version
Next
Download to read offline and view in fullscreen.

45 Likes

Share

Download to read offline

Developing High Performance Web Apps - CodeMash 2011

Download to read offline

Talk given at CodeMash 2011

Developing High Performance Web Apps - CodeMash 2011

  1. CODE MASH 2011 DEVELOPING HIGH PERFORMANCE WEB APPS Timothy Fisher Compuware January 14, 2011
  2. WHO AM I? Timothy Fisher Technical Consultant CTO Office - Emerging Technologies @tfisher tim.fisher@compuware.com www.timothyfisher.com Download this presentation at: http://www.slideshare.net/timothyf
  3. AGENDA • Why Front-end Performance Matters • Optimize Page Load • Responsive Interfaces • Loading and Executing JavaScript • Data Access
  4. AGENDA • DOM Scripting • Tools • Performance Monitoring • Questions An overview to spark thought and further investigation
  5. TRAIL BLAZERS • Steve Souders • Nicholas Zakas • Stoyan Stefanov • Patrick Meenan • Sergey Chernyshev
  6. Why Front-end Performance matters
  7. According to Yahoo: “80% of end-user response time is spent on the front-end” According to Steve Souders (Google performance guru): “80-90% of end-user response time is spent on the front-end”
  8. Ads CDN’s Services Syndicated Content Integration is happening on the client-side
  9. OPTIMIZING FRONT END • Majority of end user response time spent on front end • Easier to optimize front end • Time spent optimizing here will have greatest impact
  10. OPTIMIZE PAGE LOAD
  11. PAGE LOAD TIME IS IMPORTANT Page load time is critical to the success of a web site/app Google: +500 ms → -20% traffic Yahoo: +400 ms → -5-9% full-page traffic Amazon: +100 ms → -1% sales Small performance flucutations affect traffic and sales!!!
  12. BEST PRACTICES • Reduce HTTP Requests • reduce overhead of page load • combine javascript and css into less number of files • combine images into sprites • Use a Content Delivery Network (CDN) • static content delivered by fast distributed network with low latency • content delivered closer to “last mile”
  13. BEST PRACTICES • Make Pages Cacheable • add expires header to pages • use on all static content • reduces HTTP requests • Use GZIP Page Compression • all modern browsers support GZIP compression • 60-80% savings on text-based content • No code changes required!
  14. BEST PRACTICES • Place Stylesheets at the Top • browser needs style info first to avoid repaints/reflows later CSS • keep stylesheets external • use <link>, do not use @import • Place Scripts at the Bottom • allow page content to be rendered first • keep scripts external to allow caching JavaScript
  15. BEST PRACTICES • Minify JavaScript and CSS • save bandwidth / download time • lots of tools to automate this for you • Post/pre Load Components • consider how you are loading content and scripts
  16. BEST PRACTICES • Maximize Paralell Downloads • Split components across domains • each browser limits paralell downloads per domain • enables browser to load more stuff in parallel • Optimize Images • avoid high-res images unless it is intentional • don’t let the browser scale your images • combine into sprites
  17. CSS SPRITES • One image contains multiple web images • CSS styles used to display correct web image, i.e. position, background-position
  18. RESPONSIVE INTERFACES
  19. A SINGLE BROWSER THREAD
  20. SINGLE THREAD IMPLICATIONS • Single UI Thread for both UI updates and JavaScript execution • only one of these can happen at a time! • Reason: JavaScript may cause UI updates... Page downloading and rendering must stop and wait for scripts to be downloaded and executed
  21. “0.1 second is about the limit for having the user feel that a system is reacting instantaneoulsy” - Jakob Nielsen, Usability Expert Translation: No single JavaScript should execute for more than 100 mS to ensure a responsive UI.
  22. No limit to how long this can run... function processData(items, processor, callback) { for (var i=0, len=items.length; i<len; i++) { processor(items[i]); } callback(); } Will run no more than 50 mS... funcion timedProcessData(items, processor, callback) { var todo = items.concat(); // clone items setTimeout(funcion() { var start = new Date(); do { processor(todo.shift()); } while (todo.length > 0 && (new Date() - start < 50)); if (todo.length > 0) { setTimeout(arguments.callee, 25); } else { callback(items); } }, 25); }
  23. WEB WORKERS • Commonly associated with HTML5 • Allow for asynchronous JavaScript execution • JS runs in a seperate thread isolated from the DOM • Does not delay UI updates • Data can be passed to/from Web Workers
  24. Calling a Web Worker var worker = new Worker("worker.js"); // Watch for messages from the worker worker.onmessage = function(e){ // The message from the client: e.data }; worker.postMessage("start"); The Web Worker client (worker.js) onmessage = function(e){ if ( e.data === "start" ) { // Do some computation done() } }; function done(){ // Send back the results to the parent page postMessage("done"); }
  25. LOADING & EXECUTING JAVASCRIPT
  26. WHY JAVASCRIPT? • Poorly written JavaScript is the most common reason for slow client-side performance • Loading • Parsing • Execution
  27. TYPICAL JAVASCRIPT PLACEMENT <html> <head> <link href=”style.css” rel=”stylesheet” type=”text/css”/> <script src=”myscript.js” type=”text/javascript”></script> <script src=”myscript.js” type=”text/javascript”></script> <script> function hello_world() { alert(‘hello world’); } var complex_data = // some complex calculation // </script> </head> <body> ... </body> </html>
  28. BETTER JAVASCRIPT PLACEMENT <html> <head> <link href=”style.css” rel=”stylesheet” type=”text/css”/> </head> <body> ... <script src=”myscript.js” type=”text/javascript”></script> <script src=”myscript.js” type=”text/javascript”></script> <script> function hello_world() { alert(‘hello world’); } var complex_data = // some complex calculation </script> </body> </html>
  29. COMBINE JAVASCRIPT FILES • Each script request requires HTTP performance overhead • Minimize overhead by combining scripts file.js file1.js file2.js file3.js => Browser Browser
  30. MINIFY JAVASCRIPT • Removes all unecessary space/comments from your JS files • Replace variables with short names • Easy to do at built-time with a tool • Checkout YUI Compressor, Closure Compiler... Avoid manual code-size optimization!
  31. NON-BLOCKING LOADS • AddJavaScript to a page in a way that does not block the browser thread ‣ Dynamic Script Elements ‣ Script Injection
  32. DYNAMIC SCRIPT ELEMENTS • JavaScript is downloaded and executed without blocking other page processes. var script = document.createElement(‘script’); script.type = “text/javascript”; script.src = “file1.js”; document.getElementsByTagName(“head”)[0].appendChild(script);
  33. SCRIPT INJECTION • Use Ajax to get script • Can control when script is parsed/executed • JavaScript must be served from same domain var xhr = XMLHttpRequest(); xhr.open(“get”, “file.js”, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { var script = document.createElement(“script”); script.type = “text/javascript”; script.text = xhr.responseText; document.body.appendChild(script); } } }; xhr.send(null);
  34. RECOMMENDED NONBLOCKING LOAD • Include the code necessary to dynamically load the the rest of the JS required for page init <script type="text/javascript" src="loader.js"></script> <script type="text/javascript"> loadScript("the-rest.js", function(){ Application.init(); }); </script> Optionally include the loadScript function directly in the page
  35. REAL WORLD USE • This technique is used by many JavaScript libraries including YUI and Dojo. <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js"></script> YUI().use("dom", function(Y){ Y.DOM.addClass(document.body, "loaded"); }); Dynamically loads the DOM utility and calls ‘loaded’ function when loading is complete.
  36. OPEN SOURCE JS LOADERS Lots of libraries available to help with the JS load problem: • ControlJS • LabJS • RequireJS
  37. CONTROLJS • Progessive Enhancement is core to ControlJS philosophy • downloads scripts asynchronously • delays script execution until aftr the page has rendered • allows scripts to be downloaded and not executed
  38. CONTROLJS Async JS Loading var cjsscript = document.createElement('script'); cjsscript.src = "control.js"; var cjssib = document.getElementsByTagName('script')[0]; cjssib.parentNode.insertBefore(cjsscript, cjssib); Replace these script includes: <script type="text/javascript" src="main.js"></script> with: <script type="text/cjs" data-cjssrc="main.js"></script>
  39. CONTROLJS Delayed Execution <script data-cjsexec=false type="text/cjs" data-cjssrc="jquery.min.js"></script> <script data-cjsexec=false type="text/cjs" data-cjssrc="fg.menu.js"></script> Execute at a later time... examplesbtn.onclick = function() { CJS.execScript("jquery.min.js"); CJS.execScript("fg.menu.js", createExamplesMenu); };
  40. LABJS Async JS Loading <script src="LAB.js"></script> Load these scripts asynchronously: $LAB.script('mootools-1.3.js'); $LAB.script('mootools-1.3.js').wait() .script('mootools-dependent-script.js');
  41. SUMMARY • Browser UI and JS share a single thread • Code execution blocks other browser processes such as UI painting • Put script tags at the bottom of page • Load as much JS dynamically as possible • Minimize and compress your JS
  42. DATA ACCESS
  43. ACCESSING DATA How you store and access data can have a significant impact on performance... JavaScript Scope Chain
  44. SCOPE CHAIN Bad (deeper scope chain referencing repeatedly) function innerHTMLLoop() { document.getElementById('ctrl1').innerHTML += 'a'; document.getElementById('ctrl1').innerHTML += 'b'; document.getElementById('ctrl1').innerHTML += 'c'; } Better (save globals to local variables) function innerHTMLLoop2() { var el = document.getElementById('ctrl1'); el.innerHTML += 'a'; el.innerHTML += 'b'; el.innerHTML += ‘c’; }
  45. DOM SCRIPTING
  46. DOCUMENT OBJECT MODEL • Document Object Model (DOM) is a language independent API for working with HTML and XML • DOM Scripting is expensive and a common cause of performance problems
  47. DOM/JS ISOLATION • DOM and JavaScript implementations are independent of each other in all major browsers • This causes overhead performance costs as these two pieces of code must interface JavaScri DOM pt Minimize how many times you cross this bridge
  48. BAD DOM SCRIPTING Bad (we cross the bridge 1500 times!) function innerHTMLLoop() { for (var count = 0; count < 1500; count++) { document.getElementById('here').innerHTML += 'a'; } } Good (we cross the bridge 1 time) function innerHTMLLoop2() { var content = ''; for (var count = 0; count < 1500; count++) { content += 'a'; } document.getElementById('here').innerHTML += content; }
  49. REPAINTS AND REFLOWS A reflow occurs whenever you change the geometry of an element that is displayed on the page. A repaint occurs whenever you change the content of an element that is displayed on the screen. These are both expensive operations in terms of performance!
  50. AVOIDING REPAINTS/REFLOWS This will potentially cause 3 repaints/reflows... var el = document.getElementById('mydiv'); el.style.borderLeft = '1px'; el.style.borderRight = '2px'; el.style.padding = '5px'; Better... 1 repaint/reflow var el = document.getElementById('mydiv'); el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;'; or... var el = document.getElementById('mydiv'); el.className = 'active';
  51. TOOLS
  52. TOOLS ARE YOUR FRIEND The right tools can help a developer identify and fix performance problems related to client-side behaviour. Profiling Timing functions and operations during script execution Network Analysis Examine loading of images, stylesheets, and scripts and their effect on page load and rendering
  53. FIREBUG •Firefox plugin •Debug JavaScript •View page load waterfall:
  54. PAGE SPEED •Extension to Firebug from Google •Provides tips for improving page performance
  55. Y-SLOW •Extension to Firebug from Yahoo •tips for improving page performance
  56. DYNATRACE AJAX EDITION •extension for IE, coming soon for Firefox •deeper client-side tracing than the firebug extensions
  57. SPEED TRACER •performance extension for Google Chrome •similar features to Dynatrace Ajax
  58. YUI PROFILER •profile JavaScript performance •developer must insert JS code
  59. MORE TOOLS... Internet Explorer Developer Tools Safari Web Inspector Chrome Developer Tools Lots of developer tools to debug performance!
  60. PERFOMANCE MONITORING
  61. SHOWSLOW collects: YSlow PageSpeed Dyantrace Integrate with WebPageTest to run tests. http://www.showslow.com/
  62. WEB PAGE TEST Tests against dedicated nodes. Agent deployed on test nodes. Image capture http://www.webpagetest.org/
  63. BOOMERANG <html> <head> JavaScript library for Real <script src="boomerang.js" type="text/javascript"></script> <script type="text/javascript"> BOOMR.init({ User Monitoring (RUM) beacon_url: "http://yoursite.com/path/to/beacon.php" }); BOOMR.plugins.RT.startTimer("t_head"); </script> Released by Yahoo in <title>page title</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 2010 <link rel="stylesheet" type="text/css" href="../boomerang-docs.css"> <script type="text/javascript"> BOOMR.plugins.RT.endTimer("t_head").startTimer("t_body"); </script> </head> Beacon metrics to a <body> page body here central server <script type="text/javascript"> BOOMR.plugins.RT.endTimer("t_body"); </script> </body> </html> https://github.com/yahoo/boomerang
  64. W3C WEB PERFORMANCE New W3C Working Group focused on web performance. First recommendations: Navigation Timing - how fast does the page load Resource Timing - how fast do page resources load User Timing - user defined custom timing events http://www.w3.org/2010/webperf/
  65. DON’T WANT TO DO ALL OF THIS YOURSELF???
  66. End-to-end application performance monitoring
  67. RESOURCES • Yahoo Exceptional Performance http://developer.yahoo.com/performance/ • Google Web Performance http://code.google.com/speed • JavaScript: The Good Parts by Douglas Crockford • High Performance JavaScript by Nicholas Zakas • Even Faster Websites by Steve Souders • Steve Souders Site http://www.stevesouders.com • John Resig’s Blog http://www.ejohn.org
  68. QUESTIONS
  • wieliong

    Jul. 4, 2018
  • Tomz

    Jun. 4, 2014
  • DuncanCampbell2

    Oct. 30, 2013
  • matexus

    Sep. 16, 2013
  • hoanphuc

    Aug. 20, 2013
  • asdineelhrychy

    Feb. 26, 2013
  • mtabraiz

    Feb. 10, 2013
  • myduddlf

    Jan. 28, 2013
  • pochengzhao

    Dec. 17, 2012
  • wikt0r

    Sep. 9, 2012
  • rainboyan

    Mar. 12, 2012
  • earlybirdme

    Dec. 31, 2011
  • jay_singh

    Dec. 2, 2011
  • pwringger

    Nov. 7, 2011
  • fmably

    Oct. 25, 2011
  • bradlantz1

    Feb. 9, 2011
  • martijncoppoolse

    Jan. 29, 2011
  • lespacedunmatin

    Jan. 29, 2011
  • nicolaghezzi

    Jan. 28, 2011
  • lakshminp

    Jan. 27, 2011

Talk given at CodeMash 2011

Views

Total views

19,138

On Slideshare

0

From embeds

0

Number of embeds

593

Actions

Downloads

445

Shares

0

Comments

0

Likes

45

×