Replacing Google Optimize with the Vercel Edge Network

Note: This post is historical and describes Edge Functions as they existed at the time. For new projects, use Vercel Functions with the Node.js runtime and Fluid compute.

With Vercel, you can recreate your Optimize experiments with:

• Sub-millisecond configuration read times

• No code using your Vercel dashboard

• Your existing data ingestion solution

Link to headingGoogle Optimize performance opportunities

In the past, it's been difficult to run experiments in ways that don't harm page performance.

• Google Optimize's scripts must be loaded on every page where you intend to perform an experiment, adding weight to your page size and increasing load times.

• ****Cumulative Layout Shift (CLS) hurts your application's SEO and UX—but is often introduced accidentally when running UI experiments on the client side.

• Server-side latency increases when your server has to make calls to Google Optimize to figure out which experiments are currently being ran.

Instead, you can introduce Vercel Edge Config and Routing Middleware to your experimentation framework to build a high-performance testing engine.

Link to headingWhat is the edge?

The Vercel CDN sits between the internet and your Vercel deployments acting as a Content Delivery network (CDN) with the ability to execute functions as close to your user or data as possible.

This means that the building blocks of your application will always be served from the geographically closest data center in the CDN, ensuring that your users experience the best performance possible.

With Vercel, you have several features that you can use together to replicate and enhance Google Optimize's experimenting functionality: Edge Config and Routing Middleware.

Link to headingSub-millisecond experiments with Edge Config

Vercel Edge Config is a small data store for distributing your data to Vercel regions where it can be replicated globally. Your experiments data becomes available instantly and can be fetched in less than 10ms on average, letting you iterate on your experiments faster.

Once you've created your Edge Config, you can fetch its data in Routing Middleware for request-routing decisions or in Vercel Functions for backend logic. You can then use this payload in your experimentation logic to create a powerful platform for your testing needs.

Link to headingEliminating Cumulative Layout Shift

Embracing the edge also lets us significantly reduce Cumulative Layout Shift (CLS) by making sure that we serve statically rendered content at the speed of dynamic. Using primitives from Next.js and Vercel

With Routing Middleware, you can read your Edge Config to serve the correct variant of your page instantly rather than computing the variant on the client after the page's initial load. Speedway Motors cut their CLS by 50% using this strategy as shown by Vercel Analytics.

Link to headingTrack results

To analyze how your experiment is doing, you can leverage your current data solution of choice, passing in the context of your experiment as properties of your data.

1
import { saveData } from'@your-data-provider/sdk';
2

3
export const CheckoutButton = () => { 
4

5
  useEffect(() => {
6
    // Track how many times button was rendered
7
    // and which experiments were active
8
    saveData("Checkout button impression", {
9
      isWinterSale: true,
10
      saleColor: "red", 
11
      buttonColor: "blue"
12
    })
13
  }, [])
14

15
  const handleClick = () => {
16
    // Track when a user clicks the button
17
    // and which experiments were active  
18
    saveData("Checkout button click", {
19
      isWinterSale: true,
20
      saleColor: "red", 
21
      buttonColor: "blue"
22
    })
23

24
    // Your checkout logic
25
    console.log("Check out!")
26
  }
27

28
  return (
29
    <button onClick={() => handleClick()}>
30
      Checkout
31
    </button>
32
  )
33
}

In the future, we're looking forward to adding more features to track your experiments.

Link to headingExperiment faster by default

We want to help you replace your experiments** **and make them even better.

By taking your experiments to the edge, the tests that you were running with Google Optimize can be incrementally migrated to improve your page performance while still collecting the valuable experimentation data that drives your business.