A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103 below:

103 Early Hints - HTTP

Syntax Examples Preconnect example

The following 103 early hint response shows an early hint response where the server indicates that the client might want to preconnect to a particular origin (https://cdn.example.com). Just like the HTML rel=preconnect attribute, this is a hint that the page is likely to need resources from the target resource's origin, and that the browser may improve the user experience by preemptively initiating a connection to that origin.

103 Early Hint
Link: <https://cdn.example.com>; rel=preconnect, <https://cdn.example.com>; rel=preconnect; crossorigin

This example preconnects to https://cdn.example.com twice:

CORS-protected resources must be fetched over a completely separate connection. If you only need one type of resource from an origin then you only need to preconnect once.

Subsequently the server sends the final response. This includes a crossorigin font preload and an <img> loaded from the additional origin.

200 OK
Content-Type: text/html

<!doctype html>
...
<link rel="preload" href="https://cdn.example.com/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
...
<img src="https://cdn.example.com/images/image.jpg" alt="">
...
Preload example

The following 103 early hint response indicates a stylesheet style.css might be needed by the final response.

103 Early Hint
Link: </style.css>; rel=preload; as=style

Subsequently the server sends the final response. This includes a link to the stylesheet, which may already have been preloaded from the early hint.

200 OK
Content-Type: text/html

<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
Early hint response with CSP

The following example shows the same early hint response but with a Content-Security-Policy header included.

103 Early Hint
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style

The early response restricts preloading to the same origin as the request. The stylesheet will be preloaded if the origin matches.

The final response might set the CSP to none, as shown below. The stylesheet has already been preloaded, but will not be used when rendering the page.

200 OK
Content-Security-Policy: style-src: none;
Content-Type: text/html

<!doctype html>
...
<link rel="stylesheet" rel="preload" href="style.css" />
...
Specifications Browser compatibility

Loading…

See also

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.5