[Resolved] High LCP values issue (slow on mobile devices)

[Mario]

Hi!

Since using Generatepress I’ve improved a lot of metrics and the overall website is a bit lighter. Nevertheless, I am getting an especially high LCP value using Google Speed Insights which appears as “bad URLs” in Google Search Console, I think on all pages of my blog.

It is always around 4 seconds and I would like some help to improve it. I’m pasting two pagespeed tests in Private Information area.

I’m used WBPAGETEST also, and I think the issue could be related with the posts featured images, but not sure.

Any help is welcome. Thanks in advance.

[David]

Hi there,

the Featured Image is being lazy loaded which will affect LCP.
Check to see if the Lazy Load plugin allows you to exclude that image.

Some provide the option to exclude an image with a give CSS class.
See this topic to add a class to the featured image:

https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1816115

[Mario]

Thanks. I’m using autoptimize. I’ve done the changes you suggest. The featured image and other images that appear on the first screen are no longer lazyloaded.

I was hopeful about the changes. However, I still have practically the same LCP time (more than 4 seconds on mobile), although in the tests of webpagetest.org the featured image is showed a little earlier. I’m pasting results in the box below. What else could be happening? Thanks.

[David]

Looking at both PSI and WebPageTest – the major issue is the Google Analytics and then the Google Fonts ( ironically ).
Things to try:

1. Google Analytics – there is this plugin for hosting it locally:
https://wordpress.org/plugins/host-analyticsjs-local/

2. Fonts – again you can serve these locally – couple options:
Add them manually: https://docs.generatepress.com/article/adding-local-fonts/
Add them automatically with a plugin: https://wordpress.org/plugins/host-webfonts-local/

[Mario]

Great. Thank you. I think I have already managed to reduce the loading time a lot.

I have done the font loading by manual method.

The problem now is that, before loading the Google font, they are showed with serif. What I would need is to be able to choose the font and style (sans-serif) until the Google font loading is finished.

I did a search and found this: https://generatepress.com/forums/topic/generatepress-adding-font-with-sans-serif/, but I’m not sure if it’s suitable with the local fonts snippet and how to mix.

Thanks in advance.

[Elvin]

Hi Mario,

Yes the filter on that topic works. And that will work on local fonts as long as the specified font is properly imported. 🙂

[Mario]

Hi Elvin. Thank you. That is valid for one font (I’ve setted that as SYSTEM STACK), but I’m using two (one for body and another for titles). How could I add a second font?

[David]

I checked the site and all font requests ( Mulish and Poppins ) are set to sans-serif.

[Mario]

That’s right, David. I’m trying now to set a secondary system default font before “sans-serif”.

[David]

The on the Snippet Tom provided ie.

add_filter( 'generate_typography_system_stack', function() {
    return '"colaborate", sans-serif';
} );

You can try including it in the return string…. but that won’t allow you to select a different font in the customizer, it will just create a fallback chain eg.

return '"your font", "fallback font", sans-serif';

As both your fonts have the fallback font ie. sans-serif … what is the need to change its behaviour ?

[Mario]

Thanks David. I have this for body font:

add_filter( 'generate_typography_system_stack', function() {
    return '"Mulish", "Segoe UI", "Helvetica", sans-serif';
} );

I was thinking of doing the same with the header font (add more fallback fonts). But seeing the result I think it’s not necessary yet.

Thank you very much again. You have helped me a lot to improve the loading of the website.

[David]

Glad we could be of help.

[Author]

Posts