CLS, LCP and FID issue

Hi there,

Before we start w/ the bigger ones, let's make sure we don't have CLS coming from FOUT first.

Some fonts on your site maybe having FOUT issue. If you check Google PSI, they're marked under
Ensure text remains visible during webfont load. To address this, try the following:

For generatepress.woff2:

Go to Appearance > Customize > General and set the Icon type to "SVG".

For the Google Fonts, add this PHP snippet:

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

Here's how to add PHP snippets - https://docs.generatepress.com/article/adding-php/

Now we check the CLS elements in question.

Can you link us to a sample link with high CLS? I've checked the homepage and it had a CLS of 0 on mobile. And still a passable CLS on desktop.

Note: the CLS on desktop isn't something the theme controls. The amp plugin you're using seems to be adding something that makes it load a bit later on purpose. You should ask the AMP plugin developer you're using about this issue.

Hi,

I have pasted snippet code and updated SVG as font type.

High Avg CLS: Desktop- https://www.dilsedeshi.com/biography/madhumita-raut-biography-in-hindi/
Mobile- https://www.dilsedeshi.com/tag/holi-captions-for-instagram/

Any update about LCP and FID issue.

For remaining I will contact to AMP plugin support.

Thanks in advance.

Hi there,

i just tested the first link provided in your last reply on PSI. And if you look at the Diagnositcs you will see several red flagged opportunities.

The major one I see is the Reduce the impact of third-party code - when i checked the site in the Developers Tools performance tab - all of that JS is being processed whilst the browser begins rendering the page. You should speak to AMP provider about this.

No point tackling the Main Thread issue that comes after it - as this is most likely a symptom of the above issue.

Hi,

I want to replace https://fonts.googleapis.com/css?family=Domine:regular with https://fonts.googleapis.com/css?family=Domine:regular&display=optional in stylesheet.

But not able to locate this file. Please do for me.

Thanks

You can't specifically set a fonts display propoerty.
You can apply it to all fonts selected in the Customizer by adding this PHP Snippet:

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

For a specific font you would have to load the fonts Locally:

https://docs.generatepress.com/article/adding-local-fonts/

And within the @font-face CSS you would include the font-display: optional; property