Web designers/developers are always looking for new ways to improve the speed and performance of the pages. With some of the new features available in HTML5, there are several ways that you can improve your web applications/pages to give your user a better experience. We’ve compiled 9 easy-to-implement HTML5 tips and tricks here that would help you streamline your website without investing in additional infrastructure.

1. Use HTML5 Forms and Inputs

HTML5 has introduced a whole new set of form attributes and input types to upgrade your existing HTML forms. Not all browsers are supporting these yet, but for the ones that are there are some useful features built in.

  • autofocus focuses the caret on page load so you can begin typing in the field immediately
  • placeholder allows you to set default text in a field that will clear when the field is clicked
  • required will not let the form submit if the field is not filled out
  • pattern lets you specify a custom regular expression that the field must meet

Since these functions are now built-in, you will not need to create JavaScript functions to handle them. This will speed up your pages and create a more responsive feel to your page.

2. Use CSS Transitions

Using CSS transitions instead of JavaScript functions will greatly improve the speed of your pages as well as create an clean visual transition between two states. By using the totheleft andtotheright you can move a box around to create transitional movement. For example:

div.box {
    left:50px;
    //for webkit browsers
    -webkit-transition: all 0.3s ease-out;
    //for mozilla
    -moz-transition: all 0.3s ease-out;
    //for opera
    -o-transition: all 0.3s ease-out;
    //other browsers
    transition: all 0.3s ease-out;
}
div.box.totheleft {
    left0px;
}
div.box.totheright {
    left80px;
}

Since the number of bytes sent to the browser is much less when using CSS-based animations instead of JavaScript, the animation will be quicker and more responsive.

3. Use HTML5 Web Storage

When you need to store information such as in a cookie, you create an inefficient situation where the cookie data must be added to every HTTP request header. This ultimately makes a large impact on response time. Using HTML5, we can create a solution to this problem and store information in Web Storage instead of cookies.

Two Web Storage objects, sessionStorage and localStorage have been created to store persistent user data on the client-side for the length of the session. This data is not transferred through the HTTP request so it does not slow down the response time of the page. Here is a small example:

//check to see if localstorage is present (browser supports HTML5)
if (('localStorage' in window) && window.localStorage !== null) {
    //store items
    localStorage.wishlist = '["Bear", "Cow", "Pig"]';
}

As you can see, this method is much simpler than cookies since we do not need to specify an expiration or store the cookie with the document in the DOM.

4. Use Web Workers

Web Workers are part of the new HTML5 specification and are an API for running scripts in the background. This creates an almost multi-thread-like environment where large processing can happen in the background while normal page function can continue to function. When using a Web Worker, you just need to specify the script that the worker will be running, any event listeners (if any) and then start the worker. Here is an example:

var worker = new Worker('doWork.js');
worker.addEventListener('message'function(e) {
    console.log('Worker said: ', e.data);
}, false);
worker.postMessage('Hello World'); // Send data to our worker.

There are many situations where using Web Workers would create a much faster application environment such as image processing, text formatting or receiving and processing large files.

5. Use Web Sockets

Web Sockets is a specification for an API that allows for two-way communication with a remote host. This method can be used between a client and server application or can be implemented between web browsers and servers. Since Web Sockets has a very light-weight frame, the bandwidth consumption is much less and often creates a 35% reduction in bytes sent as well as ping times that are 3-5 times shorter than standard HTTP.

Not only can Web Sockets create faster communication, it can create a way for your application to work in limited environments. Since Web Sockets only run on port 80, they can be used as a way to get around blocked ports that your application may need.

6. Use Application Cache

Application caching creates a way for developers to have offline web sites and applications. This allows for offline browsing, reduced server loads and faster site speeds since some elements are cached. The developer can specify which files the browser should store in the cache manifest file, which is a simple text file of resources. Here is an example of a cache manifest file:

CACHE MANIFEST
# 2011-06-18:v3
# Explicitly cached entries
index.htm
style.css
# offline.htm will be displayed if the user is offline
FALLBACK:
/ /offline.htm

This manifest file references a “catch all” page that will be displayed if the user tries to access pages that are not cached while offline. Only the pages specified in the “cached entries” section will be available to the user. You must enable the page to use the application cache and point it to your manifest file. Here is how you reference the file:

<html manifest="http://www.example.com/example.appcache">
  ...
</html>

Manifest cache files can have any file extension but you need to be sure that your web server is setup to handle them with the correct MIME type. For example, in Apache:

AddType text/cache-manifest .appcache

Using the application cache you can create a viable, offline experience for your users with very little effort. When speeding up your pages, caching can be very helpful in creating less server traffic and caching the static items that you do not update often.

7. Use CSS Instead of Images

Using CSS effects instead of images can be an easy way to speed up your site and many popular image techniques can be replicated using CSS. Not only do you cut down on the number of bytes going through your server but you cut down on HTTP requests. Here are some great CSS techniques that you can use to cut down on the images your site is using:

  • CSS Masks
  • Box-shadow
  • Transforms
  • RGBA/Alpha opacity
  • Border-radius
  • Linear and radial gradients

8. Use Hardware Acceleration

While hardware acceleration may not be available in all browsers yet, it packs a big punch in those that support it. If your application uses animations or 3D transforms you can turn on hardware acceleration to get the GPU working for you. In order to use this feature you need to use a HTML5 canvas and your applications will instantly become twice as fast at rotations, scaling and opacity. These features will have the benefit of being handled directly by the GPU and won’t require a redraw of the layer contents.

9. Use Client-side Databases

Currently, the major browsers can’t agree on which client-side database to support but Web SQL Database and IndexedDB can be used to greatly improve the speed of data storage to the client-side instead of sending the data back to your server. Not only will this decrease HTTP requests but it will cut down on the load of your server when the user wants to do simple tasks like search, sort or filter.

Unfortunately, since most browsers support Web SQL DB and Mozilla only supports IndexedDB, you will either have to choose to support the two or cut out Mozilla users. However, both of them are simple to learn and use so it isn’t hard to begin using these to speed up the storage of data for your pages.

As you can see, there are many great new features in HTML5 that you can use to begin speeding up your web pages and create a better user experience for web applications. Getting started with HTML5 is easy and pays off with big benefits almost from the start. Get started by implementing some of these features in your sites and you will begin to see that there are great things ahead for your sites with HTML5.

Posted by: Dhiraj kumar

You can support this website by sharing. Thank you!