EP7 – Core Web Vitals and the Migration from FID to INP

An Introduction to Beyond the Edge Episode 7 – Core Web Vitals and the migration from FID to INP

In this episode of “Beyond the Edge,” Ishan Anand hosts a discussion on changes to Google’s Core Web Vitals, a crucial set of metrics for website performance assessment. He is joined by Rob Wakerly and Ellery Womack from Edgio, who share their expertise on how to adapt to the changes and pass Core Web Vitals. The conversation delves into the technical aspects of Core Web Vitals, including metrics like Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay, highlighting their importance in website optimization. The team discusses practical strategies for improving these metrics, such as caching, using image optimization tools, and adjusting cache control headers. They also touch on the significant impact that optimizing Core Web Vitals can have on business outcomes, like conversion rates and organic traffic, drawing on real-world examples from their work with various companies. As Google prepares to replace FID with INP, a metric that considers a broader range of user interactions, the discussion underscores the ongoing importance of staying ahead of these metrics and employing expert strategies to ensure websites meet these evolving standards for speed and responsiveness.

Ishan Anand: Hello and welcome to Beyond the Edge where we dig into the ins and outs of the trends affecting modern digital businesses. Today, our topic is Core Web Vitals, the all important metrics that Google uses to rank the speed of your website.

I’m your host Ishan Anand, VP of Product for Edgio Applications and Edge Platform used by top businesses to accelerate, optimize and host their most mission critical websites. Today I’m joined by Rob Wakerley, Senior Director of Product Delivery at Edgio and Ellery Womack, Senior Director of Engineering at Edgio. Rob, why don’t we start with you? Tell us about your background and relationship with core vitals.

Rob Wakerly: Hey, thanks, Ishan. Happy to be on today. So my background is in technology consulting, including strategy and delivery of custom technology and implementations for enterprises and companies of all sizes. I joined Edgio a couple years ago and quickly learned all there is to know about Core Web Vitals and what A at least part of what a big impact they can have on a business. So it’s been pretty exciting being a part of implementation projects, helping customers and various industries to improve their core of Vitals for their sites to improve customer experience.

Ishan Anand: Thanks, Great, thank you. And Ellery, tell us about your experience with core of Vitals.

Ellery Womack: Thanks Ishan. I’ve been at Edgio for the past three years working with our team of architects, engineers and Q as primarily helping our customers drive the most value as possible from Edgio products. One of the ways that we’ve done that is by working with customers to improve their core of Vitals to gain incremental revenue and SCO benefits and we do this across all products and all platforms. So you can be fintech, e-commerce, Salesforce, Shopify, whatever, we’re here to help you.

Ishan Anand: Great. So let’s break it down and start at the very beginning for the audience, what are Core Web Vitals and why are they so important?

Ellery Womack: So in May of 2022, Google introduced Core Vitals, which were a set of metrics to measure what Google felt were the most important technical KPIs influenced the user experience. The goal was to evaluate speed, responsiveness, and visual loading of your web pages. The initial metrics were Largest Contentful Paint, which is a measure of how quickly the largest visible element above the fold on your pages rendered. So that’s typically your call to action as well as Cumulative Layout Shift which is a measure of how much content shifts around on the page as it renders. You’ve probably been to a number of news sites where there’s lots of ads that pop in and that would definitely trigger a bad cumulative layout shift or CLS score on your website. And lastly, First Input Delay which is a measure of when the user does their first interaction, which is like a tab or a click, what is the amount of time it takes for the page to respond to that and you know, repaint or re render something. And starting in March of 2024, FID is being replaced with INP or Interaction to Next Paint, which is looking at all of the interactions across the user journey on a website.

Ishan Anand: So Rob Ellery just broke down what, you know, Core Web Vitals are in terms of what they are technically. But can you translate that into why they’re so important?

Rob Wakerly: Yeah, let me jump in. I think one of the things that I think is really neat about Core Web Vitals is it gives us a common framework, a common language to talk about performance of a site. And prior to this there wasn’t a great way to talk about how your site was performing. And you might say, ah, the performance of my site is not good or it takes too long to load. But how did you really measure that? And you know what was the common language to use? We didn’t really have one. And so that’s one of the powerful things about Core Web Vitals is it gives us that common language and why it’s so important is because these things have huge impetus on the business results and business performance of your site as well.

When you think about how this can affect your site, roughly 43% of traffic to e-commerce sites comes through Google search as opposed to paid or direct channels for paid ads and so forth. And further, most of e-commerce revenue, 73% comes from folks searching and being referred to your site, both of which are impacted by Core Web Vitals. Because Core Web Vitals are a part of search engine optimization and where you are in your Google search ranking. And it also is a big driver of the experience on your site. When people come to your site, whether they like the experience or not, Core Web Vitals are going to help you measure. And if you have good Core Web Vitals, you’re more likely that people are going to enjoy using your site and more likely to refer others to use your site. They really have broad impact on your business and your online presence that you have with your with your site.

