Homepage Hero conditional A/B component loading
Answered
Barn Swallow posted this in #help-forum
Barn SwallowOP
Hey folks. We have VWO set up to run A/B tests across our site, and so far it's been integrating fine with Next.js. However, recently we ran a pretty sizeable test on the homepage where we had three design variants, as well as the Control design. This meant I had something like this:
In these components they were wrapped with a
Our bandwidth bill almost doubled because each page load was loading in every component, even if they were hidden. Because of above-the-fold content loading, we needed to have each component ready to display so we could avoid content flashing and all of that, which meant (I think) we couldn't use
I don't really know what the best play is here, in order to have multiple variants like this but not load unnecessary code for every visitor who doesn't need it.
Does anyone here have experience using a service like VWO for A/B testing? Code-only A/B libraries are not in the cards, because we need non-developers to be able to spin up tests.
<Control />
<Variant1 />
<Variant2 />
<Variant3 />
In these components they were wrapped with a
hidden
class and then revealed depending on which variant we wanted them to see via VWO.Our bandwidth bill almost doubled because each page load was loading in every component, even if they were hidden. Because of above-the-fold content loading, we needed to have each component ready to display so we could avoid content flashing and all of that, which meant (I think) we couldn't use
next/dynamic
.I don't really know what the best play is here, in order to have multiple variants like this but not load unnecessary code for every visitor who doesn't need it.
Does anyone here have experience using a service like VWO for A/B testing? Code-only A/B libraries are not in the cards, because we need non-developers to be able to spin up tests.
Answered by Barn Swallow
I'm an idiot. We had some huge inline SVGs I hadn't accounted for and it was adding over 1MB to our bundled JS.
1 Reply
Barn SwallowOP
I'm an idiot. We had some huge inline SVGs I hadn't accounted for and it was adding over 1MB to our bundled JS.
Answer