PERFOMANCE MATTERS
  DEVELOPING HIGH
 PERFORMANCE WEB
        APPS
       Timothy Fisher
        Compuware
     September ...
WHO AM I?

    Timothy Fisher
    Technical Consultant (Eagle)
    Compuware

        @tfisher
        tim.fisher@compuware....
AGENDA

• Why   Front-end Performance Matters
• Optimize   Page Load
• Responsive   Interfaces
• Loading   and Executing J...
AGENDA
• DOM     Scripting
• Tools

• Gomez    and Front-End Performance
• Questions


An overview to spark thought and fu...
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 ...
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

•   Minimize HTTP Requests
    •   combine javascript and css into less number of files

    •   consider s...
BEST PRACTICES

•   Make Pages Cacheable
    •   use appropriate header tags




•   Use GZIP Page Compression
    •   all...
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

•   Split Components Across Domains
    •   enables browser to load more stuff in parallel




•   Optimiz...
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...
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

• Includethe code necessary to dynamically the the rest of the
 JS required for page ...
REAL WORLD USE

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

   <script type="text...
SUMMARY

• Browser    UI and JS share a single thread

• Code  execution blocks other browser processes such as UI
 painti...
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...
GOMEZ AND FRONT-END
   PERFORMANCE
GOMEZ

Gomez is the web performance division of Compuware

 •Active Monitoring
 synthetic tests using a dedicated node and...
ACTIVE



ACTUAL
GOMEZ ACTIVE

• Synthetic tests
• Uses nodes in Gomez network to perform web
application testing.

• Today pure client-sid...
GOMEZ ACTUAL

• Real User Monitoring (RUM)
• JavaScript ‘tags’ inserted into web pages.
• Tags report performance metrics ...
EXTENDING ACTIVE/ACTUAL
•Desire to collect more client-side metrics
 •JavaScript - load, parse, execution timing
 •CSS - l...
RESOURCES
•   Yahoo Exceptional Performance
    http://developer.yahoo.com/performance/

•   Google Web Performance
    ht...
QUESTIONS
Upcoming SlideShare
Loading in...5
×

Developing High Performance Web Apps

2,943

Published on

An overview of some ways developers can improve the performance of their web applications.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,943
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
69
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Developing High Performance Web Apps

  1. 1. PERFOMANCE MATTERS DEVELOPING HIGH PERFORMANCE WEB APPS Timothy Fisher Compuware September 15, 2010
  2. 2. WHO AM I? Timothy Fisher Technical Consultant (Eagle) Compuware @tfisher tim.fisher@compuware.com www.timothyfisher.com
  3. 3. AGENDA • Why Front-end Performance Matters • Optimize Page Load • Responsive Interfaces • Loading and Executing JavaScript
  4. 4. AGENDA • DOM Scripting • Tools • Gomez and Front-End Performance • Questions An overview to spark thought and further investigation
  5. 5. Why Front-end Performance matters
  6. 6. 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”
  7. 7. Ads CDN’s Services Syndicated Content Integration is happening on the client-side
  8. 8. OPTIMIZE PAGE LOAD
  9. 9. 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!!!
  10. 10. BEST PRACTICES • Minimize HTTP Requests • combine javascript and css into less number of files • consider sprites for combining images • Use a Content Delivery Network (CDN) • static content delivered by fast distributed network with low latency
  11. 11. BEST PRACTICES • Make Pages Cacheable • use appropriate header tags • Use GZIP Page Compression • all modern browsers support GZIP compression
  12. 12. BEST PRACTICES • Place Stylesheets at the Top • browser needs style info first to avoid repaints/reflows later • Place Scripts at the Bottom • allow page content to be rendered first
  13. 13. 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
  14. 14. BEST PRACTICES • Split Components Across Domains • 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
  15. 15. RESPONSIVE INTERFACES
  16. 16. A SINGLE BROWSER THREAD
  17. 17. SINGLE THREAD IMPLICATIONS • Single UI Thread for both UI updates and JavaScript execution • only one of these can happen at a time! Page downloading and rendering must stop and wait for scripts to be downloaded and executed
  18. 18. “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.
  19. 19. LOADING & EXECUTING JAVASCRIPT
  20. 20. WHY JAVASCRIPT? • Poorly written JavaScript is the most common reason for slow client-side performance • Loading • Parsing • Execution
  21. 21. 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>
  22. 22. 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>
  23. 23. 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
  24. 24. 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!
  25. 25. NON-BLOCKING LOADS • AddJavaScript to a page in a way that does not block the browser thread ‣ Dynamic Script Elements ‣ Script Injection
  26. 26. 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);
  27. 27. 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);
  28. 28. RECOMMENDED NONBLOCKING LOAD • Includethe code necessary to dynamically 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
  29. 29. 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.
  30. 30. 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
  31. 31. DOM SCRIPTING
  32. 32. 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
  33. 33. 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
  34. 34. 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; }
  35. 35. 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!
  36. 36. 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';
  37. 37. TOOLS
  38. 38. 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
  39. 39. FIREBUG •Firefox plugin •Debug JavaScript •View page load waterfall:
  40. 40. PAGE SPEED •Extension to Firebug from Google •Provides tips for improving page performance
  41. 41. Y-SLOW •Extension to Firebug from Yahoo •tips for improving page performance
  42. 42. DYNATRACE AJAX EDITION •extension for IE, coming soon for Firefox •deeper client-side tracing than the firebug extensions
  43. 43. SPEED TRACER •performance extension for Google Chrome •similar features to Dynatrace Ajax
  44. 44. YUI PROFILER •profile JavaScript performance •developer must insert JS code
  45. 45. MORE TOOLS... Internet Explorer Developer Tools Safari Web Inspector Chrome Developer Tools Lots of developer tools to debug performance!
  46. 46. GOMEZ AND FRONT-END PERFORMANCE
  47. 47. GOMEZ Gomez is the web performance division of Compuware •Active Monitoring synthetic tests using a dedicated node and a Gomez controlled browser •Actual Monitoring tests the actual end-user experience by transmitting data while users are browsing to a Gomez server
  48. 48. ACTIVE ACTUAL
  49. 49. GOMEZ ACTIVE • Synthetic tests • Uses nodes in Gomez network to perform web application testing. • Today pure client-side metrics are not collected
  50. 50. GOMEZ ACTUAL • Real User Monitoring (RUM) • JavaScript ‘tags’ inserted into web pages. • Tags report performance metrics to Gomez server • Page and object load performance metrics
  51. 51. EXTENDING ACTIVE/ACTUAL •Desire to collect more client-side metrics •JavaScript - load, parse, execution timing •CSS - load, parse timing •full Waterfall page load metrics •Attribute client-side performance to specific sources (i.e. javascript library from vendor abc is the source of your slow performance) •Expose full end-to-end performance
  52. 52. 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
  53. 53. QUESTIONS
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×