[wp-trac] [WordPress Trac] #42438: Add support for preload links (similar to resource hints)

[WordPress Trac]

#42438: Add support for preload links (similar to resource hints)
--------------------------------------+-------------------------
 Reporter:  nico23                    |       Owner:  swissspidy
     Type:  defect (bug)              |      Status:  assigned
 Priority:  normal                    |   Milestone:  6.1
Component:  Script Loader             |     Version:  4.9
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:
--------------------------------------+-------------------------

Comment (by mihai2u):

 Since it was questioned of what use-case is helpful here, I'm sharing the
 examples which can be added to one of the twenty-X themes to use the new
 API

 Preloading the CSS for a web font which can be loaded in a non-render
 blocking fashion (early discover and trigger the download, but don’t delay
 the paint if slow)

 {{{
 <link rel="preload"
 href="https://fonts.googleapis.com/css2?family=Gulzar&display=swap"
 as="style">
 <link href="https://fonts.googleapis.com/css2?family=Gulzar&display=swap"
 rel="stylesheet" media="print" onload="this.media='all'">
 }}}

 Preloading responsively the first image in the content
 [https://web.dev/preload-responsive-images/]

 {{{
 <link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg
 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
 }}}

 When the image lacks srcset/sizes, it defaults to not having those extra
 attributes
 {{{
 <link rel="preload" as="image" href="important.png">
 }}}

 And when there's a high confidence that the image is above the fold for
 all devices, there's an extra attribute
 `fetchpriority="high"`
 which can be used as such:
 {{{
 <link rel="preload" as="image" href="important.png" fetchpriority="high"
 ...>
 }}}
 [https://youtu.be/fWoI9DXmpdk?t=1205]

 When an image is not present on particular breakpoints, the media
 attribute comes into play here:
 {{{
 <link rel="preload" href="mydog" as="image" media="(min-width: 601px)"
 ...>
 }}}

 Preloading render blocking CSS defined in the head is also still useful,
 especially in the circumstance of structured data appearing before the
 stylesheet links, causing the early HTML bytes not to contain the
 stylesheet, causing a late discovery.

 Preloading a script is either
 {{{
 <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
 }}}
 or, for module JS
 {{{
 <link rel="modulepreload" href="dog.mjs">
 }}}

 Preloading fonts require the type attribute and the crossorigin to be
 present, which should be hard-coded for as="font" types:
 {{{
 <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font"
 type="font/woff2" crossorigin>
 }}}

 I hope I've been exhaustive enough for real world common usages.
 Many of these example use-cases can be added to the developer notes with
 the specific PHP code and the required parameters as it gets
 released/merged.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/42438#comment:39>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform