If you’re experiencing flickering or flashing of unstyled content (FOUC) while conducting A/B testing on a website within a platform, read on. Users can be exposed to “flickers” of the original content before a test’s code executes changes, which could negatively impact your user experience or revenue goals.
Variance in testing scenarios and platforms means there’s no all-in-one solution to FOUC. However, we’ve compiled a list of 12 techniques you can use to help mitigate the problem. These techniques are divided into 3 sections: basic preventative measures during setup, best coding practices within the platform tool, and onsite codebase changes.
1. Snippet placement
Bottom line: if you’re experiencing FOUC issues across many tests, try moving the snippet higher up in the page’s code, as close to the top as possible.
2. Asynchronous vs. synchronous snippet
The snippet injected onto the page can usually be loaded synchronously or asynchronously. An asynchronous script loads alongside other scripts/elements. While this can improve page load speed performance, it can cause the original content to flicker (FOUC). A synchronous script loads in the order it exists relative to other elements on the page, and therefore scripts after it must wait for it to load first. This can negatively impact page load speed, but it will help to mitigate FOUC issues. Generally, the synchronous option is recommended, but you’ll need to determine if page load speed or issues with FOUC is more important.
Bottom line: if FOUC is an issue, try using the synchronous version of the snippet; if page load speed is an issue, try using the asynchronous version.
3. Use libraries already on the site rather than including them via the platform
If your site uses jQuery, which it likely does, then opt for the version loaded on your site over one that may be included within the platform’s snippet. Keep in mind that doing this will make your site’s library a dependency, so it will need to be loaded before the platform’s snippet. For example, Optimizely allows you to include the full jQuery library, a trimmed version, or no version at all. In this case, opt to use the site’s library, not the snippet’s, and you’ll reduce the size of the snippet while increasing page load speed performance–both factors that will help to mitigate FOUC.
Bottom line: leverage existing libraries/code loaded on the site and avoid loading similar versions through the platform.
Bottom line: take advantage of global code shared across experiments if you have the option; this minimizes code you need to write and reduces the snippet size.
5. Ensure inactive/deleted experiments are not included in the snippet
Some platforms will load the code for any and all experiments in the snippet, including experiments that are inactive in some way (paused, for example) and possibly even deleted/archived. Make sure you disable this if your platform offers this option.
Bottom line: ensure code from inactive/deleted experiments is not loaded in the snippet.
Platform Coding Techniques & Best Practices
7. Add a CSS “mask” over the page and remove it when the changes have been made
Bottom line: try hiding the elements of the page while the snippet code makes its changes and then reveal the elements after the changes have been made.
Bottom line: poll for elements that may take a while to load or will be pulled in later, and make your changes accordingly; make sure you do not create endless polling functions if the elements never load.
9. Make use of coding design patterns to avoid repeating similar code across variations with slight changes (advanced topic)
Bottom line: use efficient coding patterns/designs to reduce the amount of code you need to write for subtle changes shared across variations/experiments.
10. Last resort: minify production code
A final option to consider if FOUC is still a prevalent issue after exploring the methods above is to minify the code you add to the platform’s snippet. This will reduce the size of your experiments’ code and thus the size of the snippet, reducing chance of FOUC. However, this has a number of negative consequences: (1) minified code is not human readable and thus not easily maintainable by your team or other developers, (2) you run the risk of introducing other errors that would only occur during the minification process, and (3) debugging will be very difficult. If you choose to minify the code for your experiments, consider having a duplicate experiment for each experiment with unminified code for development purposes. This entails maintaining two experiments for every test. If your platform offers the ability to minify code at the snippet level, consider using it.
Bottom line: if the platform allows you to minify code at the snippet-level via a global setting, use it; otherwise, consider minifying the code for each experiment, but keep in mind the potential consequences like readability, maintainability, debugging, and minification errors.
Onsite Codebase Solutions & Best Practices
11. Reduce the size of your assets
Images are a common FOUC influencer, especially if the page contains many high-resolution images. In this case, consider these approaches:
- Compress your images. There are many free online tools that can compress large images while preserving web-standard quality. Professional software is also capable of this. Optimize your images for the web.
- Reduce the amount of images loaded on any given page. Perhaps the homepage does not need a 9-slide carousel, a recommended products carousel, a featured products carousel, and all the other graphics/bling.
- Implement “lazy loading” of your images. This means only images onscreen are actually loaded. Images offscreen load as you scroll to them. Consider this for carousels and exceptionally long pages. There are plugins/tools to help accomplish this.
Note: you can apply these techniques to the images you upload to the platform, as well.
- Ensure that scripts that the snippet/experiments do not depend on are loaded after the snippet.
12. Use a tool to gain insight about your site’s performance
There are numerous tools that can help illustrate components that are negatively affecting your site. A tool like GTMetrix provides scores for various aspects of your site, like image compression, image dimensions/resolution, minified code/libraries, and bad coding practices. Pay attention to your scores and check pages throughout your site’s funnel to determine areas for improvement.