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.