Next.js Discord

Discord Forum

Why is my LCP so high on mobile devices?

Unanswered
Barbary Lion posted this in #help-forum
Open in Discord
Avatar
Barbary LionOP
My site gets close to 100/100 on the desktop lighthouse checks, but is performing relatively very poorly on mobile devices (60/100). The main issue seems to be LCP issues, in particular the text apparently has a render delay of 4+ seconds.

I am using the next/font/local library with a tailwind v3 application. Am I just trying to load in too many font variants? (I have 8 loading in...)

Here is an example page from the site: https://www.icelogistics.info/ice-charts?region=Antarctic&productSubType=ice-concentration
Image

12 Replies

Avatar
adam.birds
@Barbary Lion are you able to share the code for this page, or the repo if its OSS?
Not related to the Question, but I do just wanna say i love the site, its very cool. (ice pun)
Avatar
Roseate Spoonbill
@Barbary Lion I'm checking on simulated slow 4G and LCP is under 1s which is not a bad result. I'd say that you might've hit a bad network day. Or maybe you are serving from a location a bit closer to me than to you?

Is 8 variants that much? Well, the less you load, the better, so I personally try to encourage designers to stick to as little as possible (usually 4 max for primary font). Difference between some variants is barely notice-able in the real world, so going on full spectrum for single font is not needed.

Having all that said, subjective experience from your website seems really fast to me (maybe with exception of the map images), so I wouldn't worry about what metrics say if the experience is good for you too.
Avatar
@Roseate Spoonbill <@825680283499102228> I'm checking on simulated slow 4G and LCP is under 1s which is not a bad result. I'd say that you might've hit a bad network day. Or maybe you are serving from a location a bit closer to me than to you? Is 8 variants that much? Well, the less you load, the better, so I personally try to encourage designers to stick to as little as possible (usually 4 max for primary font). Difference between some variants is barely notice-able in the real world, so going on full spectrum for single font is not needed. Having all that said, subjective experience from your website seems really fast to me (maybe with exception of the map images), so I wouldn't worry about what metrics say if the experience is good for you too.
Avatar
adam.birds
I'm in agreement with @Roseate Spoonbill here. I used Google PageSpeed and even though the results weren't optimal. The website seemed fairly quick for me. Especially the home page, that page you linked has a lot of data which will naturally and expectedly delay a little but it wasn't a bad experience on there. I honestly came away with a great impression, the site is amazingly designed. Maybe just go through and check if there are any components which could be moved to server side rather than client side etc. I wouldn't worry too much.
Avatar
Roseate Spoonbill
@Barbary Lion Oh, just noticed one thing: were you measuring this on localhost with dev mode? That may be the source of your issue. Always check against production website or at least build and start page instead of running dev mode and you must check the metrics locally. Next in dev is always slower as it skips a lot of caching strategies.
Avatar
Barbary LionOP
@Roseate Spoonbill @adam.birds - Thanks for taking a look! ✨ The poor results on Google pageSpeed is what is really confusing me. It appears in our google search console as the site being really unperformant. I can reproduce it on various networks both on our production site and on a locally compiled/built preview build.

Taking a look at the developer tools performance tab I can reproduce the results but only if I throttle my network connection to 3G. In this case it becomes clear that the font files seem to be blocking the display of the page. I can't tell whether this is just something I need to accept because I have lots of font weightings, or whether I am missing some optimisations in my font config?
Image
const niveauGrotesk = localFont({
  src: [
    // ExtraLight Weights
    {
      path: '../../public/fonts/NiveauGroteskExtraLight.woff2',
      weight: '200',
      style: 'normal',
    },
    {
      path: '../../public/fonts/NiveauGroteskExtraLight-Italic.woff2',
      weight: '200',
      style: 'italic',
    },
    // Light Weights
    {
      path: '../../public/fonts/NiveauGroteskLight.woff2',
      weight: '300',
      style: 'normal',
    },
    {
      path: '../../public/fonts/NiveauGroteskLight-Italic.woff2',
      weight: '300',
      style: 'italic',
    },
    // Regular Weight
    {
      path: '../../public/fonts/NiveauGroteskRegular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../../public/fonts/NiveauGroteskRegular-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    // Medium Weight
    {
      path: '../../public/fonts/NiveauGroteskMedium.woff2',
      weight: '500',
      style: 'normal',
    },
    {
      path: '../../public/fonts/NiveauGroteskMedium-Italic.woff2',
      weight: '500',
      style: 'italic',
    },

    // Bold Weight
    {
      path: '../../public/fonts/NiveauGroteskBold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: '../../public/fonts/NiveauGroteskBold-Italic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
  variable: '--font-niveau-grotesk',
});
Avatar
@adam.birds <@825680283499102228> are you able to share the code for this page, or the repo if its OSS?
Avatar
Barbary LionOP
I am definitly pushing for it to be open sourced as soon as possible. Just working through internal processes to get that done...
This is the performance tab with 3G throttling (8x cpu throttling):
Image
Avatar
Roseate Spoonbill
@Barbary Lion for me, with 3g and 6x cpu slowdown, I get FCP at the blue frame without page content (img1) and LCP at everything w/o the items (img2). Rerunning the test sometimes registers LCP at item loaded, but still without map image. I haven't had LCP at font loaded stage, which happens a bit later.
Here's what you can try:
- A lot of time during render blocking seems to sit in css, which isn't that big, but maybe you'll be able to reduce it a bit?
- Another idea is to utilize <Suspense> with fallback to cutoff some initial rendering. Not sure it will work, but might move LCP around.
- If the font loading is a problem with LCP, I'd focus on using different fallback fonts to match the font you are using a bit better, or even letting go of that custom font for the main header.
- Another way to optimize fonts is to put them through some CDN to move static assets closer to the user. Cloudflare or something similar. I am not sure what you are serving through, but i can tell you are not using CDN since my requests always go through Swindon. Get Cloudflare in front of the dns and it would speed up static assets at least. Even if your website is for locals only, bear in mind google requests from other places in the world. Bonus point will be that you'll probably get optimized image loading too.
Image
Image
Avatar
adam.birds
One thing that would work better for the font is a single variable font rather than all the separate font files! I'll take another look this afternoon as well now I have a bit more info