It’s no secret that Google more highly values sites that focus on user experience. How quickly a page loads and how mobile-friendly a site is have long been factors that go into their search ranking results.
Google uses a set of three key metrics to determine the ‘usability’ of your website, called Core Web Vitals (CWV). CWV considers the loading performance of the website (or webpage), its interactivity and its visual stability. If you are ranking poorly for any of these metrics, you will see negative impacts to your search performance, website visibility and rankings.
What Are Core Web Vitals?
Core web vitals are a set of factors that Google has deemed important in a website's user experience. Core web vitals rate pages on your website from poor, needs improvement, to good.
To measure these signals, Google recommends websites focus on the following page metrics:
Loading: Largest Contentful Paint or LCP
Interactivity: Interaction to Next Paint or INP
Visual stability: Cumulative Layout Shift or CLS
What are the three core web vitals and why are they important?
Core web vitals help to evaluate several factors that play into user experience. Having a good score in each of these three categories is essential to ranking well with Google and performing well for your customers.
Cumulative Layout Shift
CLS measures visual stability and quantifies the amount of layout shift that occurs unexpectedly on visible content. A layout shift occurs any time a visible element changes its position from one frame to the next. CLS is not a speed metric, so Google calculates a score based on impact and distance of layout shift.
In layman’s terms: A user is about to click the “complete purchase” button in their cart, and, without warning, it mysteriously moves down a couple pixels causing them to click on “remove from cart.” Whoops. A good score is less than .1.
Interaction to Next Paint
A new CWV since 2024, INP assesses a page's overall responsiveness to user interactions by observing the latency of keyboard interactions that occur during the whole time the user is browsing the page. The INP value is the longest interaction observed during the user’s visit. More simply, it is the longest time taken for something to load after a user clicks on it.
What is a good INP value?
An INP below or at 200 milliseconds means a page has good responsiveness.
An INP above 200 milliseconds and below or at 500 milliseconds means a page's responsiveness needs improvement.
An INP above 500 milliseconds means a page has poor responsiveness.
Largest Contentful Paint
LCP measures the time elapsed between a page starting to load and when the largest element is rendered. Elements measured are usually images, videos, and block level elements containing text nodes.
In layman’s terms: You know that heavy video you have loading above the fold? We hope it loads fast! A good measure is anything below 2.5 seconds.
How to Improve Core Web Vitals
Use of a modern CDN is one of the fastest and most effective ways to improve your core web vitals, specifically largest contentful paint - the most important of the three CWVs.
Although your CDN configuration can help improve INP and CLS, they won’t be the main drivers. Largest Contentful Paint can be directly impacted by your CDN configuration and API design.
One way to optimize LCP is by focusing on time-to-first-byte (TTFB). By caching API responses and compressing images at the edge, you can improve your TTFB and thus your LCP. Optimized API design can seriously impact how quickly dynamic content loads, not only offering a more personalized user experience but also a faster one.
Really, the best approach is to use a modern CDN that can help with all of these challenges:
How to improve Core web vitals with a CDN
Google recommends that you focus on their Core Web Vital metrics. A modern CDN can help with your performance for all of these metrics, but especially the one Google considers most important – Largest Contentful Paint (LCP) - your loading performance. Your CDN configuration and your API design can both tremendously improve your LCP by improving time to first byte (TTFB), caching API responses, and compressing images at the edge.
An optimized API design and a network that actively maintains its open connections can significantly improve the load time for your cached content, your dynamic content, and even your uncached content, all while you offer a more personalized and faster user experience. You can read more details about how Fastly helps with LCP in this report.
Here are the ways a CDN helps improve CWVs:
Stale content delivery
A modern CDN can deliver ‘stale’ content when your origin server is taking too long. Suppose a customer is looking for an FAQ page on an industry topic, but your origin server is down or taking too long to respond. A CDN like Fastly can continue to serve ‘stale’ (cached) content to viewers until the issue is resolved, meaning no interruption in delivery of content to your audience. This not only maintains user experience and satisfaction, but keeps your SEO rankings up (Google never sees that your site is failing to load or loading slowly), and when your origin gets back up and running the content is refreshed.
Handling of high-volume requests
The web is filled with crawlers constantly consuming anything and everything on the web. Crawlers’ requests can put undue burden on your servers, and drag you down. CDNs like Fastly’s can be easily configured to serve ‘stale’ content to crawlers, thereby lessening the demand on your servers. The crawlers are still getting real and relevant content, it just might not be the absolute newest version. A good CDN can handle a large volume of requests (even DDoS attacks) without sacrificing performance, intelligently routing around internet ‘weather’.
Better security ranking
Great CDN providers offer security features like DDoS, Bot Protection and Transport Layer Security. This means a more secure website for your customers and prevention of various cyber attacks. Google’s algorithm updates repeatedly make it clear that the security of a website weighs heavily in the ranking factor of a website’s SEO. Websites with poor or lacking security measures face negative impacts in rankings and search results.
Faster load times for big files
If you serve larger video files to your customers, leveraging a CDN can quickly improve page speed. Google typically does not index video files, unless they live on platforms like Youtube; therefore, if your website hosts various embedded video files on the same web server, you are at risk of a slow-loading page. Using a CDN to serve cached versions of the video files can be a great way to avoid this challenge.
Caching of Dynamic Content
APIs
Another performance improvement yielded by the modern CDN involves API requests: a good CDN solution can protect your origin server from excessive API requests. Orgs often mistake API traffic as too dynamic to benefit from being served by their CDN. Fastly has long advocated for best practices in API design that allow API responses to be cached at the edge. Unfortunately, API responses are too often written off as being ‘uncacheable’, meaning you lose out on some of the easiest performance and reliability wins you could get, if you only cached your API responses on an edge network. The availability of APIs can impact the availability of partners’ websites and services, so it is critically important that you make efforts to ensure the highest level of availability for your APIs. You can do this by caching more of your API content at the edge with the right CDN.
Dynamic Content
Modern CDNs offer a key capability that allows you to cache more; they can cache ‘dynamic’ or frequently changing content (think account info, location-specific products, changing inventory, new headlines). Traditional CDN customers suffer, as their traffic has to return all the way back to the origin, which results in slower response times, increased infrastructure expenses, and more associated costs for egress data for those numerous (unnecessary) responses. Instead, modern CDNs make it possible for your company to serve truly dynamic content that changes with every request from the edge, rather than from origin. This gives you the ability to run your code closer to the end user, eliminating costly and time consuming performance degradations.
Image Optimization
A CDN can help to dramatically optimize images - by storing copies of an image across distributed servers, the end user is served an image from the location closest to them. This reduces load time, and allows you to dynamically resize, compress or convert images according to the end-user’s device and screen size. By serving the most optimized version of an image, a CDN not only gives the end user the best possible experience, but it minimizes the common ‘hit’ that image load times cause to a website. On average, images make up 21% of a web page’s total weight, meaning slowly loading images can have significant impacts to your website’s overall performance. If you can optimize image handling and serving on your site or application to make every image smaller, with faster load times (and fewer calls to origin) it will translate into a huge benefit to your overall performance.