How VWO Affects your Site Speed
A recent post published on the ConversionXL blog highlighted a study conducted to find out how different A/B testing tools affect site speed. VWO was among the tools compared and we feel the results of the study are not an accurate reflection of our technology.
In this post, we are going to highlight some aspects of the study that had a large impact on the results and also elaborate on how the VWO code affects your page load time.
Sub-optimal Test Configuration with ‘DOM Ready’ Event Conditions
- The inclusion of the ‘DOM ready’ event made the VWO code wait for the entire page to load before it could display the changes made in the variation. The web page used in the study had a page load time of around 2.7 seconds.
Here’s a snapshot of the campaign code from VWO settings (while the code waits for ‘DOM ready’):
Here’s another snapshot of the campaign code (using the optimal way, without ‘DOM ready’):
Executing after the DOM ready event will invariably increase the experienced loading time. Here’s the general case for it.
- To counter flicker and ensure a smooth loading experience for visitors, VWO hides all the relevant elements before they start loading on the page and only unhides them once the VWO code has swapped them with the variation changes. All this happens within a span of 110 milliseconds on average. If the campaign had been configured using the optimal manner, the flicker effect would have automatically been taken care of by our SmartCode.
Asynchronous v/s Synchronous Code
As clearly noted in the blog post, “Most A/B testing software create an additional step in loading and rendering a web page”. This happens because many A/B testing tools use synchronous code. VWO, with its asynchronous SmartCode is an exception to this.
With its unique asynchronous code, VWO ensures there is no delay in the load time of the page. VWO’s asynchronous code does not block the rendering of parts of the page and does not impact the page load time.
What is asynchronous code and why does VWO recommend it?
Simply put, asynchronous means that the code will contact VWO’s servers in the background, download and process the test package while the rest of your page continues to load and render in the browser normally.
With synchronous code, the browser has to wait for the package to download and then process it before loading the rest of the page. If for any reason the tracking code can’t contact its servers then the browser will wait, usually for 30 to 60 seconds, until the request times out. If your tracking code is in the tag, then your entire page won’t load and your visitor will be stuck with a blank page. Asynchronous code does not have this critical problem. If for any reason, the asynchronous VWO SmartCode can’t contact our servers your page will still download and render properly.
Private and Dynamic Content Delivery Network (CDN)
VWO has invested years of engineering effort to ensure that we build the best-in-class technology and infrastructure for our customers. An important part of this is setting up our own private CDN which uses Bare Metal Servers from IBM SoftLayer’s state-of-the-art global data centers. This ensures that we always have a server close to your visitor’s location and there is minimum latency, reducing critical download time.
VWO’s CDN is also dynamic which caches not just the static code required to run tests but also generates dynamic test variation data. This has an edge over regular CDNs since they only cache static data. By dynamically generating test packages only the relevant variation data is sent to each visitor depending on the URL they are on.
Small Size of VWO’s Test Packages
Another factor that significantly impacts page load time is the size of test packages, which determines how long it will take for the browser to download it. VWO ensures small package sizes through two methods: by intelligently understanding and recording only the precise changes that you make to your page, and individually packaging tests for a visitor to deliver only the relevant content for the URL they are on.
Let us suppose you edit the HTML of your product page template to make two changes; increase the font-size of your text and insert a ‘recommended’ icon. VWO compares your changes to the original code and detects the precise edits – the change made to the CSS property “font-size” and the insertion of a new graphic. Other systems will save the entire block of code which will also convert the dynamic content into static content and will end up showing the same description across all product pages.
VWO’s CDN is custom built for optimal A/B testing performance. It unbundles the payload to make smaller packages for each individual test and URL. Some A/B testing tools bundle all the data for all tests running on a domain into one large package. We’ve seen package sizes of up to 3MB when a website is running many tests, which obviously increases page load time. VWO, on the other hand, only sends the data required for the test running on a particular URL to make a small, tidy payload which downloads quickly. This is especially advantageous when you’re a power-testing team running multiple tests on different parts of your domain.
Having said all this, we are confident that VWO’s best-in-class technology coupled with optimal campaign settings will ensure that your website never slows down. We would also like to invite OrangeValley to work with us on setting up their campaign correctly so that they can present a true comparison of all the tools in their study.
As always, if you still have any doubts or clarifications to seek in this regard, please feel free to reach out to me directly at email@example.com.