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/

9 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.

1 Like

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.

Instead of typical comments about these issues in each thread, it’s better to focus on solving them.

Core Web Vitals showed that my blog pages had CLS > 0.25 and therefore, Google deranked my pages and I lost 50% of the traffic. That’s the reality now, and Webflow should assist in solving them.

Can someone from Webflow address or at least discuss these issues? I’ve been searching for an answer for a month now and all I can find are these topics without answers and typical “Google doesn’t implement that either”.

Sorry for the rant.

2 Likes

Everything @maray said…

I know a lot of this is down to design decisions.

I know Google fails at its own tests.

I know Core Web Vitals and page speed might not be a huge ranking factor according to the CTO of Webflow.

BUT…

I want to provide a high-quality service for my clients and I don’t want them going into Search Console seeing a load of errors.

I have managed to fix a number of issues such as FID and LCP, and yes those were down to my set up and design decisions. Good leaning for future projects which I have implemented going forward, but I’ve been working on CLS for almost a year now without any success.

Webflow is marketed as a designer-first platform and it is, it’s brilliant! But as designers we may not always hold developer-level knowledge at getting these sorts of things fixed.

1 Like

Can you please share how you solved the LCP issue? I have it at 4.6s and I am afraid will be penalized again by google.

Let’s try to solve these issues together.

LCP can be due to a large file size of an image or video, or it can be due to content. Unfortunately it’s up to Google to decide what it sees as the largest piece of your page.

If you’re not already familiar, I would resize all images in Photoshop, save for web at the best possible size that gives you a balance between quality and file size (I always aim for less than 200kb for main hero images) and then compress. There’s loads of compressors our there, I use ‘Imageoptim’ for Mac.

Then, for images above the fold make sure those are set to ‘Eager: Loads with page’ and anything below the fold to ‘Lazy Load’ which should be default now in Webflow.

That way, images are as light in file size as possible and there’s no delay in loading any that are immediately visible. If you’re following a ‘standard’ blog/page template, usually the bigger hero images are at the top, but this might not be the case with your website.

To find out exactly what is causing the LCP issue, go to Chrome, open dev tools, go to ‘Performance’, hit the ‘run’ button and it should highlight what is causing the LCP.

1 Like

Using one minified css file is considered best practice, your components and styles will always have base styles that are later tweaked with css media queries. Having multiple files per breakpoint will make maintaining your CSS a complete nightmare.

As far as I know Webflow only creates one CSS file which you can minify?

Screenshot 2021-03-25 at 10.10.23

1 Like

If anyone is interested I been working on getting high scores for webflow pages and offer a consultancy service. PM to talk more.

@maray -

That is a strong correlation you are making. Please share how you tested and arrived at that conclusion. It would be helpful if you shared your published URL for review.

@webdev here, have a look:
Beginning of Feb, 16+ poor URLs due to high CLS.

Around the 24th of Feb I noticed a sudden drop in traffic.
2
So I went to the console to check what’s going on. I saw that there are issues according to web vitals and started to work on them and applied for verification. Today, Google finished the verification (it takes 28 days) and I saw again the numbers and the growth that I had before.

Can it be a coincidence? I doubt.

I still have CLS and LCP issues, but they are categorized as “Need Improvement”. That’s why we folks, especially those without web dev background, need solutions and help.

1 Like

I would consider this a pointer but not a definitive cause. Ranking and Google is a complicated matter so there is not going to be a way to simplify it for everybody.

If you want to improve your CLS I suggest reading this article.

I read it a couple of times, but I do not know how to implement it in Webflow.

  1. How do I set image size in CMS rich text?
  2. How do I use the following? I tried but it didn’t work (I am not a web developer).
img {  aspect-ratio: attr(width) / attr(height);}
  1. I tried to use Aspect Ratio Boxes, but again, I am not sure it helped a lot.

Today I tried to work on the new, LCP issue, which is now at 5s. I think the problem that causes CLS is lazy-loaded images. Once I set my hero cover image to ‘Eager: Loads with page’ it helps to reduce CLS but contributes to LCP.

I found this video How To Lazy Load in Webflow (But the Right Way) - YouTube where it’s explained how to solve the CLS issue with Javascript.

Do you think it will be challenging for the Webflow team to use it and fix it once and for all?