Async css

Resolved

(@sixer)

Great plug in thank you! I have figured out a way to async fontawesome and wonder if I can do the same with the autoptimise css file. I have tried to “inline and defer” without putting any css into the above the fold box and it functions almost the same, is it possible have asyc rather than defer? Somthing like this:

<script>
        // Asynchronously load non-critical css
        function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
        // load css file async
        loadCSS("//CDN.autoptimizedFile.css");
    </script>

Thanks so much!

https://wordpress.org/plugins/autoptimize/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Frank Goossens
(@futtta)

8 years, 3 months ago

I have tried to “inline and defer” without putting any css into the above the fold box and it functions almost the same

almost the same, but what is the difference sixer? can you explain the advantage here?

frank

Thread Starter grantdb
(@sixer)

8 years, 3 months ago

Its ok I am now using another plugin that seems to work for what I need.

Plugin Author Frank Goossens
(@futtta)

8 years, 3 months ago

OK, but I’m still interested in what the advantage of your delayed CSS-injection vs the one in AO is though. I’m always interesting in improving AO 🙂

frank

Thread Starter grantdb
(@sixer)

8 years, 3 months ago

What I am trying to do is get rid of blocking css without in-lining all css. As far as I understand is they way your inline and defer works is critical css is in-lined and then ALL of the css is repeated but defered in a file. When I look at dev tools in chrome I see the in-lined critical css is written over by the deferred css file
So basically the inline and defer is still blocking because the main css file overrides the critical inline css. I am trying to figure all this out so this could be way wrong!

What I would like to do is inline critical and have the main css file either asyc as page loads or to only contain the remaining css that is not included inline.

Make sense or can you please explain my incorrect thinking here?

Plugin Author Frank Goossens
(@futtta)

8 years, 3 months ago

So basically the inline and defer is still blocking because the main css file overrides the critical inline css.

not exactly; the goal is for the browser to be able to paint the visible part of the page as soon as possible. this is done by the inlined critical CSS. the rest of the CSS is loaded after window.load (or domcontentloaded) and as such is not blocking.

What I would like to do is inline critical and have the main css file either asyc as page loads

have CSS loaded async could be interesting, as it would not be render-blocking while it would be loaded sooner then the current implementation. but your setTimeout could fire before the page is rendered, making the CSS render-blocking again, no?

or to only contain the remaining css that is not included inline.

that would require code with in-depth understanding of CSS to be able to take the original CSS and substract the critical CSS to end up with the “non-critical” CSS. not easy and I only see a very small advantage here.

frank

Thread Starter grantdb
(@sixer)

8 years, 3 months ago

Thank you for your helpful explanations. I think that you are right and the benefits that the extra work would be very insignificant. I am going to see if using the code for async css with your plugin’s combined/minimized css file gains some performance on page load.

Thanks again for your input and I am back to using the best plugin available for combine/minify in WordPress!

Cheers!

Thread Starter grantdb
(@sixer)

8 years, 3 months ago

I can’t figure out how to get that code to work using the combined file so that’s as far as I can go. Have a good one!

Thread Starter grantdb
(@sixer)

7 years ago

I see you have figured this out, thank you!

Plugin Author Frank Goossens
(@futtta)

7 years ago

🙂

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Async css’ is closed to new replies.