Replacing Google Optimize with the Vercel Edge Network

Since 2012, Google Optimize has been helping web builders experiment with their UIs to find the most effective patterns for their applications. However, Google has announced that Optimize will be sunset on September 30, 2023.

Vercel is ready to help you build a platform to continue your research with higher performance, more control, and better data by leveraging the edge.

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

Google 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 Edge Middleware to your experimentation framework to build a high-performance testing engine.

What is the edge?

The Vercel Edge Network 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 Edge Network, 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 Edge Middleware.

Sub-millisecond experiments with Edge Config

Vercel Edge Config is a small data store for distributing your data to the Edge Network where it can be replicated to all of your globally available regions. 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 Serverless Functions, Edge Middleware, and Edge Functions. Let's use the Edge Config SDK in an Edge Function to get the best possible performance:

import { NextResponse } from 'next/server';
import { get } from '@vercel/edge-config';

export const config = { matcher: '/welcome' };

export async function middleware() {  
  const greeting = await get('greeting'); 
  return NextResponse.json(greeting);
}

You'll receive the JSON object that you created for your Edge Config to define experiments in your application:

{
  // A boolean feature flag
  "winterSale": true,
  // An A/B test with even weight
  "saleColor": {
    "red": .5,
    "green": .5
  },
  // A multi-variate, weighted experiment
  "buttonColor": {
    "red": .2,
    "green": .3,
    "blue": .5
  }
}

You can then use this payload in your experimentation logic to create a powerful platform for your testing needs.

Eliminating 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 Edge 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.

Track 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.

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

export const CheckoutButton = () => { 

  useEffect(() => {
    // Track how many times button was rendered
    // and which experiments were active
    saveData("Checkout button impression", {
      isWinterSale: true,
      saleColor: "red", 
      buttonColor: "blue"
    })
  }, [])



  const handleClick = () => {
    // Track when a user clicks the button
    // and which experiments were active  
    saveData("Checkout button click", {
      isWinterSale: true,
      saleColor: "red", 
      buttonColor: "blue"
    })

    // Your checkout logic
    console.log("Check out!")
  }

  return (
    <button onClick={() => handleClick()}>
      Checkout
    </button>
  )
}

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

Experiment 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.