How To Minify CSS in Shopify: 08 Optimization Tips To Improve Store Loading Time

CSS puts emphasis on ‘Style’. While HTML is utilized for web document structuring, defining things such as paragraphs, headlines and enabling video, images, and other media embedding, CSS comes through and specifies the style of the document—colors, fonts, page layouts, all are determined with CSS.

There are many ways for faster website loading, which makes it more efficient and easier to work with. CSS, or the Cascading Style Sheets is a style sheet language that describes the presentation of a document, which is written in a markup language such as HTML. 

In this article

• Using Analysis Tools
• Building Big Wins
• Replacing Images with CSS Effects
• Minify and Concatenate
• Modern Layout Techniques
• Minimize CSS Code
• Clinging to Cascade
• Shopify CSS Minification: What To Know

I. Using Analysis Tools

Performance issues could not be addressed unless you know where faults lie. The best place to begin is the Browser DevTools.

From the menu, hit or launch F12, Ctrl + Shift + or for Safari on MacOS, Cmd + Alt + I. All browsers provide the same facilities, as well as the tools gradually opening on pages that perform badly. 

The most useful tables include the following:

1. Network tab displays assets waterfall graphs as they download. Disable the cache for best results and take into account throttling to lesser network speed. Find slow downloading files or block others. Normally the browser blocks rendering while JavaScript and CSS files parse and download.

2. Performance tab analyses browser processes. Begin recording, run activity like page reload and stop recording to see the results. Find:

• Excessive reflow actions/layout where the browser was pressured to recalculate the page elements’ size and position.
• Compositing actions in which a page’s painted parts are put together for on-screen showcasing. 

3. Browsers that are chrome-based provide an Audits tab that runs on the Lighthouse tool of Google. Often, it’s used by developers of Progressive Web Apps, but makes CSS performance suggestions too. 

II. Building Big Wins 

CSS is not likely to cause issues in performance. It however could load assets that are heavy-hitting that within minutes could be optimized. Examples are:

• Simultaneously boosting HTTP connections with content delivery network, or CDN, and replication of files to other locations in the world as well.
• GZIP and HTTP/2 compression on a server activation.
• Remove files that are unused.

Normally, the biggest cause of page bulk are images, still a lot of sites fail to effectively optimize:

• Make sure that you use the right file format. The best for photos, SVG, SVC for vector images and others typically is PG. You could find the optimum type by experimenting. 
• Bitmap images resizing. An entry-level smart device takes on multi-megapixel images, which could be thoroughly showcased on a largest high definition screen. 
• Use image tools to minimize file sizes through metadata stripping and boosting compression factors. 

III. Replacing Images with CSS effects

It’s not all the time necessary to utilize background images for shadows, borders, gradients, rounded edges and several geometric shapes.

Defining image with CSS code significantly uses lesser bandwidth and easier to animate or modify later.

01. Remove Fonts that are Unnecessary

Google Fonts and such services make adding custom fonts to any page easy. A line or two of code however could retrieve hundreds of font data kilobytes. The recommendations would be:

• Uses only needed fonts.
• Load only the required styles and weights, for instance, Roman 400 without italics.
• Take into account variable fonts that define multiple styles and weights through interpolation to make files smaller. 
• Consider OS fonts. Custom web fonts are used by majority of websites, that’s why standard OS fonts are more than ever not so common. 

02. Refrain Using @Import

The @import rule allows a CSS file to be included with another file. For instance:

/* main.css */

@import url("base.css");

@import url("layout.css");

@import url("carousel.css");

This seems a reasonable way of loading smaller fonts and components, but it’s not. The @input rules could be nested so a browser could parse and load every file in series. 

Numerous <link> tags in an HTML would load in parallel CSS files, that’s significantly more efficient, particularly when you use HTTP/2:

<link rel="stylesheet" href="base.css">

<link rel="stylesheet" href="layout.css">

<link rel="stylesheet" href="carousel.css">

IV. Minify and Concatenate

Many build tools enable combining all partials to one big CSS file, with unnecessary whitespace, characters, and comments removed. With HTTP/2, concatenation is less important. In some instances, it could be beneficial to have separate files if you have regularly-changing, smaller CSS assets. Nonetheless, a lot of websites would likely benefit from sending a single file cached right away by a browser. 

Minification could not bring significant advantages you enabled a GZIP. That being said, there is no real downside. You could finally consider a build process that consistently orders properties within declarations. Compression could be maximized by GZIP when strings that are commonly used all over a file. 

