"i only speak liquid" #7: Should you stop using stylesheet_tag? #speed

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Anthony) share learnings we face daily.

PS: I'm an expert on Storetasker and work with some pretty great clients on the platform, alongside some external clients in Australia. Storetasker allows me the freedom to scale up and down my workload to suit my business. Whether you're after a full-time workload, or a part-time gig. Apply here if you want in.

What I’ve been thinking about:

Shopify liquid and core web vitals don't play nicely at times. There are some quirks with specific liquid filters that can result in less performant sites... Even though they are in Dawn and recommended in liquid documentation.

I dug a bit deeper into using the stylesheet_tag filter with some (very unscientific) experiments.

Replace stylesheet_tag Filters

There's been a bit of talk about replacing stylesheet_tag filters with standard html link tags. The theory is that the liquid logic required to output the html tag slows down liquid render time.

Replace:

with:

The Test

I decided to test this on a fresh install of Dawn 6.0.2. I populated it with some dummy product data (including product images) and ran Lighthouse (in-browser in Chrome) and Shopify Theme Inspector (also in Chrome) tests on collections/all.

I populated a fresh install of Dawn 6.0.2 with dummy product data - including images. I then used Lighthouse in Chrome Dev Tools to collect Core Web Vitals scores, and Shopify Theme Inspector for Chrome to collect 'time to render liquid'.

I updated relevant stylesheet tags in theme.liquid, main-collection-product-grid.liquid, and card-product.liquid from using the stylesheet_tag filter, to using a HTML link tag with asset_url.

Results

I ran the Lighthouse reports 10 times and the Shopify Theme Inspector tests 5 times, and got the averages below.

Pretty clear improvements from changes to a few lines of code - and it only took a few minutes to do. YMMV of course - If I've missed something, please do reach out!

You could likely treat the use of the script_tag filter the same. I'm also very curious about other filters that have to perform complex logic regarding the data that is passed into it - like image_tag and media_tag - let us know if you've got any numbers on those...

Most of the improvement will likely come from liquid logic in snippets that are rendered multiple times on a page (like grid items).

3 links you can’t miss:

• Shopify Liquid Inspector Tool: Used above - great for testing liquid render time. Always a good idea to try and keep it to less than 350ms.

• Atomic Design: Atomic design is a design system for thinking about how to construct components, pages and themes. Shopify used it for Dawn and is the reason for the repeatability of the design components in the theme. Honestly, it just makes great sense.

• Self Host Google Fonts: A handy tool to download font files for Google fonts. This means you can put them in your assets folder, and not have to make a separate call to the Google servers on page load.

One app I like:

DataJet by Code57

Imagine Shopify Flow but more geared towards developers and far more powerful.

DataJet is perfect for automated tasks, import/export actions, and even connecting to external servers via FTP.

Like most great automation apps, you can listen for events/webhooks, and then have your custom logic performed. I've used it to pull inventory from PIM's and update the store, and to extend shipping logic at checkout beyond the realm of Shopify Scripts.

Mat - the creator is also incredibly helpful in getting you started.

One learning as a freelancer:

Keep your pipeline chugging!

One of my first learnings as a freelancer came when I got incredibly busy and stopped generating leads. As soon as I made it through the crunch, I found myself with a lot more spare time.

It took me a minute to realise that as part of my normal day-to-day, I was continuously lining up new work - and that new work takes time to turn into scheduled work. When I stopped lining up new work during the crunch period, I didn't feel the effects until weeks later when I had little lined up.

Lesson learned - always be filling the pipeline.

Hope you enjoyed this edition - please feel free to reach out if you have any suggestions or feedback.

Best,

AV