If Google SEO is important to your site, this summer is the time to update for the core.

In mid-June, Google will start using page experience as a ranking factor. It won’t make its full impact on the ranking systems until August.

Now is the time to check Core Web Vitals, those elements important to user experience. You need to make them strong so Google can pick them up.

User experience (#CoreWebVitals) enters as a @Google ranking factor this summer. Is your site ready? @ab80 @CMIContent #SEOClick To Tweet

Even if you’re not the webmaster or coder, you should understand what it all means and the terminology so you can advocate for improvements and work closely with your tech team to make it happen.

And if you’re on the tech side, this can be a helpful refresher with a section devoted to optimization written for you.

What are Core Web Vitals?

Core Web Vitals encompass page experience elements. Unlike other data from your site crawled by Google bots, this data involves user behavior taken from Chrome usage.

Your site’s #CoreWebVitals data comes from real user behavior on your site, says @ab80 via @CMIContent. #SEOClick To Tweet

To check the Core Web Vitals for your website, log in to your Google Search Console account, and go to Experience > Core Web Vitals report:

TIP: To dig deeper, open the report and click on the issue line you want to investigate.

The report reflects two use cases – mobile and desktop. Though Google hasn’t said which one carries more weight, the placement of the mobile report above the desktop report could be a subtle indicator. Plus, though not a ranking factor, Google is keenly interested in AMP – accelerated mobile pages.

Keeping that in mind, a mobile-first approach probably would be more helpful for your website’s Core Web Vitals impact, though that doesn’t mean you can ignore the desktop version.

Learn the lingo

The page analysis provides four important metrics: first contentful paint (FCP), largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS). It also conveniently shows the metric’s performance as good, needs improvement, or poor.

First contentful paint

The first contentful paint (FCP) measures the time from when the page starts loading to when any part of the content appears on the screen.

Largest contentful paint

Largest contentful paint (LCP) measures the loading speed of a page – the time between a click on a link and the first view of the biggest content element on the page. Unlike FCP, LCP is a better indicator of total page load speed because the largest element usually is one of the last to load.

First input delay

First input delay (FID) measures the page’s interactivity and responsiveness – the time between a user’s interaction and the browser’s response to that interaction on the page. This metric cannot be simulated because it requires real user interaction.

The impact of FID scores depends on page types. For example, an FID metric for a blog page wouldn’t be that important because blog pages aren’t created for interaction. But the FID score for a subscription or download page would be important because they require input from the user. Those are the pages where you should strive to get to green in your FID score.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift shows the page’s visual stability. It helps you see how often users experience unexpected layout shifts. For example, page elements could change places as they load, leading visitors who click quickly to be taken to a page they didn’t want.

Learn your page scores

You can look at your Core Web Vitals report in Google Search Console or input the URL PageSpeed Insights tool to see this analysis.

Here is an analysis of the mobile edition of CNN’s international home page (http://edition.cnn.com):

TIP: If you use Core Web Vitals report to check your metrics, click on the affected URL to go to PageSpeed Insights to get the information below.

The PageSpeed Insights report identifies opportunities for improvement:

When you click on the down arrow symbol on the right, you’ll see the recommended fix – as shown in the preload key requests category above.

Your @Google PageSpeed Insights report identifies opportunities and diagnostics with recommended fixes, says @ab80 via @CMIContent. #SEOClick To Tweet

The analysis also gives a diagnostics report. Similar to the opportunities report, when you click on the down arrow symbol, more details and recommendations appear:

TIP: In PageSpeed Insights, you can only check one page at a time, thus analyzing all website’s pages and saving the results could be challenging. For quick bulk checks, you can use SEO tools like WebSite Auditor (disclosure: I work for the company) and Screaming Frog that collect Core Web Vitals data for each page of the site.

Image source

Read this if you’re the webmaster (otherwise, skip to the end)

Most of these fixes require knowing and having access to the back end of the website. If that’s not you, got to the last section. If it is, read on to learn some optimization tricks for LCP, FID, and CLS.

Optimize for LCP

Given LCP measures the loading time of the biggest content element of the page, optimize that element so it isn’t too heavy.

Make sure you have meaningful elements (the first biggest content element) near the top of the page (headings and svg elements don’t count.) Otherwise, the loading time for LCP will be a lot longer, hurting your LCP score.

Minimize JavaScript and CSS as much as possible as they slow down the page. Do a similar reduction or elimination of third-party scripts. (Each third-party script slows the page down by 34 ms.)

Set up lazy loading. This feature lets browsers load the contents like images and videos only when a user scrolls down the page, thus making LCP achieved much faster.

Optimize for FID

Heavy JavaScript is the most common hurdle to a good FID score. Get rid of excessive JavaScripts. Among the other options:

• Break up the long-running code into smaller, asynchronous tasks.
• Optimize the page for interaction readiness.
• Get rid of excessive third-party scripts.
• Use a web worker.
• Enable page caching for a faster response.

Optimize CLS

CLS is probably the most content-related Core Web Vital. To reduce the CLS score:

• Set size attribute dimensions for any piece of media (images, GIFs, videos, etc.) to tell the user’s browser how much space each element should take/
• Reserve a place for on-page ads so they won’t appear suddenly in the middle of a loading page.
• Put new UI elements below the fold so the already loaded part of the page doesn’t shift.

For those who want to delve into all the technical CLS optimization details, Google’s John Muller recommends The Almost Complete Guide to Cumulative Layout Shift. It carefully explains all the peculiarities of CLS and may be of good use for SEOs and webmasters.

Optimize from a strong position

While the execution of page experience optimization is super technical, all content marketers can benefit by knowing the language and the elements of what’s important and why.

And the truth is that Core Web Vitals optimization is a tweaking step. Content quality and backlink profile remain the most influential factors. After all, load times and user experience don’t matter much if searchers don’t want to read your content.