V. Modern Layout Techniques

For years, using CSS float is necessary to layout pages. This is a hack methodology and should have lots and also tweaking padding/margin to ensure that the layouts would work. Even so, flats would break smaller sizes of screen unless you add media queries. 

Modern Options:

• CSS Flexbox for layouts that are one-dimensional that could wrap to the next row based on the widths of every block. For image galleries, menus, cards, and others Flexbox is ideal.
• CSS grid for layouts that are two-dimensional, with explicit columns and rows.  For page layouts, Grid is the ideal tool. 

Both use less code, simpler to develop, with faster rendering, adapt to any size of screen. 

VI. Minimize CSS Code

The fastest and most reliable code is one that you don’t even have to write. The smaller the stylesheet, the faster it would parse and download. Keep in mind that all developers begin with good intents.

However, CSS could in time blot as the feature count grows. Retaining unnecessary, cold code is easier compared to removing it and risking of breaking something. 

Consider these recommendations:

• Organizing CSS into smaller files with clear responsibilities. Removing a carousel widget is easier if CSS is defined clearly in widgets/_carousel.css.
• Take caution with big CSS frameworks. It’s not likely to use big percentage of styles, thus add modules only when needed. 
• Refrain from using !important for cascade override. 
• Avoid HTML inline styles.
• Consider naming technologies like BEM to help develop discrete components.
• Steer clear from preprocessor/Sass declarations that are nested deeply. The expanded could be unexpectedly turn huge. 
• Tools like UnCSS could help eradicate redundant code through analyzing HTML. However, be careful about CSS states that are caused by JS interaction. 

VII. Clinging to Cascade

The CSS-in-JS growth enabled developers to steer clear of CSS global namespace. Randomly, class names typically are built during build time so conflicting components becomes impossible. 

It’s worth understanding the CSS cascade benefits instead of working against it on each project. You could for instance set default colors, fonts, sizes, form fields, and tables that are applied universally to each element in one place. 

Streamline Selectors

Even the most complicated CSS selectors could take milliseconds to parse. Reducing complexity however reduces sizes of files and help parsing.

Again, be wary of deep nesting pre-processors, such as Sass where inadvertently complex sectors could be created. 

VIII. Shopify CSS Minification: A How-To Guide

Shopify is one of the top and the most popular eCommerce platform. That’s why hiring a good Shopify development company which builds app solutions for eCommerce brand websites. When it comes to Shopify performance optimization and minifying CSS files in the platform, take the following into consideration. 

To be safe, each time you perform a change to the theme, you must replicate it. Work on the duplicate theme, then when done editing the Previews, you can publish that if all is good.

If you’ve never done that workflow, you just have to proceed to the Online Stores > Themes, and an Action button is there on the theme. You can preview, duplicate, and others from there. 

01. Search Unminified CSS Files

With GTmetrix, you could do a quick analysis to view unminified files. When you see a suggestion of a file with cdn.shopify.com, it comes from the Assets folder theme normally. You have no control over them if they’re third party and you would need to ask the application developer to minify it.

02. How To Minify CSS in Shopify Theme

Steps in Minifying Shopify CSS file

1. The ebay-styles.css, you can click on it then rename to ebay-stles.scss.liquid.
2. Look for the place where the file is loaded. Usually, the command is in theme.liquid, in the ‘head’ section most probably.
3. With the same example, change ‘ebay-styles.css’ into ‘ebay-styles.scss.css’. 
4. Shopify, like magic compresses file on their server before you serve it up.
5. The CSS file gets served up now as a lesser file, saving the page weight.

File name change in load command:

03. Why Page Speed is Important

Fast loading is critical to the success of a website. It has been proven that users easily get impatient if they even have to wait a few seconds for web content to load and appear. When this occurs, the experience noticeably degrades with the consequence that the website will receive lesser visits and thus, result to fewer conversions that could hurt the business in the end. 

It could not be stressed enough that a fast-loading and smooth website spells success. With eCommerce in particular, a Shopify development company makes sure that the system developed is both fast and smooth.

Conclusion

Hundreds of thousands of website development tools are available for front-end development. What’s important is thoroughly understanding what each tool does to make the best choice for your project. Front-end website development continues to evolve and grow, thus staying on top of these new tools is critical. 

Author Bio:

Olivia Diaz is working at eTatvaSoft, an Enterprise level Web & Mobile Application Development Company. Being a tech geek, she keeps a close watch over the industry focusing on the latest technology news and gadgets. Follow me on Twitter.