Ellery Womack: To add on to what Rob is saying, when people make a Google search, 55% of the click throughs on the search results go to the top three organic search results. Meaning if you’re not in the top three, more than half the clicks aren’t going to you. This is just meant to underscore the importance of making sure that your website is fast and you want to do everything possible to stay in those top three search results.

Ishan Anand: Yeah, I just want to underscore that it’s how Google measures how fast your website is. But independent of Google, improving these metrics improves your customer experience. So, it’s there’s a synergy there and it’s hugely beneficial. And before, we started this, I pulled up the data from http archive and the Chrome User Experience report, which is where Google, you know, publishes the current core of vitals for any site that gets enough traffic and it showed that 53% of desktop sites we’re passing core vitals, which means slightly less than half are failing. 45% of mobile sites are passing core vitals, which means slightly more than half the web are failing to pass on mobile. So, for that slightly more than half the web that isn’t passing core vitals. What can people do if they’re not passing to start getting passing Ellery?

Ellery Womack: Great. So, there’s a number of things you can do to improve your core vitals, one of which is caching. You want to make sure that you’re caching as much of your content as possible on an edge network such as Edgio. This can be your CSS files, your images, your HTML. For your web pages, you want to use an image optimization tool so that you deliver the right size images at the right quality and in the right format for certain devices. If it’s for an iPhone, you want to deliver an A web file format which is going to come compressed and optimized for that device.

You should make sure that your origin server is always set up to respond with the appropriate cache control headers so that your browser knows how long can I cache this content so I do not need to go back out to the Internet to re fetch this. This is great for files like static files that do not change much over time. So, think your CSS, JavaScript, images, fonts. You should always be caching those in the browser.

We like to have our customers add preload and pre connect headers to the top of their HTML document. What this will do is first of all you will notice when you load your website that you’re going to have a lot of third-party calls because you’re going to probably load Google Tag Manager or Tealium that’s going to load Facebook, Instagram Pixels from all over the place. Your website has dependencies on 3rd party systems like you know Klaviyo and other buy now, pay later solutions and those all need to load assets onto the page. Every time that happens, you’re going to have to open a connection, or you can go download that content. If you can add those pre connects that can all happen immediately when the page loads so that when your website is ready to load that content, it loads a bit faster, and the preload will let you do streaming of responses so that you can load multiple pieces of content at once.

We talked about LCP or Largest Contentful Paint which is you know that call to action or hero image on your page. You can actually load that with the web page by adding a preload tag and this is one of the most important things you can do to improve your Largest Contentful Paint. We also recommend using script management, so adding defer and async to non-essential scripts or sometimes even injecting them dynamically when a certain browser event has occurred. But there is a lot more that you can do than just this. We wrote an article that’s on our website called Five ways Developers Can Accelerate Web Pages in 24 Hours at no Cost and we’ll link that here with the podcast. So I’d highly recommend that people go take a look at that and you know we’re always here if you have questions.

Ishan Anand: Yeah, that that article’s a really good resource. Rob, how hard is it to actually pass? What are some example outcomes that companies have achieved in rectifying their Core Web Vitals that you can cite?

Rob Wakerly: Yeah, the this has a huge impact as I was talking about before tying off the data that you pulled from CrUX, Ishan, the sites that pass Core Web Vitals versus don’t pass, it’s noticeable in terms of what the experience is for customers. And for example, on average a one second improvement on your page load time for LCP can increase conversions by 8.4% or more. And we, we speak with a lot of customers and folks on this topic, folks who are in marketing and on the business side more than just the technology teams and they’re excited about it too because the business KPIs that that this can impact. For example, we’ve worked with a large mattress retailer and we help them improve their LCP by 80% on their homepage and similar improvements on their product detail page or product category pages. They benefited from a 19% increase in conversion rate on the product detail page alone. We’ve seen similar results at Spangler Candy. They implemented Core Web Vital improvements for 60% improvements. So, they’re now passing and they’re seeing customers enjoy their site much more. We’ve worked with a multinational fashion conglomerate and got their LCP 45% faster and their revenue per user went up by 76% on that site.

We see these kinds of results consistently with our customers that by simple changes to the technology, we’re not, this is not even with changing the user experience or the design of the site. This is performance optimization specifically results in these kinds of increases and it’s not just revenue and conversion, it also increases organic traffic. We helped Shoe Carnival achieve 22% increase in their organic traffic because again this ties into SEO. So, there’s broad impacts to a number of different business KPIs. It’s really exciting when customers can engage in these projects and the ROI is right there, it’s, it’s not something to scoff at.

