Erken İpuçları ile sunucu düşünme zamanı sayesinde sayfalar daha hızlı yüklenir

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 süresi", 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.

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ı güçlendirmek için bu ipuçlarını kullanabilir ve alt kaynaklar isteyebilir. Diğer bir deyişle, Erken İpuçları önceden bazı işlemler yaparak tarayıcının bu tür "sunucu düşünme süresinden" yararlanmasına yardımcı olarak sayfa yüklemelerini hızlandırır.

Bazı durumlarda, Largest Contentful Paint performansındaki iyileşme, Shopify ve Cloudflare'in gözlemlediği gibi birkaç yüz milisaniye sürebilir. Öncesi ve sonrası karşılaştırmasında görüldüğü gibi bir saniyeye kadar daha hızlı olabilir:

İ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:

Önceden yükleme desteği:

Chrome Geliştirici Araçları ayrıca 103 Erken İpucu desteği sunar. Link başlıkları, belge kaynaklarında görülebilir:

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:

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:

• Cloudflare'de İlk İpuçları
• Fastly için Erken İpuçları.
• Akai'de Erken İpuçları.

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 nth 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 ve preload desteklenir (yani prefetch desteklenmez).
• İlk İpuçları ve ardından nihai 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).

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.

Sonraki adım

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 farklılıklarını 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 önemli bir yapısal olumsuzluğa yol açtı: HTTP2/Push ile tarayıcının sahip olduğu alt kaynakları itmekten kaçınmak son derece zordu. Bu "aşırı itme" etkisi, ağ bant genişliğinin daha az verimli bir şekilde kullanılmasına yol açtı. Bu da performans faydalarını önemli ölçüde azalttı. 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.