Critical CSS for Shopify
TL;DR
- Critical CSS app for Shopify
- $10 / store, one time fee
What is Critical CSS?
For the non-techies, CSS is the code that styles your website. Makes text big, small, red, green, aligns your images to the right, the navigation to the left, etc. Essentially it makes sure your website looks cool and things sit where they should on the screen.
Critical CSS refers to just the first screen people see. You can try it out. Refresh this page and let go of the keyboard and mouse. Everything you see from the top to bottom of your browser screen is controlled by the “Critical CSS” code. As a user starts scrolling, more content starts coming into view and more code is necessary to position, align and style things on the page
That’s the simple explanation. Here are some useful articles if you want to learn more
Underestanding Critical CSS — Smashing Magazine
Extract Critical CSS — Web.dev
Why is it important?
Because for most websites, all the CSS code for the entire website has to load before anything can be displayed on the screen.
And because with this critical CSS technique, we can speed up the website by loading only the code needed to display the first screen.
And because the faster your website loads, the happier your users and the more sales you get.
And because Google will reward you for it.
Google is putting a lot more emphasis on a website’s performance and UX as part of its ranking algorithm. There is an update due in May which will take into account a website’s Core Web Vital measurements when ranking it in search results
These are measured using Google’s Lighthouse tool, available in the Chrome browser or as standalone tool
Critical CSS is one of these measurements that will have an impact on your Performance score, and therefore your search engine results rankings.
How does it work?
This is a technique of including the critical CSS first so that the initial screen can be shown to the user in the quickest possible time. While the user takes in the first screen and decides on what to do next (scroll, click something, etc), the rest of the CSS code is loaded in the background.
It’s a clever technique with a lot of support from Addy Osmani who created a very nifty cool for extracting the critical css for any website.
There is also criticalcss.com that will generate the critical css for any web page for £2 a month.
Critical CSS for Shopify
All of these are good solutions, especially if you’ve got a website that doesn’t change a lot.
And here comes the plug…
If you’re using Shopify as your web platform and want some simplicity, I’ve built an app that generates the Critical CSS with 1 button click. Your Shopify store will have different pages (product, collections, homepage, etc) and the app will extract the critical CSS for each of these.
It costs $10 / store, one time cost.
Generate as many times as you need and restore your theme files as they were in case anything goes wrong.
I hope it’s useful. Let me know what you think
