Automatically generate and inline CriticalCSS for production

[t-kelly]

Critical CSS is an approach to optimizing the Critical Render Path and decreasing first render times. By inlining styles needed above the fold, the browser no longer needs to wait for a render blocking external CSS file to download so it an get started rendering the page as soon as the HTML document has been parsed.

In order for Critical CSS to be easily included and maintained in a project, it needs to be generated automatically. There are several tools available that accomplish this, one of which is Critical.

Big perf win for themes!

cc @Shopify/performance

[juanferreras]

This would be a fantastic addition for global optimization of Shopify Stores - scores like PSI really take into account the "CSS render blocking resources" and deferring them completely provides an awful user-experience while loading the page.

At the moment I'm manually curating a "critical" stylesheet to load inline and deferring the rest by using the following snippet of code.

<noscript id="deferred-css">
    {% include 'style-tags', layout: 'theme' %}
</noscript>
<script>
    var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-css");
        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', function() { window.setTimeout(loadDeferredStyles, 0)});
</script>

---

I was wondering if there were any plans on including an automatic integration on any future release thus far, or if by customizing slate.config.js there is a way of achieving an integration in theory. As most automatic plugins take an input of the HTML, I'm leaning towards believing there's no simple possible integration as of now.

[goldsteinr]

Any updates on this?

[loiic-v]

Please, dear Shopify gurus, allocate some time for you devs only to complete this killer feature :)