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.
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.
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
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 $1 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.
Use the drag-and-drop interface and choose from a multitude of elements and designs.
Boost your website’s speed and performance by distributing it via a CDN.
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.
Get a professional domain. Choose from a free Cobiro extension or buy one.