High Performance HTML5
- Performance and business
- There’s correlation between good performance and business success. There are some studies that indicates about the improvement (better conversion rate or longer user session) by cutting the load time, since it improves the user experience.
- Simple setting change (concatenating scripts, turning on GZIP, adding expire header, etc.) can improve performance metrics.
- window.performance metrics
- [Google Analytics] measures them and show some charts based on the sampling on the site visitors.
- Script Loading
- ControlJS has a lazy loading functionality. There are other libraries LABjs, YUILoader, etc. (Based on my brief search, “requirejs” seems like the popular one).
- Caching is important on mobile browser, as network is relatively slow. AppCache and LocalStorage can be utilized.
- However, about 50% users can come with empty cache (analysis based on the If-Modified-Since header). It needs to be kept in mind.
- CSS instead of images helps on performance. Or, SVG, canvas, etc. can be used too.
- For animation purpose, use “requestAnimationFrame” instead of “setTimeout”, which is faster.