Support prefetch/preload/dns-prefetch in the libraries API

Created on 13 June 2023, over 1 year ago
Updated 9 October 2023, about 1 year ago

Problem/Motivation

Olivero ships a preload template with the following:

<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-SemiBold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ olivero_path }}/fonts/metropolis/Metropolis-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ olivero_path }}/fonts/lora/lora-v14-latin-regular.woff2" as="font" type="font/woff2" crossorigin>

This is to support fonts.css which is loaded as part of the global-styling library.

I think we should look at generic support for adding link tags as part of library definitions at the same level as CSS and JS. This can then be added to the HTML head via the same mechanism as #attached['html_head']. Via that, we'd then be able to support prefetch, preload, and dns-prefetch and possibly other things.

Steps to reproduce

Proposed resolution

Add support to the libraries/assets API.

Convert Olivero to use it (either in this issue or a follow-up).

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Feature request
Status

Active

Version

11.0 🔥

Component
Asset library 

Last updated about 5 hours ago

No maintainer
Created by

🇬🇧United Kingdom catch

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @catch
  • 🇬🇧United Kingdom catch
  • 🇫🇷France vbouchet

    I understand that for now, given the example, it is to add the possibility to specify additional "things" with the library that would generate the link tags. What about the existing external / js that are added in a library?
    Should we do something like:

    my_library:
      js:
       https://cdn.example.com/js/file.js: { type: external, preconnect: true, dns-prefech: true }
    

    or

    my_library:
      js:
       https://cdn.example.com/js/file.js: { type: external }
      links:
        -
          rel: preconnect
          href: //cdn.example.com
        -
          rel: dsn-prefetch
          href: //cdn.example.com
          
    

    The second option allows a lot of flexibility (and cover the example of fonts) but is much more verbose.
    Third option is a mix, allowing for shorter version for elements of the library (like example 1) and verbose version for other elements.

    I am curious of a direction as we are for now implementing custom on a project but would be keen to write a patch for this to land in core the proper way.

  • 🇬🇧United Kingdom catch

    I kind of like the more verbose option even for the same file, because you could have two files from the same CDN and then defining prefetch inline for one file (or both) doesn't seem ideal. We could always add a shorthand in a follow-up.

Production build 0.71.5 2024