Feature Request: Preload

“updated the gist to insert before </head> (could be elsewhere too, just tell me and I can update ?? )”

Shouldn’t matter really where in the head it is, although if you prefer you could add it after noscript so that all the inlinecss+noscript+script are together.

I have reverted by commenting the filter and choosing inline and defer in options but I am still getting a FOUC which has no style. The HTML source looks fine – just like 2.0.0, so it’s strange.

Is it because of media = “none” here?

it shouldn’t; this is part of the JS that is executed to load deferred CSS. After the CSS has been loaded it tries to unset the inlined CSS (to avoid conflicting styles).

But I could be wrong (and my code could), so try removing document.getElementById(\"aoatfcss\").media=\"none\"; and see if that solves your FOUC?

frank

Minor correction:

document.getElementById(\"aoatfcss\").media=\"none\";

should be removed and a " should be added. Just in case someone else is reading.

Yes the FOUC goes. I think if you unset the inlined CSS, the browser recalculates styles. Seems what happens is that even if the developer tools show that the external styles have been used for everything, it is actually using inline styles and puts additional styles on top of it, cheaply. So setting media to none will force a recalculation.

Btw, you could actually load Google fonts CSS with this because you are not changing the css URL, just the way it is loaded. Google’s servers will still deliver different fonts for different OSs/browsers/versions/ So the option to load it by preload can be given to AO users.

(At the moment I use a @font-face made by brute force and am using it for higher speed ).

Yes the FOUC goes.

darn … problem is that when not unsetting inlined CSS, some styles might (and do) persist, as inline CSS takes precedence over linked external stylesheets.

will have to think about this some more I guess.

frank

Maybe it’s because of other reasons?

I haven’t seen this happening. Is there a demo?

I think the inline precedence is for styles which are like:

<h1 style="color:blue;margin-left:30px;">

as opposed to internal stylesheet. So the thing AO inserts is an internal stylesheet and since the external stylesheet is inserted below, it should override the internal stylesheet.

ok, removed the “unsetter” from the github version.

frank

Tested, no FOUC.

Is it possible that the thing on your mind may have to do with bugs entering at the time of finding the above the above the fold css from generators available on the web?

Is it possible that the thing on your mind may have to do with bugs entering at the time of finding the above the above the fold css from generators available on the web?

possibly ??

I have come to the conclusion that your original code is as good as loadCSS or better and you can use your own code to polyfill.

So the html source/output might look like:

<style type="text/css" media="all">

...

</style>

<noscript><link type="text/css" media="all" href="http//www.example.com/wp-content/cache/autoptimize/css/autoptimize_hash.css" rel="stylesheet" /></noscript>

<link rel="preload" href="http//www.example.com/wp-content/cache/autoptimize/css/autoptimize_hash.css" as="style" onload="this.rel='stylesheet'">

...

(footer area)
....

<script>
var relpreloadsupport = function() {
  try {
    return document.createElement( "link" ).relList.supports( "preload" );
  } catch (e) {
    return false;
  }
};

if ( ! relpreloadsupport() ) {

(your original deferred css javascript code)

}
</script>

duly noted ??

Dear Frank, this instructions for getting preloading are still valid now?

If not could you explain me how can get this feature?

many thanks in advance!

this isn’t in Autoptimize yet Michelefircara, sorry.

frank

when did you plan to insert ?

probably later this year ??