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:
localhost and the deployed site are negligeable (so this si snot a matter of latency, serving performance, ...)http://localhost:1313https://mysite.example.comWhat can be the reason for such behaviour?
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.