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

Sunucunuzun tarayıcıya kritik alt kaynaklarla ilgili ipuçlarını nasıl gönderebileceğini öğrenin.

Erken İpuçları nedir?

Web siteleri zaman içinde daha sofistike hale geldi. Bu nedenle, bir sunucunun istenen sayfanın HTML'sini oluşturmak için önemsiz olmayan işler gerçekleştirmesi (örneğin, veritabanlarına erişim veya kaynak sunucuya erişen CDN'ler) olması normaldir. Maalesef bu "sunucu düşünme süresi", tarayıcı sayfayı oluşturmaya başlamadan önce fazladan gecikmeye neden olur. Gerçekten de bağlantı, sunucunun yanıtı hazırlaması için gereken süre boyunca etkin bir şekilde 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 kritik alt kaynaklar (örneğin, sayfanın stil sayfası, kritik JavaScript) veya sayfa tarafından kullanılabilecek kaynaklar hakkında ipuçları gönderebilir. Tarayıcı, ana kaynağı beklerken bu ipuçlarını kullanarak bağlantıları ısıtabilir ve alt kaynak isteyebilir. Diğer bir deyişle, Erken İpuçları, önceden biraz çalışma yaparak tarayıcının bu tür "sunucu düşünme süresinden" yararlanmasına yardımcı olur ve böylece sayfa yükleme hızını artırır.

Bazı durumlarda, Largest Contentful Paint'teki performans iyileştirmesi Shopify ve Cloudflare tarafından gözlemlendiği gibi yüz milisaniye sürebilir. Aşağıdaki önceki/sonraki karşılaştırmada görüldüğü gibi, bir saniyeye kadar da daha hızlı olabilir:

Erken İpuçlarını Uygulama

Konunun derinine inmeden önce, sunucunuz hemen 200 yanıt gönderebiliyorsa Erken İpuçlarının kullanışlı olmayacağını lütfen unutmayın. Bunun yerine, bu tür durumlarda ana yanıtta (Link rel HTTP üstbilgisi) veya ana yanıtta (<link> öğeleri) normal link rel=preload veya link rel=preconnect kullanmayı düşünün. Sunucunuzun ana yanıtı oluşturmak için biraz zamana ihtiyacı olduğu durumlar için okumaya devam edin.

Erken İpuçları'ndan yararlanmanın ilk adımı, en iyi açılış sayfalarını, yani kullanıcıların web sitenizi ziyaret ettiklerinde 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 gezinirken Erken İpuçları'nın kullanışlılığının 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, dikkat çekici bir ilk izlenim bırakmak da her zaman işe yarar.

Bu öncelikli açılış sayfaları listesine sahip olduğunuza göre bir sonraki adım, ilk tahmin olarak hangi kaynakların veya alt kaynakların önceden bağlanma veya önceden yükleme ipuçları için uygun olacağını belirlemektir. Genellikle bunlar, Largest Contentful Paint veya First Contentful Paint gibi temel kullanıcı metriklerine en fazla katkıda bulunan kaynaklar ve alt kaynaklar olur. Daha net bir ifadeyle, eşzamanlı JavaScript, stil sayfaları ve hatta web yazı tipleri gibi oluşturma engelleyici alt kaynakları araştırın. Benzer şekilde, temel kullanıcı metriklerine büyük katkıda bulunan alt kaynakları barındıran kaynakları da araştırın. Not: Ana kaynaklarınız zaten <link rel=preconnect> veya <link rel=preload> kullanıyorsa Erken İpuçları için bu kaynakları ya da kaynakları göz önünde bulundurabilirsiniz. Daha fazla bilgi için bu makaleyi inceleyin.

İkinci adım, eski olabilecek veya artık ana kaynak tarafından kullanılmayan kaynaklarda veya kaynaklarda Erken İpuçlarını kullanma riskini en aza indirmektir. Örneğin, sık güncellenen ve sürümü tutulan kaynaklar (ör. example.com/css/main.fa231e9c.css) en iyi seçim olmayabilir. Bu endişenin Erken İpuçları'na özel olmadığını, mevcut olduğu her yerde rel=preload veya rel=preconnect bağlantıları için geçerli olduğunu unutmayın. Bu, otomasyon veya şablon oluşturma ile en iyi başa gelen ayrıntı türüdür (örneğin, manuel bir işlemin, link rel=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 uzantısının gerekli olacağını tahmin eder ve Erken İpuçları aracılığıyla bunun ö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ı yayınlanır. Maalesef bu CSS kaynağı sık sık güncelleniyor 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 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 kaldı:

