HTML5 Performance Tips & Tricks

Jatinder Mann's presentation at the Build 2012 conference "50 performance tricks to make your HTML5 apps and sites faster" has some interesting facts & 50 tips on improving performance -


* 3 dimensions to improve web performance -
- Network
- CPU
- GPU

* AJAX performance does not wholly depend on JavaScript performance

* Where does the CPU time go?

1. Networking
2. HTML
3. CSS
4. Collections
5. JavaScript
6. Marshalling
7. DOM
8. Formatting
9. Block building
10. Layout
11. Rendering

Most of the 50 tips are well covered in Souders' book High Performance Web Sites and the YSlow documentation. Listed here are some among the 50 that apply to HTML 5 & modern web development -

* Avoid 3xx Redirection - 63% of top 1000 websites worldwide contain a 3xx level redirect. A redirection can cause a delay of upto 250 ms or 10% of the typical page load time.

* Persist App resources locally in Package

* Cache dynamic resources in App Cache (new in HTML5)

* Cache data requests - jQuery.ajax() has a cache property that can be set to true

* Always load pages in the latest standards mode in IE

* Use HTTP Header to specify legacy IE modes

* Avoid Using @import for Hierarchical Styles

* Avoid Embedded and Inline Styles to prevent the frequent context switches between HTML & CSS parsers

* Only Include Necessary Styles

* Remove Duplicate Code - 52% of the pages on the web have duplicate code

* Asynchronously Download Script using the async attribute

* Standardize on a Single Framework

* Replace Images with CSS3 Gradients

* Replace Images with CSS3 Border Radius for rounded corners (border-radius:18px;)

* Use DataURI’s for Small Single View Images - (are they cacheable?)

* When you're using HTML5 provide a user preview image or else the browser has to download the video, figure out what the first frame and then display it

* Minimize Media Plugin Usage - HTML5 video is no less faster than Flash, Silverlight or Quicktime plugins

* Stick to Integer Math - where possible convert floating point numbers to integer using Math.floor, Math.ceil

* Initialize JavaScript on Demand instead of loading external JS libraries on page load

var userTileScriptsLoaded = false;
function CustomizeUserTile()
{
if (userTileScriptsLoaded == false)
{
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'upload.js';
head.appendChild(script);
}
}

* Use Selectors API for Collection Access
document.querySelectorAll(".required");

* Standardize file capitalization convention - wonder how this improves performance?

Related:
Web Performance Analysis & Optimization tools