There are several ways by which you can increase site loading speeds. Among the most popular ones is lazy load and dynamic async javascript are first. Typically these methods are used to control and prioritize the rendering of primary web page elements to the benefit of the overall user experience.
HTML5 is the most beautiful that that happened to the web. HTML 5 would eventually make webapps powerful and as capable as native apps, with Chrome’s Native client.
HTML5 Client-side Local Storage provides a great solution for database storage on the client side. There are some other interesting things that can be done on the client side.
Improving site performance by caching in HTML5 Client storage
By intelligently storing web page CSS, Javascript files or Images locally, you can avail benefit of reduced network and server usage, resulting in page loading time improvements.
The HTML5 localStorage provides a basic client-side key-value database, storing only String objects, which does fine for Javascript and CSS, however it would not store binary data like Images.
The first step to achieve this is to encode binary image data into base64 ascii. Using OpinionatedGeek, you can base 64 encode your images. Once done, you would have to implement the Javascript and localStorage API to read & write your Images from the local client:
source: developerWorks
<script>
var hero;
if ( localStorage.getItem(‘heroImg’)) {
hero = localStorage.getItem(‘heroImg’);
}
else {
hero = ‘/9j/4AAQSkZJRgABAgAAZABkAAD/7 /…/ 6p+3dIR//9k=’;
localStorage.setItem(‘heroImg’,hero);
}
document.getElementById(“hero-graphic”).src=’data:image/png;base64,’ + hero;
</script>
The corresponding HTML Image element:
<img id=”hero-graphic” alt=”Blog Hero Image” src=”” />
The caching in HTML5 local client storage is way more effective than browser’s caching.
However, through the implementation of HTML5 Local Storage, the browser now provides a mechanism to permanently store large chunks of data, while giving server side applications control and intelligence over the data store itself.
The possibilities of speeding webapps are just endless with this style of local storage for web components. You can save swf, css, js, anything that can be heavy for your website.
Refer toHTML5 localStorage API, visit the W3C specification page for Web Storage.
Download complete HTML of this example: HTML 5 Image caching.
p.s. there are certain Vulnerabilites in HTML 5 implementation with certain browser, watchout!
More to come on HTML5, Open Source, Youtube, Google via @taranfx on Twitter or Facebook Fanpage.
loading...
loading...