preload link

LoadCSS has new functionality, specifically supporting link preload. So the end result of the page would look like this;

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/mystylesheet.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
(function(){ ... }());
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
(function(){ ... }());
</script>

As far as I can see, Advagg only uses the original loadCSS implementation. The W3C spec for link preload is quite new.

EDIT: Ah I can see it here; http://cgit.drupalcode.org/advagg/tree/advagg.module#n2077
https://www.drupal.org/node/2660710

I looked through issues and commits and couldn't see any reference to it. What version was it released in?

Thanks, we moved to 2.17 shortly after it came out, so missed preload :(
I've upgraded to 2.25 and noticed a bug in preload headers.

When you enable preload headers, Chrome sends the following warning <link rel=preload> has an unsupported `type` value

So on http://cgit.drupalcode.org/advagg/tree/advagg.module#n2182 (added here https://www.drupal.org/files/issues/advagg-2744377-14-preload.patch ) I removed type (only testing fonts atm) and that removed the warning and implemented the correct behavior.

I've attached two screenshots of the waterfall, you'll see in "correct.png" the first entry is the Document, then the fonts, the Initiator is "Other" which is preloading. This is the correct behavior.

The existing implementation with gives the console warning, you'll see in "current.png" the Document is loading, but then the fonts come in when they would normally be loaded in the CSS and the "Initiator" is "Index (Parser)" which is CSS loading the fonts, therefore header hints are not working.

Also Advagg is adding all font declarations to the headers, if a browser doesn't support woff2, it won't support header preload. Considering some boilerplates use up to 5 fonts for backwards compatibility, that's a lot of bloat, should only add woff2 fonts.
http://caniuse.com/#feat=woff2
http://caniuse.com/#search=preload

EDIT: It looks like Advagg follows the spec, I'm going to check Chromium bug reports and see why Chrome seems to be implementing it this way.
https://www.w3.org/TR/preload/#developer,-server,-and-proxy-initiated-fe...

Nice one about Woff2. I've filled a bug with Chromium, but the checkbox would be a good option for the meantime, maybe the tooltip links to the issue? So people will know when its fixed?

https://bugs.chromium.org/p/chromium/issues/detail?id=740568&q=header%20...

Also looking at the inline CSS, it appears be be a standard CSS link with extra attributes.

<link type="text/css" rel="preload" href="/sites/XXX/files/advagg_css/css__5igzPLowZVxMfS0O0h-tWDpZBZd_3ugRwX4H6iMbsWA__w7fw8QdMDA63TP5TLLzO-_R5mw4WBxV4lBeHK8Cpbxk__BNq-Qdp7UBMg9AhsW3OcIgcKuEiiR33GTuGl_Z9ScAM.css" media="all" as="style" onload="this.rel=&#039;stylesheet&#039;" />

From spec
<link rel="preload" href="/style/other.css" as="style">

From loadCSS

<link rel="preload" href="path/to/mystylesheet.css" as="style">
<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">

There's an update from Chromium https://bugs.chromium.org/p/chromium/issues/detail?id=740568&q=header%20...

The spec is using single quotes as opposed to double quotes!!

Tested this, type is present in headers and Chrome doesn't complain. Fonts are loaded in as expected.

No worries, when I was reading about the preload headers I came across this. https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-7...

Preloaded fonts without crossorigin will double fetch! Ensure you’re adding a crossorigin attribute when fetching fonts using preload otherwise they will be double downloaded. They’re requested using anonymous mode CORS. This advice applies even if fonts are on the same origin as the page. This is applicable to other anonymous fetches too (e.g XHR by default).

https://github.com/w3c/preload/issues/32
https://github.com/jolantis/altair/commit/4846ace11df79cdc77c49eb5a41601...

If requesting fonts, it looks like crossorigin should always be present otherwise the font will be downloaded twice.