9 thủ thuật giúp wesite bạn load nhanh hơn với HTML5 và CSS3

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 {
    left: 0px;
}
div.box.totheright {
    left: 80px;
}

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>

AddType text/cache-manifest .appcache