Why are phone sites slower than desktop sites

[bwood]

I’ve not only noticed this with my designs, but with many users. My desktop pages remain in the high green, but mobile pages are in the high amber according to page insights. For me it appears to be rather common.

My latest is Nipawinmuseum.org. I’ve yet to do some image naming.

I’ve used placeholders for any hero images, designed my own navigation, and slow loading on any YouTube or maps for directions, and still the pages load a little slower on smart phones. Not drastically slow, but in the amber range. I’m using the same images on the phone variant. Fonts are Raleway and open sans.

I’ve finally found the sweet spot for my images on the desktop. I’ve used all the tips and tricks from our pros on the board.

I just can’t get the phone viewing into green on page insights. Could this be a general rule?

[Acorn]

Bill, the main one is Lighthouse usually simulates 3G speeds. Mobile browsers are more picky and use more CSS browser code to render, usually around image resizing, and phones are not are powerful as desktops.

I recently engaged with Xara about it XC provision of HTML email templates.
email clients are very fussy and for Xara to achieve this is a great boost for those whose clients want email as one of their provisions.
I notice one thing that I asked Xara about - the Xara design uses the table tool but the rendered output is an HTML <table> tag construct, a thing i have been chasing for years.
No answer from Xara if it intended to change the Plus applications HTML Filter plug-in to do the same.

The other thing that blew me over was the HTML rendered without any of the standard JS and CSS support files. It was just html plus images.
Consequently, Lighthouse gave 100% Desktop and 92% Mobile performance. The images remained a PNG/JPG regardless of settings to WebP.

So sometime, a lightweight mobile render may be on the cards.
Perhaps too main and Variant will disappear and were have Main in the direct URL and the 'variant' as a separate render in a sub-folder (.../m/...).
Code would be needed to toggle between or just a button Desktop/Mobile Mode.
Much cleaner.

Acorn

[Egg Bramhill]

Just a few points that may help Bill:

In the .htaccess file include deflate & gzip compression as supplied in this tutorial:

https://bobcares.com/blog/gzip-compression-htaccess/

For some unknown reason some of your images but particularly on the mobile site are being served as jpg's not webp images lengthening the first content full paint time. Chase up why this is?

Whilst on the point of images get into the habit of naming them (without spaces, use - hyphens) and a least use the same name in the alt field. It enhances SEO and accessibility score.

Your footer is an image & doesn't need to be, keep it as text.

The fir tree you have on the main page and the two you have on the mobile page are rendering as svg's. I'm not certain about this but there's a lot of code within the page source just to render these. It may be better to create an image out of these. svg's aren't always smaller. See attachment for an example of the code required to just render one fir tree.

I can't see any 'lazy' loading images on your page.

Test your site before & after trying the above and see if it improves your scores on PageSpeed insights.

Egg

[bwood]

Thanks Egg and Acorn. Not sure jpgs aren’t webp on mobile. Good points all round.
-Bill