Open Bug 1626997 Opened 7 months ago Updated 2 months ago

Enable <link rel=preload> support by default

Categories

(Core :: Networking, task, P2)

task

Tracking

()

Webcompat Priority P2

People

(Reporter: mayhemer, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: dev-doc-needed, Whiteboard: [necko-triaged])

This just means to flip the network.preload preference to true.

Depends on stability, integrity and performance testing.

Priority: -- → P2

I wonder how prevalent this pattern is already:
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href="scripts/bootstrap/css/bootstrap.css">

(In reply to Mike Taylor [:miketaylr] from comment #1)

I wonder how prevalent this pattern is already:
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href="scripts/bootstrap/css/bootstrap.css">

With the patches for "preload as speculative load" this works. But it's hugely suboptimal because it's adding an unprioritized loop to the event queue that blocks the stylesheet from being applied and the engine to know there will be a style applied and optimize for it. Leaving rel at "stylesheet" is performing way better. Unless this has to be some kind of a lazy load; but that then defeats the purpose of preload which is about prioritization. It's like using express delivery and then leave the package for two days at your doorstep.

In other words: don't use this construct unless you really know what you are doing. I don't :)

Duplicate of this bug: 1631816

See Also: → https://webcompat.com/issues/51983

Another top site using this pattern (ranks #85 in Turkey)

<link rel="preload" href="https://cdn.pr.trt.com.tr/static/font/fontawesome/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

I see this on stackoverflow (but it does note that it won't work in Firefox, assuming people even read (or care...)): https://stackoverflow.com/a/46750893

Webcompat Priority: --- → P2

One more site with a similar pattern <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Found my way here trying to see why this WP plugin example page was looking broken in FF. The owner fixed it for now, but not sure if lazy loading still works with that fix in place.

Hi devs!

My website does not look good in firefox either, because the new default functionality in firefox is not active, my website is https://www.convertidor.es thanks

(In reply to Jesús from comment #7)

Hi devs!

My website does not look good in firefox either, because the new default functionality in firefox is not active, my website is https://www.convertidor.es thanks

Why not just using <link rel="stylesheet">? Using <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> is not great, you should either have both the <link rel="preload"> and <link rel="stylesheet">, or just the later I guess. And you're putting <link rel="stylesheet"> in a <noscript> tag, so you can just remove the <noscript> basically.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #8)

(In reply to Jesús from comment #7)

Hi devs!

My website does not look good in firefox either, because the new default functionality in firefox is not active, my website is https://www.convertidor.es thanks

Why not just using <link rel="stylesheet">? Using <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> is not great, you should either have both the <link rel="preload"> and <link rel="stylesheet">, or just the later I guess. And you're putting <link rel="stylesheet"> in a <noscript> tag, so you can just remove the <noscript> basically.

Thanks.

Because I think that is not good for Google.

Why not? It shouldn't cause any extra load.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #10)

Why not? It shouldn't cause any extra load.

As I see the feature is available but it is not enabled by default in Firefox because it is being verified and tested

This feature is good for Google.

(In reply to Jesús from comment #11)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #10)

Why not? It shouldn't cause any extra load.

As I see the feature is available but it is not enabled by default in Firefox because it is being verified and tested

This feature is good for Google.

I mean that instead of having:

    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" /></noscript>

You could have:

    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" as="style" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />

And it'd work in all browsers, and get the benefit on <link rel="preload"> in Chrome as well (so no downside).

Ok thanks i will try

Thanks for the interest in this feature. But please bring these issues and discussions to web development forums instead of a polluting a mozilla bug with it. Thanks.

Sorry,

Where is a discussions forums to web development ?

Thanks.

(In reply to Jesús from comment #15)

Sorry,

Where is a discussions forums to web development ?

Thanks.

I think there is https://chat.mozilla.org/#/room/#front-end-web-development:mozilla.org where you should be able to discuss these issues.

Depends on: 1639607
Duplicate of this bug: 1419848
Blocks: 1636087
Depends on: 1646776
Component: DOM: Core & HTML → Networking
Severity: normal → N/A
Whiteboard: [necko-triaged]
You need to log in before you can comment on or make changes to this bug.