Hey, so cool to see a forum focused on speed. I thought I’d start a thread to share tips and resources on speed optimization.
I have certain ways of optimizing things, It’d be cool to see what other people use, and what I might be missing.
Bellow are some basic techniques and tools I use top optimize a page, in no particular order.
render blocking resources
for generating critical css, I tend to use web based tools, since they work fine and its way faster then downloading the site and running a tool locally.
https://jonassebastianohlsson.com/criticalpathcssgenerator/
https://pegasaas.com/critical-path-css-generator/
https://www.sitelocity.com/critical-path-css-generator
Then my preferred way of handling the inline css is to create a snippet like
{% render 'critcal_style_controller' %}
then I’ll set up the snippet like
{% assign handle = template.name | append: '.' | append: template.suffix %}
{% case handle %}
{% when 'index.' %}
{% when 'product.' %}
{% when 'product.awesome-version' %}
{% else %}
{% endcase %}
For making style sheets async, I use the method described in the answer in this Slack overflow post.
https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously
Images
Most themes are good about lazyloading, and shopify already converts to webp. So usually I end up doing a few optimizations.
Sometimes themes will not have lazyloading for background images.
Usually most themes use lazysizes, so I add the UnveilHooks plugin for lazysizes
https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks
Now that page speed insights implemented its CLS metric, its important to have width and height attributes so the browser can get an image’s aspect ratio and reduce content shift.
For most scenarios, something like
works.
For background images I use the aspect ratio padding technique
https://css-tricks.com/aspect-ratio-boxes/
I like to compress above the fold images, helps decrease time for largest contentfull paint. Since I’m usually only compressing a few images, I prefer to use a web tool as opposed to a local tool.
https://compress-or-die.com/ is pretty usefull.
Optimizing css
shopify already takes care of removing unused css, but it doesn’t remove duplicate selectors, duplicate rules, and empty rules.
I’m only just starting to add this step to my workflow, and still experimenting with different tools, would be cool to see what other people use, and what doesn’t work with scss.liquid files that have liquid syntax.
Thats all for now, I’ll update this post as I think of more things I use, or discover new stuff, very interested to see what tips other people have.