Sunucunuzun önemli alt kaynaklarla ilgili olarak tarayıcıya nasıl ipuçları gönderebileceğini öğrenin.
İlk İpuçları nedir?
Web siteleri zaman içinde daha gelişmiş hale geldi. Bu nedenle, istenen sayfa için HTML oluşturmak üzere bir sunucunun önemsiz işler (örneğin, veritabanlarına erişim veya kaynak sunucuya erişen CDN'ler) gerçekleştirmesi normaldir. Maalesef bu "sunucu düşünme zamanı" Bu da tarayıcının sayfayı oluşturmaya başlamasından önce fazladan gecikmeye neden olur. Gerçekten de bağlantı, sunucu yanıtı hazırladığı sürece etkin bir şekilde boşta kalır.
![Sunucunun, sayfanın yüklenmesi ile diğer kaynakların yüklenmesi arasındaki 200 ms'lik zaman aralığını gösteren resim.](https://developer.chrome.google.cn/static/docs/web-platform/early-hints/image/image-showing-server-tim-c6a1c47529e9f.png?authuser=5&hl=tr)
Erken İpuçları, son yanıttan önce ön HTTP yanıtı göndermek için kullanılan bir HTTP durum kodudur (103 Early Hints
). Bu, sunucunun ana kaynağı oluşturmakla meşgulken önemli alt kaynaklar (örneğin, sayfa için stil sayfaları, kritik JavaScript) veya sayfa tarafından kullanılması muhtemel kaynaklar hakkında tarayıcıya ipuçları göndermesine olanak tanır. Tarayıcı, ana kaynağı beklerken bağlantıları ısıtmak için bu ipuçlarını kullanabilir ve alt kaynaklar isteyebilir. Diğer bir deyişle, Erken İpuçları, tarayıcının bu tür "sunucu düşünme zamanından" yararlanmasına yardımcı olur. değiştirerek sayfa yüklemelerini hızlandırabilir.
![Erken İpuçlarının sayfanın kısmi bir yanıt göndermesine nasıl olanak sağladığını gösteren resim.](https://developer.chrome.google.cn/static/docs/web-platform/early-hints/image/image-showing-early-hint-8adb7fe696e4f.png?authuser=5&hl=tr)
Bazı durumlarda, Largest Contentful Paint performansındaki iyileşme, Shopify ve Cloudflare'in gözlemlediği gibi birkaç yüz milisaniye sürebilir ve öncesinde ve sonrasında gösterildiği üzere bir saniyeye kadar daha hızlı olabilir:
![İki sitenin karşılaştırması.](https://developer.chrome.google.cn/static/docs/web-platform/early-hints/image/comparison-two-sites-157e25c61058d.jpg?authuser=5&hl=tr)
İlk ipuçları nasıl kullanılır?
Erken İpuçlarından yararlanmanın ilk adımı, en iyi açılış sayfalarını, yani kullanıcılarınızın web sitenizi ziyaret ettiklerinde genellikle geldikleri 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 gezinirken Erken İpuçları'nın faydasının azalmasıdır (yani, tarayıcının sonraki ikinci veya üçüncü gezinme sırasında ihtiyaç duyduğu tüm alt kaynaklara sahip olma ihtimali daha yüksektir). Muhteşem bir ilk izlenim yaratmak da her zaman iyi bir fikirdir.
Bu öncelikli açılış sayfaları listesine sahip olduğunuza göre, bir sonraki adımda preconnect
veya preload
ipuçları için hangi kaynakların veya alt kaynakların iyi aday olacağını belirleyebilirsiniz. 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 somut olmak gerekirse eşzamanlı JavaScript, stil sayfaları, hatta web yazı tipleri gibi oluşturma engelleyici alt kaynakları arayın. Benzer şekilde, temel kullanıcı metriklerine büyük ölçüde katkıda bulunan alt kaynakları barındıran kaynakları arayın.
Ayrıca, ana kaynaklarınızda preconnect
veya preload
kullanılıyorsa Erken İpuçlarına adaylar arasında bu kaynakları ya da kaynakları göz önünde bulundurabilirsiniz. Daha fazla ayrıntı için LCP'yi nasıl optimize edeceğinizi öğrenin. Bununla birlikte, preconnect
ve preload
yönergelerini HTML'den Erken İpuçlarına kopyalamak en uygun seçenek olmayabilir.
Bunları HTML'de kullanırken genellikle Önceden Yükleme Tarayıcısı'nın HTML'de bulamayacağı preconnect
veya preload
kaynaklarını (örneğin, aksi halde geç keşfedilebilecek yazı tipleri veya arka plan resimleri) kullanmak istersiniz. Erken İpuçları için HTML'ye sahip olmadığınızdan bunun yerine, main.css
veya app.js
gibi önceden yükleme gibi HTML'nin başlarında keşfedilebilecek önemli alanlara preconnect
veya preload
kritik kaynaklara preconnect
uygulamak isteyebilirsiniz. Ayrıca, tüm tarayıcılar Erken İpuçları için preload
özelliğini desteklemez. Tarayıcı Desteği'ne bakın.
İkinci adım, eski olabilecek veya artık ana kaynak tarafından kullanılmayan kaynaklar veya kaynaklarda Erken İpuçlarının kullanılması riskini en aza indirmektir. Örneğin, sık güncellenen ve sürümü oluşturulan kaynaklar (ör. example.com/css/main.fa231e9c.css
) en iyi seçenek olmayabilir. Bu sorunun Erken İpuçlarına özel olmadığını, bulunduğu tüm preload
veya preconnect
için geçerli olduğunu unutmayın. Bu, otomasyon veya şablon oluşturma için en uygun ayrıntı türüdür (örneğin, manuel bir işlem, preload
ile kaynağı kullanan asıl HTML etiketi arasında karma veya sürüm URL'lerinin eşleşmemesine yol açar).
Örnek olarak aşağıdaki akışı ele alalım:
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
Sunucu main.abcd100.css
gerekli olacağını tahmin eder ve Erken İpuçlarını kullanarak önceden yüklenmesini önerir:
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
Birkaç dakika sonra, bağlantılı CSS ile birlikte web sayfası sunulur. Maalesef bu CSS kaynağı sık sık güncellenir ve ana kaynak zaten tahmin edilen CSS kaynağının (abcd100
) beş sürümü (abcd105
) ilerisindedir.
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
Genel olarak, oldukça istikrarlı ve ana kaynağın sonucundan büyük ölçüde bağımsız olan kaynakları ve kaynakları hedefleyin. Gerekirse önemli kaynaklarınızı ikiye bölebilirsiniz: İlk İpuçlarıyla kullanılmak üzere tasarlanmış sabit bir bölüm ve ana kaynak tarayıcı tarafından alındıktan sonra getirilecek daha dinamik bir bölüm kalmıştır:
<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 bulun ve 103 Erken İpucu ile hemen yanıt verin. 103 yanıtına, ilgili önceden bağlanma ve önceden yükleme ipuçlarını ekleyin. Ana kaynak hazır olduğunda, her zamanki yanıtı (örneğin, başarılıysa 200 OK) üzerinden devam edin. Geriye dönük uyumluluk için son yanıta Link
HTTP üstbilgilerini de eklemek iyi bir uygulamadır. Hatta bazen ana kaynağı oluştururken belirgin hale gelen kritik kaynaklarla (örneğin, "ikiye böl" önerisini uyguladıysanız önemli kaynağın dinamik parçası) artırmak bile iyi bir uygulama olabilir. Bu bağlantı 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 İpuçları tüm önemli tarayıcılarda desteklense de, Erken İpucunda gönderilebilecek yönergeler her tarayıcı için farklıdır:
Önceden bağlanma desteği:
Tarayıcı Desteği
- 103
- 103
- 120
- 17
Önceden yükleme desteği:
Tarayıcı Desteği
- 103
- 103
- 123
- x
Chrome Geliştirici Araçları ayrıca 103 Erken İpucu desteği sunar. Link
başlıkları, belge kaynaklarında görülebilir:
![İlk İpuçları Başlıklarının gösterildiği ağ paneli](https://developer.chrome.google.cn/static/docs/web-platform/early-hints/image/early-hint-headers.png?authuser=5&hl=tr)
Link
başlıkları, Chrome Geliştirici Araçları'nda gösteriliyor.Erken İpuçları, tarayıcı önbelleğini kullandığından Erken İpuçları kaynaklarını kullanmak için Geliştirici Araçları'nda Disable cache
işaretlenmemelidir. Önceden yüklenmiş kaynaklar için başlatan early-hints
, boyut ise (Disk cache)
olarak gösterilir:
![İlk İpuçlarını başlatanların gösterildiği ağ paneli](https://developer.chrome.google.cn/static/docs/web-platform/early-hints/image/early-hint-initiators.png?authuser=5&hl=tr)
early-hints
başlatıcı bulunur ve bu kaynaklar disk önbelleğinden yüklenir.Bu işlem ayrıca HTTPS testi için güvenilir bir sertifika gerektirir.
Firefox (v126 sürümünden itibaren), Geliştirici Araçları'nda açık bir 103 Erken İpuçları desteği sunmaz ancak İlk İpuçları kullanılarak yüklenen kaynaklarda HTTP Üstbilgisi bilgileri gösterilmez. Bu, Erken İpuçları üzerinden yüklendiklerinin bir göstergesidir.
Sunucu desteği
Popüler açık kaynak yazılım HTTP sunucu yazılımı arasında Erken İpuçları destek düzeyinin kısa bir özetini aşağıda bulabilirsiniz:
- Apache: mod_http2 kullanılarak desteklenir.
- H2O: desteklenir.
- NGINX: deneysel modül.
- Düğüm: 18.11.0'dan itibaren http ve http2 için desteklenmektedir
İlk İpuçlarını daha kolay şekilde etkinleştirin
Aşağıdaki CDN'lerden veya platformlardan birini kullanıyorsanız Erken İpuçlarını manuel olarak uygulamanız gerekmeyebilir. İlk İpuçlarını destekleyip desteklemediğini öğrenmek için çözüm sağlayıcınızın online belgelerine bakın veya buradaki olası her örneğe yer verilmemiş olan listeyi inceleyin:
Erken İpuçları'nı desteklemeyen istemciler için sorunları önleme
100 aralığındaki bilgilendirme amaçlı HTTP yanıtları, HTTP standardının bir parçasıdır. Ancak, 103 Erken İpuçlarının kullanıma sunulmasından önce genel web'e göz atmak için nadiren kullanıldıklarından bazı eski istemciler veya botlar bu konuda zorluk yaşayabilir.
Yalnızca sec-fetch-mode: navigate
HTTP istek başlığı gönderen istemcilere yanıt olarak 103 Erken İpucu göndermek, bu tür ipuçlarının yalnızca sonraki yanıtı beklemeyi anlayan yeni istemcilere gönderilmesini sağlayacaktır. Ayrıca Erken İpuçları yalnızca gezinme isteklerinde desteklendiğinden (mevcut sınırlamalara bakın), bu sayede bunları başka isteklerde gereksiz yere göndermekten kaçınmış olursunuz.
Ayrıca, İlk İpuçlarının yalnızca HTTP/2 veya HTTP/3 bağlantıları üzerinden gönderilmesi önerilir ve çoğu tarayıcı, bunları yalnızca bu protokoller üzerinden kabul eder.
Gelişmiş desen
İlk İpuçlarını önemli açılış sayfalarınıza tümüyle uyguladıysanız ve daha fazla fırsat arıyorsanız aşağıdaki gelişmiş şablon ilginizi çekebilir.
Tipik bir kullanıcı yolculuğunun bir parçası olarak n. sayfa isteğinde bulunan ziyaretçiler için Erken İpuçları yanıtını sayfada daha az ve daha derinde yer alan içeriğe uyarlamak, başka bir deyişle daha düşük öncelikli kaynaklarda Erken İpuçları'nı kullanmak isteyebilirsiniz. Yüksek öncelikli, oluşturma engelleyici alt kaynaklara veya kaynaklara odaklanmanızı önerdiğimiz için bu kulağa mantıklı gelmeyebilir. Ancak, bir ziyaretçi sitede bir süre gezindiğinde, muhtemelen tarayıcısında tüm kritik kaynaklar zaten hazır olacaktır. Bu noktadan sonra dikkatinizi daha düşük öncelikli kaynaklara yönlendirmek mantıklı olabilir. Örneğin bu, ürün resimlerini yüklemek için Erken İpuçlarının veya yalnızca daha seyrek görülen kullanıcı etkileşimleri için gerekli olan ek JS/CSS'nin kullanılması anlamına gelebilir.
Mevcut sınırlamalar
Chrome'da uygulanan Erken İpuçları ile ilgili sınırlamalar şunlardır:
- Yalnızca gezinme istekleri (yani üst düzey dokümanın ana kaynağı) için kullanılabilir.
- Yalnızca
preconnect
vepreload
desteklenir (yaniprefetch
desteklenmez). - İlk İpuçları ve ardından son yanıtta kaynaklar arası yönlendirme, Chrome'un Erken İpuçlarını kullanarak edindiği kaynakları ve bağlantıları bırakmasına neden olur.
- Erken İpuçları kullanılarak önceden yüklenen kaynaklar, HTTP önbelleğinde depolanır ve daha sonra sayfa tarafından buradan alınır. Bu nedenle, yalnızca önbelleğe alınabilir kaynaklar Erken İpuçları kullanılarak önceden yüklenebilir. Aksi takdirde kaynak iki kez getirilir (bir kez İlk İpuçları ve bir kez daha belge tarafından). Chrome'da, güvenilir olmayan HTTPS sertifikaları için HTTP önbelleği devre dışı bırakılır (sayfayı yükleseniz bile).
- Doküman oluşturulana kadar görüntü alanı tanımlanmadığından, duyarlı resimlerin (
imagesrcset
,imagesizes
veyamedia
kullanılarak) önceden yüklenmesi HTTP<link>
başlıklarının kullanılması desteklenmez. Bu nedenle, 103 Erken ipuçları duyarlı resimleri önceden yüklemek için kullanılamaz ve bunun için kullanıldığında yanlış resmi yükleyebilir. Bunun daha iyi nasıl ele alınacağına ilişkin teklifler hakkındaki bu tartışmayı takip edin.
Diğer tarayıcılarda da benzer sınırlamalar bulunur ve daha önce belirtildiği gibi bazı tarayıcılarda 103 erken ipucu yalnızca preconnect
ile kısıtlanır.
Sırada ne var?
Topluluğun gösterdiği ilgiye bağlı olarak, Erken İpuçları uygulamamızı aşağıdaki özelliklerle geliştirebiliriz:
- HTTP önbelleği yerine bellek önbelleğini kullanan önbelleğe alınamayan kaynaklar için ilk ipuçları.
- Alt kaynak isteklerinde erken ipuçları gönderilir.
- iframe ana kaynak isteklerinde gönderilen erken ipuçları.
- İlk İpuçlarında önceden getirme desteği.
Hangi konulara öncelik vermeniz gerektiği ve Erken İpuçlarını nasıl daha iyi hale getirebileceğimizle ilgili görüşlerinizi almaktan memnuniyet duyarız.
H2/Push ilişkisi
Desteği sonlandırılan HTTP2/Push özelliği hakkında bilginiz varsa Erken İpuçlarının nasıl farklılık gösterdiğini merak ediyor olabilirsiniz. Erken İpuçları, tarayıcının kritik alt kaynakları getirmeye başlaması için gidiş dönüş gerektirir. Ancak HTTP2/Push ile sunucu, yanıtla birlikte alt kaynakları aktarmaya başlayabilir. Bu olağanüstü bir şey gibi görünse de bu durum yapısal bir olumsuzluğa neden oldu: HTTP2/Push ile tarayıcının sahip olduğu alt kaynakları itmekten kaçınmak son derece zordu. Bu “aşırı itici" ağ bant genişliğinin daha az verimli kullanılmasına neden olarak performansta önemli oranda düşüş yaşanmıştır. Genel olarak Chrome verileri, HTTP2/Push'un aslında web genelindeki performans açısından net bir olumsuzluk olduğunu gösterdi.
Buna karşın Erken İpuçları, ön yanıt gönderme yeteneğini tarayıcının gerçekten ihtiyaç duyduğu şeyi getirme veya ona bağlanma işlemlerinden sorumlu tutacak ipuçlarıyla birleştirdiği için pratikte daha iyi performans gösterir. İlk İpuçları, HTTP2/Push'un teoride ele alabileceği tüm kullanım alanlarını kapsamasa da Erken İpuçları'nın gezinmeyi hızlandırmak için daha pratik bir çözüm olduğuna inanıyoruz.
Küçük resim: Pierre Bamin.