Ellery Womack: You may have heard Rob called these simple changes. There’s typically like an 80/20 or 90/10 rule and play at play here where most of those benefits for improving Core Web Vitals and improving SEO take very little effort. And for customers who want to continue tuning and getting more benefit, there’s more work involved. But in many of these cases, we’re able to achieve most of the benefit for a small amount of work up front.

Ishan Anand: Yeah, that’s exactly where I was going to go. In this age of, potentially AGI, intelligent chat bots and whiz bang features, improving the speed of your site is like the low hanging fruit that will really bring tangible ROI at much more readily than a large kind of transformation initiative in a lot of cases. So it’s really worth looking at as a way to increase revenue, especially right now in this current economic climate. How does Edgio help companies stay on top of Core Web Vitals and make improvements?

Ellery Womack: Because Core Web Vitals are affected by both how fast your site is delivered, which Edgio can help with, quite obviously because we’re a CDN and the performance of your site’s code after it’s delivered, you really need the right platform and the right expertise, and often times both. We offer a unique set of both. The fast edge development platform you can run yourself, but also our professional performance experts, which is the team that Rob and I work on to help solve Core Web Vitals challenges wherever they are in your code. We want to make sure that we deliver your website very quickly, but also make sure the content that’s being delivered is optimized for web browsers so that the data that’s being reported back to Google is compelling. And users who are browsing your website get the outcomes that they’re hoping for. We want them to have snappy, fast loading pages, sub-second transitions between pages and that’s something that we can help our customers do.

Ishan Anand: That’s a real source of differentiation is we can be a real partner throughout the entire part of the stack, whether it’s in the network or in the code to help out. Now that we’ve covered you know what Core Web Vitals are, why they’re so important, let’s talk about a recent change that happened with Core Web Vitals, this migration from FID to INP. Ellery, want to walk us through that?

Ellery Womack: Sure. The change from First Input Delay (FID) to Interaction to Next Paint (INP) happens in March of 2024. The main difference here is FID measured only the first interaction on your web page and interaction. Next Paint actually looks at the first 50 interactions that happen on your web page and takes the worst out of that group and then after that it’s going to look at the next 50 and so on. So, it’s actually a much harder metric to achieve, but also many customers have found that they’re happy path is quite good. People land on a page, they typically take the same action first. Like if you land on the home page on an e-commerce site, you’re probably going to look at the navigation and go to a category and then you can do a category. You’re probably going to click on a product tile and go to a PDP and then from there you’ll probably add to cart and this happy path.

It’s really easy to score well on Interaction to Next Paint, but where you get in trouble is there are other things that are less intuitive that are going to hurt you with this change to INP. What we’ve seen by helping customers is sometimes things that aren’t part of the happy path will trip you up. Such as you might have a sign up modal and clicking that to dismiss it could be slow or submitting your e-mail in a form to sign up for a reward could be slow. We’ve seen things like quick view on PLP be slow to open and close or changing swatches take a little bit of time to load the next image.

We have tools and processes that can help with that such as our predictive prefetch where before you click on an element we can load that content into your browser so that it’s already cached and that way those transitions are very quick. But you know when you look at just the happy path of I land on the home page, I go to PLD, PDP, and so on, optimizing that is very straightforward. It’s difficult to go find what are all these other interactions that can come up and how are these impacting micro vitals. We also have a RUM tool which stands for real time user monitoring that’s free for Edgio customers that tracks and reports on all interactions impacting INP. It will help you go identify on what pages, what interactions are triggering the worst INP scores so your team can go prioritize and fix them.

Ishan Anand: I want to drill in actually and underscore something you pointed out, that it’s not only a new metric it’s harder to pass than the old FID. So, you can go from passing to suddenly not passing on a dime and not realize it. In some sense treat this like any of those large Google updates. If you’re in the SEO field where suddenly everything gets re-ranked and the sky is falling, you need to figure out how to recover. This is one they gave us a lot of warning time and they literally gave us the numbers. If you’re failing on INP, you’re suddenly going to be failing core vitals, it could affect your rankings. Reach out definitely will be able to help.

What’s a misconception or maybe something that you learned throughout this process dealing with Core Web Vitals that you didn’t appreciate at the beginning. That would be useful learning for the audience, Rob.

