Jatinder MannPM Internet Explorer at Microsoft, held the session 50 Performance Tips to Make Your HTML5 Apps and Sites Faster at BUILD 2012, providing lots of tips for building faster web apps.
The advice Mann provided was organized around six principles described below.
1. Respond quickly to network requests.
- Avoid redirects. 63% of the top 1,000 websites use redirects. They could increase their page speed by 10% by not redirecting.
- To avoid Meta-refresh. 14% of URLs worldwide use meta-refresh.
- Minimize server response time by using CDNs located as close to the user as possible
- Maximize the use of concurrent connections by downloading resources from different domains
- Reuse connections. Do not close the connection when responding to a request.
- Make sure that data served by partner sites does not delay page loading
- Understand network synchronization components – Redirect, Cache, DNS, Request, Response, etc. –. Use the Browse Sync API on IE 9&10 to measure the time spent by the browser on each operation.
2. Minimize downloaded bytes. Reduce the amount of data downloaded when loading a web page. The website downloads an average of 777 KB of data, including 474 KB of images, 128 KB of scripts, and 84 KB of Flash.
- Request compressed content
- Keep resources locally in packages, such as Package Resource Index generated for Windows Store apps. This way they are readily available when needed.
- Cache dynamic assets in HTML5 App Cache. This cache downloads resources only once avoiding multiple network round trips. The cache automatically downloads resources when the application version changes.
- Provide cacheable content whenever possible by using the “Expires” field in the response.
- Use conditional queries by setting the If-Modified-Since field of the request.
- Hide data requests – HTTP, XML, JSON, etc. – because about 95-96% of queries do not change during the day. While this is a reasonable idea, less than 1% of websites cache received requests.
- Normalize filename capitalization. Although a server may recognize Icon.jpg as icon.jpg, they are different resources for the web platform, generating different network requests.
3. Structure markup effectively. For IE, use the latest markup normalization because it’s the fastest. Earlier IE6-IE9 markup styles are recognized by IE 10, but they are not as fast as the latest one.
- Use the “X-UA-Compatible: IE=EmulateIE7” HTTP header field instead of the HTML tag to force IE to run in legacy mode which might be needed for some enterprise web applications. It’s faster that way.
- Style sheets should be linked at the top of the page inside the after the
to provide smooth rendering.
- Style sheets should never be linked at the bottom of the page. The page may flicker while loading.
- Avoid “@import” for outline styles as it synchronously blocks CSS data structure creation and screen painting.
- Avoid inline and inline styles as they force the browser to perform a context switch between HTML and CSS parsers.
- Include only the necessary styles. Avoid downloading and parsing style that will not be used.
- Standardize on a JS framework, be it jQuery, Dojo, Prototype.js, etc. The browser won’t have to load multiple frameworks that provide essentially the same functionality.
- Do not upload scripts – FB, Twitter, etc. – just to be cool. They compete for resources.
4. Optimize media usage. Images are the most used resource, on average a website uploads 58 images.
- Avoid uploading too many images, keeping their maximum number 20-30 due to page load time.
- Use image sprites to combine multiple images into one. This technique reduces the number of network connections, as well as the number of downloaded bytes and GPU cycles.
- Create image sprites by hand, as tools can leave large gaps, leading to larger downloads and more GPU cycles.
- Use PNG: best compromise between download size, decoding time, compatibility and compression rate. JPEG can be used for photographs.
- Use native image resolution to avoid downloading unnecessary bytes and CPU processing for scaling.
- Replace images with CSS3 gradients where possible.
- Replace images with CSS3 border radius when possible.
- Use CSS3 transforms to create move, rotate, or skew effects.
- Use Data URI for small single images. It saves an image download.
- Avoid complex SVGs that require longer downloads and processing.
- Specify an image preview when including an HTML5. The browser won’t have to download the entire video to determine what the preview image should be.
- Use HTML5 instead of Flash, Silverlight or QuickTime. HTML5 is faster and running the plugin consumes system resources.
- Proactively download rich media asynchronously and persist it to the application cache.
- Initialize JS on demand. Load JS dynamically if needed.
- Minimize DOM interactions by caching variables like document, body, etc.
- Use built-in DOM code such as element.firstChild or node.nextSibling. They are highly optimized, better than a third party library could provide.
- Use querySelectorAll to access a large number of DOM elements.
- Use .innerHTML to build dynamic pages.
- Batch markup changes.
- Maintain a small and healthy DOM – maximum 1000 elements.
- JSON is faster than XML.
- Use the browser’s native JSON methods.
- Do not overuse the use of regular expressions.
6. Know what your app does
- Align the timers on the display frame to 16.7ms if the monitor refreshes at 60Hz.
- Use requestAnimationFrame for animations to do graphical work in IE 10/Chrome/Firefox. It reminds when it’s time to paint, so there’s no need for a timer.
- Use the Visibility API (document.hidden, Visibilityhange) to determine the app’s visibility state and limit activity when the page is hidden. Saves CPU and battery life.
Mann recommended using Windows performance tools to measure web page performance in IE and optimize pages to reduce CPU time and increase parallelism.