Blogs

Critical CSS

Published On: 11 January 2019.By .
  • General

Critical CSS

Delivering a faster and smoother web experience is an important part of building websites today. Most of the time, we develop websites without understanding what the browser is actually doing. How exactly does the browser render our web pages from the HTML, CSS and JavaScript that we create? 

The web is slow, yet there are a few simple strategies to make websites faster. One of them is inlining critical CSS into the <head> of your pages.

What is Critical CSS?

The critical CSS in your project is the CSS that’s used to style the above-the-fold content of your website. Above-the-fold content is what users see on your website first, which can include navigation and other elements. So it’s very important to properly style and render this part of the website as quickly as possible.

Modern web development practices often recommend that you inline your critical CSS. It would be placed into your web page like so:


Why is Inlining Necessary?

If you go to Google PageSpeed Insights and analyze one of your web pages, you might see warnings about optimizing your CSS delivery by inlining critical CSS and loading render-blocking stylesheets.

Browsers won’t render the above-the-fold content of your web pages unless they have loaded all of your CSS files. This can be a big deal when a lot of files need to be loaded.

Not all of your users will have a fast internet connection and waiting for the libraries, CSS and JavaScript to load before they can actually access the content they came for can be very frustrating. Even users with fast internet can lose connectivity in certain situations, like when they are passing through a tunnel. At this point, they would still be able to access the main content if your website has inline critical CSS and doesn’t load other files before showing main content.

The image below illustrates the difference between a regular and an optimized web page. As you can see, the optimized version will allow users to access the content about 0.5 seconds earlier. The improvements will be more pronounced when there are a lot of extra libraries that need to be loaded.

Finding Critical CSS

Finding critical CSS manually will be difficult to deal and boring task. Fortunately, there are tools available that can help you do it quickly.

Using Grunt

If you are familiar with the Grunt build system, there is a plugin which makes this process easier — the popular grunt-critical plugin. 

First, you need to install the plugin using the following command:

npm install grunt-critical –save-dev

You also need to create your Gruntfile.js. This will contain all the code to set various options for the plugin including viewport dimensions and the path to source and destination file. Here is an example:

var path = require( ‘path’ );

module.exports = function(grunt) {

‘use strict’;

    grunt.loadNpmTasks(‘grunt-critical’); 

// Project configuration.

grunt.initConfig({

critical: {

    test: {

options: {

   base: ‘./’,

    css: [

‘pub/static/_cache/merged/3a38535b5b0207be7f2eca94b82aa138.min.css’,

‘pub/static/frontend/Mgs/claue/en_US/MGS_Brand/css/mgs_brand.min.css’,

‘pub/media/mgs/css/1/custom_config.css’

    ],

    width: 1366,

  height: 650

},

src: ‘http://127.0.0.1/project/‘,

dest: ‘app/design/frontend/Mgs/claue/web/css/critical/generated/critical.css’

   }

}

});

grunt.registerTask(‘test’, [‘critical’]);

}

Inside our wrapper function, we use the grunt.initConfig method to specify all configuration options. In this case, I have specified a base directory in which the source and destination files are to be written. I have also set the minify option to true. This gives me a final minified version of the critical CSS that the plugin extracts. The src property contains the location of our source file which is to be operated against. The dest property contains the location where the final output needs to be saved.

Now, you can just run the plugin by typing grunt into the console:

If your initial file had the following markup:

It will now look like:

As you can see, this plugin does all your work for you. Now, if you analyze your web page using PageSpeed, you should get a better score. In my case, the score changed from 86 to 95.

Related content

That’s all for this blog

Go to Top