High Performance HTML5

Google I/O 2012 – High Performance HTML5

As part of my learning on HTML/JavaScript, I just watched the above Google I/O session, and taking notes here as it was a nice one.

  • 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
    • Browser provides performance metrics through window.performance properties. For example, [window.performance.timing.loadEventEnd – window.performance.timing.navigationStart] indicates the loading time, and it can be confirmed on JavaScripts or browser console. Also, showing the [window.performance.timing] object in the browser indicates a lot more supported metrics.
    • [Google Analytics] measures them and show some charts based on the sampling on the site visitors.
  • Script Loading
    • Loading JavaScripts block the execution HTML manipulation.
    • 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
    • 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.
  • Others
    • 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.
Advertisements

Posted on May 4, 2013, in JavaScript, Web. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: