Last updated - May 27, 2022
Great Shopify themes use CSS code to define page layout and design. However, CSS code can become bloated and affect your Shopify site’s performance. As you probably know, maximizing page load performance is critical for engagement, conversion, and revenues. In this article, I’ll discuss a few ways to optimize Shopify theme CSS, to ensure your beautiful theme does not slow down your pages.
Understanding CSS Preprocessing in Shopify
When browsers render your website, they rely on both HTML and CSS. It is the CSS stylesheet that determines the style and look of your Shopify eShop. However, standard CSS does not reuse code segments. This can make the process rather complicated. CSS processors help developers handle this issue.
A CSS preprocessor is a scripting language that takes syntax and converts it into standard CSS syntax. This conversion process is critical, because browsers can render only standard CSS. A notable and popular example is a preprocessor called Systematically Awesome Stylesheets (SASS), which also lets you create custom properties.
Shopify provides a built-in compiler, called CSSC, that converts SASS syntax. Here are key advantages of this compiler:
- Includes variables—that let you store specific sets of values, which you can reuse throughout your files. Variables can help you significantly reduce the time spent on repetitive coding tasks.
- Supports nesting—which enables you to target specific elements of your code. This can help you write code more efficiently.
How to Minify CSS on Your Shopify Theme
Minification is a process that removes redundant or unnecessary data from a website. Ideally, the process should not affect how the minified resource is handled by browsers. You can, for example, use minification to delete unused code, remove code comments and formatting, and shorten function names.
The purpose of minification is to reduce the size of a website, which should result in faster load times. Fast load times often translate into better website performance and speed. You can apply minification to HTML, CSS, and JS.
Here is a quick walkthrough of how to locate your CSS file in Shopify:
- Go to the Assets folder
- Locate the CSS files
- In your Shopify store, go to the Sales Channel tab
- Choose the Online Store option
- In the drop-down menu, choose the Actions option
- Choose Edit code
You should now see your CSS files. Note that any files with the extensions .sccs. or .scss.liquid were already minified. Files with the extensions .css or .css.liquid were not minified.
Here is a quick walkthrough of how to minify your CSS file in Shopify:
- Open a CSS file by clicking it. For example, the file called css.test
- Rename the file to custom.scss.test
- Locate the place where the file is being loaded from
- Change css to custom.scss
The steps above tell Shopify to compress your CSS file before it is served to your website.
CSS in Shopify: Optimization Tips
Replacing Images with CSS effects
You do not have to use background images when creating effects. Instead, you can use CSS image effects to create borders, gradients, shadows, rounded edges, and even geometric shapes. CSS effects typically require less bandwidth than images, and can be more easily modified or animated later on.
For example, you can refrain from using the @import rule, which lets one CSS file get included with another one. Here’s a basic example you should not follow:
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");
Instead, the @input rules should be nested. This helps the browser parse and load all files in a series.
The below example ensures that <link> tags can load CSS files in parallel. This process is much more efficient. Here’s how it might look like:
<link rel=”stylesheet” href=”base.css”>
<link rel=”stylesheet” href=”layout.css”>
<link rel=”stylesheet” href=”carousel.css”>
Reduce CSS Code Length
CSS stylesheets take time to look. To ensure efficiency, you should ensure your code remains at a minimum length. There are numerous ways you can do this. For example, you can avoid using HTML inline styles and organize your CSS code into small files. Once your files are organized, you can easily locate features and remove or modify them as needed. You can also try UnCss, which is a tool dedicated to helping you remove redundant code.
Modern Layout Techniques
The traditional way of defining layouts is by using the CSS float property to modify and design the padding and margins of your site’s layout. However, this technique has its issues, and has become outdated. Today, you can use CSS Flexbox and CSS Grids for layout design. Flexbox can help you design one-dimensional layouts while Grids are used primarily for two-dimensional layouts. These two techniques require far less code and are relatively simple to work with.
Conclusion
In this article I discussed a few ways you can optimize CSS in your Shopify theme, to boost performance of your Shopify site:
- Utilize CSS preprocessing to enable faster CSS processing on the client side
- Use Shopify’s built-in CSS minification feature
- Replace images with CSS effects
- Reduce CSS code length to reduce overall file size
- Use modern CSS techniques like CSS Flexbox and CSS Grids
I hope this will help you build beautiful Shopify themes that load fast and satisfy users.