Critical Css

Installing

npm install grunt-critical --save-dev

First you need to install grunt-critical via npm. If npm & node.js are not installed, you can follow this guide on installing them here

Configuration

Next step is to create the dev/tools/grunt/tasks/critical.js file and place the below content inside.

module.exports = function (grunt) {
    'use strict';
    grunt.loadNpmTasks('grunt-critical');
};

After that the main config file can be created at dev/tools/grunt/configs/critical.js with the below content:

'use strict';

var combo   = require('./combo'),
    themes = require('../tools/files-router').get('themes'),
    path    = require('./path'),
    _       = require('underscore');

var themeOptions = {};

_.each(themes, function(theme, name) {
    themeOptions[name] = {
        options: {
            minify: true,
            dimensions: [
                {
                    width: 1440,
                    height: 700
                },
                {
                    width: 1024,
                    height: 700
                },
                {
                    width: 768,
                    height: 700
                },
                {
                    width: 640,
                    height: 700
                },
                {
                    width: 480,
                    height: 700
                },
                {
                    width: 320,
                    height: 700
                },
            ]
        },
        src: '[URL]',
        dest: 'app/design/' + theme.area +'/'+ theme.name +'/web/css/critical.css'
    };
});

module.exports = themeOptions;

With the above, change the [URL] to your local container URL and amend any breakpoints necessary. Any additional options for critical that can be added, can be found here

Enabling

To generate the critical.css file you need to run grunt critical:[THEME] --ignore-ssl-errors=yes When running this locally, you need to add the --ignore-ssl-errors=yes, otherwise it will fail to run.

Once this has generated, you can then enable critical CSS by running:

php bin/magento config:set dev/css/use_css_critical_path 1

Notes

Official Magento documentation for this can be found here