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

Sunucunuzun, tarayıcıya kritik alt kaynaklar hakkında nasıl ipuçları gönderebileceğini öğrenin.

Erken İpuçları nedir?

Web siteleri zaman içinde daha sofistike hale geldi. Bu nedenle, bir sunucunun, istenen sayfa için HTML oluşturmak üzere önemsiz olmayan işler (örneğin, veritabanlarına erişim veya kaynak sunucuya erişen CDN'ler) gerçekleştirmesi olağan dışı bir durum değildir. Ne yazık ki bu "sunucu düşünme zamanı", tarayıcı sayfayı oluşturmaya başlamadan önce fazladan gecikmeye neden olur. Gerçekten de bağlantı, sunucunun yanıtı hazırlaması için gerektiği sürece boşta kalır.

Erken İpuçları, nihai yanıttan önce ön HTTP yanıtı göndermek için kullanılan bir HTTP durum kodudur (103 Early Hints). Böylece sunucu, ana kaynağı oluşturmakla meşgulken tarayıcıya önemli alt kaynaklar (örneğin, sayfa için stil sayfaları, kritik JavaScript) veya sayfa tarafından kullanılması muhtemel kaynaklar hakkında ipuçları gönderebilir. Tarayıcı, ana kaynağı beklerken bu ipuçlarını kullanarak bağlantıları ısıtabilir ve alt kaynaklar isteyebilir. Diğer bir deyişle, Erken İpuçları, önceden biraz çalışma yaparak tarayıcının bu tür "sunucu düşünme zamanından" yararlanmasına yardımcı olur ve böylece sayfa yüklemelerini hızlandırır.

Bazı durumlarda, Largest Contentful Paint'teki performans iyileştirmesi, Shopify ve Cloudflare tarafından gözlemlendiği gibi birkaç yüz milisaniye sürebilir. Önceki ve sonraki karşılaştırmalarda görüldüğü gibi, bu süre bir saniyeye kadar uzayabilir:

Erken İpuçları'nı kullanma

Erken İpuçları'ndan yararlanmanın ilk adımı, en iyi açılış sayfalarını, diğer bir deyişle kullanıcılarınızın genellikle web sitenizi ziyaret ettiklerinde 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 gezinirken Erken İpuçlarının fayda düzeyinin azalmasıdır (yani, tarayıcının ihtiyaç duyduğu tüm alt kaynaklara sonraki ikinci veya üçüncü gezinmede sahip olma olasılığı daha yüksektir). Ayrıca harika bir ilk izlenim bırakmak her zaman iyi bir fikirdir.

Bu öncelikli açılış sayfaları listesine sahip olduğunuza göre bir sonraki adım, hangi kaynakların veya alt kaynakların preconnect veya preload ipuçları için uygun adaylar olduğunu belirlemektir. Bunlar genellikle Largest Contentful Paint veya First Contentful Paint gibi temel kullanıcı metriklerine en fazla katkıda bulunan kaynaklar ve alt kaynaklardır. Daha somut bir şekilde anlatmak gerekirse eşzamanlı JavaScript, stil sayfaları ve hatta web yazı tipleri gibi oluşturmayı engelleyen alt kaynakları arayın. Benzer şekilde, temel kullanıcı metriklerine önemli ölçüde katkı sağlayan alt kaynaklar barındıran kaynakları da araştırın.

Ayrıca, ana kaynaklarınızda preconnect veya preload kullanılıyorsa bu kaynakları veya kaynakları erken ipuçları adayları arasından değerlendirebileceğinizi unutmayın. 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 rastgele kopyalamak ideal olmayabilir.

Bunları HTML'de kullanırken, genellikle Önceden Yükleme Tarayıcısı'nın HTML'de bulamayacağı preconnect veya preload kaynakları (ör. aksi halde daha geç keşfedilebilecek yazı tipleri veya arka plan resimleri) istersiniz. Erken İpuçları için HTML'ye sahip olmadığınızdan bunun yerine, HTML'nin başlarında bulunabilecek kritik alanlara veya preload kritik kaynaklara preconnect (örneğin, main.css veya app.js'ın önceden yüklenmesi) isteyebilirsiniz. Ayrıca, Erken İpuçları için tüm tarayıcılar preload öğesini desteklemez. Tarayıcı Desteği'ne göz atın.

