Are you struggling to understand what Core Web Vitals are? Do you wonder what you're supposed to do to improve them? This post will help!
What is Page Experience?
Page experience is what users think about their interaction with our websites. It includes:
- Mobile Friendly
- Safe Browsing
- No Intrusive Interstitials (those ads that popup on mobile and cover the entire screen)
- Core Web Vitals
But why is Google doing this? We have to think about Google's customers–the people who are actually searching the internet every day. Google wants to deliver a good experience to those folks. If they don't, people will look for another search engine to use, and Google will lose ad revenue.
We all know what most of those terms mean, but Core Web Vitals is new. It sounds a lot more complex than it actually is. This post will simplify what the vitals are and how you can improve your scores for them.
Are you ready to learn more about all the information Google Search Console can tell you about your blog? Sign up for my course, “The Nuts & Bolts of Google Search Console!”
How Important is Page Experience for SEO?
A good page experience doesn't override having great, relevant content. However, in cases where there are multiple pages that have similar content, page experience becomes much more important for visibility in Search.Google Search Central
Bottom line? We have to have awesome content. But if our content is similar to someone else's, page experience will be the tiebreaker to determine who gets ranked higher.
What are Core Web Vitals?
Core Web Vitals are made up of three metrics.
- Largest Contentful Paint (LCP) – How long it takes for your page's largest content element to load.
- First Input Delay (FID): The delay between the time a reader clicks on something and the time that their browser starts processing that click.
- Cumulative Layout Shift (CLS): A measure of the visual stability of your page–basically how often do things on your page shift while it's loading.
Google will grade each part of your Core Web Vitals using a good, needs improvement, and poor scale. Below you can see the results needed for each metric.
Let's go into more details about each one.
What is Largest Contentful Paint (LCP)?
Have you ever visited a website that loaded slowly where it looked like the page was coming together in bits and pieces?
You see a logo, then a line or two of text, then maybe a box where an image is supposed to be, then the top part of the image, then the middle part of the image, and finally the whole page can be seen.
Frustrating, isn't it? You've just had a poor page experience because the site had a slow Largest Contentful Paint.
The Largest Contentful Paint (LCP) measures how long it takes for the largest element in the viewport to show up on your reader's browser.
A viewport is the reader's visible area of a webpage. It varies by device, so it will be much smaller on your phone than on your computer screen.
The largest element could be an image, a video, a block of text.
Google wants to see your largest content show up on your site in less than 2.5 seconds.But how do we make that happen?
Causes of Poor LCP
Most of the reasons for a poor LCP are the same as a slow website.
- Slow server response time – How long does it take for a reader's browser to receive information from your website's server (or host)?
- Slow resource load times – Are some of the resources (images, videos, sliders, backgrounds, etc.) on your site loading slowly?
How to Improve LCP
To improve your LCP, you must make your site faster. There are quite a few actions you can take to do this, but many of them are very technical in nature.
I consider myself to be fairly tech savvy, but I didn't feel comfortable diving into this for my own site. Instead, I worked with Lauren from Once Coupled. I highly recommend her to help with this.
You can find many other companies that can help you with pagespeed, but be sure you ask other bloggers what their experiences have been with a company before you hire them.
Many of the good site speed experts are booked up months in advance, so what can you do in the meantime that isn't too technical?
- Remove sliders and background images if you are using them
- Compress your images using a service like ShortPixel
- Move videos down the page so they aren't in the “above the fold” area
- Use a text block at the top of your page instead of an image
What is First Input Delay (FID)?
First Input Delay is the amount of time between when a reader interacts with our sites and the time the browser starts processing that interaction.
The types of interactions that FID is measured for are clicking a link, checking a checkbox, or selecting a dropdown. Scrolling or zooming aren't considered interactions because they don't require your site to do anything.
We've all been there. We go to a website to search for a pair of shoes. We try clicking the link for “women's shoes,” and nothing happens. If you're like me, you get frustrated and click a bunch more times. Finally, the page with the women's shoes opens.
Google wants the First Input Delay to be less than 100 milliseconds.
Causes of Poor FID
Your FID score goes down when your site is busy running another task and can't respond very quickly to your reader clicking a link or a button.
It's kind of like when we're in the middle of using the bathroom and one of our kids wants us to pour them some juice. We have to finish using the bathroom before we can get the juice.
Like our kid, the reader may be super impatient, but we (our sites) have to finish what we're doing first before we do what they want us to do.
How to Improve FID
Like the First Contentful Paint, the way to improve your FID is to improve your overall site speed.
One of the things you can do is to audit your plugins and delete any that you don't need.
You may have some plugins that you only need occasionally. If so, deactivate them until you need them.
What is Cumulative Layout Shift (CLS)?
Seeing an example is the easiest way to understand CLS. Click the play button to watch what happens when a layout shift causes you to click the wrong button.
I hate it when that happens! We think we're clicking one thing, but we wind up clicking something else because another element loads!
Another example of a poor experience due to CLS is when we're reading an article and a layout shift causes us to lose our place.
To understand how Cumulative Layout Shift is measured, we need to know exactly what a layout shift is. Google says, “A layout shift occurs any time a visible element changes its position from one rendered frame to the next.”
Not all layout shifts are bad. It's only the ones that we as a reader aren't expecting that cause us to have a poor experience.
Google has a score for each layout shift. It's pretty technical, so I'm not going to go into detail about it.
Google gives us this definition: “CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.”
Causes of Poor CLS
Most of the causes of poor CLS scores are fairly technical.
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
What does all that even mean? While I consider myself fairly technical, I don't understand these concepts very well at all. It seems like you would need to be a developer to make sense of it!
How to Improve CLS
As I was doing my research for this article, I spent a lot of time looking for ways that a blogger could improve CLS. All I could come up with were very technical solutions.
At first, I thought that hiring someone to help with site speed (like for LCP) would be the best recommendation. But most of the solutions seemed to be different than what a site speed expert would do.
Needless to say, it was all very confusing!
Then I ran across this article from Search Engine Journal entitled Core Web Vitals Not Really Your Problem?
It talks about how many of the Core Web Vitals issues need to be fixed in the code. Right now, WordPress, theme, and plugin developers aren't coding with these types of issues in mind because they aren't really issues except in Google's mind.
Just like they did with pagespeed, over time, the developers will start coding in a way that helps our Core Web Vitals. But for now, my plan is to do the things I can to make my site as fast as possible and not worry about the rest.
I hope this article has helped explain Core Web Vitals in a way that makes sense to you.
Pin this article for later!