Tips and resources for speed optimization focused developers.

[oreoorbitz]

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.' %}
<style></style>
{% when 'product.' %}
<style></style>
{% when 'product.awesome-version' %}
{% else %}
<style></style>
{% 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

<img
class="lazyload"
src="{{img | img_url: '5x'}}"
data-src=" {{img | img_url: '500x'}} "
height="{{ img.height }}"
width="{{ img.width }}"
>

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.

[Anonymous]

I have to respectfully disagree with your recommendation for the lazy loaded image snippet. By loading a smaller placeholder image you're effectively doubling the number of image-based requests for each image tag present on the page. On a collections page with 50 products displayed and an image-swap feature you're just adding 100 unnecessary requests - that's counter-intuitive to the concept of lazy loading. Instead using a blank data image or svg company logo would reduce this from 200 image-based requests to 100 or 101, respectively.

The Shopify Analyzer is a great tool which aims to target most theme-related speed issues (these are realistic, attainable, and easy to fix for the average Shopify store owner with a limited amount of technical knowledge and each of the categories listed have a direct impact to page speed): https://analyze.speedboostr.com/

Shopify mentions that their average site score is a 34 on Lighthouse - I don't know how this translates to real speed, but at Speed Boostr we had an average speed improvement of 32% among all Shopify sites that we optimized last year and we're focused on optimization specifically for Shopify sites: https://speedboostr.com/shopify-performance-benchmarks/

We offer a lot of free resources and guides for optimization on our blog.

A complete guide to performance optimizations for Shopify: https://speedboostr.com/shopify-optimization/

How to apply Lazy Loading for a Shopify site: https://speedboostr.com/shopify-lazy-loading/

How to compress images for a Shopify site: https://speedboostr.com/how-to-compress-images-on-shopify/

How to use vector images to improve performance: https://speedboostr.com/how-to-use-vector-graphics/

How to minimize CSS for a Shopify site: https://speedboostr.com/shopify-liquid-lesson-auto-minifying-css/

How to find and fix console errors: https://speedboostr.com/finding-and-fixing-server-errors/

How to conditionally load apps and scripts for Shopify sites https://speedboostr.com/liquid-lesson-conditionally-load-apps/

Using resource hints to improve performance on Shopify sites: https://speedboostr.com/resource-hints/

Using AMP to improve speed + SEO for Shopify sites: https://speedboostr.com/shopify-amp-guide/

Optimizing image SEO for Shopify sites: https://speedboostr.com/shopify-image-seo/

Optimizing conversion for Shopify sites: https://speedboostr.com/conversion-rate-optimization-guide/

Optimizing conversion through A/B Testing on Shopify: https://speedboostr.com/new-shopify-app-theme-scientist/

I've optimized a few hundred sites for speed and even themes with high scores out-of-the-box can have their page speed lowered substantially by app content, so it's also worth noting that even a high-scoring theme has no chance for a fast page load time as long as a high volume of apps are present on the store (more details here: https://speedboostr.com/how-apps-affect-load-speed/) so unfortunately a great deal of optimization opportunities are at the sole discretion of app developers.

[oreoorbitz]

Oh, I didn't realize that you can only edit your post before 2 hours.

Here's another tip:

Stopping a script from being detected by PageSpeed Insights.

If your really worried about your score, this won't make much a difference user experience wise but it will help with your score.

You can use this for any script that isn't necessary for the appearance and functionality of above the fold content, great for apps that have an option for manual installation, like tidio.

    var loadScript = function() {
     var scripts = ['example-script1.js', 'example-script2.js']
     scripts.forEach( function(scriptSrc) {
     var tag = document.createElement("script");
     tag.src=scriptSrc;
     document.getElementsByTagName("head")[0].appendChild(tag);
    })
     window.removeEventListener('scroll',loadScript);
    }
    window.addEventListener('scroll',loadScript );