Boost Performance with a Headless Optimizely Website

Increased speed and performance are two of the most sought-after goals in modern web development. These factors are critical to achieving success with Google PageSpeed Insights and Core Web Vitals, which can lead to a better user experience, increased traffic, more conversions, and more revenue.

Goals like these are why many enterprises are considering migrating to a modern CMS to help them embrace composability. By leveraging composability and headless architecture instead of the traditional monolithic approach to building websites, brands can significantly improve performance and realize its benefits.

In this post, we’ll show how building a headless website with Optimizely and Next.js can yield a performance boost of up to 50% compared to the traditional ‘headed’ approach.

Building a Proof of Concept

To start, we’ll perform a PageSpeed test on some pages using the ‘headed’ CMS application.

Alloy Meet Page

 

Alloy Plan Page

Mobile Headed

Desktop Headed

Taking a closer look at these metrics, it's clear that our site already performs quite well, with scores ranging from 60 to 85 – a solid performance for a content-based platform. However, the real magic happens when we embrace the headless architecture, which involves separating the backend from the frontend. This move promises significant enhancements in our site's overall performance and user experience.

Now let's take a look at the same site but on a headless server.

Mobile Headless

Desktop Headless

The headless pages look exactly the same as the headed ones, but the performance of the headless application has improved tremendously, with a 55% page score improvement.

To calculate this score, take the new score of 98 on mobile on the Alloy Meet page and subtract the previous score of 63, a difference of 35. Next, divide 35 by the previous score of the headed solution, 63.

The result is 0.55, which means a 55% improvement. If we do the same for the Alloy Plan page, the score improvement is 35%, which is also good.

The Process

To accomplish this enhancement, first, we need to add the package of the ContentDelivery API and configure it. Once you have enabled it and configured it to specification, you must ensure that when you call your website in an application/JSON format, it returns the content as JSON.

The next step is to create a Next.js application that calls and maps the JSON content returned by the API. Build your templates and deploy your solution using an edge-capable rendering host such as Vercel, Netlify, or Amplify. (Note: You must have all your Next.js code in GitHub).

Now, your Next.js (headless) application will consume your ContentDelivery API in the CMS that sends all the content in a JSON format. Then, your application will map that content and build, cache, and render the site by leveraging the image processor with SSG. The result? A dynamic, improved, headless, and faster site.

The Magic of Going Headless

Embracing a headless application while retaining a robust CMS like Optimizely enhances performance and allows you to adhere to best practices, thus enhancing SEO and improving accessibility.