Minimize Webpage Latency With Split Flag Sets
Tags: features, experimentation, featureflags, featuremanagement
Published: 2023-12-15 22:11:52

---
title: Minimize Webpage Latency With Split Flag Sets
published: true
date: 2023-12-11 22:29:58 UTC
tags: Features,experimentation,featureflags,featuremanagement
canonical_url: https://www.split.io/blog/minimize-webpage-latency-with-split-flag-sets/
---

Think of all you can do with a feature flag. You can achieve a/b/n testing in production, gradual rollouts, instant rollbacks, gated releases, safe incremental releases on your schedule, and more. Feature flags lift you to soaring heights.

Now think of thousands—no tens of thousands—of feature flags. Alarming? If you are a web developer, do you picture your blazing website grinding to a halt, server rapidly paging out memory and crashing, click through rates nose-diving, conversion rates destroyed, and users bouncing? How can such a catastrophe be averted?

In the past we would say, you could pick out your needed feature flags by name one by one. _Not a savory thought._

Now, you can use flag sets! **_Sweet._** Divide up your flags as server-client, web-mobile, campaigns, releases—as you like. Only the flag sets you specify are loaded, and you can flexibly add and remove flags from different flag sets. Groupings can even overlap. (Remember good ol’ subsets and intersection of sets from Algebra?)

