Successfully reported this slideshow.
High-Speed HTML5<br />@peterlubbers<br />Kaazing<br />June, 2011<br />
Thanks to the Sponsors<br /><ul><li>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… </li></li></ul><li>About @peterlubbers<br />
Not to Be Confused With…<br />
Agenda<br /><ul><li>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</li></ul>#html5<br />@peterlubbers<br />#nychtml5<br />
HTML5 Feature Areas<br />
HTML5 Status<br /><ul><li>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/</li></li></ul><li>HTML5 Apps<br /><ul><li>Use HTML5 features selecti...
If you're not careful, you could end up with a slow app (not cool)</li></li></ul><li>High Speed Web Apps<br />
Designing Fast Web Apps<br /><ul><li>Apps should be focused, rich, and gorgeous, but they still need to be fast (being ric...
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)</li></li></ul><li>Time is…<br /><ul>...
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 M...
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!</li></li></ul><li>Perceived Speed<br /><ul><li>Analyze user behavior
Improve the perceived speed
Pre-load components
Example: ApplicationCache
Post-load components
Example: YUI Image Loader
Use Web Workers</li></li></ul><li>Optimizing Web Applications<br /><ul><li>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 down...
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)</li></li></ul><li>Connection Limits<br />
Performance Analysis Tools<br />
Tools of the Trade<br /><ul><li>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</li></li></ul><li>Built-In Developer Tools<br />
Performance Testing Tools<br /><ul><li>Great and free Tools:
Page Speed
Chrome Speed Tracer
Yslow (for Firebug)
Wireshark</li></li></ul><li>Page Speed<br /><ul><li>http://pagespeed.googlelabs.com
Upcoming SlideShare
Loading in …5
×

High-Speed HTML5

17,236 views

Published on

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!

Published in: Technology
  • Be the first to comment

