• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
High-Speed HTML5
 

High-Speed HTML5

on

  • 13,859 views

Modern Web Apps should be focused, rich, and gorgeous, but they also need to be FAST. After all, being rich and beautiful isn't always enough! ...

Modern Web Apps should be focused, rich, and gorgeous, but they also need to be FAST. After all, being rich and beautiful isn't always enough!

With web apps, faster is always better; nobody will ever complain that your site is too fast!

Statistics

Views

Total Views
13,859
Views on SlideShare
13,801
Embed Views
58

Actions

Likes
12
Downloads
322
Comments
0

12 Embeds 58

http://www.techgig.com 18
http://paper.li 17
https://twitter.com 6
http://edicolaeuropea.blogspot.com 4
http://twitter.com 3
http://www.slideshare.net 3
http://ocanamotordeportes.blogspot.com 2
http://www.onlydoo.com 1
http://interactive.wxxi.org 1
http://127.0.0.1:51235 1
http://musicartpict.blogspot.com 1
http://yourails.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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.

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

    High-Speed HTML5 High-Speed HTML5 Presentation Transcript

    • High-Speed HTML5
      @peterlubbers
      Kaazing
      June, 2011
    • Thanks to the Sponsors
      • Kaazing(prizes)
      • Enterprise-Ready HTML5 WebSocket Gateway thatallowsyou to buildmassivelyscalable, real-time web applications
      • HTML5 and WebSocket Training
      • We’rehiring!
      • Apress (venue, prizes)
      • Books for professionals by professionals
      • Pro HTML5 Programming: http://prohtml5.com
      • Yournamehere**Contact Frank Greco to belistedhere…
    • About @peterlubbers
    • Not to Be Confused With…
    • Agenda
      • High Speed HTML5 Web Apps
      • Tools Overview
      • Optimization Tips
      • JavaScript, CSS, Images
      • Image Data URIs
      • HTML5 Boilerplate
      • Server Configuration
      • HTML5 Web Workers
      • HTML5 AppCache
      • Q&A, Prizes
      #html5
      @peterlubbers
      #nychtml5
    • HTML5 Feature Areas
    • HTML5 Status
      • May 24 2011: Working Draft Last Call
      • 2012: Candidate Recommendation
      • Widespread adoption is around the corner
      • Many HTML5 featurescan be used today:http://caniuse.com
      • News: Modernizr v2 Launched!http://www.modernizr.com/
    • HTML5 Apps
      • Use HTML5 features selectively
      • If you're not careful, you could end up with a slow app (not cool)
    • High Speed Web Apps
    • Designing Fast Web Apps
      • Apps should be focused, rich, and gorgeous, but they still need to be fast (being rich and beautiful isn't always enough!)
      • Improve the performance of the web app, which in turn improves the user experience
      • With web apps, faster isalways better (no onewill complain that your app is too fast)
    • Time is…
      • Measured in milliseconds!
      • 100 ms of latency costs Amazon 1% of every saleSource: highscalability.com
      • 0.5 second delay in content delivery is correlated with a 20% drop in traffic at Google
      • 5 millisecond lag behind competing trading platforms could be as costly as $4 million in losses per millisecond —Marissa Mayer, Google
    • How Fast is Fast?
      • No industry standard
      • Ideal web response times per W3C guidelines:
      • < 0.1 second = Ideal (user does not sense interruption)
      • 1 second = Highest acceptable (downloads over 1 second interrupt the user experience)
      • 10 seconds = Unacceptable (user is likely to leave the site)
      • Perceived speed matters most!
    • Perceived Speed
      • Analyze user behavior
      • Improve the perceived speed
      • Pre-load components
      • Example: ApplicationCache
      • Post-load components
      • Example: YUI Image Loader
      • Use Web Workers
    • Optimizing Web Applications
      • Reduce HTTP overhead
      • Most users have Internet connections where upload to download ratios are between 1:4 and 1:20
      • Result: 500 byte HTTP header request could take the equivalent time to upload as 10 kB of HTTP response data takes to download
    • HTTP Requests
      • HTTP Requests are expensive!
      • The majority of a page response time is consumed by downloadingresources
      • Consider:
      • Design (number of components on a page)
      • Location (vicinity to the web server or edge network)
      • Split components across domains (connection limits)
    • Connection Limits
    • Performance Analysis Tools
    • Tools of the Trade
      • Analysis tools provide metrics that:
      • Show problems caused by JavaScript execution, loading of network resources, layout, CSS, etc.
      • Break down the problems in an easy-to-read format so you can target and resolve problems quickly
      • Built-in browser tools
      • Great (free) tools for performance analysis
    • Built-In Developer Tools
    • Performance Testing Tools
      • Great and free Tools:
      • Page Speed
      • Chrome Speed Tracer
      • Yslow (for Firebug)
      • Wireshark
    • Page Speed
      • http://pagespeed.googlelabs.com
      • Add-on for Firefox and Chrome
      • http://code.google.com/speed/page-speed/
      • Grades your pages (A-F)
    • Go Speed Tracer Go!
      • Chrome Extension to measure “sluggishness”
      • http://code.google.com/webtoolkit/speedtracer/
      • Download and install in the Chrome Developer Edition
    • YSlow
      • Available for Firefox and Chrome
      • http://developer.yahoo.com/yslow/
      • Grades your pages (0-100)
    • Wireshark
      • Network traffic analysis tool
      • HTTP, WebSocket traffic, etc.
      • Lua extension framework
      • http://www.wireshark.org/
    • Fix the Easy Stuff!
      • At least take care of the low hanging fruit
      • "If everyone would implement just 20% of Steve [Souders]'s guidelines, the Web would be a dramatically better place. Between this book and Steve's YSlow extension, there's really no excuse for having a sluggish web site anymore.”—Joe Hewitt, Developer of Firebug debugger and Mozilla's DOM Inspector
    • Optimizing Resources
    • Optimizing Web Applications
      • Once you've analyzed your web app, target areas where you can improve performance
      • Most (if not all) web apps use these resources:
      • Scripts
      • CSS
      • Images
      • There are many ways to optimize these resources and, therefore, your app
      • Reduce the number of scripts
      • Place scripts at the end of your file
      • Programmatically remove extraneous characters (minify)
      • Use tools that help optimize your JavaScript, like helping it download or run faster
      • Google Closure Compiler: http://closure-compiler.appspot.com/home
      • Yahoo! YUI Compressorhttp://goo.gl/Ac20i
      • Uglifyhttp://marijnhaverbeke.nl/uglifyjs
      Optimizing Scripts
    • Optimizing Scripts
      • Store scripts externally
      • Cached by the browser
      • Great for when the user views a page or several pages multiple times per session and the pages re-use JavaScript
      • Use when the caching benefits outweigh the extra request overhead savings from inlining script
      • head.js (library that allows you to parallel load JS files for faster performance)
    • Optimizing CSS
      • Use CSS (3) where possible
      • Gradients, border radius, transforms, transformations, etc. instead of images
      • Minify CSS
      • Place in <head>
      • Use Developer Tools to analyze CSS
      • Combine if possible
      • Choose <link> over @import to allow parallel downloads
    • CSS Transitions
      • Before CSS3, no transitions
      • DHTML, jQuery
      • JavaScript (slow loading animation libraries)
      • Use this instead of JS animation (browser handles the drawing)
      • Coding is simplified, CPU time is minimized
      • The browser optimizes the transition for you
    • Optimizing Images
      • Use PNGs instead of GIFs
      • 32 vs. 8 bit Color, 8 vs. 1 bit Alpha Transparency
      • Compress image files
      • Pngcrushhttp://pmt.sourceforge.net/pngcrush/
      • Smush ithttp://developer.yahoo.com/yslow/smushit/
      • Don't scale images with HTML
      • Add height and width to avoidreflows
      • Use Data URIs and Sprites
    • Data URIs
      • Frequently used or changing images (warnings or logos)
      • Use the "data" URL scheme:
      • Works in IE 8 and with a workaround in IE 6 and 7:
      • http://www.phpied.com/data-urls-what-are-they-and-how-to-use/
      • http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
      • Data URI Kitchenhttp://software.hixie.ch/utilities/cgi/data/data
      • Drupal project: http://drupal.org/project/fasterimages
    • HTML
      <img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon">
      Data URI Example
    • Sprites
      • Combine multiples images into one
      • Ideal for images that are contiguous (nav. bar)
      • Significantly reduces HTTP requests
      • Defining the coordinates can be tedious
      • Spriteme tool: http://spriteme.org/
    • HTML5 Boilerplate Build Tools
      • Use the built-in build tools: it’s simple!
      • Ant scripts in /build directory
      • Use ant minify to minify html
      • Output to /publish directory
      http://html5boilerplate.com
    • Server Configuration
    • Web Server Caching Settings
      .htaccess File
      <IfModule mod_expires.c>
      Header set cache-control: public
      ExpiresActive on
      # your document html
      ExpiresByType text/html "access"
      # rss feed
      ExpiresByType application/rss+xml "access plus 1 hour"
      # favicon (cannot be renamed)
      ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
      # media: images, video, audio
      ExpiresByType image/png "access plus 1 month"
      ExpiresByType image/jpg "access plus 1 month"
      ExpiresByType image/jpeg "access plus 1 month"
      ExpiresByType video/ogg "access plus 1 month"
      ExpiresByType audio/ogg "access plus 1 month"
      ExpiresByType video/mp4 "access plus 1 month"
      # webfonts
      ExpiresByType font/ttf "access plus 1 month"
      ExpiresByType font/woff "access plus 1 month"
      ExpiresByType image/svg+xml "access plus 1 month"
      # css and javascript
      ExpiresByType text/css "access plus 1 month"
      ExpiresByType application/javascript "access plus 1 month"
      ExpiresByType text/javascript "access plus 1 month"
      </IfModule>
      Source: Paul Irish & DivyaManianhttp://html5boilerplate.com/
    • GzipConfiguration
      .htaccess File
      # compress html, javascript, and css
      AddOutputFilterByType DEFLATE text/html
      AddOutputFilterByType DEFLATE text/css
      AddOutputFilterByType DEFLATE application/javascript
      • Browser will send:Accept-encoding: gzip
      • Server will send:Content-encoding: gzip + Zipped file
    • HTML5 Web Workers
    • HTML5 Web Workers
      • Without Web Workers:
      • Long-running JavaScript tasks can block other JavaScript on the page’s UI thread
      • JavaScript can cause some browser UIs to hang:
      • HTML5 Web Workers provide background processing capabilities to web applications
      • You can now run JavaScript in the background
    • HTML5 Web Workers
      • Web Worker Script cannot:
      • Access the web page's window object (window.document)
      • Access the web page and its DOM
      • Be on a different origin (scheme, host, port combination)
      • Web Workers can:
      • Use the full JavaScript timing API
      • Import additional libraries using importScripts
      • Still consume CPU cycles and make your system less responsive, so be careful
    • Web Workers API
      • Create an HTML5 Web Worker object and pass in a JavaScript file to be executed
      • Set up Web Worker communication on the web page and in the worker (similar to Cross Document Messaging):
      • Set up event listener to listento incoming messages and errors from the worker
      • Call postMessage to senddata to a worker
    • Web Workers API
      JavaScript
      // Check if Web Workers are supported
      if (typeof(Worker) !== "undefined") {
      document.getElementById("support").innerHTML = "Your browser supports HTML5 Web Workers";
      }
      // Create a new worker
      // The URL for the JavaScript file on the same origin
      worker = new Worker("echoWorker.js");
      //to load additional JavaScript in the worker
      importScripts("helper.js", "anotherHelper.js");
    • Web Workers API
      JavaScript
      //From the main page
      worker.postMessage("Here's a message for you");
      //Add event listener
      worker.addEventListener("message”, messageHandler, true);
      //Process incoming messages
      function messageHandler(e) {
      // process message from worker
      }
      //Handle errors
      worker.addEventListener("error", errorHandler, true);
      //Stop worker
      worker.terminate();
    • Web Workers API
      JavaScript
      //From the Web Worker
      function messageHandler(e) {
      postMessage("worker says: " + e.data + " too");
      }
      //Add event listener
      addEventListener("message", messageHandler, true);
      //Using a Web Worker within a Web Worker 
      var subWorker = new Worker("subWorker.js");
    • Inline Web Workers (File API)
      • Web Workers must be a JavaScript file on the same origin
      • You can create “inline Web Workers” on-the-fly using the (new) File API:
      • window.WebKitBlobBuilder
      • window.webkitURL.createObjectURL
      • Note: this will not be interpreted:<script id=”wrk" type="text/worker”>so you can use it to build your file
      • See HTML5 Rocks article by @ebidel:http://goo.gl/kpQpS
    • Web Workers Support
      • Desktop
      • Chrome 4.0+
      • Firefox 3.5+
      • Safari 4.0+
      • Opera 10.6+
      • Mobile
      • Opera Mobile 11
    • HTML5 ApplicationCache
    • ApplicationCache
      • Store complete web sites offline
      • Also allows pre-fetching of site resources
      • Cache pages that have not been visited yet
      • Simple appcache manifest mechanism
      • Browsers cache data in an Application Cache
      • See also presentation at:http://goo.gl/tUpjj
    • *.appcache File
      CACHE MANIFEST
      # Version 1.0.1
      # Files to cache
      index.html
      cache.html
      html5.css
      image1.jpg
      img/foo.gif
      http://www.example.com/styles.css
      # Use from network if available
      NETWORK:
      network.html
      # Fallback content
      FALLBACK:
      / fallback.html
      Example appcache File
      • Reference the appcache file:
      • Use .appcache extension (*.manifest also allowed)
      • Add as attribute to the HTML element
      HTML
      <!DOCTYPE html>
      <html manifest="offline.appcache">
      <head>
      <title>HTML5 Application Cache Rocks!</title>
      Example appcache Attribute
    • AppCache Mime Type
      • Configure your server to serve appcache files with the correct mime type
      • Manifest files have the MIME type text/cache-manifest
      • Most web servers must beconfigured to serve the manifest files correctly
      • Kaazing WebSocket Gateway serves manifest files correctly OOTBhttp://kaazing.com/download.html
    • AppCache Support
      • Desktop
      • Chrome 4.0+
      • Firefox 3.5+
      • Safari 4.0+
      • Opera 10.6+
      • Mobile
      • Opera Mobile 11
      • iOS 2.1+
      • Android 2.1+
    • Other Cool Stuff to Watch
      • RequestAnimationFrame(instead of setTimeOut) for animationshttp://www.html5rocks.com/tutorials/speed/html5/#toc-request-ani-frame
      • WebSockets for low-latency, full duplex web communicationwww.kaazing.comhttp://websockets.org
    • Questions?
      • Now or Later
      • E-mail: peter.lubbers@kaazing.com
      • Twitter: @peterlubbers
      • LinkedIn: Peter Lubbers
    • Don’t Miss This!
      • SteveSouders’ HTML5 Performance Talk
      • Free eventhostedby the San Francisco HTML5 User Group
      • 28 July 2011
      • Sold out, but waiting list still available
      • Streamed live to ~2,000 members
      • For details and to sign up visit:http://sfhtml5.org
    • Buy the Book!
      • Pro HTML5 Programming (Apress, 2010)
      • E-book coupon code for Spring/Summer 2011:LUBBERSHTML5
    • Useful HTML5 Resources
      • HTML5 Boilerplate
      • http://html5boilerplate.com
      • The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks:
      • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
      • Browser logos:
      • http://paulirish.com/2010/high-res-browser-icons/
    • Useful HTML5 Resources
      • Building Faster Web Sites (SteveSouders, O’Reilly)
      • Live on July 28th at the SF HTML5 User Group (Streamed Live): http://sfhtml5.org
      • Performance analysis tools:
      • Chrome Speed Tracerhttp://code.google.com/webtoolkit/speedtracer/
      • Yslow (for Firebug)http://developer.yahoo.com/yslow/
      • Page Speed (Firefox and Chrome Add-On)http://code.google.com/speed/page-speed/docs/using_chrome.html
      • HTML5 User Group:
      • San Francisco: http://www.sfhtml5.org/Live streaming video and recordings
      • New York: http://www.meetup.com/NY-HTML5-User-Group
      • London: http://www.meetup.com/LondonHTML5UG/
      • Apress book: Pro HTML5 Programming
      • (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/
      • World Wide HTML5 Training:
      • E-mail us: training@kaazing.com
      • Web site: http://tech.kaazing.com/training/
      Note: Thanks to @vjwang for review and editing
      Learn More