Mobile vs Desktop page speed score

Hi Support team,

I’ve been using Cloudflare plus for a while and my website is hosted on Siteground. I’m getting decent Google page speed score on Desktop however mobile is still showing poor. One of the main issues with images has been sorted using Polish by WebP but not sure the same impact is applied on the Mobile version. Also, I’ve specific page rules enabled to get the best outcome.

Are there any mobile-specific tunning parameters I can use to improve the page speed score on mobile?

Happy to share more details.

If you are not statisfied with your GPSI (mobile) this is mostly not related to CF.
If you still think it is, pls post your GPSI result here so we can see the ‘exact’ issues.

Otherways we all step in the dark

Thanks Martin. Please find attached screenshots

comparing mobile vs desktop performance.

  1. The main Problem is the implementation of all Images (pictures)! As you use Magento you should search for a WebP Plugin for Magento. Use WebP in a Picture tag and Fallback to JPEG
  2. Also a lot of your Images are to large, pls tell your Programmer to scale them down to the size they get displayed.
  3. Also Images are not efficient encoded (not optimized) pls optimize losslessly to get best results
  4. After this you should use HTTP2/Push (for CSS) to prevent renderblocking
  5. Also you should set Cache “Browser Cache Expiration” to “1 year” in Cloudflare
  6. your TTFB is bad CDN is not making your TTFB better unless you cache statically. But as you do have a Shop you most probably cant cache statically HTML Files. Try to Cache better with Magento.

This is just a quick analyse so dont expect to much. Pls never care about Desktop GPSI, just go for mobile as requirements are much higher there, if you got a good mobile GPSI your good.
Also: most Shops I optimised scored mobile more then 90/100

2 Likes

If possible with Magento, try to implement different versions of the same image using media queries or srcset. This way they are fast for standard screens, and also high resolution for HiDPI screens (aka “retina displays”).

1 Like

Thanks guys for some great recommendations.I’ll probably have to work with my programmer to reduce the file size of the images however the whole idea of busing Cloudflare on the Pro plan was that it enabled the convesion of images to WebP using the Polish. Also I’ve chosen more aggressive image compression setting of “Lossy” in Polish.

Same for HTTP2 is enabled in my network setting to accelerate the website.

So either the PSI is not picking up the settings or the conversion of images is not happening? Can you please comment?

Polish is a great tool in terms of last-mile optimization. But it doesn’t know, for instance, whether your over-sized pictures are meant to be large (a digital photography shop), or not. The optimization must start at the origin. However, for anyone using Cloudflare as a proxy, converting JPEG images to WebP format at the origin is not feasible (unless you have some sort of Workers solution.)

Cloudflare datacenters will serve the same image to all subsequent visitors after the image was cached following a first visit.

This first visit will have their device taken into consideration by the origin, and if this is someone with a WebP-compatible device (a desktop or Android Chrome browser, for instance), a WebP image will be saved to cache, and will subsequently be given to any other visitor by Cloudflare, regardless of whether or not their device supports it. Visitors with a Safari browser or any iOS browser will see a blank space where the image should be.

@sales20, since you are on the Pro Plan, you should optimize your images as much as you can following the excellent recommendations given above by @M4rt1n and @jules, but keep all images in the JPEG format, leaving it to Polish to make the WebP conversion for devices that are compatible.

I suggest you read this Performance Tutorials - Google PageSpeed & Webpagetest.org as to know how Google Pagespeed scores for specific metrics and you shouldn’t focus on the score number but individual metric values themselves. FYI, your mobile pagespeed score isn’t entirely related to images.

From your site’s webpagetest.org test results at https://www.webpagetest.org/result/191120_9T_dd74efd6776e67bb580488488fd762a6/3/details/#waterfall_view_step1, it’s pretty clear slowness is due to your origin server/webapp when index page takes 2.922 seconds to load where TTFB is 2.79 seconds. This matches what your PageSpeed Insights’ mobile/desktop First Contentful Paint (FCP) metrics for both lab and field (CRuX Chrome User Report real world visitor data) report for 2.7 and 2.8 seconds respectively. You will never get faster FCP metrics if your average TTFB for origin response time is anywhere close to 2.79 seconds on 5Mbps cable speed tests let alone for 3G mobile 1.6Mbps speeds tests.

