How to Delay Loading of Non Critical CSS to Increase Mobile Site Speed

By 23-03-2015   BloggingTutorials
Tweet Share Email Share  

Its a good idea to delay loading of non critical CSS to speed mobile site page speeds. Probably you use lots of CSS files to style your site, and this forces the browsers to load all these files before rendering your page to your site visitors. This increases your site load times and badly hits your mobile site page speed results.

Move CSS to Footer

Another important part about CSS files (unlike scripts which you add at bottom of pages) is that you traditionally load them in the HEAD section of HTML. While you can try these tips to load CSS faster, is there a way to load CSS files in footer using javascript?

Here is what typically Google PageSpeed tests will reveal for your mobile site

Advertisements

non critical css

Google mobile usability is getting important, and soon mobile friendly sites are expected to rank higher in search engine results. I found this script suggested by Google to load non critical CSS with javascript in the footer.

<script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'PATH/TO/STYLE.CSS';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
</script>

You can replace the path to CSS with your CSS file and this code before the BODY closing tag at the bottom of your HTML. Now this CSS script will load after all content is rendered.

Non Critical CSS

Non critical CSS means the CSS which can conveniently be loaded later and will not impact your site design drastically. While they suggest you should load all critical CSS inline in the HEAD, many times such CSS is too much to inline. While you can can retain your critical primary site design CSS files in the HEAD, you can move rest of the CSS files to the footer.

For example we use Bootstrap for superb responsive mobile first design, and we continue to load it in the HEAD as it is essential for basic site design like columns and sidebars. But we have shifted Font Awesome CSS (which loads all the amazing icons you see on this site) to the footer using this script as the icons can load later and are not critical for initial site design.

Try it yourself and increase your mobile site speed today.

8 comments on “How to Delay Loading of Non Critical CSS to Increase Mobile Site Speed

  1. Malou Peters says:

    Great article! I’m gonna try this script and see what happens. One question, how does it work with multiple css files?

  2. Hi!

    “You can replace the path to CSS with your CSS file and this code before the BODY closing tag at the bottom of your HTML. ”

    Which html file do you mean ? I’m using WP.

  3. Amazing Post. This is too much important to know the developers.

    Thanks!

  4. John Rowan says:

    I completely agree that Google mobile usability is getting more and more important. Thanks for this article. Helped a a lot.

  5. shoba says:

    really nice blog you posted i will accept with this mobile compatibility want to be there for every site because so many users are searching from mobile also .
    thanks for sharing this information.

  6. Thanks a lot for the script. I think, this is the link I’ve been looking for. I was really worried about the next Google algorithm update which is going to focus on mobile optimization. So, yeah it helped a lot.

  7. Very useful information. I am going to try this straight away. Fingers crossed!

  8. Reynald says:

    Hi!

    “You can replace the path to CSS with your CSS file and this code before the BODY closing tag at the bottom of your HTML. ”

    Which html file do you mean ? I’m using WP.

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php