Theme Development > Best Performance Practices

Theme Development > Best Performance Practices

Ceri-Waters
Shopify Partner
98 6 30

Hiya,

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,

Ceri.

Replies 11 (11)

oreoorbitz
Shopify Partner
260 31 132

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. 

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

Preben_Frenning
Shopify Partner
39 0 13

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. 

Ceri-Waters
Shopify Partner
98 6 30

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?

Preben_Frenning
Shopify Partner
39 0 13

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.

JoesIdeas
Shopify Partner
2410 222 644

@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

- etc.

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.

 

• Creator of Order Automator [auto tag, fulfill, connect FBA, order jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tools
Ceri-Waters
Shopify Partner
98 6 30

@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.

JoesIdeas
Shopify Partner
2410 222 644

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?

It's just really strict about what you can load on the page as far as javascript, css, and 3rd party apps. Here's a guide I wrote to see some details + case study: https://speedboostr.com/shopify-amp-guide. I tested a few of the AMP apps and went with the one I liked best, you can scope it out and fire it up and preview AMP pages quite easily to see the performance gains and functionality sacrifices.

• Creator of Order Automator [auto tag, fulfill, connect FBA, order jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tools
oreoorbitz
Shopify Partner
260 31 132

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.

If a client is really gun ho about pagespeed and has the budget I'll sometimes split their theme javascript into specific pages, but 90% of the time it'll only have a small increase and the majority of the things impacting a client's score is apps. For instance I can shave off 30kb of theme JS by code splitting, but there is still a whopping 1mb of JS from plugins.

Many, this new sectioned plugin thing that supposedly coming would be great for speeding up score.

 

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
Ceri-Waters
Shopify Partner
98 6 30

Hiya Oreo,

I'm not too sure - maybe Shopify minimises CSS automatically?

We compile ours locally so wouldn't notice a difference.

Thanks for your input.

Preben_Frenning
Shopify Partner
39 0 13
Shopify does if you name them scss.css 🙂 Not sure about normal .css though
MUTANGA
Shopify Partner
11 1 6

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:

  • It loads XR/AR libraries which most probably will not be used by your clients, so some performance points will be reclaimed.
  • Comes with it's own theme specific js file, + jQuery, Lodash, slider plugin, storefront js, boomerang js.

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:

  • Video section and/or secondary product videos (usually on hover)
  • Complete-the-look section
  • Related products section
  • GoTo-page section
  • Additional description fields / custom fields
  • Size guides
  • Product reviews
  • Client-stock-notifications
  • Limited-offers counters
  • Color swatches
  • Some social media integration (like, share, feed)
  • Tracking / Ads / Analytics / Remarketing scripts (FB, Google, etc,) 
  • Customer chat plugins
  • Up-sell / Cross-sell scripts
  • AJAX Cart scripts
  • Product testimonials
  • x-number of product images 
  • Cookies notifications
  • Its almost certain that once you give your client control of their shop, they will mess up the media files. Images will be not be optimized, they will be using gifs instead of videos, etc.
  • ...

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: 

  • I avoid using apps and plugins where i can. I create my own. Sometimes using apps for a trivial requirement is ridiculous. (for example apps for changing and converting currencies)
  • I am Lazy-creating / lazy-loading / lazy-calling entire sections based on user-events or intersection observers. 
  • I make use of JS media queries.
  • Use Atomic CSS, inline any additional CSS.
  • I don't use jQuery, vanilla JS is adequate.
  • Split and inline JS functionality within sections.