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?
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
Also a lot of your Images are to large, pls tell your Programmer to scale them down to the size they get displayed.
Also Images are not efficient encoded (not optimized) pls optimize losslessly to get best results
After this you should use HTTP2/Push (for CSS) to prevent renderblocking
Also you should set Cache “Browser Cache Expiration” to “1 year” in Cloudflare
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
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”).
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 WebPageTest Test - WebPageTest Details, 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.
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.
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!
Thanks, @M4rt1n, @jules, @cbrandt & @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.
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.
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.