You didn’t mention the type of web hosting you using ? shared, VPS, dedicated server ? You may be able to get better origin performance with better web hosting. For instance not all VPS hosting is equal. I benchmark tested 13x VPS servers from Upcloud vs DigitalOcean vs Vultr vs Linode vs Hetzner and the performance differs drastically in some cases !

Magento is known for it’s slowness unless you do optimise Magento at server origin side. No Cloudflare optimisation will help as CF doesn’t cache dynamic index HTML generated content by default https://support.cloudflare.com/hc/en-us/articles/200172516#h_a01982d4-d5b6-4744-bb9b-a71da62c160a.

image

dom interactive time was 3.99 seconds and this is on cable 5mbp speed test. On 3G mobile speed test and 1.6Mbps download, it sure will be slow - giving you poor time to interactive numbers on mobile and given it has highest weight in Google PageSpeed Insights v5 scoring formula = low mobile score.

And your webpagetest’s Google Lighthouse metrics https://www.webpagetest.org/lighthouse.php?test=191120_9T_dd74efd6776e67bb580488488fd762a6&run=3

But yes as folks touched on image sizes need to be optimized at origin (images you upload). I have been using free irfanview software for over a decade and very useful for optimising images.

Take your 146.5KB slider image for example

at 90% optimisation on right shows size reduced to 71.39KB

at 85% quality optimisation on right shows size reduced to 60.97KB

though using converting to webP would be even smaller for lossy 75% quality webP image. But to serve that from origin, your web server or web app needs to know how to conditionally serve webP to only web browsers that support it and fallback to original image for web browsers that don’t support webP. So Cloudflare’s webP conversion via mirage would be needed on Cloudflare Pro plan or higher.

For a second there I thought you were talking about CloudFlare here! I almost fell off my chair

3 Likes

I solved the problem by this rule:

Match: domain.tld/*.jp* (matches .JPEG, .JPG, .JP)
Rule: “Cache Level=Standard

This will not cache jpg Images in CF Edge Cache.
Also you are somehow wrong.

I was speaking of “Picture” Tags. Means you can set them up like this:

<picture>
    <source srcset="picture.webp"/>
    <img src="picture.jpg" width="100px" height="100px" alt="blabla" />
</picture>

Which your be compatible with ALL Browsers and CF would store the .webp differently from the .jpg as its a different link, but if you just use htaccess redirects to serve the Images you are right, then you should make CF not caching the Image at its Edge Cache

If you use Cache standard for Images (and whatever) pls do not forgett to set the Cache Header in your htaccess for this Files as CF will not overwrite it with the Settings from the Cache section as they do not apply to this “bypassed” files anymore!

1 Like

Thanks, @M4rt1n, @jules, @floripare & @eva2000 for your valuable information on performance improvements. I’ll be working with our developer in coming days to implement these suggestions. I, however, did some tweaks and seen better performance. I’ve attached the test report for your perusal. Any suggestions would be more than welcome.

1 Like

I think you should better work with your developer together to improve it.
Actually this is a forum for CloudFlare, not global GPSI values and how to improve them.

CloudFlare does offer a lot of things that are improving GPSI but I dont even get why people are asking what else to improve and in the same second they send a list with all the things Google is complaining they are missing…
Google states 100% clear what they want you to do to improve further. Pls dont get this wrong but this wether belongs to here nor is it CloudFlare related.
We told you what CloudFlare handles in what way and thats it.

For me this Thread is closed. Thanks.

No worries @M4rt1n. My intention was not asking for further recommendation. Improvements I’ve achieved were based on the change on my cloudflare. Rest of the suggestions especially around image optimisation are work with my developer. You can close this thread. No issues.

1 Like

I liked the feedback. It’s better than not getting a reply at all from folks we help.

s20, You might want your developer to look into IMG SRCSET rather an PICTURE. It’s easier to implement and has just slightly better browser support.

2 Likes