In this blog, we’ll show you how to make use of flag sets and share a taste of the performance benefits that can result. You’ll find the [complete code example](https://github.com/splitio-examples/flagsets-split-browser-suite) on github.

To run the code, you will need:

- A Split account (with the Measurement and Learning add-on) or switch on a [free account](https://app.split.io/login) today.
- [Visual Studio Code](https://code.visualstudio.com/)
- The [NPM package manager](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- curl on the command line

Let’s begin.

## Define Your Feature Flags

In [Split UI](https://app.split.io), you’ll need to set up the following Split feature flags:

- One feature flag named **`image_size`** , with treatment values `h`, `l` (the lowercase letter ‘L’), `m`, `t`, `s`, and `b`, serving `h`

- A second feature flag named **`network_speed`** , with treatment values `Regular3G`, `Good3G`, `Regular4G`, and `WiFi`, serving `Regular3G`

- The last feature flag named **`optimize_with_flagsets`**, with treatment values `on` and `off`, distributing treatments 50% `on` and 50% `off`

Be sure that the feature flags are created with the same traffic type and defined for the same Split environment. To evaluate these flags in your code, you’ll need to copy the server-side and client-side API keys retrieved from your Admin settings page in Split UI (as shown below) [to your .env file](https://github.com/splitio-examples/flagsets-split-browser-suite/blob/11841e7893f422d158d9134a4a870ef27807cb95/.env.example#L3-L5).

![](https://lh7-us.googleusercontent.com/tx3zPog6JfTrp6-_HdPnlyGletTFohlMAkfyeCCo0c4FxkjtmyyOiS2-wmBDZV7qOKUj0-I0m18J4ERnv_I6ZUyxfXwSnHnDWkQ9VKFldH6RUqlqKfOBQxE0csDfStWeunVtWmPAd4Hdim0rOCLnpyk)

## Set Up Your Flag Sets

Use Split API to create a flag set by using the following curl command:

`curl --location --request POST "https://app.split.io/internal/api/v3/flag-sets" --header "Authorization: Bearer <YOUR_GLOBAL_ADMIN_API_KEY>" --header "Content-Type: application/json" --data-raw "{ \"name\": \"frontend\", \"description\": \"The feature flags that are downloaded to the web client\", \"workspace\": { \"id\": \"<YOUR_SPLIT_WORKSPACE_ID>\", \"type\": \"workspace\" } }"`

We’ll need to substitute some credentials. On your Admin settings page in Split UI, you can create your **Admin API key** (set Permissions as All Environments), and your **workspace ID** can be found in the page URL, as shown below.

![](https://lh7-us.googleusercontent.com/27-4m8Qw0PY8HNa5vxyLak9jo1sgFHZO6B8AfblMfIbbj1BBPjU9K5yxEXftyU1T2m6p0wieRU9tb_aapt3miTY5_jUODVrPEfVcPwWadc2nBz06SdPdVcWH6JWKzmOWy0-MZKP8q3BQbgrUtTHkWwI)

Now we can run the curl command, which creates a flag set called `frontend` that we can associate with a flag definition in Split UI, as shown below.

![](https://lh7-us.googleusercontent.com/rRc-_qvWZ3ICI8fNuwjndqAlIgpNd62gvCBWLLmSyH0vIbX-SOwreCbzG-fPyNrCplo0REjeHrSzNBo44590m82L1lcpbjVkqxKVvzh0IYAX0ti0E67s_mJixaAkDgdizb0k5N-srAfD2Y1IyWOMk0k)

When our javascript code runs in the web client, `SplitSuite` requests the Split feature flag definitions from Split cloud. In our code, we specify the subset of the Split feature flag definitions that we want to download. We do this by configuring the `SplitSuite` object with the name of the flag set `frontend`, as shown below.

```

import { SplitSuite } from '@splitsoftware/browser-suite';

const client = SplitSuite({
    core: {
      authorizationKey: process.env.CLIENT_SIDE_SDK_KEY,
 
      // In this example, we get the user key from URL query parameter `id`
      key: new URLSearchParams(window.location.search).get('id'),
      // Specifying the traffic type for the user key is optional, the value is 'user' by default
      trafficType: 'user'
    },
    sync: {
      splitFilters: [{
        type: 'bySet',
        values: ['frontend']
      }]
    }
  }).client();

  client.on(client.Event.SDK_READY, function() {
    // Evaluate a feature flag
    let imageSize = client.getTreatment(process.env.FEATURE_FLAG_IMAGE_SIZE);
   
    // Use the feature flag’s returned value... code omitted for simplicity 
  }

```

When we run the site, we can see the Split definitions as they are retrieved from Split cloud in DevTools as shown below.

![](https://lh7-us.googleusercontent.com/U5g4Z8RmUFjwl95V2FBRXo76owHP9MJZh3IyfDqQv-NULLqEF-J4QMSIi5aYMpk3n61d_0taP1dMKBn75h93MfrkUQeN3FxliHNzhumc3GJd8BkfbPo3uF_xTRK-TBOJ_uStEaFddRSET5b4ddPPDqY)

If we [put this optimization behind the feature flag called ‘optimize\_with\_flagsets](https://github.com/splitio-examples/flagsets-split-browser-suite/blob/11841e7893f422d158d9134a4a870ef27807cb95/server/index.js#L19-L25)’, we can measure [the impact of using our flag set](https://github.com/splitio-examples/flagsets-split-browser-suite/tree/flagsets#set-up-a-split-metric-and-view-results), as shown below. (No need to comment on the brilliantly imaginative flag name. Yeah, thanks.)

![](https://lh7-us.googleusercontent.com/jlaI2zHUkqZju_8G4q5dkgJkH0IWRGxwpJlFEzEYQArXQP-XQTHejvO_kGHw3vIdyqvX-mVoieH3VeOnKuBjhJWZzq5cFC1oz4EYt9jso2jQ5VZZGVPTAK8KaYsL-hZkGBwlbDrgkvlHYxEV3roVPAM)

We can see an average 43.37% improvement when we limit the flags fetched from Split by using a flag set (rather than downloading 700 flag definitions in the `off` treatment). In our case this is an average latency decrease of 257 ms.

## Take Away

With Split flag sets, you can keep your client smart but lightweight by loading only the subset of feature flags you need. Kiss latency goodbye and see your app performance really take off.

So then, what will you do with your feature flags? Especially, what will you do with your **_flag sets_**?

A few words of appreciation: For convincing us of the browsing latency reduction possibilities of flag sets, rather than hosting-costs savings, security improvements, or other (also interesting but less relevant) benefits that we were considering writing about, credit goes to Johannes Liegl at Split. (To celebrate flag sets’ success, Johannes did a high five and secret handshake with his counterpart on this project Nicolas Zelaya.) Thanks always to Krishna Ramisetty for much appreciated and seldom mentioned solid guidance on all my blogs.

### **Switch It On With Split**

Split gives product development teams the confidence to release features that matter faster. It’s the only feature management and experimentation solution that automatically attributes data-driven insight and metrics to every feature that’s released—all while enabling astoundingly easy deployment, profound risk reduction, and better visibility across teams. Split offers more than a platform: It offers partnership. By sticking with customers every step of the way, Split illuminates the path toward continuous improvement and timely innovation. Switch on a[trial account](https://www.split.io/signup/), schedule a[demo](https://www.split.io/demo-request/), or[contact us](https://www.split.io/company/contact/) for further questions.

### **Get Split Certified**

[Split Arcade](https://free-arcade.split.io/register) includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

The post [Minimize Webpage Latency With Split Flag Sets](https://www.split.io/blog/minimize-webpage-latency-with-split-flag-sets/) appeared first on [Split](https://www.split.io).