Optimize CSS Styles in Magento

Best CSS File Structure in Magento

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.

In general I would aim for generating only a single CSS file in our CSS asset pipeline for several reasons:

• Most obviously: simplicity. If we only generate one target file, we can apply all the optimízations with PostCSS to this single file only and don't have to mess up with complicate configurations.
• By removing unused CSS (see below) we already have the only absolute necessary styles in our file so there is minimal benefit of splitting this up further more.
• What can make sense is to create separate files for different media queries because these then can be loaded asynchronously by the browser by default - this is also what Magento 2 does.

Headers Done Right

If we have versioned our assets (see point 1. above) we are able to improve the browser caching and set the maximum cache time of one year. This can be done by setting the following header, e.g. via .htaccess file:

Cache-Control: max-age=31536000,immutable

This simply tells the browser that the asset won't be changed and it can cache it for a very long time. Every time we deploy a new version of the CSS file, a new version string is generated and the filename gets changed so the browser recognizes the change.

More useful tips on using cache headers can be found in this great article about best practices.

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 CSS selectors that are in use 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.