mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Mention my use of priority hints
This commit is contained in:
parent
5c9ddaaa59
commit
521beaebf4
2 changed files with 4 additions and 4 deletions
|
@ -163,10 +163,10 @@ Optimal loading is a complex topic. Broadly, it covers three overlapping categor
|
||||||
|
|
||||||
HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a "link" HTTP header.
|
HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a "link" HTTP header.
|
||||||
|
|
||||||
My website includes a "link" header to load an SVG that serves as my IndieWeb photo and favicon (hash removed from filename for readability):
|
my website includes a "link" header to load the image that serves as my IndieWeb photo and favicon. The header includes a "high" priority hint so the browser starts downloading the resource right away:
|
||||||
|
|
||||||
```
|
```
|
||||||
link: </favicon.HASH.svg>; rel=preload; as=image
|
link: </favicon.HASH.svg>; rel=preload; as=image; fetchpriority=high
|
||||||
```
|
```
|
||||||
### Don't count on the cache
|
### Don't count on the cache
|
||||||
|
|
||||||
|
|
|
@ -166,10 +166,10 @@ Optimal loading is a complex topic. Broadly, it covers three overlapping categor
|
||||||
|
|
||||||
HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a `link` HTTP header.
|
HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a `link` HTTP header.
|
||||||
|
|
||||||
{{<codefigure>}} {{< codecaption >}} my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon. Hash removed from filename for readability. {{< /codecaption >}}
|
{{<codefigure>}} {{< codecaption >}} my website includes a `link` header to load the image that serves as my IndieWeb photo and favicon. The header includes a [priority hint](https://wicg.github.io/priority-hints/) so the browser starts downloading the resource right away. {{< /codecaption >}}
|
||||||
|
|
||||||
```figure {var1="HASH" samp=true}
|
```figure {var1="HASH" samp=true}
|
||||||
link: </favicon.HASH.svg>; rel=preload; as=image
|
link: </favicon.HASH.svg>; rel=preload; as=image; fetchpriority=high
|
||||||
```
|
```
|
||||||
|
|
||||||
{{</codefigure>}}
|
{{</codefigure>}}
|
||||||
|
|
Loading…
Reference in a new issue