Core Web Vitals: What Are They And Why Should Your Establishment Care

If you own a brewery or a restaurant website (or any website doing business for that matter), you probably want to attract more customers and make them happy with the user experience you are providing. One of the ways to do that is to make sure your website is fast, responsive, and stable. That’s where Core Web Vitals come in.

Core Web Vitals are a set of three web performance metrics that Google considers important in a webpage’s overall user experience. They measure how users experience the speed, responsiveness, and visual stability of your website. Starting this past June 2021, Google will use Core Web Vitals as one of the factors to rank your website in search results. This means that if your website has poor Core Web Vitals, you might lose traffic and potential customers.

So, what are the three Core Web Vitals and how can you optimize them?

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest content element on your webpage to load. This could be an image, a video, or a text block. LCP reflects how quickly users can see the main content of your webpage.

To provide a good user experience, Google recommends that LCP should occur within the first 2.5 seconds of the page starting to load. If your LCP is longer than that, users might get impatient and leave your website.

Some of the factors that can affect your LCP are:

• Slow server response time

• Large or unoptimized images or videos

• Render-blocking JavaScript or CSS

• Poor web hosting service

To improve your LCP, you can:

• Use a reliable web hosting service that can handle high traffic and deliver fast server response time

• Optimize your images and videos by compressing them, using responsive formats, and lazy loading them

• Minify and defer your JavaScript and CSS files that are not critical for rendering the above-the-fold content

• Use a content delivery network (CDN) to serve your static assets from the nearest location to your users

First Input Delay (FID)

FID measures how long it takes for your webpage to respond to the first user interaction. This could be a click, a tap, or a keypress. FID reflects how interactive and responsive your website is.

To provide a good user experience, Google recommends that FID should be less than 100 milliseconds. If your FID is longer than that, users might feel frustrated and think that your website is not working properly.

Some of the factors that can affect your FID are:

• Long-running JavaScript tasks that block the main thread

• Heavy JavaScript bundles that take longer to parse and execute

• Poor network conditions or device capabilities

To improve your FID, you can:

• Break up your long-running JavaScript tasks into smaller chunks using requestAnimationFrame, requestIdleCallback, or web workers

• Reduce the size of your JavaScript bundles by code splitting, tree shaking, and minification

• Use performance monitoring tools to identify and fix bottlenecks in your code

• Implement skeleton screens or loading indicators to show users that your website is processing their input

Cumulative Layout Shift (CLS)

CLS measures how much the layout of your webpage shifts during the loading process. This could be caused by images, videos, fonts, ads, or other elements that change their size or position after they load. CLS reflects how visually stable your website is.

To provide a good user experience, Google recommends that CLS should be less than 0.13. If your CLS is higher than that, users might get annoyed and confused by the unexpected layout changes. They might also accidentally click on the wrong element or miss important information.

Some of the factors that can affect your CLS are:

• Images or videos without explicit width and height attributes

• Fonts that load after the text is rendered

• Dynamic content that pushes existing content down or up

• Ads or pop-ups that appear above or below the fold

To improve your CLS, you can:

• Specify the width and height attributes for your images and videos

• Use font-display: swap or preload for your custom fonts

• Reserve enough space for dynamic content such as ads or pop-ups

• Avoid inserting new content above existing content unless it’s urgent

Web.Dev: Core Web Vitals

*Note: Interaction to Next Paint (INP) will be replacing FID in March of 2024, but we will cover that when it does.

Hopefully, this blog post helps you understand Core Web Vitals and how to optimize them for your brewery or restaurant website. If you want to learn more about Core Web Vitals, you can check out these resources:

• Core Web Vitals report in Search Console. This shows how your pages perform based on real-world data.

• Learn more about Core Web Vitals, a guide about Core Web Vitals, including how to measure, debug, improve and best practices.

• Tools that can help you measure and report Core Web Vitals. These tools measure LCP, FID, and CLS.