Preventing content flashes

Unless has been designed to prevent FOUC and FOOC by inserting content while the DOM is still rendering.

Traditionally, FOUC is a valid concern. But... it is a thing of the past! Through a super fast backend, a clever data format and a smart script design, Unless prevents the Flash Of Unstyled Content entirely.

The short explanation

It works like this: the Unless script will load the personalized content in parallel with your web page. Then, while your web page is still loading like it normally would, we will replace original content with personalizations. So, we replace content before your web page even shows up in your visitors' browsers.

However, to achieve this, there are a few things that have to be taken into account:

  • Include our script as the first javascript in the < head > section of your HTML code. This way you can make sure that the content will be loaded before the DOM starts rendering.
  • Be aware that using Google Tag Manager or another script injection tool, could cause some interference. Tools like GTM insert scripts later in time - even after your web page has been loaded. The Unless script may be triggered too late to prevent FOUC.

If you have any questions or problems, contact us, so we can help you fix it.

The more technical explanation

As said, Unless uses three things to make FOUC impossible: a super fast, serverless backend, a compact personalization data format based on the smallest delta possible, and a clever loading technique in the client.

On the backend

Personalizations are served based on audience memberships. These memberships are kept in the dynamic part of the Unless service. This backend is distributed globally (also see question 2), and based on serverless computing only. This means that:

  • All live data is served from AWS DynamoDb (the giant non-relational database service that we share with Twitter, Netflix and Amazon itself).
  • All code is executed using serverless Lambda functions (which execute in parallel automatically for each request).
  • All dynamic output is served through the global Cloudfront CDN, built into the AWS API Gateway.

Personalization data format

Based on the audience memberships, personalizations are served to the client.

Personalizations are stored as flat JSON files in AWS S3 and served through the global Cloudfront CDN as flat data, which makes it super fast and almost impossible to break (because there is no running code involved).

The data format for personalizations contains the delta of the DOM only (so, unlike other platforms, we don’t store a series of slower javascript functions, but instead serve the actual difference to the DOM - similar to how Google Docs lets you “work together” in real-time on one document).

The snippet and script

Assuming that it is placed correctly (as the first thing in the HTML head), the Unless snippet prevents FOUC entirely. The script and subsequent data both load asynchronously, in parallel with the initial parts of your web page. Personalizations are then applied as delta insertions while the DOM of your website is still rendering, using a recursive approach. So, this happens before the visitor even sees anything.

Note: in 99% of all cases, Unless will finish before your website does, but just to be sure, it hides the initial DOM view until the personalization has been applied (and automatically unblocks the DOM after a short while if something would go wrong).