Loading..
Processing... Please wait...

Product was successfully added to your shopping cart.



How to optimize CSS delivery on Magento website

Why optimizing CSS delivery is important?

 

NB: live example of CSS Delivery optimized can be seen here http://magento1.8.goivvy.com

Google PageSpeed Insights will warn you if you have render-blocking CSS in above-the-fold content (visible part of your page before you scroll down).

Optimize CSS delivery on magento website | Google PageSpeed Warning | Goivvy.com Optimize CSS delivery on magento website | Google PageSpeed Warning | Goivvy.com

Why CSS delivery matters to page speed Google explains: browser won't paint your page until it loads and processes external stylesheet files. A user of course will see white screen while browser loads CSS resources.

Instead of showing a user white screen we should display above-the-fold content as quickly as possible and load external css files behind the scenes. How do we do that?

First we need to identify critical CSS (css rules that are needed to paint above-the-fold content) and inline that css right into HTML.

Second we should move all the other css resources down at the bottom of the page to instruct browser to load it last.

Below I will describe the steps to optimize CSS delivery using Magento 1.9.2.3 website with default Luma theme. The procedure could be applied to any website be it custom made or framework based. It should certainly work for Wordpress blog, WooCommerce and others.

 

1. Identify Critical CSS

Critical CSS is CSS that is needed to paint above-the-fold content. It might differ from page to page.

You can manually select css rules that are critical but there are automatic tools. On big sites manual selection could take weeks so these tools save a lot of time.

1.1 Tools to extract critical CSS

There are online resources to get above-the-fold css:

And there are install and run utilities:

More above-the-fold CSS extraction tools you can find on this github page by Addy Osmani.

We will be using Grunt Critical plugin by Ben Zörb. Thank you Ben!

1.2 Grunt Critical Plugin

Grunt is javascript task runner. If you have never used Grunt (like myself) the first thing you should know is that Grunt automates things. Need your css minified, cleaned up or beautified Grunt can do that. All by running a simple cli command.

I will show you how to setup your grunt environment. For more information please refer to the official Grunt project documentation.

1.2.1 Install Grunt

Install Grunt by following the simple procedure (you should be familiar with simple bash or shell commands)

- install Node.js and npm ( I am on debian linux )

apt-get install nodejs
apt-get install npm
apt-get install nodejs-legacy
apt-get install phantomjs

NB: if you are on headless server you need to install xvfb to run phantomjs which is required to run grunt-critical:

apt-get install xvfb

and you need to put xvfb-run -s "-screen 0 640x480x16" before grunt critical related commands. For example to install grunt critical on headless server you need to run:

xvfb-run -s "-screen 0 640x480x16" npm install grunt-critical --save-dev

- create a directory

mkdir grunt
cd grunt

- setup package.json file

npm init

- install Grunt CLI as global

npm install -g grunt-cli

- install Grunt in your local folder

npm install grunt --save-dev

- install Grunt Critical Plugin

npm install grunt-critical --save-dev

1.2.2 Generate critical-path CSS

Magento has the following pages with similar layout we need to extract critical CSS from:

  • Homepage
  • Cms Page
  • Product Page
  • Category Page
  • Cart Page

We need to first grab critical-path CSS of those pages and second concat remove redundant css rules and minify it.

- download html code of homepage, cms page etc and store it inside src/html folder:

mkdir -p src/html
wget http://magentostore.com -O homepage.html
wget http://magentostore.com/category -O category.html
wget http://magentostore.com/product -O product.html
wget http://magentostore.com/cms -O cms.html
wget http://magentostore.com/checkout/cart -O cart.html

- create src/css folder and download main css file from which we extract critical-path css

mkdir src/css; cd src/css
wget http://magentostore.com/media/css/8b6d422759c648865bb4d035da915b42.css -O main.css

- install grunt-contrib-cssmin plugin to minify multiple css files into one

npm install grunt-contrib-cssmin --save-dev

- create Gruntfile.js inside grunt folder with the following contents:

