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?
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.
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?
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…
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”.
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.
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.
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.
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.
Around the 24th of Feb I noticed a sudden drop in traffic.
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.
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.
How do I set image size in CMS rich text?
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);}
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.
