Accelerating Dynamic Data

Some pages generate personalized or segmented content into their HTML pages. Examples include shopping carts, custom ads, or personal user greetings. Normally, there is no point in caching those HTML pages, since there is a more or less unique version for every user. With Speed Kit, however, there is a way to just do that. The concept is called Dynamic Blocks and it is illustrated below.

The basic idea behind Dynamic Blocks is to load and display personalized content in two steps:

  1. Load and display a generic placeholder with Speed Kit: The initial request for a generic placeholder block can be accelerated with Speed Kit because it is the same for all users.

  2. Fill in personalized data: Concurrently, the personalized data is loaded without Speed Kit acceleration. When available, the anonymous placeholder is filled with the user-specific content.

With this approach, the website can fetch linked assets much faster and start rendering, even before the personalized content is available.

How To Use It

First, you identify which parts of your site contain personalized content and mark them as Dynamic Blocks (class="speed-kit-dynamic"). In addition, you can assign a unique ID to each of your Dynamic Blocks (data-speed-kit-id="1") to match the different blocks. If not present, Speed Kit will use a simple index for that. The "speed-kit-dynamic"-class is a default selector for dynamic blocks which means no changes have to be made to the configuration.

If you want to see all this in action, take a look at our Dynamic Block Demo.

Hide Generic Content

Sometimes it is a good idea to hide generic content in dynamic blocks until it is replaced by the personalized content. To this end, Speed Kit attaches a status class to the main <html> element. Before replacement, the <html> element has the class speed-kit-dynamic-loading, after replacement it has the class speed-kit-dynamic-loaded. Instead of "speed-kit-dynamic", you can define a custom class prefix in the config. You can, for example, use the status class to hide generic content in the dynamic blocks like this:

.speed-kit-dynamic-loading .speed-kit-dynamic { visibility: hidden; }

After the replacement of the dynamic blocks the CSS rule will no longer match and the element will become visible again. Obviously, you can also use more fancy transitions like adding a loading spinner:

@keyframes speed-kit-loading {
    0% {
        box-shadow: 8px 0 #C8C8CD, 20px 0 #DDDDE0, 32px 0 #EDEDEE;
    }
    33% {
        box-shadow: 8px 0 #EDEDEE, 20px 0 #C8C8CD, 32px 0 #DDDDE0;
    }
    66% {
        box-shadow: 8px 0 #DDDDE0, 20px 0 #EDEDEE, 32px 0 #C8C8CD;
    }
}

.speed-kit-dynamic-loading .speed-kit-dynamic::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -24px;
    border-radius: 50%;
    box-shadow: 8px 0 #C8C8CD, 20px 0 #DDDDE0, 32px 0 #EDEDEE;
    will-change: box-shadow;
    animation-name: speed-kit-loading;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    visibility: visible !important;
    z-index: 1000 !important;
}
PreviousDeactivating Speed KitNextRefresh API

Last updated