Skip to content
This repository has been archived by the owner on May 5, 2022. It is now read-only.

Request for dynamic preload like font url in CSS. #144

Closed
Faisal-Manzer opened this issue Jan 29, 2020 · 6 comments
Closed

Request for dynamic preload like font url in CSS. #144

Faisal-Manzer opened this issue Jan 29, 2020 · 6 comments

Comments

@Faisal-Manzer
Copy link

Faisal-Manzer commented Jan 29, 2020 •
edited

Problem

The browser supports different formats, ex: Chrome supports WebP and Safari doesn't. Some resources are critical and should be pre-loaded, but can be present in diffrent formats according to the browser.

Below is the example for how someone will load font for diffrent browsers, but if the browser supports 2 or 3 of the format it will load all supported font formats. This will be a wastage of resources at critical rendering time.

<link rel="preload" href="font.woff2" as="font"  type="font/woff2">
<link rel="preload" href="font.woff" as="font"  type="font/woff">
<link rel="preload" href="font.tff" as="font"  type="font/ttf">

Suggested Solution

<link rel="preload" as="font" group>
    <link href="font.woff2" type="font/woff2">
    <link href="font.woff"  type="font/woff">
    <link href="font.tff"  type="font/ttf">
</link>

This preload with group attribute will download only one resource and will stop when it finds a compataible format. Every child of the group will be treated as same object defined in as attribute.

Use Cases

For a media-heavy site, this will be a great optimization of resources. We can preload only one Image according to supported formats, the same goes for Audio, Video, and Fonts.

I am a newbie and don't know how to edit web specs but I feel this feature important in many use cases.

Present implementation

This type of thing happens in CSS's @font-face src. Example is taken from https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
@Faisal-Manzer Faisal-Manzer changed the title Request for dynamic preload like font URL. Request for dynamic preload like font url in CSS. Jan 29, 2020
@domfarolino
Copy link
Member

For a media-heavy site, this will be a great optimization of resources. We can preload only one Image according to supported formats, the same goes for Audio, Video, and Fonts.

FWIW, we actually have something like this for image preloads that match the srcset and sizes attributes for <img> (see whatwg/html#4048), and I don't think any browsers support audio and video preloads quite yet (e.g., see https://crbug.com/977033), but I guess something for fonts could be interesting and useful? Perhaps @yoavweiss could speak to the efficacy of this.

@yoavweiss
Copy link
Contributor

yoavweiss commented Jan 30, 2020 •
edited

That's interesting! For the font case, I don't think there's a huge use-case right now (all browsers that support preload support woff2). But, we have been discussing ways to preload <picture> based images.
The hurdle in previous times was the fact that we cannot add new elements in the <head>. But using <link> for both the parent and the children can be an interesting way to escape that issue.

@domfarolino
Copy link
Member

Are you saying we cannot force users to modify their <head>s, or we can literally not spec new elements that are destined to be in the <head>?

@yoavweiss
Copy link
Contributor

The latter. Legacy browsers would not recognize those new elements, which would result in them implicitly starting the <body> at that point, which can result in breakage.

@yoavweiss
Copy link
Contributor

Taking a second look at this, this will not work because <link>is self-closing, so cannot have children...

@yoavweiss
Copy link
Contributor

This seems highly related to whatwg/html#6400 IIUC. Essentially asking for "type" based preloading from multiple options. Closing as this repo is discontinued. I encourage y'all to continue the discussion on the HTML repo.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yoavweiss @domfarolino @Faisal-Manzer