rel=preload

For technical support for all editions of CSS HTML Validator. Includes bug reports.
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

rel=preload

Post by RSteinwand »

Hi Albert,

I was troubleshooting why my public pages were slow to display content, even with post-loaded scripts and css and critical css inlined and found out that my css loading script was the problem.

The new css (below) flags an error that I think could be changed.
<link rel=preload href="/css/public/responsive_postloaded.css" as="style" onload="this.rel='stylesheet'">
The "rel" value specifies the following unrecognized or invalid link type: "preload". Visit http://www.w3.org/TR/html5/links.html#linkTypes and http://microformats.org/wiki/existing-r ... extensions for more information or to register a new extension.
The as=style part is also part of the preload spec, and onload is supported by IE.

There's a new draft for preload and it sounds like only Chrome 50 supports it:
https://w3c.github.io/preload/
https://github.com/Fyrd/caniuse/issues/2130

Nothing on CanIuse yet.
http://caniuse.com/#search=rel%3D

Thanks.
Last edited by RSteinwand on Mon Mar 28, 2016 12:14 pm, edited 1 time in total.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

Here's the link to that css preload page: https://github.com/filamentgroup/loadCSS/

I knocked a second off my page complete time and page content was visible about .5 seconds sooner. My code still needs refining tho.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3478
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch »

Thanks Rick! I will look into this soon.

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3478
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch »

Hi Rick,

Please try downloading CSE HTML Validator Pro again. You should get v16.0302 which should support rel="preload" and the "as" attribute. Please let me know how it works.

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

Cool!

Thanks Albert. I was checking all my public files today and didn't want to add an exception for those two errors.

I'll check it out tomorrow at work.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

Hi Albert,

I'm licensed for Std and unfortunately installing Std didn't get me to 16.0302.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3478
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch »

Sorry about that. I only updated the pro edition... but the standard edition should now be updated to v16.0302. Please try again.

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

Works great!

Thanks for the quick fix.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3478
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch »

Great! :D

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

CanIUse now has a page for preload: http://caniuse.com/#feat=link-rel-preload
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

Good page with more info on rel=preload: https://www.smashingmagazine.com/2016/0 ... -good-for/
The as attribute tells the browser what it will be downloading. Possible as values include:
  • "script",
  • "style",
  • "image",
  • "media",
  • and "document".
(See the fetch spec for the full list.)
Omitting the as attribute, or having an invalid value is equivalent to an XHR request, where the browser doesn’t know what it is fetching, and fetches it with a fairly low priority.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3478
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch »

Thanks Rick, that's a really good page. I'll add a link to it on our "link" element help page and add some warnings to CSE HTML Validator when the "as" attribute is not used and when the "crossorigin" attribute is not used but should be (for fonts when as="font").

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

I liked the page since it was in plain english and found it interesting. Also did a nice job explaining the difference between preload and prefetch and the previous options.
Rick

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand »

Code: Select all

<link rel=preload href="/css/public/responsive_postloaded.css" as="style" onload="this.rel='stylesheet'">
I want to check this out more and see if Chrome will load this style sheet with just that code alone.

Unfortunately CanIUse doesn't seem to have anything about the "onload" event with a css link statement.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3478
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch »

Can you do a test? Like create some crazy style sheet that if it is loaded then you would easily know? But even if it works with Chrome then you still have all the other browsers to consider.

Post Reply