Strapi Developer intro to Core Web Vitals

A quality user experience is essential for the success of a site in the long run. Web Vitals help to measure the quality of a site's page experience. Moreover, as search engines continue to prioritize web performance on mobile over other devices, starting with the shift from HTTP to HTTPS (helping to prevent people from making purchases on unsecured websites) and then ranking pages with priorities given to mobile-first design, Google has made it clear that it means business in providing the best experience for users. By rewarding fast-loading sites, Google is laying out the roadmap for successful online businesses and websites. This article will take a deep dive into Core Web Vitals and how we can measure them with the necessary tools and enhance them to improve how our pages are ranked on Google.

What are Web Vitals?

These are specific conditions used by Google for scoring a site's "page experience". In short, it is Google's way of rating a page's overall User Experience (UX). Google disclosed web vitals to educate developers on measuring sites based on User Experience (UX). Google identified three performance metrics as "Core web Vitals" and four others not categorized as "core".

Web vitals can be classified into Core Web Vitals and other Web Vitals. The Core Web Vitals are:

• ‌Largest Contentful Page (LCP)
• ‌First Input Delay (FID)
• ‌Cumulative Layout Shift (CLS) The other Web Vitals are:
• ‌Mobile Friendly
• ‌Safe Browsing.
• ‌HTTPS
• ‌No Intrusive Interstitials

Why Web Vitals

Optimizing Web Vitals helps improve the site experience for users, which also increases conversation and engagement rates. Google added Core Web Vitals to its organic ranking algorithm as a ranking signal. Optimizing Web Vitals improves your site's SEO performance, thereby leading to better keyword ranking.

Introducing Core Web Vitals

The core web vitals are three benchmarks used to quantify a visitor's experience in loading and using a page. These benchmarks rate how fast a page gets rendered in the browser, how fast the browser responds to inputs, and how stable the content loads in the browser. Google will rank these three metrics alongside Mobile Friendliness, Safe Browsing, HTTPS, and Intrusive Interstitials into a signal Google calls the "Page Experience Signal".

Largest Contentful Paint (LCP)

Largest Contentful Paint measures the time it takes a website to render the largest content on the browser and the time it takes to get ready for interaction. Google states that this metric considers only the content on the viewport, which means only the content that appears on the screen without scrolling. The metric also considers the loading time of images, texts, video thumbnails - strictly relevant to the users and should not exceed 2.5 seconds for most webpages.

First Input Delay (FID)

First Input Delay is used to measure the time it takes a webpage to respond to the first interaction from a user. i.e when the browser’s main thread has become idle enough to respond to user events such as clicks on a link, taps on a button etc. It is important to note that FID is only concerned with the time it takes for a browser to recognize finite user interactions like clicks and taps, i.e other interactions like zooming and scrolling across a webpage can’t be reliably measured using FID as a metric, as they often do not run on the browsers main thread. It is also important to bear it in mind that FID only measures the time it takes for browsers to recognize the events and is not concerned with the time it takes to process them. To obtain a good FID score, it’s advised to keep its duration below 100 milliseconds.

Cumulative Layout Shift (CLS)

It is common that you visit a page for example, and accidentally press on an ad or anchor that takes you to a page other than what you intended because you had meant to click an entirely different button or link whose position had shifted due to intrusion by another element on the page that caused your intended element to shift positions abruptly. This unexpected motion on the page is referred to as a layout shift. Cumulative Layout Shift is a measurement of visual stability in a webpage evaluated by tallying all layout shifts not prompted by user interaction.
Despite the significance attributed to the User Experience, it's startling that many websites do not ensure their layouts are stable and add intrusive ads and banners that harm users' experience. A low CLS score (below 0.1) signifies the page is doing fine for most websites.

Tools To Measure Core Web Vitals in your Strapi App

Google has many tools for web developers that assist in measuring the performances of the Core Web Vitals. These tools enable us to diagnose and fix any issue that the users may experience in a Strapi backend powered web-app.

• Lighthouse

You can make use of lighthouse to test your webpages against the core web vitals, view suggested improvements and make improvements where necessary. The Experience section and footer in the chrome DevTools performance panel can go deep and debug against precise Core Web Vitals.

PageSpeed Insights is a tool used to compare lab and field Core Web Vitals' Performance.

Chrome User Experience Report API is another tool to check how your origin and URL have performed against Core Web Vitals over 28 days.

Using Search Console

You can also make use of the dedicated core web vitals report section from Google Search Console to analyze your web-pages troubleshoot errors, and validate the fixes applied.

Web Vitals Browser Extension

The Web Vitals Browser Extension available on the chrome webstore is another handy tool to test your page’s performance against the core web vitals and is especially handy if you want to test your changes in real-time and without having to leave your current browser tab.

How to enhance Core Web Vitals

• Set up page caching

