This article describes the performance difference between loading the Evolv JavaScript snippet synchronously vs. asynchronously and how it affects your website and optimizations.
On this page:
- Why is synchronous implementation better for Evolv?
- What's the difference between asynchronous and synchronous?
Why is synchronous implementation better for Evolv?
- Small file size
- The webloader.min.js file is 13.5kB.
- CDN
- We use a CDN (Content Delivery Network) to distribute the webloader snippet, so you'll always get the optimal speed from the closest server to your location.
- Caching
- Additional page loads pull from the browser's cache, so the snippet only has to download once per session.
- Subsequent sessions will use the cache if it hasn't been cleared since the last visit.
Evolv changes what users see on the page by applying CSS or JavaScript code. The later this code is applied and executed, the greater the chance the user will see the original page. This is called a 'flash' or 'flicker' and can greatly skew your optimization results. If users see too much of the original page, it can disorientate and annoy, causing them to leave early or make different decisions on site.
What's the difference between asynchronous and synchronous script loading?
The downloading of a script and its execution happen at different times during a page load, depending on how the script tag is defined.
A script can load on the page in three ways: synchronously (sync), asynchronously (async), or deferred (defer).
Scripts are loaded differently depending on how important they are to the rendering of the website and the user experience.
Higher priority scripts load synchronously, like those required to render the page. Other scripts, like social trackers and analytics, load asynchronously later on. They're still important but aren't necessary for users to see that the page is loading.
Synchronous (sync)
When a webpage loads in the browser, the HTML is parsed into the browser's DOM. When it gets to the synchronous script, it stops parsing the HTML to request and execute the file before parsing continues. Content (including scripts) that have already been parsed at this time will continue to download.
Large script files can cause the page to render slowly. Smaller files, like the Evolv snippet, are loaded quickly.
Asynchronous (async)
When an asynchronous script is requested, the HTML continues to be read, and other content is downloaded in parallel. Once the asynchronous script is downloaded, the page loading pauses to execute the script.
Deferred (defer)
A deferred script is fetched in parallel with the page loading, like the async script. However, it isn't executed until the entire page is ready.
If there's a lot of content to download, the script could take a long time to execute. Users might have started interacting with the page before it finishes. This presents a terrible user experience when your optimization renders changes to the page content.
Images from Stack Overflow
Related articles