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