High-Speed HTML5 Apps: Tools, Optimization Tips & Techniques
•Download as PPTX, PDF•
14 likes•7,884 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! With web apps, faster is always better; nobody will ever complain that your site is too fast!
![Thanks to the Sponsors ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to High-Speed HTML5 Apps: Tools, Optimization Tips & Techniques
Similar to High-Speed HTML5 Apps: Tools, Optimization Tips & Techniques (20)
More from Peter Lubbers
More from Peter Lubbers (9)
Recently uploaded
Recently uploaded (20)
High-Speed HTML5 Apps: Tools, Optimization Tips & Techniques
- 1. High-Speed HTML5 @peterlubbers Kaazing June, 2011
- 3. Enterprise-Ready HTML5 WebSocket Gateway thatallowsyou to buildmassivelyscalable, real-time web applications
- 4. HTML5 and WebSocket Training
- 5. We’rehiring!
- 7. Books for professionals by professionals
- 8. Pro HTML5 Programming: http://prohtml5.com
- 10. Not to Be Confused With…
- 12. Tools Overview
- 15. Image Data URIs
- 19. HTML5 AppCache
- 20. Q&A, Prizes#html5 @peterlubbers #nychtml5
- 24. Widespread adoption is around the corner
- 25. Many HTML5 featurescan be used today:http://caniuse.com
- 29. Improve the performance of the web app, which in turn improves the user experience
- 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
- 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)
- 39. Improve the perceived speed
- 43. Example: YUI Image Loader
- 45. Most users have Internet connections where upload to download ratios are between 1:4 and 1:20
- 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)
- 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
- 59. Page Speed
- 63. Add-on for Firefox and Chrome
- 70. HTTP, WebSocket traffic, etc.
- 75. Most (if not all) web apps use these resources:
- 76. Scripts
- 77. CSS
- 78. Images
- 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
- 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
- 91. Gradients, border radius, transforms, transformations, etc. instead of images
- 92. Minify CSS
- 93. Place in <head>
- 94. Use Developer Tools to analyze CSS
- 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
- 102. 32 vs. 8 bit Color, 8 vs. 1 bit Alpha Transparency
- 103. Compress image files
- 106. Don't scale images with HTML
- 107. Add height and width to avoidreflows
- 109. Use the "data" URL scheme:
- 110. Works in IE 8 and with a workaround in IE 6 and 7:
- 116. Ideal for images that are contiguous (nav. bar)
- 117. Significantly reduces HTTP requests
- 118. Defining the coordinates can be tedious
- 120. Ant scripts in /build directory
- 121. Use ant minify to minify html
- 122. Output to /publish directoryhttp://html5boilerplate.com
- 123. Server Configuration
- 124. 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/
- 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
- 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
- 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
- 142. 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();
- 143. 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");
- 145. You can create “inline Web Workers” on-the-fly using the (new) File API:
- 148. Note: this will not be interpreted:<script id=”wrk" type="text/worker”>so you can use it to build your file
- 150. Chrome 4.0+
- 151. Firefox 3.5+
- 152. Safari 4.0+
- 153. Opera 10.6+
- 154. Mobile
- 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
- 163. Use .appcache extension (*.manifest also allowed)
- 164. Add as attribute to the HTML elementHTML <!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title> Example appcache Attribute
- 166. Manifest files have the MIME type text/cache-manifest
- 167. Most web servers must beconfigured to serve the manifest files correctly
- 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+
- 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
- 188. The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks:
- 190. Browser logos:
- 192. Live on July 28th at the SF HTML5 User Group (Streamed Live): http://sfhtml5.org
- 197. San Francisco: http://www.sfhtml5.org/Live streaming video and recordings
- 200. Apress book: Pro HTML5 Programming
- 201. (Peter Lubbers, Brian Albers, & Frank Salim)http://www.prohtml5.com/
- 202. World Wide HTML5 Training:
- 204. Web site: http://tech.kaazing.com/training/Note: Thanks to @vjwang for review and editing Learn More