Ensure text remains visible during webfont load

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.

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.

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';
} );

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

I have attached the screenshot.

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.