Largest Contentful Paint!

Publishing help SEO
1

I feel like I have tried everything and I cant get the Largest Contentful Paint to reduce on my product pages. Ive converted all of my images to webp (they are quite small now). Ive optimized my custom code. removed webflow native youtube embed. At a loss on how to improve this. Seems like at this point its something on Webflows end that I can’t optimize.

Screenshot 2025-05-06 at 10.41.31 AM
Screenshot 2025-05-06 at 10.41.31 AM1024×523 76.9 KB

Here is my site Read-Only: (Webflow - MODdisplays)

[1]: http://

2

Localize the Google fonts so the Webfont script doesn’t load. That will help.

3

use preload the LCP image with a rel=“preload” tag.

with font-display: swap in custom CSS to reduce blocking time from font loading.

4

this sounds interesting! how do I implement this and does it work for CMS images? Thanks again.

5

Preloading LCP Images from CMS

  1. using tools to identify which image is considered the LCP on your page.

  2. then, you can manually add a preload tag in your site’s section.

  3. In Webflow, Page Settings > Custom Code > Inside Head Tag

font-display: swap for Custom Fonts

  1. In Webflow, Project Settings > Fonts > Custom Fonts & upload your font files.

  2. then, Webflow allows you to set the font-display property

  3. Choose the swap option to make sure text is displayed immediately using a fallback font until the custom font loads.

For Google Fonts, you can append &display=swap to the font URL to achieve the same effect.

Good Luck..

6

Thanks for your help!

7

Hello @MODBrian , I understand the frustration of having optimized many areas of your website, like images, custom code, and embedded content, but still struggling with LCP (Largest Contentful Paint) on your product pages. Based on the Google PageSpeed Insights report and the efforts you’ve already made, here are some unique solutions to solve the issue :

Use Content Visibility for Offscreen Content

  • Offscreen content or images that aren’t visible contribute to the page’s LCP.

  • Implement the CSS content-visibility property for content that is offscreen or not essential at first, so the browser can skip it during the layout calculation. This can improve performance

.

  lazy-section {
           content-visibility: auto;
           contain-intrinsic-size: 100vh; /* Set a placeholder size */
            }

Optimizing Font Rendering with font-display: optional.

  • Use font-display: optional for fonts that are not crucial to the page’s initial content. This will render the fallback font for the first paint, and if the custom font is not loaded within a short time, it will use the fallback without waiting longer.
@font-face {
     font-family: 'YourFont';
     src: url('your-font.woff2') format('woff2');
     font-display: optional; /* Allow fallback font if custom           font isn't loaded fast enough */
}

Optimize Server and Hosting Performance

  • Time to First Byte (TTFB) can contribute to LCP delays, especially if your hosting server is slow.
  • Ensure your Webflow site is hosted on Webflow’s CDN, which caches assets globally to improve content delivery speed. If you’re using external assets or self-hosted images/fonts, make sure these are also optimized for faster delivery.

Alternatively, If you’re still struggling to optimize LCP, I recommend Website Speedy, an app. It automatically handles Font optimization , performance scores and other Core Web Vitals.You can start with a 14-day free trial to see how it boosts your site performance without the manual effort.

8

LCP can be super stubborn, especially on product-heavy pages. Sounds like you’ve already knocked out most of the big-ticket items (WebP conversion, code optimization, ditching the native YouTube embed). Nice work on that.

At this point, you might want to check if any large fonts, third-party scripts, or layout shifts are contributing to the delay. Sometimes, even Webflow’s own structure can cause a bit of layout jank that slows LCP.

Also, if you’re using a hero image or banner above the fold, make sure it’s being prioritized in loading, setting priority manually (if you’re using custom code), or ensuring it’s not lazy-loaded might help.