How to fix Largest Contentful Paint (LCP) on mobile?

Joined
Aug 14, 2021
Messages
4
Likes
3
Degree
0
Hi all, I have this error message in Google search console:

“LCP issue: longer than 4s (mobile)”

It’s apparently impacting more than 20 pages.

(I’ve checked each page and the Largest Contentful Paint (LCP) is anywhere between low 2’s and 3).

The suggestion from page speed insights is to reduce initial server response time (using a different theme, an optimization plugin or upgrade server).

The LCP is no issue when it comes to desktop (page speed insights showing it is in the green zone for every page).

I can’t seem to find an answer as to why this would be an issue on mobile but not on desktop?

If there is an issue that needs fixing, any pointers would be appreciated.
Thanks,
 

Ryuzaki

お前はもう死んでいる
Moderator
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
5,060
Likes
9,711
Degree
9
The issue on mobile is that Google is measuring pages on a gimped out 3G connection since there's still portions of the world where people are using that. It's a "leave no man behind" kind of thing. And if you look at the CrUX data (Chrome User Experience) you'll see there's all manner of old and slow phones and connections still.

This is why Desktop scores are slaying Mobile ones. Smartphones are getting fast and strong and all that but they still pale in comparison to a desktop computer, even if on the same internet connection and same speed.

Also, the browser width and page layout are different on mobile due to the restricted browser width. So what may be the LCP on desktop won't be the same on mobile. On mobile it could be a paragraph of text and on desktop it could be a featured image.

Yeah, reducing your TTFB (time to first byte) will push everything else forward. You'll need faster and better servers, you'll need to employ caching so you aren't compiling pages from the database and by crunching PHP operations on the fly.

Other things you can do include inlining the CSS for whatever ends up being the LCP so that you don't have to wait on the CSS file to download and be parsed. You should do this for the entire above-the-fold region of the site. I honestly don't bother with this, because what I do is....

Server pushing. Instead of a browser sending a request to a server to download a page, then downloading the source code, then finding out it needs the CSS file (duh, right?), you can tell the server to go ahead and send the CSS file over on the initial request, saving a bunch of back and forth. With HTTP/2 multi-plexing you can actually send several files over you know they'll need, like your JS file. But don't get too greedy because you can make it slower. You have to test and choose wisely. CSS is a good option if it's not too bulky. You can even put all your above-the-fold CSS into one file and send it over so it's a smaller file.

That's some of the stuff you can be thinking about to lower your LCP scores. Hope it helps.
 

mj22

BuSo Pro
Joined
Jun 20, 2018
Messages
235
Likes
99
Degree
0
Another thing to look into is better hosting, i was having issues with my site, i had fixed everything i possibly could with out hiring it out and i was only able toget the site speed down to 4-7 seconds. I changed hosting companies, i went to siteground actually and paid the $30 for the professional migration and that is the only thing i did. Now load time is down to .6 seconds(everything improved when i checked with pagespeed insights). they may cost more but i feel it was well worth it. they dont even have a phone number for customer service, but i got better customer service thru their support ticket system than i had with the 2 previous big name companies i was using. Ill be using them from now on for all my hosting unless/until they go to shit.

edit: fixing spelling errors
 
Last edited:

LiamGallagher

On my way out of the 9-5
Joined
Jun 23, 2017
Messages
41
Likes
28
Degree
0
Basically what they already told you to improve. Better hosting, use a CDN, compress your assets and maybe tweak your CSS. This is what the official documentation recommends.

How to improve LCP​

LCP is primarily affected by four factors:
  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Resource load times
  • Client-side rendering
For a deep dive on how to improve LCP, see Optimize LCP. For additional guidance on individual performance techniques that can also improve LCP, see: