Link Connection

Categories:
Tags:

Before the browser can request a resource from a server, it must establish a connection. Establishing a secure connection involves three steps:

  1. Look up the domain name and resolve it to an IP address.
  2. Set up a connection to the server.
  3. Encrypt the connection for security.

1. Preload

This resource is necessary for the page. Please download it asap. Preload resources you have high-confidence will be used in the current page.

Recommend preload resource

  • key scripts
  • Web Fonts
  • hero images
<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">

When you use the preload and it will force browser to download the resource asap. Without blocking the document’s onload event.

The page will render after preload all the resources.

We will use as to assign resources type. If you don’t use it, it may download the resource duplicated

Preload Resource Type

Type Description
script JavaScript file.
style CSS stylesheet.
font Font file.
audio Audio file, as typically used in <audio>.
document An HTML document intended to be embedded by a <frame> or <iframe>.
embed A resource to be embedded inside an <embed> element.
fetch Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
image Image file.
object A resource to be embedded inside an <object> element.
track WebVTT file.
worker A JavaScript web worker or shared worker.
video Video file, as typically used in <video>.

Fonts

<link rel="preload"
      as="font"
      type="font/woff2"
      href="fonts/cicle_fina-webfont.woff2"
      crossorigin="anonymous"
>

Photo

<link rel="preload"
      as="image"
      media="(max-width: 600px)"
      href="bg-image-narrow.png"
>

Video

<link rel="preload"
      as="video"
      type="video/mp4"
      href="super-important.mp4"
>

Script preload

Preload the scripts

var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

Run the scripts

var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);

Font Preload

<link rel="preload"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
      href="myfont.woff2"
>

If you have to preload the fonts, you have to add crossorigin="anonymous" attribute to the link. If you don’t add crossorigin="anonymous" attribute and this font will download twice.

If you omit the crossorigin attribute, the browser only performs the DNS lookup.

You can use crossorigin attributes in all the resources that supports CORS.

2. Preconnect

We will need this resource in a short time (10 seconds). Please establish the connection before we download it.

Best used for only the most critical connections. And will use it within 10 seconds.

If you want to access the resource via cross-domain. You can tell the browser to establish the connection first. After then when you request the resource will be faster.

<link rel="preconnect" href="https://example.com">

Link Connection

Note: If the connection isn’t used within 10 seconds, then the browser will close the connection. So please only preconnect to critical domains you will use soon.

Unnecessary preconnecting can delay other important resources, so limit the number of preconnected domains and test the impact preconnecting makes.

Preconnect HTTP Request Header

Link: <https://example.com/>; rel=preconnect

Cross origin

Some types of resources, such as fonts, are loaded in anonymous mode. For those you must set the crossorigin attribute with the preconnect hint:

If you omit the crossorigin attribute, the browser only performs the DNS lookup.

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin="anonymous"
>

Use case

case Description
Streaming media save some time in the connection phase
image CDN The different argument in the URL but with the same host connection. e.g. http://img.cdn/photo.jpg?size=500x400&quality=auto
chunck scripts The different argument in the URL but with the same host connection. e.g. http://scripts.cdn/script.abc123de.chunk.js

3. Prefetch

Prefetch resources likely to be used for future navigations across multiple navigation boundaries.

  • if a user navigates away from a page while prefetch requests for other pages are still in flight, these prefetch requests will not get terminated.
  • prefetch requests are cache for at least 5 minutes regardless of the cachability of the resource.
<link rel="prefetch" href="future-navigations-scripts.js" as="script">

4. DNS Prefetch

If a page needs to make connections to many third-party domains, preconnecting all of them is counterproductive.

We don’t need every resource to establish the connection right away.

But before we establish the connection to these resources, we have to look up these resources’ domain IP addresses. So we can use <link rel="dns-prefetch"> to fetch the IP addresses to save time on the first step.

The DNS lookup, which usually takes around 20–120 ms.

<link rel="dns-prefetch" href="http://example.com">

DNS Prefetch vs Preconnect

The DNS Prefetch is supported by the older version of the browser than the Preconnect.

So DNS Prefetch can serve as a fallback for browsers that don’t support preconnect.

For example:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

DO NOT do this:

<link rel="preconnect dns-prefetch" href="http://example.com">

Implementing dns-prefetch fallback in the same <link> tag causes a bug in Safari where preconnect gets cancelled.

Browser request connection priority

Priority Connection Scenario Description
1 preload current page This resource is necessary for the page. Please download it asap.
2 preconnect current page We will need this resource in a short time (10 seconds). Please establish the connection before we download it.
3 prefetch future page We need this resource later. Please download it if the browser is available.
4 dns-prefetch third-party Please do the DNS lookup first. We might use this resource later.

Browser request resource priority

Priority Resource
Highest HTML, CSS, Fonts
High script (before preload), the element of the viewport
Medium script
Low script (async), image, media
Lowest mismatched CSS, prefetch resources

Priority order

Type Layout-blocking Load in layout-blocking phase Load one-at-a-time in layout-blocking-phase
Net Priority Highest Medium Low Lowest Idle
Blink Priority VeryHigh High Medium Low VeryLow
DevTools Priority Highest High Medium Low Lowest
Main 1. Main Resource
CSS 2. CSS(match) 18. CSS (mismatch)
Script 5. Script (early or not from preload scanner) 12. Script (late) 14. Script (async)
Font 3. Font 6. Font(preload)
Import 7. Import
Images 8. Image (in view port) 15. Image
Media 16. Media
SVG 17. SVG Document
Prefetch 19. Prefetch
Preload 9. Preload
XSL 10. XSL
XHR 4. XHR (sync) 11. XHR/fetch (async)
Favoicon 13. Favicon

Font fetching anonymous referrer source

For font loads, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document.

Reference