İkinci adım, eski veya artık ana kaynak tarafından kullanılmayan kaynaklar veya kaynaklar için Erken İpuçları'nı kullanma riskini en aza indirmeden oluşur. Örneğin, sık sık güncellenen ve sürümü tutulan kaynaklar (örneğin, example.com/css/main.fa231e9c.css) en iyi seçenek olmayabilir. Bu endişenin Erken İpuçları'na özel olmadığını, tüm preload veya preconnect için geçerli olduğunu unutmayın. Otomasyon veya şablon oluşturma ile en iyi şekilde ilgili olan bu tür ayrıntılardır (örneğin, manuel işlemin, preload ile kaynağı kullanan gerçek HTML etiketi arasında karma veya sürüm URL'lerinin eşleşmemesine yol açma olasılığı daha yüksektir).

Ö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 öğesinin gerekli olacağını tahmin eder ve Erken İpuçlarını kullanarak öğenin önceden yüklenmesini önerir:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Birkaç saniye sonra, bağlı CSS'yi içeren web sayfası sunulur. Maalesef bu CSS kaynağı sık sık güncellenmektedir ve ana kaynak zaten tahmin edilen CSS kaynağının (abcd100) beş sürümü ileride (abcd105).

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 temel kaynaklarınızı ikiye bölebilirsiniz: Erken İpuçları ile 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 kalmalıdı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ı verin (örneğin, başarılıysa 200 OK). Geriye dönük uyumluluk için son yanıta Link HTTP üst bilgilerinin de eklenmesi iyi bir uygulamadır. Hatta ana kaynağı oluşturma işleminin bir parçası olarak belirgin şekilde ortaya çıkan kritik kaynaklarla (örneğin, "ikiye böl" önerisini uyguladıysanız bir anahtar kaynağın dinamik kısmı) bunu artırmak bile iyi bir uygulama olabilir. 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

Kısa bir süre 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ı, başlıca tarayıcıların tümünde desteklense de, Erken İpucu'nda gönderilebilecek yönergeler her tarayıcı için farklılık gösterir:

Önceden bağlanma desteği:

Önceden yükleme desteği:

Chrome Geliştirici Araçları'nda ayrıca 103 Erken İpuçları desteği bulunur.

Sunucu desteği

Popüler açık kaynak yazılım HTTP sunucu yazılımları arasında Erken İpuçları destek düzeyinin kısa bir özetini burada bulabilirsiniz:

• Apache: mod_http2 ile desteklenir.
• H2O: desteklenir.
• NGINX: deneysel modül.
• Düğüm: 18.11.0'dan beri http ve http2 için desteklenir.

Erken İpuçları'nı daha kolay etkinleştirin

Aşağıdaki CDN'lerden veya platformlardan birini kullanıyorsanız Erken İpuçlarını manuel olarak uygulamanız gerekmeyebilir. Erken İ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 duruma yer verilmemiş listeye bakın:

• Cloudflare'de Erken İpuçları
• Fastly'de Erken İpuçları.
• Akamai'de Erken İpuçları.

Erken İpuçları'nı desteklemeyen istemcilerin sorunlarını önleme

100 aralığındaki bilgilendirici HTTP yanıtları HTTP standardının bir parçasıdır, ancak bazı eski istemciler veya bot'lar 103 Erken İpucu'nun kullanıma sunulmasından önce genel web'e göz atma için nadiren kullanıldıklarından bu konuda sorun yaşayabilirler.

Yalnızca sec-fetch-mode: navigate HTTP istek başlığı gönderen istemcilere yanıt olarak 103 Erken İpuçları göndermek, bu tür ipuçlarının yalnızca sonraki yanıtı beklemeyi anlayan yeni istemcilere gönderilmesini sağlamalıdır. Ayrıca, Erken İpuçları yalnızca gezinme isteklerinde desteklendiğinden (mevcut sınırlamalara bakın) bu özellik, bunları diğer isteklerde gereksiz yere göndermekten kaçınma avantajına sahiptir.

Ayrıca, Erken İpuçlarının yalnızca HTTP/2 veya HTTP/3 bağlantıları üzerinden gönderilmesi önerilir.

Gelişmiş desen

Önemli açılış sayfalarınıza Erken İpuçları'nı tamamen uyguladıysanız ve kendinizi daha fazla fırsat bulmaya çalışıyorsanız aşağıdaki gelişmiş model ilginizi çekebilir.

Tipik bir kullanıcı yolculuğu kapsamında nth sayfa isteğinde bulunan ziyaretçiler için Erken İpuçları yanıtını, sayfanın daha alt kısmında bulunan içeriğe uyarlamak, diğer bir deyişle daha düşük öncelikli kaynaklarda Erken İpuçları'nı kullanmak isteyebilirsiniz. Yüksek öncelikli, oluşturmayı engelleyen alt kaynaklara veya kaynaklara odaklanmanızı önerdiğimiz için bu durum kulağa garip gelebilir. Ancak, bir ziyaretçi bir süre gezindiğinde, büyük olasılıkla tarayıcısında tüm kritik kaynaklar zaten vardır. Sonrasında, dikkatinizi daha düşük öncelikli kaynaklara kaydırmak mantıklı olabilir. Örneğin bu, ürün resimlerini yüklemek için Erken İpuçları'nı veya yalnızca yaygın olmayan kullanıcı etkileşimleri için gereken ek JS/CSS'yi kullanmak anlamına gelebilir.

Mevcut sınırlamalar

Chrome'da uygulanan Erken İpuçları ile ilgili sınırlamaları aşağıda bulabilirsiniz:

• 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).
• Erken İpucu ve ardından son yanıtta bir çapraz kaynak yönlendirmesi, Chrome'un Erken İpuçları'nı kullanarak elde ettiği kaynakları ve bağlantıları bırakmasına neden olur.

