Wordpress performance discrepancies: Mobile vs Desktop

Question

My question revolves around the seeming discrepancies between lighthouse performance scores between mobile and desktop mode. I get a 20 point negative difference from desktop (around 55) to mobile (around 30). The differences narrow down mostly to deference of offscreen images and unused/unneeded JS files from plugins.

I'm using WP-Optimize for minifying, deferring, and caching. I'm caching pages separately for mobile, however lighthouse is indicating performance issues having to do with deferring offscreen images (they defer/lazy-load on desktop, but not on mobile?). Same with deferring JS files, there are JS files that are deferring correctly on desktop but on mobile they are causing issues?

I know WordPress has many different ways to set up everything with styling and such, but I'm hoping there's a common thread that i'm just missing to help shore up these scores?

Let me know if there's more details I can include as well, wanted to keep the initial question fairly concise.

Answer 1

I have found that the testing is more strict overall on mobile than desktop.

I think this is because they assume that mobile devices are using mobile data so they penalize higher bandwidth usage more than they would on desktop.

For example, you might have a 250Kb javascript file that does not get flagged on desktop, but on mobile you may see an x unused bytes warning

Images are a big deal. as you say they should be lazily loaded and WordPress adds these attributes by default in the current version. However, if you have an image that contributes to the LCP, it should not be lazily loaded.

Oftentimes, the size of an image used on desktop can be too large for mobile

Eg., if you have a 2048px wide image, you probably won't get any complaints on desktop, but you may get a warning that images can be reduced in size on mobile. Make sure that your img elements have a srcset attribute, and that the sizes attribute correctly describes the amount of screen width that the image occupies. Make sure that your theme is generating image sizes that are suitable for mobile devices. As a rule of thumb, the width should be 2x its display width.

There is no silver bullet, unfortunately. Caching and minifying plugins will only get you so far. At a certain point, you have to dig in and manually resolve the problems.

If it's complaining that images are too large, you have to find a way to reduce the image size.

If it's complaining about unused bytes in css and js, then you have to manually modularize your assets and only include what's needed.