[Support request] Ensure text remains visible during webfont load

[Tom]

I’m not seeing any CLS issues in the Lab Data on mobile or desktop (0.009).

As for the LCP, you can try preloading the featured image: https://generatepress.com/forums/topic/avoid-large-layout-shifts-how-to-fix/#post-1705269

However, I’m not seeing that as an issue in your reports either.

[Mini]

Hello,

Here is a screenshot attached for the Avoid Layout Shift. I know this is not a major issue but still it is shown in the Diagnostics section and I just want to solve it.

Can you let me know how I can fix this.

Apart from that, there are two major issues which are shown in the mobile and desktop report.

Eliminate render-blocking resources
Ensure text remains visible during webfont load

Please help me to fix them.

As you mentioned there are many other benefits of using flexbox. So I want to switch from Floats to Flexbox. When I tried to do that my site font changed.

Can you let me know why is it happening and how can I fix this.

[Tom]

Those are very tiny numbers – I don’t believe there’s anything you can do about them. It’s important to note you’re getting a 99/100 score on Desktop, so I don’t think you need to put too much effort into this 0.00x values.

The other two issues you’re seeing there are due to the Google Font. It has to be render-blocking unless you want the font family to shift/change once the page has loaded (will likely contribute to CLS).

Adding this filter will help:

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

[Mini]

CLS score is improved but LCP score is still bad in mobile.

I have attached the screenshot.

[Elvin]

Hi there,

For LCP, consider doing the things listed here:
https://wplift.com/fix-largest-contentful-paint-wordpress

I suggest trying #2, #3 and #5.

[Author]

Posts