0

I am building a personal blog using Hugo and deploying it to Netlify, and I ran it, out of curiosity, through the Chrome Lighthouse. To my surprise, the results for desktop and mobile differ dramatically.

The blog is not optimized (yet) for mobiles, but it uses mostly relative sizes so the aspect on the mobile is what you would see by choosing "see desktop version" on a mobile Chrome.

There are three results that are particularly impacting: First Contentful Paint (FCP), Largest Contentful Paint (LCP) and Time to Interactive (TI). The results are beow (in seconds), the number behind Desktop or Mobile is the performance index. In summary:

  • the results from localhost and the deployed site are negligeable (so this si snot a matter of latency, serving performance, ...)
  • LCP and TI are both bad for mobiles, at the same level of "badness" (which reinforces the point above).

http://localhost:1313

Desktop → 99

  • First Contentful Paint (FCP): 0.2 → OK
  • Largest Contentful Paint (LCP): 1.0 → OK
  • Time to Interactive (TI): 0.9 → OK

Mobile → 77

  • First Contentful Paint (FCP): 1.7 → OK
  • Largest Contentful Paint (LCP): 5.5 → NOT OK
  • Time to Interactive (TI): 5.0 → NOT OK

https://mysite.example.com

Desktop → 99

  • First Contentful Paint (FCP): 0.4 → OK
  • Largest Contentful Paint (LCP): 1.0 → OK
  • Time to Interactive (TI): 0.9 → OK

Mobile → 77

  • First Contentful Paint (FCP): 2.0 → ~OK
  • Largest Contentful Paint (LCP): 5.3 → NOT OK
  • Time to Interactive (TI): 5.0 → NOT OK

What can be the reason for such behaviour?

WoJ
  • 27,165
  • 48
  • 180
  • 345
  • Because Mobile phones are different devices than a desktop. They respond and operate differently than a desktop and therefore are graded differently. Now, you get to find the happy medium of what you are trying to achieve and making it work to an adequate result on mobile... – Rogelio May 30 '22 at 21:21

1 Answers1

1

Chrome Lighthouse tests on mobile and desktop are testing more than just rendering at a different screen size. The mobile testing profile used by Lighthouse attempts to approximate the average mobile device user by throttling network speed and CPU power of the browser loading the page. This is referenced in the Lighthouse docs

Lighthouse reports the performance metrics as they would be experienced by a typical mobile user on a 4G connection and a mid-tier ~$200 phone. Even if it loads quickly on your device and network, users in other environments will experience the site very differently.

Read more in our guide to throttling.

The exact numbers used for the mobile profile are linked from the throttling doc, but suffice to say it's definitely slower than your desktop machine.

The desktop Lighthouse settings do not include network or CPU throttling, hence the slower performance measurements you are seeing when running with the mobile profile when compared to desktop.

Cole Ellison
  • 311
  • 3
  • 7
  • Thank you - so it means that it is a matter of general performance optimization, rather than something specific to mobile devices. – WoJ Jun 02 '22 at 07:01
  • Correct. Generally, looking at mobile is helpful to give good signal, as it will shift more readily than desktop. Slower performing devices are more effected by small performance improvements. – Cole Ellison Jun 07 '22 at 17:18