Just watched a brilliant video from Build 2012 called “50 performance tricks to make your HTML5 apps and sites faster”
Things in the video that I found interesting…
- (8:25) to measure performance, use the Windows Performance Toolkit It’s part of the Windows 7 SDK. And here is a great blog post on how to use the WPT.
Principle #1: Quickly Respond to Network Requests
- (19:50) avoid redirection (can cause up to 250ms delay)
- (20:45) avoid meta “refresh”
- (22:04) use CDNs (Content Distribution Networks)
- (23:15) browsers can download 6 resources in parallel
- (24:00) re-use connections (don’t send Connection: close)
- (24:30) you’re only as fast as your weakest link
- (24:52) understand your network timing (use performance tools)
Principle #2: Minimize Bytes Downloaded
- (26:25) GZIP your content
- (28:07) HTML5 App Cache
- (29:20) Make sure your resources are cacheable (can also use Conditional Requests)
- (31:00) standardize file capitalization convention
Principle #3: Efficiently Structure Markup
- (33:54) always link style sheets at the top of page (e.g. – in <head>)
- (35:05) avoid using @import for hierarchical styles
- (36:15) only include necessary styles for the relevant page
- (37:15) always link JavaScript at end of file (e.g. – just before </body>)
- (38:10) avoid inline JavaScript
- (38:35) if have to put JavaScript in head, use defer="defer"
- (39:35) standardize on a single scripting framework
Principle #4: Optimize Media Usage
- (41:57) when possible, use image sprites
- (43:00) try to create your sprites by hand to get most efficient one possible
- (43:45) PNG is best format for website elements, logos
- (44:34) when possible, replace images with CSS3 gradients
- (45:53) use DataURIs for small, single view images
- (46:58) use preview images for HTML5 video
Principle #5: Write Fast JavaScript
- (50:30) stick to integer math (use Math.floor() or Math.ceil())
- (51:07) minify your JavaScript (improves download and runtime performance)
- (51:42) initialize JavaScript on demand
- (53:00) built-in DOM methods are always more efficient
- (53:22) user selector API for collection access (e.g. – document.querySelectorAll(".required")
- (54:05) batch markup changes together
- (54:27) JSON is always faster than XML for data
Principle #6: Know What Your Application Is Doing
- (55:45) don’t have any dormant timers / combine timers
- (56:10) align timers to the display frame (e.g. – 16.7)
- (56:50) use requestAnimationFrame for animations
- (57:10) know when your app is visible (e.g. – throttle down activity)
