103 Early hints

Czym są 103 - early hints?

Jak przeglądarka wykorzystuje 103 - early hints?

Early hints są obecnie obsługiwane tylko przez Google Chrome od wersji 94. Ponieważ early hints to wciąż eksperymentalna funkcja, musisz uruchomić Chrome z tak zwaną flagą przeglądarki Chrome z wiersza poleceń. W moim przypadku muszę uruchomić Chrome z terminala poleceniem:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Early hints nie działają, gdy:

• Early hints są wysyłane ze źródła innego niż główny dokument (HTML)
• Early Hints są wysyłane z iframe
• Early hints są wysyłane za pomocą HTTP/1.1 lub starszego protokołu
• Early hints zawierają wskazówkę dns-prefetch lub prefetch

Early hints będą działać tylko dla wskazówek zasobów preload i preconnect, gdy są wysyłane z głównego dokumentu przez HTTP2 lub HTTP/3. Nie jest dozwolone przekazywanie nagłówka early hints na przykład z obrazu lub iframe.

Jak wyglądają 103 early hints?

Po zaimplementowaniu 103 early hints, gdy tylko przeglądarka zażąda strony internetowej, natychmiast zwracany jest nagłówek 103 early hints. Na przykład ten nagłówek wskazuje, że image.webp i style.css powinny zostać wstępnie załadowane.

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

W międzyczasie serwer może rozpocząć generowanie „prawdziwej” odpowiedzi HTTP. W przypadku dynamicznych stron może to zająć trochę czasu. Gdy serwer jest gotowy do wysłania, wysyłana jest ostateczna odpowiedź.

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

Wysyłanie 103 early hints

Pod względem PageSpeed najszybszym podejściem do wysyłania 103 early hints jest własny serwer. Skorzystaj z tego przewodnika, aby samodzielnie skonfigurować 103 early hints na serwerze Apache lub za pomocą eksperymentalnego modułu NGINX. Włączenie 103 early hints nie jest łatwe, a early hints nie integrują się jeszcze dobrze z popularnymi systemami CMS, takimi jak WordPress.

Dlatego najłatwiejszym sposobem na aktywację early hints w tej chwili jest Cloudflare. Zarejestruj się do programu early hints. Po przyjęciu przejdź do 'Speed' -> 'Optimization i aktywuj Early Hints

Cloudflare zaakceptuje nagłówki resource hint i przekształci je w nagłówek 103 early resource. Możesz po prostu wysłać early hint, wysyłając nagłówek preload lub preconnect. Cloudflare następnie przekształca to w nagłówek 103 early hint.
Za pomocą PHP i Cloudflare 103 early hints można wysłać tym kodem:

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

Wyniki Lighthouse dla 103 early hints

Najważniejsze pytanie brzmi oczywiście: "Co oznacza 103 early resource dla moich Core Web Vitals?" Przetestowałem 2 typowe scenariusze.

1. Early resource hint dla elementu LCP

Natychmiast po pierwszym teście zauważyłem, jak skuteczne mogą być early hints. Element LCP (obraz) pojawił się na ekranie o 35% wcześniej niż bez nagłówka 103 early hints.

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

Tylko preloading

103 Early hints

2. Early resource hint z dużym arkuszem stylów i elementem LCP

W drugim teście dodałem plik CSS o rozmiarze 85 kb do strony. Różnica w wynikach Core Web Vitals jest jeszcze bardziej zauważalna. First Contentful Paint (FCP) poprawił się z 1,8 sekundy do 1,4 sekundy, a Largest Contentful Paint (LCP) poprawił się z 3,2 sekundy do zaledwie 2 sekund.

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

Tylko preloading

103 Early hints