103 Early hints

103 - early hints nedir?

Tarayıcı 103 - early hints'i nasıl kullanır?

Early hints şu anda yalnızca 94. sürümden itibaren Google Chrome tarafından desteklenmektedir. Early hints hâlâ deneysel bir özellik olduğundan, Chrome'u komut satırından Chrome Browser Flag adı verilen bir parametre ile başlatmanız gerekir. Benim durumumda Chrome'u terminalden şu komutla başlatmam gerekiyor:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Early hints şu durumlarda çalışmaz:

• Ana kaynak (HTML) dışında bir kaynaktan early hints gönderildiğinde
• Early Hints bir iframe'den gönderildiğinde
• Early hints HTTP/1.1 veya daha eski bir protokolle gönderildiğinde
• Early hints bir dns-prefetch veya prefetch ipucu içerdiğinde

Early hints yalnızca ana belgeden HTTP2 veya HTTP/3 üzerinden gönderildiğinde preload ve preconnect kaynak ipuçları için çalışır. Early hints başlığının örneğin bir görsel veya iframe'den gönderilmesine izin verilmez.

103 early hints neye benzer?

103 early hints uygulandıktan sonra, bir tarayıcı web sayfası istediği anda 103 early hints başlığı anında döndürülür. Örneğin bu başlık, image.webp ve style.css dosyalarının önceden yüklenmesi gerektiğini belirtir.

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

Bu sırada sunucu 'gerçek' HTTP yanıtını oluşturmaya başlayabilir. Dinamik sayfalar için bu biraz zaman alabilir. Sunucu hazır olduktan sonra nihai yanıt gönderilir.

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 gönderme

PageSpeed açısından 103 early hints göndermenin en hızlı yolu kendi sunucunuz üzerinden yapmaktır. 103 early hints'i kendiniz kurmak için Apache web sunucusu veya deneysel NGINX modülü kılavuzunu kullanın. 103 early hints'i etkinleştirmek kolay değildir ve early hints henüz WordPress gibi popüler CMS'lerle iyi entegre olmamaktadır.

Bu nedenle şu anda early hints'i etkinleştirmenin en kolay yolu Cloudflare üzerinden yapmaktır. Early hints için kaydolun. Kabul edildikten sonra 'Speed' -> 'Optimization' bölümüne gidin ve Early Hints'i etkinleştirin

Cloudflare, kaynak ipucu başlıklarını kabul eder ve bunları 103 early resource başlığına dönüştürür. Bir preload veya preconnect başlığı göndererek kolayca early hint gönderebilirsiniz. Cloudflare bunu 103 early hint başlığına çevirir.
PHP ve Cloudflare ile 103 early hints şu kodla gönderilebilir:

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

103 early hints için Lighthouse sonuçları

En önemli soru elbette şudur: "103 early resource, Core Web Vitals'ım için ne anlama geliyor?" 2 yaygın senaryoyu test ettim.

1. LCP öğesi üzerinde early resource hint

İlk testin hemen ardından early hints'in ne kadar etkili olabileceğini fark ettim. LCP öğesi (bir görsel), 103 early hints başlığı olmadan ekrana %35 daha erken belirdi.

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

2. Büyük bir stil dosyası ve LCP öğesi ile early resource hint

İkinci test için sayfaya 85kb'lık bir CSS dosyası ekledim. Core Web Vitals sonuçlarındaki fark çok daha belirgin. First Contentful Paint (FCP) 1,8 saniyeden 1,4 saniyeye iyileşti ve Largest Contentful Paint (LCP) 3,2 saniyeden yalnızca 2 saniyeye düştü.

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