Personalization Without Compromise – Site Performance and Dynamic Yield

TL;DR: Brands today want to provide the best possible digital experiences for their customers, but with each A/B test or personalization campaign deployed, the higher the likelihood of page flicker and reduced site speeds. Knowing performance should be top of mind, Dynamic Yield has made significant investments in minimizing the impact when it comes to implementing even the most sophisticated use cases with our technology, so teams can be more agile and maintain strong conversion rates, no matter the scenario.

Today’s marketing stack is chock full of tools to help brands enhance the customer experience – from web analytics, digital advertising, heat mapping tools, session recording software, and A/B testing and personalization platforms. Many of these tools are based on client-side scripts, AKA Javascript (JS) tags embedded into the HTML of all site pages to run and execute the necessary logic of a particular technology.

However, as more and more client-side scripts are added to the site, the longer it takes to finish running each piece of code, which can increase load times and negatively impact page performance. And given the direct correlation between site speed and conversion rates (even SEO), companies can unintentionally end up compromising the user experience.

Recognizing personalization involves some of the most robust and dynamic work on an eCommerce site, Dynamic Yield has invested significant resources into decreasing our platform’s footprint, which I’ll walk through now.

Let’s start with the script

After building a dedicated team to handle and optimize the performance characteristics of our script, we needed a way to measure its existing and future state. As an industry standard, and to ensure customers were seeing the same results as us, we chose the Google Lighthouse scoring method.

From there, we launched a deep-dive analysis to detect any performance bottlenecks. One of the main areas of improvement we identified during this process pertained to “Total Blocking Time,” which is essentially the amount of time a page is blocked from responding to user input such as mouse clicks, screen taps, or keyboard presses.

Representing 25% of Dynamic Yield’s overall score, our work started here, which led to major changes in the form of:

• A solution for below-the-fold recommendations – the main thread blocking time is most sensitive to the execution part of the JS, so we chose to only execute these campaigns when needed, in a way that allows the page to load and not wait.

• Optimization of cookie caching – the number of requests to the server directly impacts the performance of the page, so we enhanced our caching policy so that most of the data is available in the client at the right time and no server requests are required.

• Elimination of code duplication – when a snippet of code appears multiple times throughout a codebase, it not only becomes more difficult to maintain but also adds extra unnecessary technical debt, which we were able to organize for a reduced script size.

• Application sequencing – we implemented lazy loading to render personalized content as soon as the specific shopper is ready to engage with it, and not a moment sooner, with smaller payloads mitigating performance impacts while making sure flicker doesn’t occur.

Following these updates, we reduced page load time by an average of 33% across the Dynamic Yield customer base, with some who are implementing more robust campaigns seeing improvements of up to 80%. And to maintain our commitment to performance, we also introduced new development processes to ensure new script versions do not negatively impact page load performance.

Additional solutions available to further optimize performance

Beyond the efforts we’ve made to reduce the Dynamic Yield script size, we have also developed a number of solutions that brands can take advantage of to optimize customer experience delivery with our platform.

1. Server-side rendering

For customers with the goal of zero-latency, we rolled out our Experience APIs to enable launching campaigns on the server-side, where personalization is done before rendering so there is no effect on the served page. But as not all campaigns are created equal in the eyes of performance, a hybrid solution was also made available. This means teams can use all of our out-of-the-box capabilities to quickly do A/B testing via the client-side script while transferring the heavy load of above-the-fold campaigns to API-based implementation. We believe this hybrid solution is best for agility and performance.

Integrate Dynamic Yield’s Client-Side Scripts While Also Calling our APIs For Greater Agility and Performance

2. ​​Templating engine

Over the years, we’ve created dozens of personalization templates in HTML, CSS, and Javascript that teams can easily customize and set live with minimal dependence on design and development. Not only do our pre-built experiences improve workflow efficiencies, but a fantastic additional value they provide is in their ability to reduce the size of the script. The reason being is that once a Template is used for different variations, loading happens just once instead of adding up the code for each variation.

Dynamic Yield’s Template Engine Both Increases Workflow Efficiencies and Reduces Script Size

3. Content delivery network integration

With this option, a team can load Dynamic Yield’s script and host all images uploaded through our system for variations from their content delivery network (CDN) as opposed to our own. In this approach, the propagation time of a campaign can be manually chosen, whereby it can be updated once per day, for example, instead of once every five minutes – for better performance. Additional benefits include not having an additional external dependency, the ability to select a vendor to ensure the servers are as close to visitors as possible, which also offers greater control in optimizing loading times.

Serve Dynamic Yield’s Script Through a CDN for Greater Control Over Load Time Optimization

Other best practices teams can implement

On top of utilizing some of the capabilities mentioned above as part of a team’s work with Dynamic Yield, some other basic concepts can be prioritized on a brand’s own path to peak performance.

• Minifying the code – one of the main methods to reduce load times and bandwidth, this process involves minimizing the code and markup in a site’s web pages (and even our templates and variations) by removing comments and extra spaces as well as crunching variable names.

• Product indexing – to improve recommendation serving times among larger feeds, a group_id string can be used to define a collection of product variations (e.g., a shirt in several colors will have a unique SKU but the same group_id).

• DNS prefetching – in an attempt to resolve an IP address from a third-party server like Dynamic Yield, a prefetch tag can be placed before the script to reduce latency, with alternative preconnect tags able to establish a connection before an HTTP request.

Balancing personalization and performance

At a time when 71% of consumers expect tailored interactions and another 76% get frustrated when they don’t receive them, companies can’t afford to put personalization off in an attempt to minimize page performance. Inversely, those who prioritize personalization cannot overlook its impact on site speed.

That’s why Dynamic Yield is deeply committed to our script enhancement work, even as we launch new features, and provide brands with other tools they can utilize independently to optimize the output of their personalization efforts further.

If you are a Dynamic Yield customer and you have any more questions about performance or any of the measures outlined in this article, please contact your CSM. We’re happy to walk through some of these changes with your developers or technical team. Additionally, business and technical users can watch our on-demand seminar recording on this topic as part of the Dynamic Yield Academy.