103 Early hints

Mitä ovat 103 - early hints?

Miten selain käyttää 103 - early hints -otsikkoja?

Early hints -otsikkoja tuetaan tällä hetkellä vain Google Chromessa versiosta 94 alkaen. Koska early hints on vielä kokeellinen toiminto, Chrome täytyy käynnistää komentorivillä niin sanotulla Chrome Browser Flag -asetuksella. Omassa tapauksessani minun täytyy käynnistää Chrome terminaalista komennolla:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Early hints eivät toimi, kun:

• Early hints lähetetään muusta lähteestä kuin pääkohteesta (HTML)
• Early hints lähetetään iframesta
• Early hints lähetetään HTTP/1.1:llä tai vanhemmalla
• Early hints sisältää dns-prefetch- tai prefetch-vihjeen

Early hints toimii vain preload- ja preconnect-resurssivihjeiden kanssa, kun ne lähetetään pääsivulta HTTP2- tai HTTP/3-protokollan kautta. Early hints -otsikoita ei saa välittää esimerkiksi kuvasta tai iframesta.

Miltä 103 early hints näyttävät?

103 early hints -otsikoiden käyttöönoton jälkeen, heti kun selain pyytää verkkosivua, 103 early hints -otsikko palautetaan välittömästi. Esimerkiksi tämä otsikko ilmoittaa, että image.webp ja style.css tulisi esihakea.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Sillä välin palvelin voi alkaa muodostaa 'todellista' HTTP-vastausta. Dynaamisilla sivuilla tämä saattaa kestää hetken. Kun palvelin on valmis lähettämään sen, lopullinen vastaus lähetetään.

HTTP/1.1 200 OK
Date: Thurs, 16 Sept 2021 11:30:00 GMT
Content-Length: 1234
[the rest of the response]

103 early hints -otsikoiden lähettäminen

PageSpeed-suorituskyvyn kannalta nopein tapa lähettää 103 early hints on oman palvelimen kautta. Käytä tätä opasta 103 early hints -otsikoiden määrittämiseen itse Apache-verkkopalvelimella tai kokeellisen NGINX-moduulin kautta. 103 early hints -otsikoiden käyttöönotto ei ole helppoa, eivätkä ne vielä integroidu hyvin suosittuihin sisällönhallintajärjestelmiin kuten WordPress.

Siksi helpoin tapa ottaa early hints käyttöön juuri nyt on Cloudflaren kautta. Rekisteröidy early hint -palveluun. Kun sinut on hyväksytty, siirry kohtaan 'Speed' -> 'Optimization' ja aktivoi Early Hints

Cloudflare vastaanottaa resurssivihjeotsikot ja muuntaa ne 103 early resource -otsikoiksi. Voit yksinkertaisesti lähettää early hint -vihjeen lähettämällä preload- tai preconnect-otsikon. Cloudflare muuntaa tämän sitten 103 early hint -otsikoksi.
PHP:llä ja Cloudflarella 103 early hints voidaan lähettää tällä koodilla:

header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false);

Lighthouse-tulokset 103 early hints -otsikoille

Tärkein kysymys on tietenkin: "Mitä 103 early resource tarkoittaa Core Web Vitals -tuloksilleni?" Olen testannut kaksi yleistä skenaariota.

1. Early resource hint LCP-elementille

Heti ensimmäisen testin jälkeen huomasin, kuinka tehokkaita early hints voivat olla. LCP-elementti (kuva) ilmestyi näytölle 35 % aikaisemmin kuin ilman 103 early hints -otsikkoa.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image

Vain preload

103 Early hints

2. Early resource hint suurella tyylitiedostolla ja LCP-elementillä

Toisessa testissä lisäsin sivulle 85 kt:n CSS-tiedoston. Ero Core Web Vitals -tuloksissa on vieläkin huomattavampi. First Contentful Paint (FCP) parani 1,8 sekunnista 1,4 sekuntiin ja Largest Contentful Paint (LCP) parani 3,2 sekunnista vain 2 sekuntiin.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Vain preload

103 Early hints