High-Speed HTML5

  1. High-Speed HTML5<br />@peterlubbers<br />Kaazing<br />June, 2011<br />
  2. Thanks to the Sponsors<br /><ul><li>Kaazing(prizes)
  3. Enterprise-Ready HTML5 WebSocket Gateway thatallowsyou to buildmassivelyscalable, real-time web applications
  4. HTML5 and WebSocket Training
  5. We’rehiring!
  6. Apress (venue, prizes)
  7. Books for professionals by professionals
  8. Pro HTML5 Programming: http://prohtml5.com
  9. Yournamehere**Contact Frank Greco to belistedhere… </li></li></ul><li>About @peterlubbers<br />
  10. Not to Be Confused With…<br />
  11. Agenda<br /><ul><li>High Speed HTML5 Web Apps
  12. Tools Overview
  13. Optimization Tips
  14. JavaScript, CSS, Images
  15. Image Data URIs
  16. HTML5 Boilerplate
  17. Server Configuration
  18. HTML5 Web Workers
  19. HTML5 AppCache
  20. Q&A, Prizes</li></ul>#html5<br />@peterlubbers<br />#nychtml5<br />
  21. HTML5 Feature Areas<br />
  22. HTML5 Status<br /><ul><li>May 24 2011: Working Draft Last Call
  23. 2012: Candidate Recommendation
  24. Widespread adoption is around the corner
  25. Many HTML5 featurescan be used today:http://caniuse.com
  26. News: Modernizr v2 Launched!http://www.modernizr.com/</li></li></ul><li>HTML5 Apps<br /><ul><li>Use HTML5 features selectively
  27. If you're not careful, you could end up with a slow app (not cool)</li></li></ul><li>High Speed Web Apps<br />
  28. Designing Fast Web Apps<br /><ul><li>Apps should be focused, rich, and gorgeous, but they still need to be fast (being rich and beautiful isn't always enough!)
  29. Improve the performance of the web app, which in turn improves the user experience
  30. With web apps, faster isalways better (no onewill complain that your app is too fast)</li></li></ul><li>Time is…<br /><ul><li>Measured in milliseconds!
  31. 100 ms of latency costs Amazon 1% of every saleSource: highscalability.com
  32. 0.5 second delay in content delivery is correlated with a 20% drop in traffic at Google
  33. 5 millisecond lag behind competing trading platforms could be as costly as $4 million in losses per millisecond —Marissa Mayer, Google</li></li></ul><li>How Fast is Fast?<br /><ul><li>No industry standard
  34. Ideal web response times per W3C guidelines:
  35. < 0.1 second = Ideal (user does not sense interruption)
  36. 1 second = Highest acceptable (downloads over 1 second interrupt the user experience)
  37. 10 seconds = Unacceptable (user is likely to leave the site)
  38. Perceived speed matters most!</li></li></ul><li>Perceived Speed<br /><ul><li>Analyze user behavior
  39. Improve the perceived speed
  40. Pre-load components
  41. Example: ApplicationCache
  42. Post-load components
  43. Example: YUI Image Loader
  44. Use Web Workers</li></li></ul><li>Optimizing Web Applications<br /><ul><li>Reduce HTTP overhead
  45. Most users have Internet connections where upload to download ratios are between 1:4 and 1:20
  46. Result: 500 byte HTTP header request could take the equivalent time to upload as 10 kB of HTTP response data takes to download</li></li></ul><li>HTTP Requests<br /><ul><li>HTTP Requests are expensive!
  47. The majority of a page response time is consumed by downloadingresources
  48. Consider:
  49. Design (number of components on a page)
  50. Location (vicinity to the web server or edge network)
  51. Split components across domains (connection limits)</li></li></ul><li>Connection Limits<br />
  52. Performance Analysis Tools<br />
  53. Tools of the Trade<br /><ul><li>Analysis tools provide metrics that:
  54. Show problems caused by JavaScript execution, loading of network resources, layout, CSS, etc.
  55. Break down the problems in an easy-to-read format so you can target and resolve problems quickly
  56. Built-in browser tools
  57. Great (free) tools for performance analysis</li></li></ul><li>Built-In Developer Tools<br />
  58. Performance Testing Tools<br /><ul><li>Great and free Tools:
  59. Page Speed
  60. Chrome Speed Tracer
  61. Yslow (for Firebug)
  62. Wireshark</li></li></ul><li>Page Speed<br /><ul><li>http://pagespeed.googlelabs.com
  63. Add-on for Firefox and Chrome
  64. http://code.google.com/speed/page-speed/
  65. Grades your pages (A-F)</li></li></ul><li>Go Speed Tracer Go!<br /><ul><li>Chrome Extension to measure “sluggishness”
  66. http://code.google.com/webtoolkit/speedtracer/
  67. Download and install in the Chrome Developer Edition</li></li></ul><li>YSlow<br /><ul><li>Available for Firefox and Chrome
  68. http://developer.yahoo.com/yslow/
  69. Grades your pages (0-100)</li></li></ul><li>Wireshark<br /><ul><li>Network traffic analysis tool
  70. HTTP, WebSocket traffic, etc.
  71. Lua extension framework
  72. http://www.wireshark.org/</li></li></ul><li>Fix the Easy Stuff!<br /><ul><li>At least take care of the low hanging fruit
  73. "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</li></li></ul><li>Optimizing Resources<br />
  74. Optimizing Web Applications<br /><ul><li>Once you've analyzed your web app, target areas where you can improve performance
  75. Most (if not all) web apps use these resources:
  76. Scripts
  77. CSS
  78. Images
  79. There are many ways to optimize these resources and, therefore, your app</li></li></ul><li><ul><li>Reduce the number of scripts
  80. Place scripts at the end of your file
  81. Programmatically remove extraneous characters (minify)
  82. Use tools that help optimize your JavaScript, like helping it download or run faster
  83. Google Closure Compiler: http://closure-compiler.appspot.com/home
  84. Yahoo! YUI Compressorhttp://goo.gl/Ac20i
  85. Uglifyhttp://marijnhaverbeke.nl/uglifyjs</li></ul>Optimizing Scripts<br />
  86. Optimizing Scripts<br /><ul><li>Store scripts externally
  87. Cached by the browser
  88. Great for when the user views a page or several pages multiple times per session and the pages re-use JavaScript
  89. Use when the caching benefits outweigh the extra request overhead savings from inlining script
  90. head.js (library that allows you to parallel load JS files for faster performance)</li></li></ul><li>Optimizing CSS<br /><ul><li>Use CSS (3) where possible
  91. Gradients, border radius, transforms, transformations, etc. instead of images
  92. Minify CSS
  93. Place in <head>
  94. Use Developer Tools to analyze CSS
  95. Combine if possible
  96. Choose <link> over @import to allow parallel downloads</li></li></ul><li>CSS Transitions<br /><ul><li>Before CSS3, no transitions
  97. DHTML, jQuery
  98. JavaScript (slow loading animation libraries)
  99. Use this instead of JS animation (browser handles the drawing)
  100. Coding is simplified, CPU time is minimized
  101. The browser optimizes the transition for you</li></li></ul><li>Optimizing Images<br /><ul><li>Use PNGs instead of GIFs
  102. 32 vs. 8 bit Color, 8 vs. 1 bit Alpha Transparency
  103. Compress image files
  104. Pngcrushhttp://pmt.sourceforge.net/pngcrush/
  105. Smush ithttp://developer.yahoo.com/yslow/smushit/
  106. Don't scale images with HTML
  107. Add height and width to avoidreflows
  108. Use Data URIs and Sprites</li></li></ul><li>Data URIs<br /><ul><li>Frequently used or changing images (warnings or logos)
  109. Use the "data" URL scheme:
  110. Works in IE 8 and with a workaround in IE 6 and 7:
  111. http://www.phpied.com/data-urls-what-are-they-and-how-to-use/
  112. http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
  113. Data URI Kitchenhttp://software.hixie.ch/utilities/cgi/data/data
  114. Drupal project: http://drupal.org/project/fasterimages</li></li></ul><li>HTML<br /><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"><br />Data URI Example<br />
  115. Sprites<br /><ul><li>Combine multiples images into one
  116. Ideal for images that are contiguous (nav. bar)
  117. Significantly reduces HTTP requests
  118. Defining the coordinates can be tedious
  119. Spriteme tool: http://spriteme.org/</li></li></ul><li>HTML5 Boilerplate Build Tools<br /><ul><li>Use the built-in build tools: it’s simple!
  120. Ant scripts in /build directory
  121. Use ant minify to minify html
  122. Output to /publish directory</li></ul>http://html5boilerplate.com<br />
  123. Server Configuration<br />
  124. Web Server Caching Settings<br />.htaccess File<br /><IfModule mod_expires.c><br /> Header set cache-control: public<br /> ExpiresActive on<br /># your document html <br /> ExpiresByType text/html "access"<br /># rss feed<br /> ExpiresByType application/rss+xml "access plus 1 hour"<br /># favicon (cannot be renamed)<br /> ExpiresByType image/vnd.microsoft.icon "access plus 1 week" <br /># media: images, video, audio<br /> ExpiresByType image/png "access plus 1 month"<br /> ExpiresByType image/jpg "access plus 1 month"<br /> ExpiresByType image/jpeg "access plus 1 month"<br /> ExpiresByType video/ogg "access plus 1 month"<br /> ExpiresByType audio/ogg "access plus 1 month"<br /> ExpiresByType video/mp4 "access plus 1 month"<br /># webfonts<br /> ExpiresByType font/ttf "access plus 1 month"<br /> ExpiresByType font/woff "access plus 1 month"<br /> ExpiresByType image/svg+xml "access plus 1 month"<br /># css and javascript<br /> ExpiresByType text/css "access plus 1 month"<br /> ExpiresByType application/javascript "access plus 1 month"<br /> ExpiresByType text/javascript "access plus 1 month"<br /></IfModule><br />Source: Paul Irish & DivyaManianhttp://html5boilerplate.com/<br />
  125. GzipConfiguration<br />.htaccess File<br /># compress html, javascript, and css<br />AddOutputFilterByType DEFLATE text/html<br />AddOutputFilterByType DEFLATE text/css<br />AddOutputFilterByType DEFLATE application/javascript<br /><ul><li> Browser will send:Accept-encoding: gzip
  126. Server will send:Content-encoding: gzip + Zipped file</li></li></ul><li>HTML5 Web Workers<br />
  127. HTML5 Web Workers<br /><ul><li>Without Web Workers:
  128. Long-running JavaScript tasks can block other JavaScript on the page’s UI thread
  129. JavaScript can cause some browser UIs to hang:
  130. HTML5 Web Workers provide background processing capabilities to web applications
  131. You can now run JavaScript in the background</li></li></ul><li>HTML5 Web Workers<br /><ul><li>Web Worker Script cannot:
  132. Access the web page's window object (window.document)
  133. Access the web page and its DOM
  134. Be on a different origin (scheme, host, port combination)
  135. Web Workers can:
  136. Use the full JavaScript timing API
  137. Import additional libraries using importScripts
  138. Still consume CPU cycles and make your system less responsive, so be careful</li></li></ul><li>Web Workers API<br /><ul><li>Create an HTML5 Web Worker object and pass in a JavaScript file to be executed
  139. Set up Web Worker communication on the web page and in the worker (similar to Cross Document Messaging):
  140. Set up event listener to listento incoming messages and errors from the worker
  141. Call postMessage to senddata to a worker</li></li></ul><li>Web Workers API<br />JavaScript<br />// Check if Web Workers are supported<br />if (typeof(Worker) !== "undefined") {<br />document.getElementById("support").innerHTML = "Your browser supports HTML5 Web Workers";<br />}<br />// Create a new worker<br />// The URL for the JavaScript file on the same origin <br />worker = new Worker("echoWorker.js");<br />//to load additional JavaScript in the worker<br />importScripts("helper.js", "anotherHelper.js");<br />
  142. Web Workers API<br />JavaScript<br />//From the main page<br />worker.postMessage("Here's a message for you");<br />//Add event listener<br />worker.addEventListener("message”, messageHandler, true);<br />//Process incoming messages<br />function messageHandler(e) {<br /> // process message from worker<br />}<br />//Handle errors<br />worker.addEventListener("error", errorHandler, true);<br />//Stop worker<br />worker.terminate();<br />
  143. Web Workers API<br />JavaScript<br />//From the Web Worker<br />function messageHandler(e) {<br />postMessage("worker says: " + e.data + " too");<br />}<br />//Add event listener<br />addEventListener("message", messageHandler, true);<br />//Using a Web Worker within a Web Worker <br />var subWorker = new Worker("subWorker.js");<br />
  144. Inline Web Workers (File API)<br /><ul><li>Web Workers must be a JavaScript file on the same origin
  145. You can create “inline Web Workers” on-the-fly using the (new) File API:
  146. window.WebKitBlobBuilder
  147. window.webkitURL.createObjectURL
  148. Note: this will not be interpreted:<script id=”wrk" type="text/worker”>so you can use it to build your file
  149. See HTML5 Rocks article by @ebidel:http://goo.gl/kpQpS</li></li></ul><li>Web Workers Support<br /><ul><li>Desktop
  150. Chrome 4.0+
  151. Firefox 3.5+
  152. Safari 4.0+
  153. Opera 10.6+
  154. Mobile
  155. Opera Mobile 11</li></li></ul><li>HTML5 ApplicationCache<br />
  156. ApplicationCache<br /><ul><li>Store complete web sites offline
  157. Also allows pre-fetching of site resources
  158. Cache pages that have not been visited yet
  159. Simple appcache manifest mechanism
  160. Browsers cache data in an Application Cache
  161. See also presentation at:http://goo.gl/tUpjj</li></li></ul><li>*.appcache File<br />CACHE MANIFEST<br /># Version 1.0.1 <br /># Files to cache<br />index.html<br />cache.html<br />html5.css<br />image1.jpg<br />img/foo.gif<br />http://www.example.com/styles.css<br /># Use from network if available<br />NETWORK:<br />network.html<br /># Fallback content<br />FALLBACK:<br />/ fallback.html<br />Example appcache File<br />
  162. <ul><li>Reference the appcache file:
  163. Use .appcache extension (*.manifest also allowed)
  164. Add as attribute to the HTML element</li></ul>HTML<br /><!DOCTYPE html><br /><html manifest="offline.appcache"><br /> <head><br /> <title>HTML5 Application Cache Rocks!</title><br />Example appcache Attribute<br />
  165. AppCache Mime Type<br /><ul><li>Configure your server to serve appcache files with the correct mime type
  166. Manifest files have the MIME type text/cache-manifest
  167. Most web servers must beconfigured to serve the manifest files correctly
  168. Kaazing WebSocket Gateway serves manifest files correctly OOTBhttp://kaazing.com/download.html</li></li></ul><li>AppCache Support<br /><ul><li>Desktop
  169. Chrome 4.0+
  170. Firefox 3.5+
  171. Safari 4.0+
  172. Opera 10.6+
  173. Mobile
  174. Opera Mobile 11
  175. iOS 2.1+
  176. Android 2.1+</li></li></ul><li>Other Cool Stuff to Watch <br /><ul><li>RequestAnimationFrame(instead of setTimeOut) for animationshttp://www.html5rocks.com/tutorials/speed/html5/#toc-request-ani-frame
  177. WebSockets for low-latency, full duplex web communicationwww.kaazing.comhttp://websockets.org</li></li></ul><li>Questions?<br /><ul><li>Now or Later
  178. E-mail: peter.lubbers@kaazing.com
  179. Twitter: @peterlubbers
  180. LinkedIn: Peter Lubbers</li></li></ul><li>Don’t Miss This!<br /><ul><li>SteveSouders’ HTML5 Performance Talk
  181. Free eventhostedby the San Francisco HTML5 User Group
  182. 28 July 2011
  183. Sold out, but waiting list still available
  184. Streamed live to ~2,000 members
  185. For details and to sign up visit:http://sfhtml5.org </li></li></ul><li>Buy the Book!<br /><ul><li>Pro HTML5 Programming (Apress, 2010)
  186. E-book coupon code for Spring/Summer 2011:LUBBERSHTML5</li></li></ul><li>Useful HTML5 Resources<br /><ul><li>HTML5 Boilerplate
  187. http://html5boilerplate.com
  188. The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks:
  189. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  190. Browser logos:
  191. http://paulirish.com/2010/high-res-browser-icons/</li></li></ul><li>Useful HTML5 Resources<br /><ul><li>Building Faster Web Sites (SteveSouders, O’Reilly)
  192. Live on July 28th at the SF HTML5 User Group (Streamed Live): http://sfhtml5.org
  193. Performance analysis tools:
  194. Chrome Speed Tracerhttp://code.google.com/webtoolkit/speedtracer/
  195. Yslow (for Firebug)http://developer.yahoo.com/yslow/
  196. Page Speed (Firefox and Chrome Add-On)http://code.google.com/speed/page-speed/docs/using_chrome.html</li></li></ul><li><ul><li>HTML5 User Group:
  197. San Francisco: http://www.sfhtml5.org/Live streaming video and recordings
  198. New York: http://www.meetup.com/NY-HTML5-User-Group
  199. London: http://www.meetup.com/LondonHTML5UG/
  200. Apress book: Pro HTML5 Programming
  201. (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/
  202. World Wide HTML5 Training:
  203. E-mail us: training@kaazing.com
  204. Web site: http://tech.kaazing.com/training/</li></ul>Note: Thanks to @vjwang for review and editing<br />Learn More<br />

×