<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ı takip edin (ö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 hale gelen kritik kaynaklarla (örneğin, "ikiye böl" önerisini uyguladıysanız bir anahtar kaynağın dinamik bölümü) ekleme yapmak bile iyi bir uygulama olabilir. 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

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ı, belli başlı tüm tarayıcılarda desteklense de, Erken İpucunda gönderilebilecek yönergeler tarayıcıya göre değişir:

Önceden bağlanma desteği:

Önceden yükleme desteği:

Sunucu desteği

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

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

Erken İpuçları'nı etkinleştirmenin kolay yolu

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 dokümanlarına bakın veya buradaki kapsamlı olmayan listeye bakın:

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

Erken İpuçları'nı desteklemeyen müşteriler için sorunları önleme

100 aralığındaki bilgi amaçlı HTTP yanıtları HTTP standardının bir parçasıdır, ancak bazı eski istemciler veya bot'lar 103 Earlyİpucu'nun kullanıma sunulmasından önce genel web'e göz atmak için nadiren kullanıldıkları için bazı eski istemciler veya bot'lar bu konuda zorlanabilir.

Yalnızca sec-fetch-mode: navigate HTTP istek başlığı gönderen istemcilere yanıt olarak 103 Erken İpuçlarının yayınlanması, 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, bunları diğer isteklerde gereksiz yere göndermekten kaçınma avantajına da 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 daha fazla fırsat ararken aşağıdaki gelişmiş model ilginizi çekebilir.

Tipik bir kullanıcı yolculuğu kapsamında n. sayfa isteğinde bulunan ziyaretçiler için Erken İpuçları yanıtını, sayfanın daha altındaki ve daha derinlerdeki içeriğe, diğer bir deyişle daha düşük öncelikli kaynaklarda Erken İpuçları'na göre uyarlamak isteyebilirsiniz. Yüksek öncelikli, oluşturmayı engelleyen alt kaynaklara ya da kaynaklara odaklanmanızı önerdiğimiz için bu kulağa pek mantıklı gelmeyebilir. Ancak bir ziyaretçi bir süre gezindiğinde, tarayıcısı büyük olasılıkla tüm kritik kaynaklara sahip demektir. Bu noktadan sonra dikkatinizi daha düşük öncelikli kaynaklara kaydırmanız mantıklı olabilir. Örneğin bu, ürün resimlerini yüklemek için Erken İpuçları'nı veya yalnızca daha seyrek karşılaşılan 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ı'nın sınırlamaları şunlardır:

• Yalnızca gezinme istekleri (ü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 kaynaklar arası yönlendirme, Chrome'un Erken İpuçları ile edindiği kaynakları ve bağlantıları bırakmasına neden olur.

Diğer tarayıcılarda da benzer sınırlamalar vardır ve önceki 103 ipucu yalnızca preconnect ile daha da kısıtlanır.

Sonraki adım

Topluluğun ilgisine 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 konulara öncelik verileceği ve Erken İpuçları'nın nasıl daha da iyileştirilebileceğiyle ilgili görüşlerinizi almak isteriz.

H2/Push ile ilişki

Kullanımdan kaldırılan HTTP2/Push özelliği hakkında bilginiz varsa Erken İpuçları'nın farkını merak ediyor olabilirsiniz. Erken İpuçları, tarayıcının kritik alt kaynakları getirmeye başlaması için gidiş-dönüş gerektirir. Bununla birlikte, HTTP2/Push ile sunucu yanıtla birlikte alt kaynakları aktarmaya başlayabilir. Bu kulağa harika gelse de, bu durum yapısal bir dezavantaja yol açtı: HTTP2/Push ile tarayıcının zaten sahip olduğu alt kaynakları aktarmaktan kaçınmak son derece zordu. Bu "aşırı itme" etkisi, ağ bant genişliğinin daha az verimli bir şekilde kullanılmasına neden olarak performans avantajlarını önemli ölçüde azalttı. Genel olarak Chrome verileri, HTTP2/Push'un aslında web genelindeki 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 ihtiyacı olan şeyi getirmek veya ona bağlanmaktan sorumlu bırakan ipuçlarıyla birleştirdiğinden, 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.

Pierre Bamin'e ait küçük resim.