Optimize CSS Styles in Magento

Why optimize CSS styles?

You may ask why it is still beneficial to minify the CSS files at all. Nowadays browsers and webservers like Apache, nginx or Litespeed are able to compress content via gzip or brotli before transmission very effectively.
But netherless by minifying and reducing the amount of CSS code on our side we are able to influence the performance even more than simply compressing files: imagine for example code comments which can be removed, rewrite and combine CSS statements to use less selectors/code and remove unused CSS selectors.

In addition optimizing CSS is very important especially for the Critical Path CSS as this influences all relevant performance metrics in Lighthouse like TTFB or LCP. CSS is one of the few elements that the browser definitely requires as early as possible in order to properly display your website.

And of course the best code is the one that is not written (or not shipped to customer)!

Minification Basics

For this purpose I can recommend the extension Aoe_JsCssTstamp which basically improves 2 things compared to original Magento behaviour:

1. Possibility to influence the CSS file name and e.g. add file content hash, version string or store id like s.2fd49f2ddcfae8a2536d440318d4f7cf.css. This makes cache invalidation e.g. in a content delivery network (CDN) or end user browser very easy.
2. Additionally look for pre-generated minified versions of CSS files.

Using PurgeCSS with Magento

With the help of the second point we can build a local minification pipeline and then store the generated minified CSS files in a folder like minified/css. Then we can configure the extension to use that folder for our minified versions. Keep in mind that the folder structure below minified/css has to match the one in the skin folder.

For the build pipeline I simply use grunt, but any other tool or simple script is also possible. First we have to install some dependencies:

npm i --save-dev grunt grunt-contrib-cssmin grunt-purgecss

In the Gruntfile I simply use 2 tasks. The first one is the minification of the CSS files:

    cssmin: {
      skin_css: {
        files: [{
          expand: true,
          cwd: 'src/vianetz/theme/src/',
          src: ['skin/frontend/default/vianetz/**/*.css', '!**/*.min.css', '!**/_*.css'],
          dest: 'htdocs/minified/css',
          ext: '.min.css'
        }]
      }
    },

The second task is the purging. Therefore I use the tool PurgeCSS which allows to scan HTML content (Magento's .phtml template files) and CSS files and remove which CSS selectors are not in use. You can configure which selectors should not be purged even using regex.

In order not to purge used CSS selectors in Magento CMS Blocks or Pages there are several possibilities to choose from:

• Do a live database dump into data/cms_blocks_pages_live.csv and include that as content parameter for PurgeCSS
• If you use a Full Page Cache (FPC) like Lesti_Fpc for Magento another possibility is to use the (warmed) FPC cache contents from your production server and use these HTML contents as input for PurgeCSS (this is my preferred method)

So this is the resulting sample Gruntfile.js part:

    purgecss: {
      minified_css: {
        options: {
          content: ['./htdocs/app/design/frontend/base/default/template/**/*.phtml', './src/vianetz/**/*.phtml', './data/cms_blocks_pages_live.csv'],
          dynamicAttributes: ["aria-selected"],
          safelist: {
            'standard': [
              'kbd',
              'blockquote'
          ],
            'deep': [
                /^body.*/,
                /^address-select/,
                /^checkout-step-*/
            ]
          }
        },
        files: [{
          expand: true,
          src: ['htdocs/minified/css/skin/frontend/default/vianetz/css/**/*.min.css'],
          dest: '.'
        }]
      }
    }

The Result

By using this simple asset minification pipeline I was able to reduce the CSS size of the homepage of vianetz.com by nearly 30%. You're right the configuration for the purging is a bit tricky as you have to take care that no selectors are missed. So it takes some time to tweak the PurgeCSS safelist config but a reduction of nearly a third of shipped CSS is definitely worth it.
Of course this heavily depends on your used CSS but as there are a lot of CSS frameworks like Bootstrap etc. used out there, the possibility is high that the percentage is a big one. So you should definitely try it!

After we have now reduced the CSS file sizes to a maximum, in one of the next blog posts we will have a look at how we can further improve CSS delivery by using the very interesting HTTP/2 Early Hints feature.