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?
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.
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.
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:
Website Object - If the website object is loaded into browser, pages are created directly from entries in the website object.
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.
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).
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.