Search code examples
javascriptcssperformancelighthousepreconnect

Is it possible to use preconnect and preload rel attributes together?


Imagine you have a web server that serves up a document and a cdn that serves up all the document's js component chunks:

There is 1 important chunk main.js that has a preload link rel.

Question: Is it possible to have a preconnect and preload rel on 1 link tag?

Today it is:

<link rel="preload" href="https://d3i4yxtzktqr9n.cdn.net/main.js" crossorigin="anonymous" as="script">

I want to make it:

<link rel="preconnect preload" href="https://d3i4yxtzktqr9n.cdn.net/main.js" crossorigin="anonymous" as="script">

Waterfall


Solution

  • From how I understand https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect, preconnect is used for resources that you want to prepare for future steps and reduce processing time when you actually want to access the resources

    E.g. on a registration form, where a user is busy inputting user information, you can already preconnect to establish a connection to some authentication service.

    Whereas preload is for required resources with high priority, like fonts or stylesheets, which you need quickly.

    As Internet Explorer can't handle preconnect, you technically can use preload as an alternative directive. But as they have different use cases, it is probably not recommended and preload has higher priority