-
fcacic
Hello everybody! I seem to have a pretty big discrepancy between LCP scores on Desktop And Mobile.
I have made a few pages using GeneratePress so far and its amazing, but I think I’m doing something wrong since the mobile speed tends to land somewhere in the 70 range and the desktop goes to 95-100 all the time.
I have tried many things and I managed to improve the situation quite a bit but can’t quite reach that 90 mark.
I will use one page as an example and then try to fix it on the others as well if you guys could point me in the right direction. 🙂
I am using using Siteground’s Speed Optimizer and I am locally hosting all the fonts.
The site info is in private info.
-
Hi there,
I’m guessing that the main cause here is the background video.
I don’t think there is a way to avoid that unless it is switched to a background image on mobile.
-
fcacic
How about this one? Here there is no video but the situation is the same, Mobile score 70, Desktop score 100
Mobile LCP: 6.1
Desktop LCP 0.9 -
David
Hi there,
pagespeed insight simulates the device and network conditions to “test” your page.
The mobile simulates a “mid power” device running on a slow 4g network, which is why it returns a slower time than the desktop test and a slower time than the actual real world metrics.So its not that your site is doing anything differently for mobile that is causing this.
Testing the URL provided in the private info, i see a few issues to resolve:
1. the Google Font API is still loading a copy of the Poppins fonts.
This is from a preload / prefetch request that i assume has come from your optimisation plugin ?
This needs to be removed.2. Render blocking
Looking at the report the FCP and LCP scores are identical
This means that there is render blocking stylesheets.
And you should look to your optimization plugin to remove that.3. INP
this is a new metric that measures how long it takes to repaint the screen after an interaction.
A key method of improving that is to use the off canvas panel for your mobile menu.
Which has a faster repaint then the standard mobile menu which pushes the entire page down when opened. -
fcacic
Hey David, thanks for all the info. Regarding the font, yes I am preloading the fonts but from the local library, should I not do that or?
I am a bit confused since I checked some guides and it said that its good to preload the fonts?
When I check the fonts – Use Google Fonts API is not ticked, which means Poppins should be hosted locally.
-
David
The preloads and prefetches that are being made on your site are to the fonts.google server. So your site is loading the fonts twice, first from Google and then from the local server.
How are you preloading/prefectching them ? As that needs to be removed.
The fonts on your local server can be loaded quicker by :
1. create a new GP Hook Element and set the Hook to
wp_head
and its Priority to1
2. inside the hook add your@font-face
CSS inside style tags ie.<style> YOUR CSS HERE </style>
3, set the display rules to entire site.
This will add the CSS at the top of the HTML doc so the browser can parese it sooner and load the font quicker
-
fcacic
Okay nice, I made the font change as you said, how can I check if its okay now with the font preloading?
Also I changed the menu to off canvas menu.
I’m still gonna need to look into render blocking.
-
David
I can see the CSS change for the Local fonts, and they are now being requested much earlier in the loading.
But i also still see the preloads of the google fonts.
How is the preload been added ? -
fcacic
That is strange, I don’t have any font preload requested except the one in the Hook Element.
Could it be some hidden option somewhere I’m missing?
Is it possible I’m using some other font thickness except 400 and 700, because I’m locally hosting only these two thicknesses, and then it is google loading the font?
-
David
Check in the SG Optimizer plugin, i believe that has an option to optimize font loading.
After making any changes to that plugin you will need to purge the sites caches too. -
fcacic
I just realised I was using 600 thickness on some text, could that be the reason it was using the Google fonts?
-
David
Did you see my reply here:
https://generate.support/topic/big-lcp-on-mobile/#post-111822GP and GB only load fonts from Google if the Use Google Font API option is checked in either the customizer > typography or a GB Blocks typography.
-
fcacic
Yes yes I did sorry, I’m using WP Rocket and I didn’t see any option to optimize fonts there, there is only the preload option, in which I have no text in.
-
fcacic
Okay now I saw that the option in the GB blocks was not disabled, so now I disabled it, hope that helps.
-
David
Ok, its WP Rocket that has added ( and potentially cached ) those preloads.
You can tell by adding?nowprocket
to the site URL it will disable WP Rocket it on load, and the preloads disappear.More info here on WP Rocket font prelaod:
-
fcacic
Okay, I don’t see double fonts in the waterfall so I’m guessing that was a cache problem and that its solved now.
The speed is quite a bit better now, its 77 compared to 70, but LCP is still 6 seconds.
Since it says to serve the images in next gen formats, and that LCP image is quite big for mobile (1000×563), because it pulls the dynamic featured image from the post – Is it possible to somehow use a different featured image on mobile (So lets say a media query less than 500px width) for posts, in that case I could put WebP on mobile and leave the nice quality picture on desktop?
Is it possible to make a custom PHP snippet like that?
Also regarding the font preloading, is it okay to use the technique you suggested (via Hook Element) instead of the usual Font preload option in speed optimizer plugins? Since it seems that the Wp rocket one doesn’t work as intended, I’m guessing the method you suggested is much more universally applicable?
- You must be logged in to reply to this topic.