19 Feb 2018

Smartcache evolutions and improvements

Since the launch of Smartcache in early 2015, this dynamic page caching solution has become indispensable for our customers. This “full page caching” solution is particularly interesting for pseudo-dynamic pages when the essence of the page is common to all visitors. The public part of the page is then cached on Fasterize, while the private part (specific to the browsing session) is retrieved directly from the origin via an AJAX request. For example, the product page of an e-commerce site may be the same for all site users, except for the shopping cart, which is specific to the visitor. With our Smart Cache we can cache 99% of the page for instant display to users. The basket is then dynamically loaded and inserted into the page.

We’ve made two significant improvements to SmartCache to make it smarter and reduce its performance footprint.

Automatic refresh of cached pages

Each retrieval of the dynamic areas of a “smartcached” page consists of retrieving the entire page from the origin and then separating the private part from the public part. The private part is then sent to the browser.
The public part was previously unused; it is now cached.

This change brings a very important feature: passive refreshment of cached pages. This avoids the need to manually purge the cache each time a product page is updated. In fact, as the same page is visited again and again, it is continually placed in the cache.

Loading private zones in JSONP

This change is technically more complex. Hang in there :).
Until now, the retrieval of a page’s private zone was done using AJAX. The browser could then download CSS, JS and images while waiting for the private area to be retrieved. As soon as the private elements were retrieved in AJAX and integrated into the DOM, the page was considered coherent, and execution of the JS was triggered via DeferJS.

The HTML preloader

For several years now, browsers have been equipped with a pre-loader that allows you to discover all the page’s static resources by analyzing the attributes of tags containing URLs. Knowing all the resources on the page enables them to apply prioritization rules to the download queue.

By initiating the SmartCache request in AJAX, the browser was unable to take advantage of the pre-loader to download this critical resource as soon as possible (since it blocks the Javascript execution trigger via DeferJS). Depending on the page and the number of static resources, we could see a delay of 100 to 500ms lost before the script triggering the AJAX call was executed.
Here’s an example from one of our customers. The smartcache request is request 22, which is triggered around 600ms after the HTML has been retrieved.

The smartcache request (request 22) is only triggered after the blocking script tags.to improve the prioritization of this request, we then took advantage of the JSONP technique to download dynamic zones via a script tag. We added an async attribute to this tag so as not to block the first rendering of the page’s public zones. The async attribute tells the browser that the Javascript tag will not block the HTML parser (no document.write), but that the script must be executed as soon as it has finished downloading. The HTML parser will then be blocked during execution.

Loading the smartcache request in JSONP: the request is triggered by the preloader at the same time as the CSS and Javascript requests. This translates into better TimeToInteractive [specifically Consistently Interactive]. This can also be seen in the display of slideshows and rich image viewers.

Future developments

We still have lots of ideas for improving SmartCache.

In future developments, we’d like to give the origin the option of directly supplying the JSON of private elements, so as not to download the whole page at origin, in order to reduce the load at origin as much as possible. We’re also looking into the possibility of managing ESI tags for origins that support them.

Another area of improvement will be to rewrite the engine so as not to apply optimizations to the HTML code before dynamic zones are extracted. This will reduce Fasterize’s processing time and improve the engine’s resilience. Today, pages are optimized before dynamic zones are retrieved.

Finally, we’re looking into the possibility of specifying optional dynamic zones when defining the smartcache. This is often the case for banners for admin users or for new users without cookies.

Get a free diagnosis of your site's loading times!

Fasterize news

Published by

Anthony Barré

See the articles

Partagez !

Discover other articles…

Monthly UK Web Performance rankings – Most visited mobile sites

Monthly ranking of the most visited websites in the uk: travel, media, ecommerce. Based on Vitals Core Web, metrics that evaluate several aspects of your

…

1 Apr 2025

Benchmark

Webperformance

Customer Experience / UX

Ranking

Explore past rankings – The evolution of UK’s fastest mobile sites

We archive all webperf rankings to keep track of your positions.

1 Apr 2025

Retail Technology Show: Join us on April 2 & 3 in London

We’re thrilled to announce that Fasterize will be making its debut at the Retail Technology Show, held on April 2nd and 3rd at ExCeL London,

…

27 Mar 2025