LCP google too important, I do not understand

Design help General
1

Hello,

I just made my website on Webflow, but I have LCP problems on my homepage. It is over 9s for no reason. I’ve tried several things but nothing works.

If someone had an idea of how to fix the problem?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

LCP = Largest contentful paint.
Your homepage is a huge vdeo, which must download before it can be displayed.

Nothing wrong there, but for mobile users, they may see a delay.

You could consider redesigning it to stream the vdeo instead from a source like Vimeo pro, which will have a faster start time. Check out Vidzflow as well, I think they might support background vid streaming also.

3

Okay, so nothing abnormal. How can I improve this system? Isn’t it possible to put an image from the webflow module to load before the vdeo to save display time?

What I don’t understand is why google speed tells me that it’s the title on the vdeo that’s in LCP?

Thanks again and I’m not a dev or a webdesigner, sorry for my ignorance.

4

That’'s the most common approach.

You could try a background image, but then you’re loading more content. It might “improve” LCP by confusing Google, but I don’t think it would improve the UX.

5

Hi @Micktoon ,

I have analyzed your website using Google Page Insights . Based on the report it sounds like you’re dealing with a high LCP (Largest Contentful Paint) time, which is definitely frustrating.

Here are some strategies that can help improve your performance score:

Critical CSS Inlining

  • If the CSS for above-the-fold content (like the hero section) is not rendered quickly, it can delay LCP.Inline critical CSS directly in the HTML for elements that appear above the fold.Use Webflow’s Custom Code section to inline the most critical CSS.
/* Inline the critical CSS for above-the-fold elements */ body { margin: 0; font-family: Arial, sans-serif; }

Font Loading Strategies
Slow font loading can significantly impact LCP, especially if the font isn’t preloaded or swapped quickly enough.

  • Preload critical fonts (such as those used in the hero section) to ensure they’re loaded as soon as possible.
* Use font-display: swap to ensure fallback text displays immediately: @font-face { font-family: "YourFont"; src: url("your-font.woff2") format("woff2"); font-display: swap;}

Minimize JavaScript Blocking
If your site is loading heavy JavaScript files, it can block the rendering of your content. Ensure that non-critical JS files are loaded asynchronously or deferred, using the async or defer attributes in the script tags.

Alternatively, If you don’t want to do it manually, I recommend you to try a Website Speedy optimization app that automates a lot of the performance work, such as image compression, LCP optimization, and JS/CSS minification. This can help speed up your website.

(Disclaimer: We are the developers of this app and happy to answer any questions.)