Adding a new script, no matter how small, will affect the website's loading time, especially when comparing it to the scenario where the script isn't added. The script also needs to be prioritized as you want this to be executed as soon as possible, preferably first, to avoid "flickering". However, with careful implementation the impact can be mitigated.
Synchronously vs. Asynchronously
By default, the Symplify script is loaded synchronously. This means that when the browser starts loading the script it will stop parsing the page's HTML until the script has finished loading. This minimize the risk of "flickering" (flash of original content) as the script is prioritized.
The Symplify script can however be loaded asynchronously. To do that you add the async attribute to the script link. Asynchronous loading allows the script to be fetched in the background while the rest of the page continues to load. This prevents the script from blocking other critical resources, such as CSS style sheets and images, from rendering.
Loading the script asynchronously can however increase the risk of flickering as the script won't be prioritized in the same way as loading it synchronously.
<script type="text/javascript" async src="https://cdn-sitegainer.com/XXXXXX/es6/index.bundle.js"></script>
Example of the script snippet with the async attribute
Content Delivery Network (CDN)
In addition to asynchronous loading, the Symplify script leverages the use of a CDN provider for fetching the script. A CDN distributes content across multiple servers worldwide, reducing latency and speeding up the delivery of assets like scripts, images, and style sheets. By serving the Symplify script from a CDN (Cloudflare), we ensure faster fetching and better performance for users across different geographical locations.
Script Execution
When the Symplify script has finished loading, it executes and goes through all the active projects and checks if any of these should be displayed for the visitor. In other words, it checks if the visitor matches any project's Audience setting. If an Audience evaluates to true for a project, the visitor is allocated a variation from that project, and the code (javascript/CSS changes) for that variation is applied for the visitor. How much this affects page speed depends on what changes are done in the project. Hundreds of rows of javascript changes will of course have a higher impact than just changing color on a single element with CSS.
The perceived page speed loss for the visitor is usually not noticeable, but of course, different measuring tools can show an increased load time. This is because it is an added script to the website that not only needs to load but also does changes to the website by adding javascript and CSS.