- Set up Optimizely Web Experimentation to minimize impact to the load speed of your page
- Adjust Optimizely Web Experimentation settings to shrink the snippet size
However, Optimizely Web Experimentation works by changing the visual experience on the page as the site loads, making these changes before the visitor sees any content. When customers implement the Optimizely Web Experimentation snippet synchronously and in the head tag, the snippet can execute its changes before the content loads, and customers experience a minimal increase in page load speed.
There are two primary ways that Optimizely Web Experimentation may affect load speed: latency and flashing. Read on to learn:
What impacts load speeds
How Optimizely Web Experimentation controls for performance
Best practices to avoid any issues
Latency refers to when a page is slow to load or render. This is easily noticeable when a web page takes a long time to display in a browser, images slowly appear, or the site's fonts and styles take a long time to apply to text.
DNS Lookup - finding the requested resource's web address (for example, cdn.optimizely.com)
Initial Connection - successfully talking to that resource's address
TTFB (time to first byte) - receiving the very first piece of information from the resource (for example, the first piece of information from Optimizely Web Experimentation's CDN)
Document Complete - the primary road sign that the web page has completed loading all of its resources
How does Optimizely Web Experimentation affect how long these steps might take?
Optimizely Web Experimentation uses a Content Delivery Network (CDN), a network of web servers located around the world, to provide service for rendering the snippet according to the steps outlined above. It is important to note that Optimizely Web Experimentation and its CDN only impact steps #3-5 because that is when the request for the snippet has reached the CDN. Optimizely Web Experimentation balances every request so it can deliver the snippet to the visitor's browser from the physically closest server and highest-performing CDN. This approach allows the snippet to load as quickly as possible in the browser for as many requests as possible, so that even when loading synchronously, Optimizely Web Experimentation does not block other assets on the page. You may read more about Optimizely Web Experimentation's approach to CDN balancing here.
Optimizely Web Experimentation dynamically load-balances between the fastest and most widely used CDNs in the world. This makes the round trip as part of TTFB shorter and reaches TTLB sooner, so Optimizely Web Experimentation can make changes on the site that much longer before Document Complete. This approach dramatically decreases response times for 99% of website visitors, and allows customers to maximize the ROI from experiments.
If you have any questions about our approach to the delivery of the snippet or have a load speed report from your site that you'd like us to review with you, please contact support.
Flashing, sometimes also called flickering, refers to when a page loads the original content for a short time before loading different content, creating a noticeable "flash" of the page. This can create a disruptive experience for website visitors and distract from the effectiveness of the tested content.
When using Optimizely Web Experimentation, please consider the following:
Placement on Page. Place the snippet as high in the head tag as possible. Unlike most third-party scripts, the snippet affects the visual user experience and not just collects data on it. It is important to load Optimizely Web Experimentation before other content on the page to provide the desired visitor experience.
Search Engine Optimization (SEO) historically advises third-party scripts be placed low on the page. However, Google permits and encourages A/B or multivariate tests and has stated that testing poses no inherent risk to a site's search rank. Read more about AB Testing and Search Engine Optimization.
Synchronous vs. Asynchronous Loading. Loading the snippet on a page asynchronously increases the risk of flashing on the page. Learn more about synchronous and asynchronous snippet loading.
Tag Manager. Do not put the snippet in your Tag Manager.
If you do decide to load Optimizely Web Experimentation through a Tag Manager, make sure to place it high on the page, set Optimizely Web Experimentation to load first, and load synchronously. This will help ensure Optimizely Web Experimentation can execute quickly and make changes before the original page loads. Read more about proper Google Tag Manager or other Tag Manager implementations.
Snippet Size. The size of the Optimizely Web Experimentation snippet can greatly impact how testing affects your load time. The snippet contains the information of any running experiments, all audience and goal definitions, and the jQuery library.