CODEWITHSUNDEEP
htmlcssnpmgulppagespeed
norr
norr

Reputation: 2167

Render-blocking CSS in PageSpeed - single file

I'm testing optimization best practises for front-end. So I have learned using gulp and npm to merge and minify my CSS and JS files to single all.min.css and js.min.css

In Google PageSpeed I have warning "Eliminate render-blocking JavaScript and CSS in above-the-fold content". So I added "async" to my js script.

<script async src="/dist/js/all.min.js"></script>

Works ok, but what to do with my .css file? 

<link rel="stylesheet" href="/dist/css/all.min.css">

This is SINGLE css file in my website (33kb). It includes bootstrap, font-awesome, few small libaries and my style.css.

It is good practise to include that big file in html source? I'm doing something wrong? I want to get at least once that 100 points, but not by making something stupid, not practical.

Upvotes: 1

Views: 846

Answers (3)

tobiv
tobiv

Reputation: 842

The Google PageSpeed tool offers general guidelines, not actual speed measurements. Thus, you should not lose any sleep if you're not getting a perfect 100 points.

That said, the optimal way to deliver your CSS without "blocking above-the-fold rendering":

  • Add all styles that are necessary for above-the-fold content as inline styles in the HTML head. For example:

    <style>
    #logo {
        // ...
    }
    #navigation {
        // ...
    }
    .hero-banner {
        //
    }
</style>

  • Load the remaining styles (concatenated and minified into one file in your case) asynchronously, which is typically done via deferred or asynchronous javascript before the closing body tag. Example:

    <script>
    var deferstyles = document.createElement("link");
    deferstyles.rel = "stylesheet";
    deferstyles.href = "/dist/css/all.min.css";
    document.getElementsByTagName('head')[0].appendChild(deferstyles);
</script>

Upvotes: 3

Simon Kraus
Simon Kraus

Reputation: 736

You got the 

<link rel="stylesheet" href="/dist/css/all.min.css">

in your pages <header> . that's common practise. Pagespeed Insights wants you to remove it there and place it after your content ("below-the-fold" => after the content that is visible on screen on page load without scrolling). for example place it in your footer.

Upvotes: 0

Charlie Brumbaugh
Charlie Brumbaugh

Reputation: 217

You simply need to move the CSS file to the bottom of your page so that the HTML loads before the CSS.

Be are that this can cause a flash of unstyled content,

A flash of unstyled content (FOUC, also flash of unstyled text or FOUT)1[2] is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved.

Source

Upvotes: 0

Related Questions