Setting up page caching reduces the load on your server by saving the contents of the webpage locally, such that the next time the user opens the webpage, there’s no need for server to load the page entirely from scratch and so, page-load time is extremely fast. When building Strapi powered web apps, strapi provides a handy tool the strapi-middleware-cache which gives you a choice to either cache data on your application's memory or with Redis, a third-party database.

• Preload important resources to speed up load time:

  Preloading resources is useful when you have essential scripts or styles you want the browser to start loading early in the page’s lifecycle.
  For example, a typical stylesheet is registered in your html following the syntax below

1     <link rel="stylesheet" href="styles/main.css">

However, if you’d like to preload this css file for example, you can swap the stylesheet value for the rel attribute and let the browser know the resource in question is a stylesheet by providing the link tag with an as attribute carrying value of 'style`.

1    <link rel="preload" href="style.css" as="style">  
2    <link rel="stylesheet" href="style.css"> 

You can use this knowledge to request critical resources ahead of time and speed up the overall loading process in your web-page thereby reducing the time it takes for your largest contentful paint to be registered.

• Optimize your images:

Most times, the Last Contentful Paint in a webpage is an image as they’re naturally the heaviest files to be loaded as a result, it’s important that images used in a webpage should be compressed, uploaded to fast storage platform using strapi upload providers and presented in the right format.

• Improve server response time

A fast server response time is also significant as it directly improves page-load metrics and improves UX. To achieve a fast server response time, choose a good web host along with a reliable CDN to serve media files.

• Apply caution with injected content

Dynamically injecting content above existing content will cause a layout shift which is terrible for SEO and should be avoided as much as possible when you can.

• Add fixed dimensions to ads, embeds, images, and iframes.

Loading embeds, images, and iframes without fixed dimensions can also cause layout shifts.
A way to avoid this is by ensuring the sizes of embeds, images, and iframes are defined when in use. You should also make sure to reserve a space for each ad as you may need to refine the layout for each advert when they’re being loaded.

• Use preconnect for crucial resources.

When building webpages that require resources from external urls, it is often handy to notify the browser that the user is likely to need resources from the target resource's origin. Adding a preconnect value to the rel attribute in a link tag helps the browser improve the user’s experience by making a connection to the origin (which in most times is usually a CDN) beforehand.

1    <link rel="preconnect" href="https://examplecdn.com">

Doing this, will ensure that essential third-party connections are created early using reconnect which in-turn helps resolve the "Preload key requests" and "Preconnect to required origins" recommendations you may encounter when performing a core-web vital audit.

• Use server-level compression:

Compression on the server-side can be achieved using Gzip or Brotli. These tools help reduce the response time and size of your webpage by compressing the data sent to the user thereby improving its overall LCP score. Luckily, as a strapi user, server-side compression with gzip is enabled out of the box for at strapi’s core and as a result, you have one less pain point to worry about.

• Implement transition animations

When building sites that involve a good amount of animation, you should make use of transform animations instead of directly animating elements of properties that trigger layout changes.

• Optimize your codebase

For better core web vital results, you should avoid using too much CSS and JavaScript in your webpages. Removing unused CSS and JavaScript using a tool like PurgeCSS will help reduce the overall size of your stylesheets thereby lessening the time it takes for the browser to register your page’s LCP.

Remove render-blocking resources

Render-blocking resources include imported stylesheets and scripts that block or delay the browser from rendering page content to the screen in due time thereby increasing the time the first input delay.
A good way to fix the delay associated with render-blocking resources is by adding the defer or async attributes to scripts or styles that are not immediately needed in loading critical components in your webpage.

1    <script src="/src/scripts/deferablescript.js" defer></script>

The role of a CMS in achieving goals of the Core Web Vitals

Undoubtedly, websites today often need to provide users with the most engaging, personalized and thoughtful digital experience; there is an even greater demand for them to be as secure, fast, and non-intrusive as possible, with the type of CMS in use bears a significant amount of that responsibility.

When building a website using a Content Management System, it's essential to evaluate the CMS your business relies on as far as the core web vitals are concerned.

As we all know, traditional CMS's come with certain advantages such as faster development times and ready to use themes; they are also known to abstract many customization options available. This less control over how the UI is presented traditional CMS's offer may limit the developer's flexibility to respond to requirements and changes recommended by core web vital audits.
Using headless CMS like Strapi helps provide a work-around against this limitation as you are given complete control of how your app is presented to users and search engines. The total control a headless CMS provides, in turn, gives you more flexibility to tweak your website's layout and overall user experience as necessary.

Conclusion

Providing users with an improved user experience by paying attention to the Core Web Vitals will make your website stand out and attract positive rankings from search engines. The goals of the core web vitals explain why it's not enough to have good content, attractive products, and a sophisticated design alone. Quickness in page loading is favorable to the user and ensures that search engines rank the content well. Take these steps while working on your next project, and see how amazingly well it turns out!