00:00:00 - 00:00:07
Welcome to Digital Rage, the podcast where we talk about SEO digital marketing and other
00:00:07 - 00:00:08
stuff.
00:00:08 - 00:00:13
I am Jeff, the producer here at Byer Company, today where you're talking about mastering
00:00:13 - 00:00:17
core web vitals for SEO and UX.
00:00:17 - 00:00:21
These have been confirmed to be ranking signals.
00:00:21 - 00:00:26
Core web vitals are something that needs to be taken seriously and constantly monitored
00:00:26 - 00:00:28
and optimized.
00:00:28 - 00:00:32
So here we go, let's get into it.
00:00:32 - 00:00:33
Welcome to The Deep Dive.
00:00:33 - 00:00:38
Today we're tackling something really essential if you've got a website, core web vitals.
00:00:38 - 00:00:39
Absolutely, buddy.
00:00:39 - 00:00:45
We've got this great guide, master core web vitals, to skyrocket your SEO and user experience
00:00:45 - 00:00:47
by Jeff Byer.
00:00:47 - 00:00:51
Think of this as, well, your fast track to understanding these metrics, how they can
00:00:51 - 00:00:54
seriously bump up your site's search ranking and make visitors happier.
00:00:54 - 00:00:55
Exactly.
00:00:55 - 00:01:00
So our mission today basically pull out the key stuff from this guide, make it clear
00:01:00 - 00:01:05
why these vitals matter and importantly, how you can start improving them without getting
00:01:05 - 00:01:06
totally bogged down.
00:01:06 - 00:01:07
Right.
00:01:07 - 00:01:11
And as the guide points out, core web vitals are fundamentally about the user's actual
00:01:11 - 00:01:12
experience on your site.
00:01:13 - 00:01:15
And these aren't just like nice ideas.
00:01:15 - 00:01:16
Google uses them.
00:01:16 - 00:01:18
They're confirmed ranking signals.
00:01:18 - 00:01:20
So directly impacts SEO.
00:01:20 - 00:01:21
Directly.
00:01:21 - 00:01:22
So good performance here.
00:01:22 - 00:01:24
Google notices it's really a win-win better SEO.
00:01:24 - 00:01:27
And you know, a smoother experience for your visitors.
00:01:28 - 00:01:29
So let's get specific then.
00:01:29 - 00:01:31
What exactly are these core web vitals?
00:01:31 - 00:01:34
So there are three main ones to focus on.
00:01:34 - 00:01:36
First is interaction to next paint.
00:01:37 - 00:01:38
IMP, right?
00:01:39 - 00:01:43
That measures how fast your site reacts when someone, you know, clicks something or types
00:01:43 - 00:01:45
or selects an option.
00:01:45 - 00:01:46
Basically responsiveness.
00:01:47 - 00:01:48
Interaction speed.
00:01:48 - 00:01:49
What's next?
00:01:49 - 00:01:51
Then you've got largest contentful paint, LCP.
00:01:51 - 00:01:55
Think of that as loading speed, but specifically for the main piece of content on the page.
00:01:55 - 00:01:57
Like the big image or the main headline.
00:01:57 - 00:01:58
Exactly.
00:01:58 - 00:02:00
Whatever the user probably came to see first.
00:02:00 - 00:02:01
How quickly does that show up?
00:02:01 - 00:02:02
Got it.
00:02:02 - 00:02:03
And the third one.
00:02:03 - 00:02:06
That's cumulative layout shift or CLS.
00:02:06 - 00:02:07
This one tracks visual stability.
00:02:07 - 00:02:10
You know when you go to click a button and suddenly everything shifts?
00:02:11 - 00:02:12
So annoying.
00:02:12 - 00:02:13
Right.
00:02:13 - 00:02:16
CLS measures how much that unexpected movement happens.
00:02:16 - 00:02:18
The goal is to minimize it.
00:02:18 - 00:02:20
The guide also mentions the Chrome UX report.
00:02:20 - 00:02:21
The RUX.
00:02:21 - 00:02:25
I see this snapshot here from early May 25.
00:02:25 - 00:02:26
Looks like it's like doing pretty well.
00:02:26 - 00:02:27
Ah, yes.
00:02:28 - 00:02:31
It's basically a huge public data set.
00:02:31 - 00:02:34
Real user data collected from millions of sites via Chrome.
00:02:34 - 00:02:38
That's where Google gets a lot of its field data on how sites are actually performing on
00:02:38 - 00:02:40
these vitals in the real world.
00:02:40 - 00:02:41
And that's example image.
00:02:42 - 00:02:45
That image shows a site that's, well, nailing it.
00:02:45 - 00:02:47
Zero poor URLs.
00:02:47 - 00:02:48
Zero needing improvement.
00:02:48 - 00:02:53
This mobile and desktop, just 173 good URLs.
00:02:53 - 00:02:57
So it shows it's possible to get everything in the green.
00:02:57 - 00:02:58
Definitely possible.
00:02:58 - 00:02:59
It's not just theoretical.
00:03:00 - 00:03:01
We know what they are.
00:03:01 - 00:03:03
But let's really dig into the why.
00:03:03 - 00:03:06
Why does buyer say these are so critical?
00:03:06 - 00:03:12
Well, the guide lists several really compelling reasons, the big one for many, direct impact
00:03:12 - 00:03:13
on Google rankings.
00:03:13 - 00:03:14
The SEO factor.
00:03:14 - 00:03:15
Exactly.
00:03:15 - 00:03:18
Advitals signal quality to Google.
00:03:18 - 00:03:19
You're more likely to rank higher.
00:03:19 - 00:03:23
But just as important, maybe more so is the user experience itself.
00:03:23 - 00:03:24
Right.
00:03:24 - 00:03:26
Faster, smoother, stable sites.
00:03:26 - 00:03:28
People say engaged, which leads right into the next point.
00:03:28 - 00:03:29
Lower bounce rates.
00:03:29 - 00:03:31
Makes sense if it's not frustrating people stick around.
00:03:31 - 00:03:32
Precisely.
00:03:32 - 00:03:33
They explore more.
00:03:33 - 00:03:35
And that naturally helps with conversions.
00:03:35 - 00:03:38
Ah, so it impacts the bottom line too.
00:03:38 - 00:03:39
Absolutely.
00:03:39 - 00:03:40
Sales, signups, whatever you want users to do.
00:03:40 - 00:03:44
Plus, these optimizations often benefit the whole site, not just one page.
00:03:44 - 00:03:45
And it's measurable.
00:03:45 - 00:03:46
Absolutely yes.
00:03:46 - 00:03:52
You can track INP, LCP, CLS scores over time, see your progress, prove the ROI of your
00:03:52 - 00:03:53
efforts.
00:03:53 - 00:03:57
Okay, that's a really clear case for why we should care.
00:03:57 - 00:03:59
So the guide gives us a five step plan.
00:03:59 - 00:04:01
Step one, benchmark current performance.
00:04:01 - 00:04:03
Yeah, absolutely essential for step.
00:04:03 - 00:04:05
You can't improve what you don't measure, right?
00:04:05 - 00:04:06
Right.
00:04:06 - 00:04:09
Buyer really emphasizes understanding your starting point.
00:04:09 - 00:04:12
Tools like Google Lighthouse, PageSpeed Insights.
00:04:12 - 00:04:13
These are your friends here.
00:04:14 - 00:04:15
Lighthouse and PageSpeed Insights.
00:04:15 - 00:04:16
So how do you actually do it?
00:04:16 - 00:04:17
Just run reports.
00:04:17 - 00:04:18
Pretty much.
00:04:19 - 00:04:22
Focus on your key pages homepage, maybe main product pages, high traffic blog posts.
00:04:22 - 00:04:25
Run the reports, note down those initial scores for INP, LCP and CLS.
00:04:25 - 00:04:26
It's a one up.
00:04:26 - 00:04:30
And this is a key pro tip from the guide test, both mobile and desktop.
00:04:30 - 00:04:31
So how do you actually do it?
00:04:31 - 00:04:32
Just run reports.
00:04:32 - 00:04:33
Pretty much.
00:04:34 - 00:04:37
Focus on your key pages homepage, maybe main product pages, high traffic blog posts.
00:04:37 - 00:04:40
Run the reports, note down those initial scores for INP, LCP and CLS.
00:04:40 - 00:04:41
It's a one up.
00:04:41 - 00:04:46
And this is a key pro tip from the guide test, both mobile and desktop.
00:04:46 - 00:04:48
Ah, because of mobile first indexing.
00:04:48 - 00:04:49
Exactly.
00:04:49 - 00:04:52
Google prioritizes the mobile experience, so you really need to know how you perform there.
00:04:53 - 00:04:54
Benchmark established.
00:04:54 - 00:04:57
Step two is about prioritizing quick wins.
00:04:57 - 00:04:58
Like the sound of that.
00:04:58 - 00:05:00
What kind of easy fixes are we talking about?
00:05:01 - 00:05:04
This is about getting some immediate bang for your buck.
00:05:04 - 00:05:07
Seeing improvements quickly, especially for LCP and CLS.
00:05:07 - 00:05:08
Like what?
00:05:08 - 00:05:10
Image optimization is huge.
00:05:10 - 00:05:15
The guide mentions tools like image opdom, tiny PNG, scrush.
00:05:15 - 00:05:16
Right.
00:05:16 - 00:05:17
For compressing images.
00:05:17 - 00:05:19
Yeah, shrinking file sizes without killing the quality.
00:05:19 - 00:05:23
There's an example showing image opdom getting like 70, 80% savings.
00:05:23 - 00:05:24
That's massive.
00:05:25 - 00:05:31
Also converting images to newer formats like WebP, often better compression and quality than JPEG or PNG.
00:05:33 - 00:05:34
What else?
00:05:34 - 00:05:38
Using a CDN, a content delivery network like Cloudinary specifically for images can speed things up a lot too.
00:05:38 - 00:05:39
Makes sense.
00:05:39 - 00:05:41
Beyond images, there's code modification.
00:05:41 - 00:05:47
Basically stripping out unnecessary stuff, white space, comments from your CSS, JavaScript, HTML files.
00:05:47 - 00:05:48
Tools for that.
00:05:49 - 00:05:53
Things like ugly FIJS or CSS nano can automate it.
00:05:53 - 00:05:56
And finally, simple things like browser caching.
00:05:56 - 00:05:58
So returning visitors load faster.
00:05:58 - 00:05:59
Exactly.
00:05:59 - 00:06:04
And using a general CDN like CloudFlair for everything helps speed up delivery over wall.
00:06:04 - 00:06:07
These are often relatively straightforward to implement.
00:06:08 - 00:06:13
Now step three gets into optimizing INP interaction to next paint.
00:06:13 - 00:06:15
That's the newer one right replaced FID.
00:06:15 - 00:06:16
That's the one.
00:06:16 - 00:06:18
Came in officially in 2024.
00:06:18 - 00:06:21
It's all about responsiveness to user input.
00:06:21 - 00:06:23
And what usually causes poor INP?
00:06:23 - 00:06:28
According to buyer, it's often heavy JavaScript doing a lot of work on the main thread.
00:06:28 - 00:06:29
The main browser thread.
00:06:30 - 00:06:33
Or resources that block rendering or just long running scripts that tie everything up.
00:06:33 - 00:06:37
If the main thread is busy, it can't respond quickly when the user clicks or types.
00:06:38 - 00:06:43
The guide even shows a Google search console screenshot flagging an INP issue longer than 200 meters on mobile.
00:06:43 - 00:06:45
So you can see what these warnings look like.
00:06:45 - 00:06:46
Right.
00:06:46 - 00:06:47
So how do we fix slow INP?
00:06:47 - 00:06:50
The main idea is freeing up that main thread.
00:06:50 - 00:06:53
One way is deferring non-critical JavaScript and CSS.
00:06:53 - 00:06:58
Using defer or async attributes tells the browser, "Hey, load this.
00:06:58 - 00:07:00
But don't stop rendering the page while you do it."
00:07:01 - 00:07:02
Load it in the background, basically.
00:07:02 - 00:07:03
Sort of, yeah.
00:07:03 - 00:07:06
For heavier tasks, buyer suggests web workers.
00:07:06 - 00:07:09
They let you run JavaScript off the main thread entirely.
00:07:09 - 00:07:10
Interesting.
00:07:10 - 00:07:11
Like a separate process?
00:07:11 - 00:07:12
Kind of, yeah.
00:07:12 - 00:07:16
It stops complex calculations from blocking user interactions.
00:07:16 - 00:07:19
And then there's request idle callback for low-priority tasks.
00:07:19 - 00:07:21
Schedule them to run only when the browser isn't busy.
00:07:21 - 00:07:22
Smart.
00:07:22 - 00:07:24
Any tools for checking INP specifically?
00:07:24 - 00:07:26
The pro tip is great here.
00:07:26 - 00:07:28
Use the web-vitals Chrome extension.
00:07:28 - 00:07:32
It gives you real-world INP data as you browse, reflecting actual user experience.
00:07:33 - 00:07:34
Useful.
00:07:34 - 00:07:38
Step four then circles back to LCP and CLS Strengthening Speed and Stability.
00:07:38 - 00:07:41
Let's start with LCP, the loading speed one.
00:07:41 - 00:07:42
Right.
00:07:42 - 00:07:44
Getting that main content visible ASIP.
00:07:44 - 00:07:47
The guide suggests preloading critical resources that are above the fold.
00:07:47 - 00:07:48
Above the fold.
00:07:48 - 00:07:50
Meaning what you see without scrolling.
00:07:50 - 00:07:51
Exactly.
00:07:51 - 00:07:55
Use link-rill preload to tell the browser, "Get this image your font early.
00:07:55 - 00:07:56
It's important."
00:07:57 - 00:08:00
Also, lazy loading images and videos that are below the fold.
00:08:00 - 00:08:02
Don't load with the user can't see yet.
00:08:02 - 00:08:03
It's just.
00:08:03 - 00:08:05
Getting server response time is key too.
00:08:05 - 00:08:09
That's your hosting server-side caching using a CDN again.
00:08:09 - 00:08:13
Basically reducing the time to first byte or TTFB.
00:08:13 - 00:08:15
Getting that initial HTML faster?
00:08:15 - 00:08:16
Precisely.
00:08:16 - 00:08:20
And for CLS, those annoying layout shifts.
00:08:20 - 00:08:21
How do we tackle those?
00:08:21 - 00:08:24
The number one rule by our emphasizes.
00:08:24 - 00:08:29
Always specify width and height attributes for images, videos, iframes, anything with dimensions.
00:08:29 - 00:08:30
Why is that help?
00:08:30 - 00:08:34
It lets the browser reserve the correct amount of space before the element loads.
00:08:34 - 00:08:36
So when it pops in, it doesn't shove other content around.
00:08:36 - 00:08:37
Oh, okay.
00:08:37 - 00:08:38
That makes sense.
00:08:38 - 00:08:43
The guide also warns strongly against injecting dynamic content unexpectedly, especially above the fold.
00:08:43 - 00:08:46
Think ads loading late and pushing text down.
00:08:46 - 00:08:48
Yeah, that's a classic CLS culprit.
00:08:48 - 00:08:49
Definitely.
00:08:49 - 00:08:51
So the advice is to audit your pages.
00:08:51 - 00:08:56
Use Lighthouse again to find elements causing large LCP delays or contributing to CLS.
00:08:56 - 00:08:58
And prioritize based on real users.
00:08:58 - 00:09:00
Yes, that's the pro tip.
00:09:00 - 00:09:07
Again, use the Chrome UX report data, CRUX, to see which issues are actually impacting most of your visitors and tackle those first.
00:09:07 - 00:09:08
Okay, make sense.
00:09:08 - 00:09:09
So we've benchmarked.
00:09:09 - 00:09:10
Done quick wins.
00:09:10 - 00:09:13
Tackle IMP, LCP, CLS with step five.
00:09:13 - 00:09:14
Step five is crucial.
00:09:14 - 00:09:16
Monitor and iterate.
00:09:16 - 00:09:18
Optimization isn't a one off fix.
00:09:18 - 00:09:19
It's ongoing.
00:09:19 - 00:09:20
Exactly.
00:09:20 - 00:09:22
By our stress is this.
00:09:22 - 00:09:24
You need to keep an eye on things.
00:09:24 - 00:09:27
Set up alerts in Google search console for core web vitals.
00:09:27 - 00:09:29
It'll tell you if your scores drop.
00:09:29 - 00:09:30
Handy.
00:09:30 - 00:09:36
And always, always test after you make changes to your site updates, new features, deployments, make sure you haven't broken anything performance wise.
00:09:36 - 00:09:38
What tools for ongoing monitoring?
00:09:38 - 00:09:43
The CRUX dashboard is great for seeing trends in real user data over time.
00:09:43 - 00:09:47
And there are third party platforms like debug bear that offer more detailed continuous monitoring.
00:09:48 - 00:09:49
And the final pro tip here.
00:09:49 - 00:09:51
Establish a performance budget.
00:09:51 - 00:09:56
Set clear targets for your metrics LCP under X seconds, CLS below Y.
00:09:56 - 00:09:59
And strive to stay within that budget as your site evolves.
00:09:59 - 00:10:01
Right. Like a financial budget, but for speed.
00:10:01 - 00:10:02
Pretty much.
00:10:03 - 00:10:04
Keeps performance top of mind.
00:10:04 - 00:10:05
So let's talk targets.
00:10:05 - 00:10:06
What does good actually look like?
00:10:06 - 00:10:07
What numbers are we aiming for?
00:10:08 - 00:10:09
The thresholds are pretty clear.
00:10:09 - 00:10:12
For IMP, you want 200 milliseconds or less.
00:10:12 - 00:10:13
200 meters or less.
00:10:13 - 00:10:14
Got it.
00:10:14 - 00:10:16
For LCP, it's 2.5 seconds or less.
00:10:16 - 00:10:19
Under 2.5 seconds for the main content.
00:10:19 - 00:10:20
Right.
00:10:20 - 00:10:22
And for CLS, the score should be 0.1 or less.
00:10:22 - 00:10:24
0.1 or less for layout shift.
00:10:25 - 00:10:27
Tip those and you're in the good zone.
00:10:27 - 00:10:30
And the guide really hammers home the benefit.
00:10:30 - 00:10:32
Which can't act back to the why we discussed earlier.
00:10:32 - 00:10:33
Exactly.
00:10:33 - 00:10:34
Better organic rankings.
00:10:34 - 00:10:36
Higher click through rates from search results.
00:10:36 - 00:10:38
People prefer fast, stable sites.
00:10:38 - 00:10:39
Lower bounce rates.
00:10:39 - 00:10:41
Didn't you mention a specific stat on bounce rates?
00:10:42 - 00:10:43
Biresites at Google Study.
00:10:43 - 00:10:50
Sites with LCP under 2.5 seconds had a 23% lower bounce rate than those over 4 seconds.
00:10:50 - 00:10:51
That's significant.
00:10:51 - 00:10:52
23%. Wow.
00:10:53 - 00:10:56
And all this ultimately leads to more conversions.
00:10:56 - 00:10:58
The guide even shows a perfect example report.
00:10:58 - 00:11:00
Performance score of 100.
00:11:00 - 00:11:01
LCP at 0.7 seconds.
00:11:01 - 00:11:04
CLS at 0.023.
00:11:04 - 00:11:05
All green.
00:11:05 - 00:11:06
That's the goal.
00:11:06 - 00:11:09
That really paints the picture of success.
00:11:10 - 00:11:12
This has been incredibly insightful just to recap quickly.
00:11:12 - 00:11:15
Core Web vitals, IMP, LCP, CLS.
00:11:15 - 00:11:18
Super important for SEO and user experience.
00:11:18 - 00:11:21
And there's a clear path to improvement.
00:11:21 - 00:11:23
benchmark, grab quick wins,
00:11:23 - 00:11:26
optimize IMP, then LCP and CLS,
00:11:26 - 00:11:28
and finally keep monitoring and iterating.
00:11:28 - 00:11:30
That's the essence of it.
00:11:30 - 00:11:33
And hitting those good targets isn't just about pleasing Google's bots.
00:11:33 - 00:11:39
It's about creating a genuinely better, faster, less frustrating experience for your actual human visitors.
00:11:39 - 00:11:41
Which in turn helps your site succeed.
00:11:41 - 00:11:42
Absolutely.
00:11:42 - 00:11:44
Better engagement, better results.
00:11:44 - 00:11:47
Okay. So here's a final thought for everyone listening.
00:11:47 - 00:11:50
Think about your own website for a second, or maybe when you use a lot.
00:11:50 - 00:11:53
What's just one of those quick wins we talked about compressing some images,
00:11:53 - 00:11:55
maybe checking for width and height attributes on images.
00:11:55 - 00:11:57
Yeah, something relatively simple.
00:11:57 - 00:12:01
Right. What one thing could you maybe implement today or this week?
00:12:01 - 00:12:06
And just imagine what kind of difference even that small chain might make to someone visiting your site.
00:12:06 - 00:12:11
We really encourage you to, you know, fire a lighthouse or paint speed insights.
00:12:11 - 00:12:15
Take a look. See where you stand and find that first step you can take to improve your core Web vitals.
00:12:18 - 00:12:21
Reach out to us at jbuyer.com for comments and questions.
00:12:21 - 00:12:23
Follow us at buyer company on social media.
00:12:23 - 00:12:27
And if you'd be so kind, please rate and review us in your podcast app.
00:12:27 - 00:12:29
[Music]