Boost Performance by Preloading Website Object

I would like to suggest a method of massively boosting page speed, by preloading the entire website data object.

Wait a minute ... what?

Yep, that's right ... We can load the entire compressed website data object in JSON format through a single javascript Ajax call. By example, this website currently has around 50 pages, most of them with 30-40 images each. Thanks to extraordinary compression by Gzip, the entire website data object loads in at < 40kb. The data object is loaded only after the entry page is entirely loaded, so the method is non-blocking. The website data object obviously does not include static assets like image files, which will be loaded on-demand as normal.

Comparison

For the sake of comparison, 40kb is the same as a single small image on a website and approximately the same as the jQuery javascript library compressed. Single pages on websites such as bbc.com and nytimes.com these days weigh in at 1000 - 2000kb in total, so 40kb is only a fractional load. The advantages are significant:

Advantages

  • Speed & Performance - Visitors will experience spectacular responsiveness when navigating through the website, with pages loading instantly without any delay. Except for images- and other assets, the website data object is already loaded into browser.

  • LocalStorage Cache - After the website data object is loaded once, it is stored locally in the browser with Html5 localStorage. Next time the user visits the same website, the entire website data object is instantly available. The data object is only reloaded if there are changes to the website, which are indicated programmatically in a date-updated meta tag.

  • Less Requests - Greatly reduces the amount of requests made to webserver, which is a main factor in website performance. A single request consists of not only a basic load, but several other processes: DNS-lookup, connect, send, wait and receive [screenshot].

  • Server Performance - Less processing demands and requests made to the webserver keeps it sharp and fast for those processes it does have to handle.

  • Search Feature - With the entire website data object readily avaialable in the browser, one can implement lightning-fast JS search functionality without even having to send requests to the server. One could easily search pages and images within the website object, and this can be leveraged by using a plugin like TaffyDB.

Dependencies

Although there are no obvious cons involved, there certainly are a few project dependencies which may limit the scope of usability for this method:

  • Gzip - The powerful compression made available by Gzip is paramount for this method to be plausible. For text-based data with repetitive elements, Gzip can compress objects to less than 10% of their original size. At time of writing, the entire data object in this website is compressed from 620kb down to 43kb! [screenshot]

  • HTML5/Ajax - It is only plausible to preload the entire data object if the website is ajax-based, and pages can be constructed from JSON-data. Furthermore, the browser should support localStorage and the Html5 history feature, so the browser url field can be manipulated without the clumsiness of #hashbangs.

  • Server - The process of creating (and refreshing) the entire website data object in JSON format is very demanding on the server. Unless you are on a dedicated server, it would only make sense if your CMS- or backend can cache the created JSON output.

  • Website Structure - This method is only plausible for small- to medium websites with basic content structure, which do not refresh more than perhaps once a day on average.

Author Notes

I do not claim the technical concept outlined in this post- and implemented on this website to be unique. This method can be used in much larger degree to speed up basic websites, although that claim is susceptible to debate. Furthermore, there is certainly room for improvement: The JSON data can be additonally reduced by using javascript templating, and it may be beneficial to use IndexedDB to store the data in browser.

This website is backwards compatible with non-html5 browers. If required features are not present, the website object is simply not loaded, and pages are loaded normally without using Ajax. Furthermore, this page uses multi-redundant page-loading mechanisms in this order:

  1. Website Object - If the website object is loaded into browser, pages are created directly from entries in the website object.

  2. LocalStorage - If website object is disabled, or if a specific page is not avaiable within the website object, pages are cached- and loaded in browser localStorage.

  3. Ajax - If page entry is unavailable in both of the above, the page is loaded from server in JSON format with Ajax. This is further enhanced by aggressive browser caching, and by serving cached output (no need for server processing).

  4. Html - For those few browsers that don't support certain Html5 features, vanilla html pages are loaded. Html page output is also necessary for having entry pages available.


Related Links

How to improve website performance - Devbridge.com

Fast loading mobile websites - Smashingmag.com

Ultimate guide to web optimization - Hongkiat.com


Comments