PRIORITIZING CRITICAL CSS TO OPTIMIZE PAGE LOAD SPEED

WHAT IS CRITICAL CSS?

Critical CSS are the CSS rules that handles "above the fold" contents of web pages. Web pages will remain blank on client side till browsers parse and download the stylesheets. By inlining the CSS responsible for parts visible to users before any scrolling is done, the first contents to be displayed wouldn't rely on the CSS to be requested on HTTP request of the stylesheets.

How can I determine what is critical?

  • You can use this online tool http://jonassebastianohlsson.com/criticalpathcssgenerator/ 
  • https://github.com/fatso83/grunt-penthouse or https://github.com/filamentgroup/grunt-criticalcss as Grunt tasks
  • Chrome Dev tool Snippet https://gist.github.com/PaulKinlan/6284142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        ...
    <header>
    <section class="below">
        ...
    </section>
</body>
</html>

HTML

What your code looks like

header{ background: white; }
.below{ background: #D353EC; }

style.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
    header{ background: white; }
    </style>
</head>
<body>
    <header>
        ...
    <header>
    <section class="below">
        ...
    </section>
    <!-- Load non-critical CSS Asynchronously -->
    <script>
    loadCSS('style.css');
    </script>
    <noscript>
        <link rel="stylesheet" href="style.css">
    </noscript>
</body>
</html>

HTML

When Critical CSS is prioritized

.below{ background: #D353EC; }

style.css

Why should non-critical CSS be loaded asynchronously?

Since the critical CSS is being loaded an we're trying to reduce the HTTP request made before the page is rendered, this is required

I used loadCSS by Filament Group for this

https://github.com/filamentgroup/loadCSS/blob/master/loadCSS.js

I hate inline styles

Every front-end purist does. We can separate our critical styles from our inline style by taking advantage of features offered by a pre-processor like SASS

Compass Jacket

The compass extension : jacket (https://github.com/Team-Sass/jacket) can be used to dress the CSS such that critical CSS is separated from non-critical CSS

Thanks

Joseph Rex

@joerex101

PRIORITIZING CRITICAL CSS TO OPTIMIZE PAGE LOAD SPEED

By Joseph Rex

Made with Slides.com

PRIORITIZING CRITICAL CSS TO OPTIMIZE PAGE LOAD SPEED

critical-css

  • 1,558

More from Joseph Rex