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: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

rel=preload

Post by RSteinwand » Mon Mar 28, 2016 10:34 am

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: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand » Mon Mar 28, 2016 11:45 am

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: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch » Mon Mar 28, 2016 8:34 pm

Thanks Rick! I will look into this soon.
Image
Albert Wiersch

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

Re: rel=preload

Post by Albert Wiersch » Thu Mar 31, 2016 5:51 pm

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.
Image
Albert Wiersch

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

Re: rel=preload

Post by RSteinwand » Thu Mar 31, 2016 6:52 pm

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: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand » Fri Apr 01, 2016 7:55 am

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: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch » Fri Apr 01, 2016 8:21 am

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

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

Re: rel=preload

Post by RSteinwand » Fri Apr 01, 2016 11:16 am

Works great!

Thanks for the quick fix.
Rick

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

Re: rel=preload

Post by Albert Wiersch » Fri Apr 01, 2016 11:23 am

Great! :D
Image
Albert Wiersch

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

Re: rel=preload

Post by RSteinwand » Sun Apr 03, 2016 12:20 pm

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: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand » Sun Apr 03, 2016 8:24 pm

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: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch » Mon Apr 04, 2016 10:13 am

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").
Image
Albert Wiersch

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

Re: rel=preload

Post by RSteinwand » Mon Apr 04, 2016 11:23 am

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: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: rel=preload

Post by RSteinwand » Sun Apr 24, 2016 7:42 pm

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: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: rel=preload

Post by Albert Wiersch » Sun Apr 24, 2016 9:21 pm

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.
Image
Albert Wiersch

Post Reply