Page load speed
If you follow best practices to implement the Optimizely Web Experimentation snippet, you may wonder how Web Experimentation and Personalization affects your site's load speed. Traditional web development best practices dictate that any third-party JavaScript file, like Optimizely's snippet, should go at the bottom of the page and be loaded asynchronously. This approach ensures that even if these resources load slowly, they do not affect the user's visual experience.
However, Web Experimentation and Personalization change the visual experience on the page as the site loads before the visitor sees any content. When customers implement the 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 may affect load speed: latency and flashing.
Latency
Latency is when a page loads or renders slowly, including images, fonts, and styling. Web pages load through a series of steps as the browser requests and receives the resources for that page.
These are the steps of how a page renders:
- DNS lookup to find the requested resource's web address (for example, cdn.optimizely.com).
- Initial connection to talk to that resource's address.
- Time to first byte (TTFB) to measure the time between the request for a resource and when the first byte of a response begins to arrive (for example, the first piece of information from Optimizely's CDN).
- Time to last byte (TTLB) to measure the time elapsed between the sending of the request for web page and the reception of its last byte of data, thus allowing the resource to render visually (an image) or execute (Optimizely's JavaScript snippet).
- Document Complete indicates the web page has completed loading all of its resources.
How Optimizely affects how long these steps take
Web Experimentation and Personalization use 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.
Optimizely and its CDN only impact steps #3-5 because that is when the request for the snippet has reached the CDN.
Optimizely 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 lets the snippet load as quickly as possible in the browser for as many requests as possible, so that even when loading synchronously, Optimizely does not block other assets on the page.
Optimizely dynamically load-balances between the fastest and most widely used CDNs in the world. This makes TTFB shorter and reaches TTLB sooner, so Optimizely can make changes on the site that much longer before Document Complete. This approach dramatically decreases response times for 99% of website visitors and lets customers maximize the ROI from experiments.
Flashing
Flashing, sometimes called flickering, is 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 visitors and distract from the effectiveness of the tested content.
When using Web Experimentation or Personalization, consider the following:
- Page placement – Place the snippet as high in the head tag as possible. Unlike most third-party scripts, the snippet affects the visual user experience. It is important to load Optimizely before other content on the page to provide the desired visitor experience. Search engine optimization (SEO) advises placing third-party scripts 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. See AB Testing and Search Engine Optimization.
- Synchronous and asynchronous loading – Loading the snippet on a page asynchronously increases the risk of flashing on the page. See Load snippet synchronously and asynchronously.
- Tag manager – Do not put the snippet in your tag management system, such as Google Tag Manager. If you load Optimizely through a tag management system, place it high on the page, set Optimizely to load first, and load synchronously. This ensures Optimizely can execute quickly and make changes before the original page loads. See Integrate Google Analytics 4 with Google Tag Manager.
- Snippet size – The snippet's size can 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. Some best practices for controlling the snippet's size include archiving completed experiments, writing reused code in Project JavaScript, or removing jQuery if the library already exists at a higher point in the head tag. If you have any flashing issues, see Troubleshoot experiments.