Diğer tarayıcılarda da benzer sınırlamalar vardır. Bazıları ise 103 erken ipucunu yalnızca preconnect ile daha da kısıtlar.

Sonraki adım

Topluluğun ilgi alanına bağlı olarak, Erken İpuçları uygulamamızı aşağıdaki özelliklerle geliştirebiliriz:

• Alt kaynak isteklerinde gönderilen erken ipuçları.
• iFrame ana kaynak isteklerinde gönderilen Erken İpuçları.
• Erken İpuçları'nda önceden getirme desteği.

Hangi yönlere öncelik verileceği ve Erken İpuçları'nın nasıl daha da iyi hale getirilebileceğiyle ilgili görüşlerinizi almaktan memnuniyet duyarız.

H2/Push ile İlişki

Kullanımdan kaldırılan HTTP2/Push özelliği hakkında bilgi sahibiyseniz Erken İpuçları'nın farkları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ı göndermeye başlayabilir. Bu durum kulağa harika gelse de, yapısal bir olumsuzlukla sonuçlandı: HTTP2/Push ile tarayıcının sahip olduğu alt kaynakları aktarmaktan kaçınmak son derece zordu. Bu "aşırı itici" etkisi, ağ bant genişliğinin daha az verimli bir şekilde kullanılmasına neden oldu ve bu da performans avantajlarını önemli ölçüde azalttı. Genel olarak Chrome verileri, HTTP2/Push'un aslında web'deki performansı olumsuz yönde etkilediğini gösterdi.

Bunun aksine, Erken İpuçları, ön yanıt gönderme yeteneğini tarayıcıyı asıl ihtiyaç duyduğu şeyleri getirmekten veya bunlara bağlanmaktan sorumlu tutan ipuçlarıyla birleştirdiği için uygulamada daha iyi performans gösterir. Erken İpuçları, HTTP2/Push'un teoride ele alabileceği tüm kullanım alanlarını kapsamasa da Erken İpuçları'nın, gezinmeleri hızlandırmak için daha pratik bir çözüm olduğuna inanıyoruz.

Küçük resim: Pierre Bamin.