Core Web Vitals: Why JAMstack could hold the key

Core Web Vitals are three new metrics that are set to be included in Google’s new page experience algorithm, which will start to roll out from June 2021. These new factors will impact on the way it ranks search results, so getting to grips with them is crucial for your SEO efforts.

Tips and inspiration

6 min read

Illustration of a dashboard with various graphs dotted around it.

Cobiro's Content Team

In this article we explain what the metrics are, how to measure your score and why JAMstack websites are ideally suited to meet and exceed the new standards.

Google’s new page experience algorithm

Google’s ultimate goal is to serve people, and one of the ways it does this is to look at how good your website’s user experience is. Web pages that respond to what the user decides to do, in the most efficient way possible, are likely to rank higher than those that don’t.

With a gradual rollout from June 2021, Google will start to combine some of its existing search signals with its new Core Web Vitals, which join together to form the page experience algorithm. The update is expected to be finished by the end of August. 

The existing search signals include things like mobile-friendliness, safe browsing and a secure connection, which you can read about in our page experience overview article. In this blog we’re going to focus on the new Core Web Vitals.

Core Web Vitals

Divided into three specific measurements, Core Web Vitals is a set of factors Google thinks are important to a web page’s overall user experience.

They go deeper than ever before, measuring issues such as load time, interactivity and stability - all which have a significant impact on how a user perceives and interacts with a web page.

1. Largest Contentful Paint (LCP)

This is a measurement of the time it takes to load the largest piece of content on your page. 

Google looks at the largest image or text block on a page, and calculates the render time (when it’s fully loaded and visible) relative to when the page first started loading. The longer people have to wait, the worse the experience of using that website will be.

What to aim for: a load time of 2.5 seconds or less. 

2. First Input Delay (FID)

This is a measure of how long it takes for your page to become interactive and responsive.

Google calculates the time it takes from when a user first interacts with your page (by clicking on a link, tapping a button or submitting a form) to the time when the browser is able to respond to that interaction.

What to aim for: an input delay of less than 100 milliseconds. 

3. Cumulative Layout Shift (CLS)

This is a measure of how often unexpected movements happen on your page.

Elements, such as third party ads or images with no dimensions that shift around while the user is viewing the page can contribute to a poor page experience. Google looks at the space an element takes up, and how much it moves on a screen to determine a CLS score.

What to aim for: a score of less than 0.1.

How to measure your website’s Core Web Vitals

With Core Web Vitals taking up the biggest chunk of your page experience score, it’s worth doing an audit of your website and taking steps to optimize it ahead of the update.

There are several tools out there, but Google’s PageSpeed Insights is a good place to start. 

Enter the full URL for one of your pages to get started. Once you’ve clicked ‘analyse’ your score will show. Note - at the top of the page you can switch between mobile and desktop versions.

Your web page’s overall score is out of 100. Below 50 (red) is considered poor, between 50 and 89 (orange) as needing improvement and 90 to 100 (green) as good.

Each area is broken down, with recommendations given on the steps needed to achieve a better score.

Improve your Core Web Vitals score with a JAMstack website

Making the necessary improvements to your website can be complex and time consuming, but transitioning across to the JAMstack approach can make the process a lot easier.

Let’s take a closer look at what JAMstack is, and how it can overcome the problems that lead to low Core Web Vitals scores. 

What is JAMstack?

JAMstack is a modern approach to building websites. It’s not a programming language or a tool, but an architecture that delivers fast and user-friendly websites.

It’s an acronym that stands for JavaScript, Application Programming Interfaces (APIs), and Markup. Each component is separated so they become easier to work with. This is known as decoupling. But they interact together to deliver the end result (the stack part).

CDNs

With a JAMstack site, content is generated in the form of files from the website’s origin server, which is then cached and delivered across a content delivery network (CDN) - a global network of servers.

This network works together to reduce the distance a website’s content has to travel before it reaches the end user. So if a user in the U.S. is accessing your Spanish-based website, the content will be delivered from the closest server to where they are based, rather than having to travel to the website’s origin server in Spain.

Read more about JAMstack in our complete guide.

Bringing it to life

Let’s take three challenges around poor user experience and investigate how JAMstack websites are set up to overcome them.

Challenge #1: Content is slow to load

Solution: upgrade your web hosting capabilities. With a JAMstack website, you don’t have to rely on a single host to deliver all of your content. Because the pages are generated from the closest server in the CDN, there’s less distance for the data to travel. This means that pages are incredibly quick, often loading in under one second.

Challenge #2: Images and other assets only load when scrolling down the page

Solution: generate content in advance so it doesn't slow down a web page. With a JAMstack website, content is generated in the form of files, which are then stored as copies across the CDN network. This means that when a web page is loading, the images and assets are immediately available and ready to appear on the page. 

Challenge #3: Dynamic features are impacting on speed

Solution: move your website’s dynamic functions to the client side (the user’s computer). JAMstack sites use APIs to communicate with the pre-rendered JavaScript files to facilitate dynamic data. So every time an interactive task is required (such as completing a form), it can be done as close to where the user is based as possible, making it super responsive.

These are just a few examples, but you’ll notice a common theme throughout: the power of CDNs and their ability to overcome the traditional bottlenecks that lead to disappointing website performance.

How to get started 

Turn your existing website into a JAMstack solution

Got a static website but want to host it via a CDN? Let Cobiro handle all of its hosting needs and transform it into a lightning-fast JAMstack solution.

Cobiro’s GitHub connection (beta) provides a seamless link between your headless CMS, static site generator and CDN host. 

Once deployed, your website’s content will be delivered via Cloudflare’s CDN, which powers internet requests for 16% of Fortune 1,000 companies and serves 20 million HTTP requests per second on average.

From code to JAMstack in six steps:

1. Choose your headless CMS (e.g. Dato CMS, Contentful or Agility)
2. Use a site generator to build your static website
3. Deploy your code to a Git Repository in GitHub
4. Sign into Cobiro’s platform and select the GitHub connection
5. Find your code and hit ‘rebuild’
6. Your website is now hosted via Cloudflare’s CDN

Coming soon: CDN hosting will be available across all of our paid plans, which start from only $19 per month. Find out more.

Create a JAMstack website from scratch

Cobiro’s website builder is the only free website builder on the market that uses the JAMstack approach. It requires no coding, installations or plug-ins.

When it's ready to launch, your website will be fast and secure from the outset.

Simplicity 

Use the drag-and-drop interface and choose from a multitude of elements and designs. 

CDN powered

Boost your website’s speed and performance by distributing it via a CDN.

Marketing integration

Choose your preferred applications and access them from the platform.

Free SSL certificate

Protect your customers’ confidential information by adopting the gold standard in website security.

Domain registration 

Get a professional domain. Choose from a free Cobiro extension or buy one.

Try out the Cobiro website builder for free!

People also read

What is jamstack
What is JAMstack? Your complete guide

Tips and inspiration

6 min read

Two minutes, to website!

Two minutes, to website!

Build a professional website for your business in minutes with our drag-and-drop creator. It’s free, requires no coding or installations.
Get started
Two minutes, to website!