Page speed of mobile site - very slow compared to desktop site

[Deefer]

With Google now saying our mobile versions are the 'real' site, it is more important than ever that our mobile sites are tip top with regards SEO.

Page speed is part of the google algorithm. My site has always performed brilliantly for page speed, scoring an amazing 94/100. Brilliant. But for some reason my mobile site is the opposite... it is appalling. My mobile version is just 52/100. Not good at all. I am confused why this would be?

Has anyone got any ideas? How do your mobile sites score for page speed compared to your desktop version?

As this is so important now I would love to know if it is just something wrong with my mobile site or whether it is the way BP is generating all our mobile versions? So any feedback from your own sites would be great please.

Thanks.

[tom2682]

Running your URLs through the following sites will provide analysis and breakdown on why your score is low.

https://developers.google.com/speed/pagespeed/insights

https://gtmetrix.com/

Optimising images, css and js will help, as well as deferring the loading of these assets and minimizing the total number of assets being called (combining js / css files etc...). This will all be detailed in the above reports.

I hope this helps

Best wishes
Tom

[Deefer]

Thanks Tom but that was kind of my question. My desktop has excellent page speed so presumably everything I can optimise (images) are already fine. So why is mobile so slow and is everyone else's BP mobile site a lot slower than their desktop site?

[Deefer]

Do you have a big difference between yours Tom?

[Deefer]

OK, so using the GTmetrix link from Tom (above) one of my mobile issues was the shrinking of the slideshow. I have now made a special slideshow block just for mobile. If anyone else hasn't already done that, it has made a 2% difference so for 10 mins work, not bad. Every little helps.

The biggest issues and in fact the only 2 real issues left now for Google anyway are:

1.4MiB of JavaScript parsed during initial page load. Recommendation - defer parsing JavaScript to reduce blocking of page rendering.

and

Leverage browser caching for the following cacheable resources

These issues appear to be affecting my desktop as well as my mobile site. I score an F for parsing of javascript and D (E on mobile) for browser caching.

I presume this is a BP issue but am not sure. Does anyone know? Tom? BP?

[tom2682]

Good morning - sorry for my slack response.

We have a drop off - but it's not huge.

PageSpeedInsights (on one of our category page)

Mobile: 79
Desktop: 96



I spent quite a lot of time at the beginning of the year looking at this and did the following:

- Combined all external .js resources into a single file (a single call to the server that is deferred until the page has loaded one .js file) (https://javascript.info/script-async-defer)
- Transferred all external stylesheets to the 'Additional CSS' section within the template manager (I believe Bluepark compress this - gzip possibly)
- Wrote a script to defer the loading of product images until the page has loaded. This might not be suitable for all sites.
- I also created different assets for desktop, desktop small, desktop retina & mobile displays either using blocks or css media queries.


Any resources listed under 'Eliminate render-blocking resources' ending in .php are generated by Bluepark, however you can reduce the size of these by optimising / compressing code in the template manager, anything else i'd combine into one single .js file. Unfortunately I don't think it's possible to set 'leverage browser caching' without doing so in the .htaccess file - might be wrong.

Quick word of caution, combining scripts and changing the load order of resources can seriously mess up / break a site. Plenty of testing required.

I hope this helps.

Best wishes
Tom

[Deefer]

Wow Tom, I think you need to work for BP No way I can do any of that stuff. I resized my mobile slideshow and that was the extent of what I could fix.

So it seems that unless BP can deal with any of these issues then I am stuck with a slow mobile site.

Can I ask you please Tom, as you clearly know your onions... even after doing all the work you have done are you saying your mobile site is still slower than your desktop version? I am wondering why that is please? It is just the nature of mobile sites or is it due to how BP make their mobile versions or what do you think please?

[tom2682]

I think Page Speed Insights / GTMetrix throttle the connection speed (as if you were loading your site on a 3G connection - this will naturally be slower than wifi). As with any optimisation, you need weigh up the importance of delivering content quickly against the quality / quantity of that content.

I'm not sure what affect pagination and tabbed content has on loads speeds, it might be faster to limited the amount of products being displayed on a category page? Maybe on your mobile site instead of a slideshow you could just show a static banner? But certainly ensure these images have been scaled and suitably optimised. If you're calling in lots of graphical symbols / icons, using something like FontAwesome will be quicker and less demanding or try and use .svg files which are typically smaller than bitmap images and can be scaled indefinitely without jeopardising quality.

[Deefer]

OK thanks Tom, that is helpful