Sunucunuzun tarayıcıya kritik alt kaynaklarla ilgili ipuçları nasıl gönderebileceğini öğrenin.
Yayınlanma tarihi: 23 Haziran 2022, Son güncelleme: 27 Haziran 2025
Erken ipuçları nedir?
Web siteleri zaman içinde daha karmaşık hale geldi. Bu nedenle, bir sunucunun istenen sayfanın HTML'sini oluşturmak için basit olmayan işlemler (ör. veritabanlarına erişim veya kaynak sunucuya erişen CDN'ler) yapması normaldir. Maalesef bu "sunucu düşünme süresi", tarayıcı sayfayı oluşturmaya başlamadan önce ek gecikmeye neden olur. Aslında, sunucunun yanıtı hazırlaması kadar bağlantı etkin bir şekilde boşta kalır.
Erken İpuçları, nihai yanıttan önce ön bir HTTP yanıtı göndermek için kullanılan bir HTTP durum kodudur (103 Early Hints). Bu sayede sunucu, ana kaynağı oluşturmakla meşgulken tarayıcıya kritik alt kaynaklar (ör. sayfanın stil sayfaları, kritik JavaScript) veya sayfa tarafından büyük olasılıkla kullanılacak kaynaklar hakkında ipuçları gönderebilir. Tarayıcı, ana kaynağı beklerken bağlantıları ısıtmak ve alt kaynakları istemek için bu ipuçlarını kullanabilir. Diğer bir deyişle, erken ipuçları, tarayıcının bazı işlemleri önceden yaparak bu tür "sunucu düşünme süresinden" yararlanmasına yardımcı olur ve böylece sayfa yüklemelerini hızlandırır.
Bazı durumlarda, Largest Contentful Paint'te elde edilen performans artışı Shopify ve Cloudflare tarafından gözlemlendiği üzere birkaç yüz milisaniyeden bir saniyeye kadar çıkabilir. Bu karşılaştırmada da görüldüğü gibi:
Erken ipuçları nasıl kullanılır?
Erken İpuçları'ndan yararlanmanın ilk adımı, en başarılı açılış sayfalarını yani kullanıcılarınızın web sitenizi ziyaret ettiğinde genellikle başladıkları sayfaları belirlemektir. Bu, ana sayfa veya diğer web sitelerinden gelen çok sayıda kullanıcınız varsa popüler ürün listeleme sayfaları olabilir. Bu giriş noktalarının diğer sayfalardan daha önemli olmasının nedeni, kullanıcı web sitenizde gezindikçe Erken İpuçları'nın yararlılığının azalması (yani, tarayıcı ikinci veya üçüncü gezinme sırasında ihtiyaç duyduğu tüm alt kaynaklara sahip olma olasılığı daha yüksektir). Mükemmel bir ilk izlenim bırakmak da her zaman iyi bir fikirdir.
Açılış sayfalarının öncelikli listesine sahip olduğunuza göre, bir sonraki adımda preconnect veya preload ipuçları için iyi adayların hangi kaynaklar veya alt kaynaklar olduğunu belirlemeniz gerekir. Bunlar genellikle Largest Contentful Paint veya First Contentful Paint gibi temel kullanıcı metriklerine en çok katkıda bulunan kaynaklar ve alt kaynaklardır. Daha net bir ifadeyle, eşzamanlı JavaScript, stil sayfaları ve hatta web yazı tipleri gibi oluşturmayı engelleyen alt kaynakları arayın. Benzer şekilde, önemli kullanıcı metriklerine çok fazla katkıda bulunan alt kaynakları barındıran kaynakları arayın.
Ayrıca, ana kaynaklarınız zaten preconnect veya preload kullanıyorsa bu kaynakları erken ipuçları için adaylar arasında değerlendirebileceğinizi unutmayın. Daha fazla bilgi için LCP'yi optimize etme başlıklı makaleyi inceleyin. Ancak preconnect ve preload yönergelerini HTML'den Early Hints'a kopyalamak optimum olmayabilir.
Bunları HTML'de kullanırken genellikle önyükleme tarayıcısının HTML'de keşfetmeyeceği kaynakları (ör. normalde geç keşfedilecek yazı tipleri veya arka plan resimleri) preconnect veya preload etmek istersiniz. Erken ipuçları için HTML'niz olmaz. Bu nedenle, kritik alanlara veya olası başka bir durumda HTML'nin başlarında keşfedilecek kritik kaynaklara preconnect yapmak isteyebilirsiniz. Örneğin, main.css veya app.js'i önceden yükleyebilirsiniz. Ayrıca, tüm tarayıcılar erken ipuçları için preload'yi desteklemez. Tarayıcı desteği bölümüne bakın.preload
İkinci adım, eski veya artık ana kaynak tarafından kullanılmayan kaynaklarda veya kaynaklarda Erken İpuçları kullanma riskini en aza indirmekten oluşur. Örneğin, sık sık güncellenen ve sürümlendirilen kaynaklar (ör. example.com/css/main.fa231e9c.css) en iyi seçenek olmayabilir. Bu sorunun Erken İpuçları'na özel olmadığını, nerede olursa olsun tüm preload veya preconnect için geçerli olduğunu unutmayın. Bu tür ayrıntılar, otomasyon veya şablonlama ile en iyi şekilde ele alınır (örneğin, manuel bir işlemle preload ile kaynağı kullanan gerçek HTML etiketi arasında eşleşmeyen karma veya sürüm URL'leri oluşma olasılığı daha yüksektir).
Örneğin, aşağıdaki akışı ele alalım:
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
Sunucu, main.abcd100.css'e ihtiyaç duyulacağını tahmin eder ve Erken İpuçları'nı kullanarak bu öğeyi önceden yüklemeyi önerir:
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
Birkaç dakika sonra, bağlı CSS dahil olmak üzere web sayfası yayınlanır. Maalesef bu CSS kaynağı sık sık güncellenmektedir ve ana kaynak, tahmin edilen CSS kaynağından (abcd100) beş sürüm ileridedir (abcd105).
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
Genel olarak, oldukça kararlı ve büyük ölçüde ana kaynağın sonucundan bağımsız kaynaklar ve kökenler kullanmayı hedefleyin. Gerekirse temel kaynaklarınızı ikiye ayırabilirsiniz: Erken İpuçları ile kullanılmak üzere tasarlanmış kararlı bir bölüm ve ana kaynak tarayıcı tarafından alındıktan sonra getirilecek daha dinamik bir bölüm:
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
Son olarak, sunucu tarafında, Erken İpuçları'nı desteklediği bilinen tarayıcılar tarafından gönderilen ana kaynak isteklerini arayın ve 103 Erken İpucu ile hemen yanıt verin. 103 yanıtına ilgili ön bağlantı ve ön yükleme ipuçları ekleyin. Ana kaynak hazır olduğunda, normal yanıtı (örneğin, başarılıysa 200 OK) gönderin. Geriye dönük uyumluluk için nihai yanıta Link HTTP üstbilgileri de eklemek iyi bir uygulamadır. Hatta ana kaynağın oluşturulması sırasında ortaya çıkan kritik kaynaklarla (ör. "ikiye bölme" önerisini uyguladıysanız önemli bir kaynağın dinamik kısmı) bu üstbilgileri destekleyebilirsiniz. Bu durum aşağıdaki gibi görünür:
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Birkaç dakika sonra:
200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
<script src="/common.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
Tarayıcı desteği
103 Erken İpucu tüm büyük tarayıcılarda desteklenir ancak Erken İpucu'nda gönderilebilecek yönergeler tarayıcıya göre değişiklik gösterir:
Önceden bağlantı desteği:
Browser Support