Optimizely Edge is a performance mode that can be enabled within Optimzielys client-side experimentation tool called Optimizely Web. Using Edge mode on your project can help eliminate flicker when experiments are being applied to your pages.
Edge achieves these speed improvements by making use of a CDN. In Edge mode, a portion of the code found within the normal Javascript snippet is kept within the CDN level instead. This means when a client downloads the snippet, they need to download a lot less data, making it quicker!
Optimizely Edge comes it out-of-the-box with a lot of Optimziely packages and within this tutorial, I will walk you through some tips to help you implement and test an Edge project. If you want to learn how to master Optimizely Edge, read on 🔥🔥🔥
Optimizely Web Vs Optimizely Edge
The first question many might ask is the differences between Web vs. Edge projects and which ones they should use. When it comes to performance sadly there's no generic yes/no answer that will be applicable to every company. When you sign-up with Optimziely you will be given access to an onboarding engineer who will work with you to make sure you implement the snippet optimally.
Most Optimizely customers use the normal Web snippet at first and then use Edge if they have performance issues. With Optimizely it's also not a one-size so you are free to create as many Web and Edge projects as you like and there is nothing stopping you from using two snippets on the same website. Some customers will only use Edge on high-traffic pages, like a homepage, that is visited hundreds of thousands of times a day just to give the best response possible, however, technically or financially, there is nothing stopping you from using Edge everywhere.
For those wondering what the differences between Edge and Web are, I'm a little loather to say. Edge works by splitting your bundle into two parts. One part lives in the client's browser, the other in the CDN. The benefit of this split is the bit that lives in the client's browser is about 10 times smaller. Within Edge, as some code lives within a CDN there are some actions like targeting that can be harder, however, if you are not planning on using those features, you will not miss out on anything. Also, if you need to make use of those features, it might be possible but might require additional set-up.
Personalization is a very broad term and it is incorrect to say you can not do personalization with an Edge snippet, however, when you think about differences, it can help to say that Optimziely Web has more access to customer data as the web snippet runs in the browser compared to an Edge snippet. This difference in accessing customer data is probably the big difference and as each client has different targeting and segmentation needs, you can hopefully see why this is not a one-size-fits-all customer answer! The simple answer is for some customers, Edge will give them exactly the same as Web. For other customers, may need to do things differently and if you are unsure, ask the Optimizely team!
Get Started With Edge
Your first step is to create an Edge project within the Optimzielyt UI. You do this from the projects screen.
After creating an Edge project, you will need to add the related snippet to your website. You can get access to the snippet within the UI from within Settings:
The recommended way to install the snippet is to add it directly on your page, at the bottom of the head section, or, as the first element within your body tag. It is NOT recommended to inject the tag via Google Tag Manager. If you do this you will encounter flicker issues!
Edge Implmentation Tips
One quirk in Edge mode is that if you try to look at the Javascript generated by the snippet directly, you will encounter this error:
If you want to look at this Javascript you can, however, you will need to add some additional HTTP headers when making the request. If you want to do this, I will typically turn to Postman:
To get the Javascript, you will need to add two host headers to the request. These are Referer and User-Agent.
For Referer you will want to add the URL of the domain that the snippet will be run on, for example, https://optimizely-performance-edge.netlify.app/.
For User-Agent you need to add the user agent of the device the snippet will run on. You can find the list of supported browsers here, however, to get the Javascript for testing, you can add in any supported browser agent. For example, adding Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 as a value will return the code!
Doing this should now return you the Javascript. From testing, you can see Edge snippets can be as little as 5kb in size! If you are new to Optimziely I recommend that you use the normal snippet at the start. Also, keep in mind that you can create unlimited projects, so you can mix and match normal mode and Edge mode if you want to as well 😊
Happy Coding 🤘