module.exports = function(grunt) {                                                                                                                                                
   grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    cssmin: {
     target: {
      files: {
      'dist/min.css': ['dist/homepage-critical.css',
                       'dist/category-critical.css',
                       'dist/product-critical.css', 
                       'dist/cart-critical.css',
                       'dist/cms-critical.css']
    }   
   }
   },  
   critical: {
     homepage: {
        options: {
            base: './',
            css: [
                'src/css/main.css'
            ],  
            width: 1200,
            height: 900 
        },  
        src: 'src/html/homepage.html',
        minify: true,
        dest: 'dist/homepage-critical.css'
    },  
     category: {
        options: {
            base: './',
            css: [
                'src/css/main.css'
            ],  
            width: 1200,
            height: 900 
        },  
        src: 'src/html/category.html',
        minify: true,
        dest: 'dist/category-critical.css'
    },  
    product: {
        options: {
            base: './',
            css: [
                'src/css/main.css'
            ],  
            width: 1200,
            height: 900 
        },  
    cart: { 
        options: {
            base: './',
            css: [
                'src/css/main.css'
            ],
            width: 1200,
            height: 900
        },  
        src: 'src/html/cart.html',
        minify: true,
        dest: 'dist/cart-critical.css'
    },  
    cms: {  
        options: {
            base: './',
            css: [
                'src/css/main.css'
            ],
            width: 1200,
            height: 900
        },
        src: 'src/html/cms.html',
        minify: true,
        dest: 'dist/cms-critical.css'
    }   
   }
  });   
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-critical');
};

- run grunt tasks to extract critical css and minify it into one file dist/min.css

grunt critical cssmin

or

xvfb-run -s "-screen 0 640x480x16" grunt critical cssmin

on headless server

you should see this output:

Optimize CSS delivery on magento website | Grunt Critical and CSSmin Output | Goivvy.com Optimize CSS delivery on magento website | Grunt Critical and CSSmin Output | Goivvy.com

dist/min.css file should look like this:

Optimize CSS delivery on magento website | Minified Critical-path CSS file | Goivvy.com Optimize CSS delivery on magento website | Minified Critical-path CSS file | Goivvy.com

 

2. Inline Critical-Path CSS

We need to put contents of dist/min.css at the top of our page. In Magento we simply add min.css to head.phtml:

Optimize CSS Delivery on magento website | Include min.css into head.phtml | Goivvy.com Optimize CSS Delivery on magento website | Include min.css into head.phtml | Goivvy.com

 

3. Move main CSS file to the bottom

Here is how to move all css to the bottom of magento webpage:

- we create allcss block of type page/html_head and put all css inside it:

<block type="page/html_head" name="allcss" as="allcss" template="page/html/allcss.phtml">
 <action method="addItem"><type>skin_css</type><name>css/styles.css</name><params/></action>
...
</block>

- we delete all css files from default head block

- we put <?php echo $this->getCssJsHtml() ?> inside allcss.phtml template

- we put <?php echo $this->getChildHtml('jsfooter') ?> inside templates just after </html> tag

Once it is done we will have a webpage with optimized CSS delivery.

Optimize CSS Delivery on magento website | Final Google Page Speed Score | Goivvy.com Optimize CSS Delivery on magento website | Final Google Page Speed Score | Goivvy.com

We see that CSS Delivery optimization got us +8 Google PageSpeed Score points!

NB: live example of CSS Delivery optimized can be seen here http://magento1.8.goivvy.com

 

 

Other articles you might be interested in:

  1. Magento Developers - 3 Questions to Ask When Hiring (VIDEO)
  2. Optimize Magento to get 100% Google Page Speed
  3. Magento Enterprise 1.14 to Community 1.9 Downgrade
  4. Magento admin backend Read Only Access Role
  5. 10 Magento Problems That Are Easily Solved

  

Our Magento extensions you might be interested in:

  

If you find this post interesting do not hesitate to sign up for our newsletter and join the 853 people who receive Magento news, tips and tricks regularly.

Thank You!

 

 

2 thoughts on “How to optimize CSS delivery on Magento website”
  • Michael

    Great guide. I improved the speed of my Magento site a lot by implementing some of the steps from your guide and the one at
    https://www.rosehosting.com/blog/magento-2-with-redis-varnish-and-nginx-as-ssl-termination/. Thank you so much.

  • Keeny

    You couls also add sitelocity.com to the list of tools that generate the critical css.
    I like it because there is nothing to install and it also generates a single css file to replace all others.
    Cheers