10 tips to load your page faster with HTML 5 and css3

One of my best friend and an expert web developer Sanjib asked me  last week that if HTML5 is faster than HTML4 or XHTL1.0 in terms of processing , great point,unless it is not faster than the previous versions there is no point using it. We can make html 5 faster if we follow 10 simple rules.

  • Tip 1: Use web storage in place of cookies
  • Tip 2: Use CSS Transitions instead of JavaScript animation
  • Tip 3: Use client-side databases instead of server roundtrips
  • Tip 4: JavaScript improvements lend considerable performance advantages
  • Tip 5: Use cache manifest for live sites, not just offline apps
  • Tip 6: Enable hardware acceleration to enhance visual experience
  • Tip 7: For CPU-heavy operations, Web Workers deliver
  • Tip 8: HTML5 Form attributes and input types
  • Tip 9: Use CSS3 effects instead of requesting heavy image sprites
  • Tip 10: WebSockets for faster delivery with less bandwidth than XHR

Tip 1: Use web storage in place of cookies

While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a measurable impact on response time, especially during XHRs. So a best practice is to reduce cookie size. In HTML5 we can do better than that: use sessionStorage and localStorage in place of cookies.

These two web storage objects can be used to persist user data on the clientside for the length of the session or indefinitely. Their data is not transferred to the server via every HTTP request, either. They have an API that will make you happy to be rid of cookies. Here are both APIs, using cookies as a fallback.
// if localStorage is present, use that
if ((‘localStorage’ in window) && window.localStorage !== null) {

// easy object property API
localStorage.wishlist = ‘[“Unicorn”,”Narwhal”,”Deathbear”]’;

} else {

// without sessionStorage we’ll have to use a far-future cookie
// with document.cookie’s awkward API 😦
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = ‘wishlist=[“Unicorn”,”Narwhal”,”Deathbear”];’+
‘ expires=’+expires+’; path=/’;
document.cookie = cookiestr;
}

Tip 2: Use CSS Transitions instead of
JavaScript

CSS Transitions give you an attractive visual transition between two states. Most style properties can be transitioned, like manipulating the text-shadow, position, background or color. You can use transitions into pseudo-selector states like :hover or from HTML5 forms, :invalid and :valid (example with form validation states). But they’re much more powerful and can be triggered when you add any class to an element.

div.box {
left: 40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }
By adding the toggling the classes of totheleft and totheright you can move the box around. Compare this amount of code with that of a JavaScript animation library. Clearly, the number of bytes sent to the browser is much less when using CSS-based animation. Additionally, with GPU level acceleration, these visual transitions will be as smooth as possible.

Tip 3: Use client-side databases instead of server roundtrips

Web SQL Database and IndexedDB introduce databases to the clientside.
Instead of the common pattern of posting data to the server via XMLHttpRequest or form submission, you can leverage these clientside databases. Decreasing HTTP requests is a primary target of allperformance engineers, so using these as a datastore can save many trips via XHR or form posts back to the server. localStorage and sessionStorage could be used in some cases, like capturing form submission progress, and have seen to be noticeably faster than the client-side database APIs.For example, if you have a data grid component or an inbox with hundreds of messages, storing the data locally in a database will save you HTTP roundtrips when the user
wishes to search, filter, or sort. A list of friends or a text input autocomplete could be filtered on each keystroke, making for a much more responsive user experience. Certainly view the Web SQL Database tutorial for a comprehensive guide at putting this to work.

Tip 4: JavaScript improvements lend considerable performance advantages

Many additional methods were added to the Array protoype in
JavaScript 1.6. These are available in most browsers now, except for IE.
For example:

// Return a new array of all mathematical constants under 2

[3.14, 2.718, 1.618].filter(function(number){
return number < 2;
});
// [1.618]

In most cases, using these native methods yield significantly faster speeds than your typical for loop like:
for (var i = 0, len = arr.length; i < len; i++).
Native JSON parsing (via JSON.parse()) replaces the json2.js file we’ve been used to including for a while. Native JSON is much faster and safer than using an external script and it’s already in IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 and Chrome.

Native String.trim is another good example of being not only faster than the longhand JS equivalents, but also potentially more correct.

None of these JavaScript additions are technically HTML5, but they fall within the umbrella of technologies that are coming available
recently.

Tip 5: Use cache manifest for live sites, not just offline apps

Two years back, WordPress used Google Gears to add a feature called WordPress Turbo. It essentially cached many of the resources used in the admin panel locally, speeding up file access to them. We can replicate that behavior with HTML5’s applicationCache.

Tip 6: Enable hardware acceleration to enhance visual experience

leading browsers, many visual operations can leverage GPU-level
acceleration, which can make highly dynamic visual operations much smoother.
Hardware acceleration has been announced for Firefox Minefield and IE9 and Safari added hardware-level acceleration in version 5. (It arrived in Mobile Safari much earlier.) Chromium has just added 3D transforms and hardware acceleration for Windows, with the other two platforms coming soon.

Tip 7: For CPU-heavy operations, Web Workers deliver

Web Workers have two significant benefits:

1) They are fast.
2) While they chug on your tasks, the browser remains responsive.

Some possible situations where you could use Web Workers:

  • Text formatting of a long document
  • Syntax highlighting
  • Image processing
  • Image synthesis
  • Processing large arrays

Tip 8: HTML5 Form attributes and input types

HTML5 introduces a new set of input types, upgrading our set of text, password, and file to include search, tel, url, email, datetime,date,month, week, time, datetime-local, number, range and color.
Browser support for these vary, with Opera implementing most at the moment.With feature detection you can determine if the browser has native support (and will offer a UI like a datepicker or color picker) and if not, you can continue to use the JS widgets to accomplish these common tasks.

Tip 9: Use CSS3 effects instead of requesting heavy image sprites

CSS3 delivers many new styling possibilities that supplant our use of images to represent the visual design accurately. Replacing a 2k image with 100 bytes of CSS is a huge win, not to mention you’ve removed yet another HTTP request.

Tip 10: WebSockets for faster delivery with less bandwidth than XHR

WebSockets was designed in response to the growing popularity of Comet. There are indeed advantages to using WebSockets now, instead of the Comet over XHR model.WebSockets has very light framing, and so the bandwidth it consumes is often lighter than that of XHR. Some reports indicate a 35% reduction in bytes sent across the wire. Additionally, in higher volume the performance difference when it comes to message delivery is more apparent; XHR has been recorded in this test with having an aggregate time of 3500% longer than WebSockets. Lastly,Ericcson Labs considered the performance of WebSockets and found the ping times over HTTP were 3-5 times larger than over WebSockets due to more substantial processing requirements. They concluded that the WebSocket protocol was clearly more suitable for realtime applications.

Hope this answers the very basic question of is HTML5 faster. Yes it is faster but if it is used properly, In next post I shall show some practical use of HTML5  and some sites that are already using HTML5, enjoy reading 🙂

Advertisements

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: