permalink

24

Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video)

In this video, Paul and I demo a new experimental bookmarklet he wrote for detecting critical CSS for above the fold content.

External CSS stylesheets are render-blocking, meaning the browser won’t paint content to the screen until all of your CSS – specifically, media=’screen’ CSS – arrives. The solution to this is inlining the initially needed (above-the-fold) CSS for your page and loading the rest of your CSS when the page is ready.

If you have complete control of your hosting, using Google’s mod_pagespeed module can automatically help solve this, otherwise it can be a real pain to work around.

This takes us to Paul Kinlan’s new experimental bookmarklet, introduced today in his article Detecting critical above-the-fold CSS (do read it!). You can see a preview of the bookmarklet/snippet running in DevTools below.

DevTools critical path CSS snippet

Note: my own site suffers from quite a few render-blocking resources and I’m actively looking at how solutions like the above can practically help my optimization workflow.

24 Comments

  1. Pingback: Above-The-Fold CSS | Testpress

  2. Wow! Very useful tool.

    Now that we’re using CSS frameworks so heavily (e.g. Bootstrap and similar), it can be tough to separate out your “above the fold” CSS, because nearly every module relies on your core CSS in some fashion.

    However, preprocessors are continually improving (For instance, allowing variables to be declared anywhere – as opposed to failing if they weren’t defined before being used).

    I have Grunt create two separate files:
    1) “frontload.css” which is inlined in the
    2) and “main.css” which is loaded further down the page

    The trick is keeping your core CSS very lean. By this I mean: if you compile only your core files, there would be hardly any CSS at all, because it’s mostly mixins and compile-time variables.

    This way your above-the-fold modules can fully inherit from your core styles, without acquiring too much added bulk in the process.

    Thanks for sharing this tool, and for all the work you’ve done in helping the community!

  3. Pingback: Above-The-Fold CSS Rendering: Identificare solo il CSS necessario

  4. Pingback: Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video) | WPMagic

  5. Pingback: Dew Drop – August 23, 2013 (#1,610) | Alvin Ashcraft's Morning Dew

    • Quite the opposite. Browsers block rendering until all of your screen CSS is downloaded meaning that your users can potentially be looking at a white page (or unstyled) until this has happened. If you’re concerned about performance, you should get the CSS needed for what your user is going to see (above the fold/scroll) out of the way first by inlining it. That way it’s already in the pipeline and will be used before the browser waits to download/parse those other stylesheets. Get it off the critical path. Deferring style rules that are not used by the document delays downloading unnecessary bytes and allows the browser to start rendering sooner.

      • Thanks for responding Addy. I do see your point, but it appeared in the video as if everything was *partially* styled. So once the page fully downloads I would think you’d see another sudden style change would you not?

  6. Pingback: Above-The-Fold CSS | Lunarium Design

  7. Pingback: Above-The-Fold CSS

  8. Pingback: Collective #78 | CSS Snippets | FREE Online Magazine

  9. Pingback: Detecting Critical CSS For Above-the-Fold Content… | Jupimedia – Exploring art, design, web and more.

  10. Pingback: » Identificare il CSS necessario per il rendering del contenuto Above-the-Fold - AWD SeoWeb

  11. Pingback: Collective #78 | Zipsite.net

  12. Pingback: Above-The-Fold CSS | The Creative Web Project

  13. First congrats on the awesome video Addy and Paul.

    I was getting a render blocking css and javascript error, I followed your steps in the video and was able to solve the issue in desktop view.

    Any ideas on how to fix this in mobile view, as am still getting the error in mobile view.

    Small requirements which will make the code more robust

    - While coping the code from console am getting full path(absoulte path) of background image, is there a way to get the path which we gave in the css ?

    - Is there a way to get the cross browsers css styles (for border-radius, opacity etc), currently am getting only css3 styles.

    Thanks and Regards,
    Ganesh K

  14. Looks great when I tested on some websites, but it failed miserably on facebook.com, it just returned bunch of selectors with css of { display: none !important; orphans: 4321 !important; }

    So what is the issue here??

  15. Pingback: Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video) | InfoLogs

Leave a Reply

Required fields are marked *.