Streaming live at 10am (PST)

Google Core Web Vitals

As some of you might know, there’s quite a significant Google Algorithm update coming in 2021 called the Google Page Experience Update.

To summarise, Google will look at three areas to do with your website that will affect ranking:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

If you haven’t yet noticed, there’s a new ‘Core Web Vitals’ section in Google Search Console.

While it’s been said the Google Page Speed tool isn’t the best to use, it seems like now we need to take more notice of how Google sees the speed and overall performance of our websites.

Running a test in Lighthouse, I am consistently getting these errors:

Properly size images - I was under the impression that while we as users had to upload low file size, high quality compressed images, Webflow would then resize them into a variety of sizes and load the best one based on the browser. If that’s the case, why isn’t Google seeing this?

Eliminate render-blocking resources - I am not a developer (hence why I chose Webflow) but this one if baffling. It’s essentially saying my CSS file is too big, but as a Webflow user, how can I make it smaller?

Then there’s all this other stuff I am not familiar with:

Has anyone got any tips on how to fix these issues so I can get ahead before the update arrives?

Edit: Particular website I am analysing in this case is: https://www.luxurytraintickets.com/

7 Likes

I am having the same issues. LCP of 4.4 is giving a poor score for Mobile usability. Hard to believe no one has a response to these issues.

I know it’s somewhat dependent on everyone’s own website but I thought more people would be preparing for the update…

I’ve been getting sucked into this rabbit hole again lately as well. More in lighthouse than web vitals.

Seems like unused code is an issue we have no control over (apart from removing unused classes and interactions).

One thing I don’t get in lighthouse is when Google says to set specific explicit image widths when it look like they are to me. For example on luxury trains.

<img src="https://global-uploads.webflow.com/5d9db19620ac3a41c5269073/5f8943c0d3bcf7261c8527ee_early-bird-sale-home.jpg" alt="Early Bird Sale" sizes="100vw" srcset="https://global-uploads.webflow.com/5d9db19620ac3a41c5269073/5f8943c0d3bcf7261c8527ee_early-bird-sale-home-p-800.jpeg 800w, https://global-uploads.webflow.com/5d9db19620ac3a41c5269073/5f8943c0d3bcf7261c8527ee_early-bird-sale-home-p-1080.jpeg 1080w, https://global-uploads.webflow.com/5d9db19620ac3a41c5269073/5f8943c0d3bcf7261c8527ee_early-bird-sale-home.jpg 1600w" class="home-main-image">

Unused code on your site. Some in Webflow, but lots elsewhere…

Much to learn here

Thanks for taking a look @HammerOz

One thing I think may be causing issues is the unused code like you mentioned.

I am using Foxy as our checkout gateway plus a few other apps for various things.

When applying these various apps, the tutorials always say to apply their code to the custom code area in the settings of Webflow so they’re applied site wide. But that said, some pages don’t need that code, as they don’t use a checkout for example, so I am wondering whether it’s better to apply custom code page by page instead?

You’d have to check with Foxy if checkout needs to be site wide. It may need to be due to “view cart functionality” need on each page normally.

You’re probably right @HammerOz

So really we’re a bit stuck… If Lighthouse is telling us we have code that ‘isn’t needed’, but actually it is needed, it looks like we may never be able to make Google happy…

It comes back to effort / reward I guess. But yeah, to state the obvious, only use external scripts if essential!

Google can’t make itself happy if you check its own properties in Lighthouse. Focus on user experience and only use third party code that is absolutely necessary. Concentrate on content, conversions, and the things you can control.