Rob Wakerly: I think when you hear about Core Web Vitals it with a little bit of research or speaking to someone who can tell you about it, you get the idea fairly quickly. But I think it’s another thing to know, OK, what do I, what do I do with these? Like, how do I measure them? How do I really put it into my development flow? Let’s say I have a site and I want to improve them. Ellery talked about some of the things you can do to improve it, but what’s the right way to go about measuring that ongoing and be able to tell, like how to do that?

Ellery pointed out the RUM tool which measures real time on your site, which is great for your production site or your live site. But there’s a few other things to consider. Because you’re developing new versions all the time of your site, how do you test those two? You don’t want to wait until you get it to production to test. Hey, is my performance at least the same as it was before or better?

Something I want to point out is synthetic testing, and synthetic testing is really powerful because you can run it on any environment. You can run a synthetic test to measure your Core Web Vitals on a dev environment, QA environment, staging environment. For any new release candidate you can see how it’s performing and like I mentioned, make sure it’s performing the same or better than your previous version. Because the last thing you want to do is introduce a change on your site and have it tank your performance and not find that out until it’s too late. So synthetic tests are important.

We talked about the benefits of RUM because it’s real time and you can see what the traffic is doing on your site. And then the third category, perhaps the most important is the actual Chrome UX report or CrUX is the abbreviation to measure what Google measures and Google measures on a backward looking 28 days based on how your site’s performing. And that’s so important because it is what they use for their SEO. So, when you want to see what Google sees and how they’re going to rank you for the organic results, make sure your CrUX is in good shape or if it’s not, be aware of that so that you can address it. Those different kinds of performance tests and tools are something that adds another layer to all of this that that is really important to understand how those work and how to use them.

Ishan Anand: Yeah, something you point out is the regression, like you might make yourself performant and then suddenly it’s very easy to actually add a change as you mentioned and suddenly regress back in performance. That can happen very, very often. And that’s where a tool like RUM is hugely valuable along with synthetic testing beyond core vitals. How does this affect, you know, Core Web Vitals improves your search ranking to Google, but we’ve also talked about how it benefits customer experience in general. Can you just explore that in a little more detail?

Rob Wakerly: Yeah, so some of the other things around customer experience. If you’re interested in Core Web Vitals, you should probably also be interested in your site’s cache hit rate and you would like to have some kind of caching layer and use that for static and even dynamic content on your site. Because if you’re serving customers from a caching layer like a content delivery network will do, it’s going to be more performant and that’s a key way to improve the performance, like Ellery was talking about before.

There’s also user experience, you know performance is only one aspect of your customer’s experience. So you might want to be thinking about doing some kind of user experience audit or assessment, benchmarking against competitors and checking into your analytics as well. I would say performance and your analytics go hand in hand. When you make an improvement in performance, you want to follow up right away on your analytics measurement to see what impact is this performance improvement or degradation having on the analytics all those business KPIs you care about such as conversion rate, bounce rate and revenue per user.

And then finally A/B testing. Often times when you make a change to performance that’s something you can A/B test and see not only, hey my change is faster, but how much is it winning against the old experience from a conversion rate or other KPI aspect? So you can AB test performance to see those business impacts. You can also AB test other things on your side of course.

Ishan Anand: Actually on the A/B testing, worth pointing out that something that’s unique to the platform is that you can A/B test performance itself, whereas a lot of other A/B testing tools can actually negatively hurt performance.

Let’s take a step back and say I’ve got the message about how important Core Web Vitals are because so much of my traffic levels depend on it that Google is sending me and it also hugely improves my customer experience. What are the next steps I should take as you know, technology or site owner to improve my core web vitals?

Rob Wakerly: You definitely want to look at your CrUX report, your Chrome UX report to see how are your core of Vitals performing. If you don’t know, now is a great chance to take a look or ask. Other things you want to think about are how important is performance to the site and to your user experience. It’s also a great time to think about security, overall user experience. These are things that you should be discussing and aligning on with the technology or digital teams who are supporting the website or the web app.

Run a performance test. Think about not only what is, what is your CrUX data telling you, but what is a fresh performance test say? Does it perform differently on different sites? If you have a portfolio, does it perform differently on a lower environment? What can you learn from that? And make sure some of the things I already talked about you’re engaging in that check on Am I optimizing images? What is my caching strategy? And so forth, because if you’re not intentional about those things, then there’s opportunity to address it or get more intentional about those aspects of your site and experience.

Ishan Anand: Great. Well, whether you’re just getting started in your Core Web Vitals journey or you’re deep in it and need help, definitely feel free to check out. We have a tool, Edgio Optimize that helps you do that synthetic test or reach out to our team. We’re happy to help. That’s going to be our Core Web Vitals podcast for today. Thank you, Ellery and Rob, and thank you, our audience for joining us on Beyond the Edge. See you in the next one.

Check your site performance with Edgio Optimize