Search code examples
cssasynchronousgoogle-pagespeedrender-blocking

Google PageSpeed - render blocking content

Ok... so I am running a little test to try and get 100/100 from Google PageSpeed. We have the following website - https://redwing.media

I had one thing left to do and that was to take the CSS out of the head (as its render blocking content), allow the content to load and then use JavaScript to pull in the CSS. If I don't load the CSS in at all, I get 100/100 PageSpeed. I've put all of my critical CSS in the head.

<style>
    BODY { background-color: #1B1719; }
    BODY > * { display: none; }
</style>

So, I use Google's advised method of loading CSS in after content has loaded (see here) - 

<noscript id="deferred">
    <link rel="stylesheet" type="text/css" href="assets/css/screen.css">
</noscript>
<script>
    var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
</script>

Now when I run the PageSpeed insight, I'm straight back to having a mobile page speed of 85/100 because my screen.css is render blocking apparently...

How is this happening? I'm using Google's recommended solution!

This is the site I am building - https://redwing.media/

Solution

  • Css is always render blocking so, you've done a good job, you're loading an external css file with the best method it's possible.

    The only way that you could improve your pagespeed is inlining your css file content in the head of your html, doing this, you'll be saving a little amount of time saving the browser to search for an external file, but that will be a minor improvement.