So I'm a Web Developer and I'm curious if anyones managed to get Mobile PageSpeed scores above 30s on a Bespoke/Off the Shelf Theme without going headless?
We currently use the following practices: Minimising and Defering CSS/JS, Lazy Loading Images, for Collections Dynamically Loading in Products, Serving Images at the correct size per screen resolution (Picture Elements/Img SRCSets).
Every store of course has it's front-end plugins, e.g. Searchanise, Trustpilot Reviews, Analytics/Tracking, Cookies Manager.
After all of this, the stores always come back with scores in their 30s, whereas similar setups on other platforms (e.g. WordPress with WooCommerce) seem to be able to achieve higher scores with less work. (Granted with various caching plugins/Cloudflare at the front and good hosting).
Have you managed to get consistent high scores with PageSpeed? If so what did you do different? What practices do you use? Do you have any examples?
Thanks in Advance,
Really in the end how high I can get a clients score depends on what plugins they are willing to remove, and if I convince them to not use a hero carousel.
You can do all the other stuff, but largest contentful paint and total blocking time are the heaviest metrics and the ones that are often the slowest. There's no secret technique. It's like carrying apples, you can carry them in a better way, but the apples will still way the same.
Like you've both have mentioned, apps can dramatically ruin the speed of even the most optimized of themes.
Deleting unused apps and setting up Cloudflare with rocket loader and caching can help a great deal. (rocket loader moved all scripts to the body to avoid render blocking, and then loads them in order. Inline scripts and exceptions gets loaded first)
As a web developer, I think one of the things you might want to focus on, is writing efficient liquid. I just installed the Shopify Liquid Plugin and realized our liquid is very slow. We have separate mobile and desktop menus, each rendering for 400-500ms each, on every page!
Other things I rarely see, are themes with fixed image sizes. They are all super responsive and jump on load, effectively messing up the CLS score. It's not a heavily weighted metric for Google, but customers still feel it a great deal.
It would also be cool if theme developers would write inline css in their themes for everything above the fold so the main CSS sheet won't have to be render blocking.
Thanks for the response Preben, how did you go about the Cloudflare setup? Shopify has some sort of Cloudflare setup already in place (so adding our own without making it DNS Only breaks everything). Yes I agree on the liquid aspect (I assume that you're referring to the Chrome Plugin), but PageSpeed doesn't seem to complain about Server Response Times. CLS is actually becoming more important now, Google are looking to add their Web Vitals into Search ranking in the future. We do it by loading a low-res image (forced to the correct size), and then with lazy loading bring out the high res one. Still have CLS issues with aspects that get turned into e.g. sliders however. What's your setup for your CSS? Do you have one minimised CSS file, or an 'essential' CSS file?
I just set it up, no issues there. Just make sure you're not proxying anything in the DNS, as that will give errors. (our emails from CM commerce failed after proxying the mailserver)
We initially set it up after the Pinterest bot had been kicking the ass of our Facebook pixel for one and a half months, effectively dropping our revenue by 40% and giving us lower quality traffic at a higher price, and Shopify Support couldn't do anything. The upside was that we got our loading times (the one measured in Analytics) from 4.5s to around 2s after optimizing for Cloudflare.
Yeah, meant the plugin ofc. Complaining or not, inefficient liquid will still give a higher TTFB than necessary.
CLS is indeed important, and a lot of it can be fixed fairly easily once you know how.
I'm not a developer, but I have read up a lot on speed optimization over the last 3-4 months. I have set up a "critical" inline css in the head, one main css also in the head until I'm confident it controls everything above the fold, and a long block of inline css in the footer. Btw, I recently learned that css gets minified in Shopify if you just add scss.css as the extension.
My plan is to put all css related to fonts and loading above the fold inline in the head, and from there delete unused CSS in the main file a little at a time.
@Ceri-Waters if you're developing a theme from scratch, you could split the CSS and JS into separate files that load depending on the template used.
- global.css has the layout and global styles
- product.css has product page specific styles
It won't save much actual performance, maybe 50kb - 100kb CSS and the same for JS, but if you're working on clearing warnings with that tool / get a higher score, that one will help with the "unused code" issue.
Have you managed to get consistent high scores with PageSpeed?
For a successful ecommerce site you usually won't have a high score. You can use Google AMP but you'll end up stripping good functionality and features that help drive engagement / conversions.
A score in the 30's is normal for an engaging ecommerce site.
@JoesIdeasthanks for the response, yes the CSS/JS is something we need to do (although I'm not convinced it's worth the reward for the time spent doing it). I haven't touched Google AMP to be honest, how does it strip out Good functionality etc? I'm going to try Integrating Vue for rendering any of the dynamic blocks to see if that has any impact as well.
Ya I agree on the stylesheet splitting, it's a pretty large project to dissect from an existing theme, lots of hours for tiny savings. If building a brand new theme (especially for theme store) it would be good (and score points with us :D).
how does it strip out Good functionality etc?
Doesn't shoplify already have some sort of css purge built in?
I notice that files that theme files that are 200kb raw are served at 30kb. Of course google complains that there is still unused css, but google is too strict.
Many, this new sectioned plugin thing that supposedly coming would be great for speeding up score.
I'm not too sure - maybe Shopify minimises CSS automatically?
We compile ours locally so wouldn't notice a difference.
Thanks for your input.
From my experience so far, i've concluded that there are not a lot of things you can do to improve the situation in pre-made Premium/Off the shelf themes. Not unless you start chopping up and customizing the theme yourself and therefore investing effort and time to improve a Premium/Off the shelf theme, something that you shouldn't have to do anyway.
I am gonna use the Debut theme as a reference, because its the main free theme Shopify offers and used in numerous occasions. The product page of the official Debut theme demo, gives me scores around ~ 39-50 (Tests performed from a private window, for mobile devices, in both Lighthouse and Google-PSI)
Things to consider:
Most importantly, the demo page is extremely simple. In reality a product page never looks like the demo.
Realistically you should expect at least some of the following sections or functionalities in a product page:
All these features require their own resources (markup, css, js, media). Some of the functionalities mentioned above are offered by the theme. Most of them are offered by 3rd party apps. Also, most of them can be hand coded by yourself. If you decide to install a 3rd party app, your page performance is bound to worsen. Not only you will add a lot of bloat to your page (css, js) but you are stripped from the ability to do optimizations. I have seen apps shipping with their own version of jQuery... If you decide to create the features yourself, you are bound to invest time to implement them.
Then, there is the case of tracking / analytics / customer chat scripts. I hate those things. There is nothing you can do about these services if your client opts to use them. You are bound to get a lower score as soon as you put these babies in your template. I have been in the situation where i saw the performance of my handcrafted template drop from a sweet green 90+ to 70ish, while at the same time observing my previous joy of creating a nice performant template turn into rancid anguish).
That is why i almost always opt to create my own theme, especially for high end projects/clients with custom design.
Some of the things i do to achieve the best performance i possibly can are:
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...By Arno Nov 27, 2023
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...By Skye Nov 8, 2023