LCP issues with webflow site(s) _ mobile view

Community resources General
1

So I am looking at several things before my LCP
note: mobile view is like 80 but desktop is 99

For example when I hover over the default webflow files for .css and .js they are render blocking. I also see some other things but they don’t seem to be as big an issue as their not labeled render blocking.

note: my fonts are downloaded woff2 files and uploaded. So their not hosted at google.

I don’t see anything on web for fixing LCP issues in webflow. Can I even do that?
I know people say webflow has page speed or fast websites but to be honest my Wordpress sites had better performance. I am not leaving webflow.

I am just trying to figure out how to fix LCP issues I have seen with multiple sites.

Forgive me, I bleeped out info as I don’t know if that is sensitive info or not but I left the extensions and such.

chrometools
chrometools1641×352 98.1 KB

here are the file names with some bits left out in case sensitive.
portolfio-name.webflow.shared.numbersandlettershere.min.css
webflow.schunk.numbersandlettershere.js
webflow.schunk.numbersandlettershere.js
webflow.numbersandlettershere.js

Thanks

2

CSS is always render-blocking unless you build some form of critical CSS hack to forceable defer the stylesheet loads.

Webflow.js can be set to async, check in the custom code settings I think.

1 Like
3

Hello @Daniel_Hughes , Understand your frustration — LCP issues on Webflow (especially on mobile) are more common than most people think, despite Webflow’s claim of being fast by default.

Here are several code-level and Webflow-specific strategies to tackle your LCP bottlenecks:

Inline Critical CSS for Above-the-Fold
Render-blocking .css files are slowing down your first paint. A proven workaround is to inline only the CSS needed for the hero section and nav directly in the head tag

<style>
  body { margin: 0; font-family: sans-serif; }
  .hero { height: 100vh; background: #fff; display: flex; align-items: center; justify-content: center; }
</style>

Use font-display: swap on WOFF2 Fonts
Great that you’re self-hosting fonts — but make sure you include font-display: swap to avoid invisible text that delays LCP:

@font-face {
font-family: ‘YourFont’;
src: url(‘/fonts/your-font.woff2’) format(‘woff2’);
font-display: swap;
}

Lazy Load All Non-Critical Media
Even though Webflow supports loading=“lazy” natively, double-check that all below-the-fold images/videos have it applied — especially on mobile.
<img src="/images/example.jpg" loading="lazy" alt="example">

Also consider using width/height attributes to prevent layout shifts (impacts CLS, but still helps LCP stability).

Alternatively,If you’d prefer to streamline the optimization process, Website Speedy app—a Webflow app that automates LCP optimization and JS/ CSS minification to improve the site’s performance score or speed.

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