Speed and performance optimization is very important in all the web products. HTML5 has lots of new and exciting features for both mobile and desktop applications. This post is focusing on the features that help to boost the speed and performance.

Link prefetching

Loading time is an important factor for a web product. Prefetch feature allow to silently load the specified (url) page in the background, before user actually requested for that. It loads instantly, when user request for that specific page. This dramatically improves the load speed. Google chrome name this feature as “Prerender”

Place the following code in the head section

 /* Firefox */

 /* Firefox */

/* You can pass both features in one rel */
 /* Firefox and chrome both */

To balance the server load and user experience, prefetch should to be used only for the known page, where user supposed to click

DNS Fetching

DNS prefetching allow to prefetch a domain before it is requested. It works in the background similar to prefetch. It tells the browser to resolve the specified domain.

Offline Storage – Cache Manifest

Native app vs web app is a big debate in the web community. HTML5 is trying to bridge the gap by adding the different cool features. Offline storage is one of that. Web app or web site is made available even without a connection. A web app can be accessed offline as we can use the native app offline.

You can specify the resources that need to be available without network. A cache manifest file need to be created as below

CACHE MANIFEST
/style.css
/common.js
/reality-on-web.jpg
My Blog

manifest = “cache.appcache” need to be added in the HTML tag as given below.

< !DOCTYPE html>


...