Last week, we spoke about delivering high-speed personalization at scale at Headless Commerce Summit 2021, Netlify’s Jamstack-focused headless commerce event. Our founder & CEO, Steve Sewell, shared a few proven techniques to deliver personalization at scale on Jamstack sites. Listen to Steve’s full talk, or read the summarized version in the post below.
How to deliver high-speed personalization at scale on a Jamstack site
Before we dive into the techniques, let’s first cover the problem: traditional solutions to personalization are slow. And the point of Jamstack is speed.
Tip: We suggest reading this updated article about Jamstack CMS.
The problem: traditional solutions to personalization are slow
Traditional personalization was done on servers, which is opposed to the Jamstack mindset where you statistically pre-generate content and deliver it from the edge, from a location that is geographically near the end-user. Server-side personalization would mean sending requests all the way around the world to the origin server, which would then pull data and assemble a perfect personalized page and send it all the way around the world back to the end-user's device.
This process can take a very long time - up to multiple seconds for a full page load. And this situation is precisely what we're trying to avoid with Jamstack, because we know that those seconds added to load times cost you conversions. We need speed, but we also want to personalize the content.
Some personalization tools only require you add one line of code to your pages, which seems so easy. And one line shouldn’t really impact performance, right? Well it’s one blocking Javascript tag that downloads a whole horde of content that might be injected into your page as it loads. Your visitors won't be able to view your page pr even some of the content on the page (e.g. above the fold only, or even placeholder content) while the blocked Javascript tag is downloading. As a result, the perceived speed of your page will be very, very slow.
Now, of course, Jamstack solves these performance problems by delivering cached static content instantly from the edge. There's no server assembling the content on-the-fly, it's pre-generated and fast, but everybody sees the same content. We come back to the same problem, we need a solution that's fast and personalized. Read on for a few techniques to help you deliver fast, personalized experiences at scale.
The solution
Three techniques to deliver high-speed personalization at scale that can be used with any headless CMS and website stack.
1. Static + dynamic rendering
Delivering high-speed personalization with a combination of static and dynamic rendering. You don't have to pre-generate your entire page. Frameworks like Next.js and Gatsby have facets built-in, so you can have some content fetch and load only in the browser.
In the example below, you get the shell of the page instantly, so the perceived load time is nearly instant. This technique is used by companies, like Facebook, to show placeholder content before loading the next set of more personalized content.
👉 Get started for free to experience Builder for yourself!
The black announcement bar at the top of the screen is empty, but we preserve that space so that when the personalized content comes in the user won’t experience any jank. We're also rendering placeholder imagery so the visitors can see that content is about to come in.
The placeholder lands almost instantaneously and then, based on information that's unique to the visitor (e.g previous purchases, items in cart, etc) we send back relevant, personalized content. Now we're showing unique content to visitors and delivering it quickly.
This technique can be used for full pages as well as page sections. The blue boxes in the image below represent common practices we see ecommerce sites use on Builder.
You may want to fully personalize your homepage and landing pages. Or you might want to minimize the perceived noticeable impact of the second stage of rendering by rendering just above the fold and only personalizing below the fold. It might not be ideal, but it will be faster. It's up to you how you want to strike the balance between speed and personalized content, which might be a tad slower but far more optimized for conversion because of its relevance to the visitor.
We see merchants do this a lot on collection pages. Collection pages tend to have a nice, generic introductory hero to the collection. Certain things can be targeted to visitors, but pre-rendered. For example, if your collection page always has the same hero, we can pre-render that.
Product pages are becoming very popular to personalize. Product recommendations are the norm and can be personalized to visitors based on previous purchases, browsing behavior and other criteria. Another popular trend we’re seeing is editorializing product pages. Adding unique content below the product information that covers the brand story, materials, manufacturing, sustainability, and more.
2. Statically generated A/B testing
Another technique for Jamstack sites to deliver high-performance personalization, which Builder does out-of-the-box, is statically generated A/B testing. You can pre-generate the entire page so it loads instantly, but still deliver different content to different visitors.
When Builder generates static code, it always prints the default variation in just hydratable by React, or your framework of choice. Then, we add a template tag that has the other variations, plus a small inline script (nothing to download, nothing blocking and no performance hit besides maybe a fraction of a millisecond to execute a minor amount of Javascript). Next, we roll a dice, or check if the visitor has already placed in a test group, and we might execute a small DOM manipulation to determine that we don't want the default content in this case. And now you actually have a statically generated lightning-fast page with personalized content.
It's pretty amazing that using techniques like this you can actually deliver personalized pages without a performance hit.
3. Create variants of content in your CMS
Now that you can deliver personalized content without impacting performance, you need to create all the content for every variant, set up tests and decide who sees which variant. You can do all of this with your headless CMS.
Builder's headless CMS, for example, comes with static A/B testing, content scheduling and targeting capabilities out-of-the-box, so you can simply define the criteria to personalize content based on, create the content variants with our drag and drop editor and publish to your site.
You can implement something similar using custom fields on any headless CMS, with some minor differences and limitations. You’ll still be able to decide that certain variations of content will be triggered by certain criteria (such as browsing behavior), but you’ll send that to the browser as queries. Every CMS has a slightly different operator syntax for the query, but overall that means that your content editors can make many variations, publish them all and then use clever queries to determine which content variant will be delivered. Different visitors will see different content based on what is actually relevant to them.
Now let’s talk about the results.
Results
High-speed optimization at scale is definitely a very powerful thing. Dynamic personalization combined with statically generated A/B testing and merchandising can result in significant performance and conversion improvements for an ecommerce business.
Last holiday season, Everlane published over a hundred optimization versions of their homepage in just one month with Builder. These versions were targeting different audiences, they were scheduled for specific dates (leading up tp Black Friday, during Black Friday, during Cyber Monday, etc) all published in advance and optimized using the techniques listed above. Content variations were shown to customers based on criteria, such as new vs. returning customers, items in cart, browsing and purchasing behavior, etc. and site updates were 32x faster.
👉 Get started for free to experience Builder for yourself!
Bottom line
One of the biggest learnings from doing Jamstack with an ecommerce lens since 2014 is that when you have a Jamstack ecommerce site, marketers need to be able to create new content and modify content independently. Having engineers in the way and filling up backlogs causes strain on everybody. This is why we created Builder as a headless CMS that also comes with a rich no-code interface where you can register your React, Vue, Angular, etc. components and drag and drop them using a visual editor to publish bespoke content on your site.
Builder was built with performance and personalization in mind. It comes with everything you need to deliver high-speed personalization at scale out-of-the-box. The techniques we use to do this can also be implemented to some extent with any headless CMS.
We hope these techniques will help you personalize your Jamstack site at speed and scale. Both for the non-developers to create, optimize and test content and for developers to have what they need.
