The LCP load time is high, and the font is the main element causing this delay

Publishing help SEO
1

Hi everyone,

Our website here is loading slowly on mobile devices. The biggest issue is the slow loading of the main text font (LCP issue).

image
image952×483 23.4 KB

We’ve already tried:

  • Compressing images to WebP format
  • Minifying JavaScript and CSS files
  • Using Google Fonts
  • Preloading the font
  • Using fetch to load the font
  • Even switching to system fonts

We’d really appreciate any help to improve the mobile loading speed. Thanks in advance!

Here is my site Read-Only: LINK

2

Hi,

It sounds like you’ve already done a great job tackling common performance issues, but LCP can still be tricky, especially with font loading. Here are a few additional steps that might help:

Use the font-display: swap Property: Even with preloading, fonts can delay rendering. Applying font-display: swap ensures that a fallback font appears first while the custom font loads.

@font-face {
font-family: “Your Font Name”;
src: url(“path-to-font.woff2”) format(“woff2”);
font-display: swap;}

Optimize Fonts Further

Use Font Subsets: Loading only the characters you need can reduce file size significantly. Tools like Font Squirrel can generate subsets for better performance.

WebFont Loader: If you’re using Google Fonts, consider implementing WebFont Loader to better control how fonts load asynchronously:

Alternative Optimization Tools: If you’re still experiencing delays and prefer an automated approach, tools like Website Speedy App from webflow marketplace can help by optimizing fonts, images, and scripts automatically.
(Disclaimer: We are the developer of this tool and are happy to answer any questions you may have.)

After making these adjustments, test your site again using Google PageSpeed Insights or Lighthouse to measure improvements.