Bir Web Sayfası Nasıl Yüklenir: DNS, TLS ve İlk Saniye
Bir web sayfası ekranda görünmeden çok önce yüklenmeye başlar ve ilk saniye perde arkasındaki pek çok adımı içerir.
Bir web sayfası ekranda görünmeden çok önce yüklenmeye başlar ve ilk saniye perde arkasındaki pek çok adımı içerir. Kullanıcılar açısından görünürdeki gecikme, tarayıcının ilk 1.000 milisaniye civarında tamamladığı küçük görevler yığınının bir sonucudur genellikle: DNS, bağlantı kurulumu, TLS, yanıtın ilk baytı ve getirme (fetch) istekleriyle varlıkların işlenmesinin eşlik ettiği HTML ayrıştırması. Bu genel geçer formül her web sayfası için geçerlidir, ancak süreler tarayıcı özelliklerine, sunucu performansına ve bir sayfanın daha önce ziyaret edilip edilmediğine göre değişir. Bu makale, söz konusu gizli adımların her birinin haritasını çıkarıyor ve bir yanıtın ulaşması (TTFB) ile sayfanın kullanılabilir hale gelmesi arasındaki farkı açıklıyor.
DNS, Bağlantı, TLS
Tarayıcının herhangi bir şeyi getirebilmesi için önce sunucunun adresini belirlemesi gerekir. Bu, tarayıcının alan adını aramaya başladığı an ile aramanın tamamlandığı an arasındaki süre olan DNS aramasıdır. Varsa önbellekler bunu birkaç milisaniyede çözebilir, ancak önbelleğe alınmış bir yanıt yoksa tarayıcının yüzlerce milisaniye gerektiren biçimde DNS sunucusunu sorgulaması gerekebilir.
Tarayıcı bir IP adresine sahip olduğunda, sıradaki adım TCP el sıkışmasıdır. Bu üç aşamalı iletişim [TO VERIFY: standartlar düzeyinde kesin TCP sırası?], sunucuya istemcinin iletişim kurmaya başlamak istediğini bildirir ve TCP pencere boyutu ile başlangıç sıra numarası gibi TCP bağlantısının temel özelliklerini belirler. Alışverişi tamamlamak için tipik olarak bir gidiş-dönüş.
Hem DNS hem de TCP, optimizasyon labirentleri ve el sıkışma adımlarında olası azaltmalar içerir (örneğin QUIC üzerinden HTTP/3, TLS 1.3, sunucu adı belirtimi ile). Fakat mekanik açısından olmasa bile zaman çizelgesi bakımından bu ağ adımları nispeten değişmemiştir.
En azından bir TLS el sıkışması, zaten mutabık kalınmış bir bağlantının üzerine bindiğinden fazladan gidiş-dönüşler ekler; kesin sayı ise TLS sürümüne ve sunucu yapılandırmasına bağlıdır. [TO VERIFY: kesin TLS el sıkışması gidiş-dönüş sayıları]
Tarayıcı isteği ile TTFB arasındaki gecikmenin yüzlerce milisaniyeye varan kısmını açıklayabilen şey, işte bu bağlantılar ve zorunlu el sıkışmalardır. Tarayıcıların, kullanıcının erişmek üzere olduğunu tahmin ettikleri kaynaklar için bağlantıları bağımsız olarak başlatarak bu durumun etrafından dolaşabileceğini unutmayın. <link rel="preconnect">, tarayıcıdan ağın DNS, TCP ve TLS el sıkışmalarını erkenden yapmasını ister; rel="dns-prefetch"> ise yalnızca DNS yapar.
İlk Bayt ve Akış
İlk Bayta Ulaşma Süresi (TTFB), sayfanın yüklenmesi bitene kadar değil, yalnızca istenen belgenin ilk baytına kadar olan süreyi ölçer. Bağlantı güvenli hale geldiğinde ve istek bir HTTPS URL'sini hedeflediğinde, tarayıcı isteği hemen gönderir. Kullanılan sunucuya bağlı olarak sürelerin daha fazla değişiklik göstermeye başladığı adım işte burasıdır. Geleneksel bir web sunucusu için TTFB; HTML'i işlemekle meşgul olan Java, Ruby veya Node.js'e karşılık gelebilir. Netlify gibi bir servis içinse, muhtemelen bir CDN uç noktasından statik bir HTML dosyasıyla yanıt verme süresidir. Ya da CloudFront için, yukarı akışta üretilen HTML'i teslim etme süresi. Yine de yüzlerce milisaniyeyi bulabilir.
Sunucu durumsuz HTTP isteğine yanıtını üretip göndermeye başladığında, tarayıcının çizim motoru işe koyulur. İyi optimize edilmiş bir ana bilgisayar varsayıldığında, ayrıştırıcı ilk HTML baytını alıp akışa başladığı için [TO VERIFY: ilk bayt ile HTML'in ekranda görünmesi arasındaki ilişkiye dair yetkin birincil kaynak?], veriler geldikçe HTML ekranda görünmeye başlayabilir ve bu da saniyenin bir kesri kadar sürebilir.
Ayrıştırıcı ve Onu Engelleyenler
Tarayıcının ayrıştırıcısı, HTML metnini aldıkça sayfanın bir temsilini, yani DOM'u oluşturur. İçeriği aslına sadık biçimde görüntüleyebilmeden önce genellikle yazı tipi, renkler için CSS ve yerleşim düzenlerini getirmesi gerekir, bu da tarama sürecini yavaşlatır. Bu işlemeyi engelleyen kaynaklar; yazı tipleri, CSS ve JavaScript gibi statik dosyalar olup, söz konusu dosyalar yüklenip değerlendirilmeden önce tarayıcının sayfa varlıklarını ve öğelerini işlemesini engeller veya geciktirir. Bunlar ayrıştırmayı duraklatırken, engelleyici olmayan görseller talep edilir ve HTML geldikçe yerleşim için hazır olur. Stil sayfası bağlantıları, özellikle engelleyici kaynakların en engelleyicisidir: tarayıcı, tüm stiller ve eşzamanlı betikler yüklenip değerlendirilene kadar yükleme olayını tetiklemez veya işlemeyi bitirmez. Fakat bu katı işleme yolu, stil ayrıntılarının, rastgele yazı tiplerinin veya betiklerin DOM birleştirmesini çökertmesine kıyasla daha hızlı gün yüzüne çıkmasına olanak tanır [TO VERIFY].
Tarayıcının Hile Yapabileceği Noktalar
Tarayıcı, hız kazanmak amacıyla preconnect ve dns-prefetch ile bu işlerin bir kısmını önceden öne çekebilir. Kararları gerek duyulmadan önce zorlamaya çalışan spekülatif kod yollarının aksine (çoğunlukla CPU kullanımı pahasına), bu optimizasyonlar temkinlidir. Tarayıcı, kullanıcının erişmek isteyebileceği bir kaynağı tahmin ederse, ya yalnızca DNS'i çözümler (dns-prefetch) ya da bir TCP bağlantısı başlatıp TLS el sıkışmasını da tamamlar (preconnect). Yükleme süresinde iyileşmeler sağlanabilir, ancak bunlar DNS'i aşırı hırpalamak ve geçici durumları depolamak pahasına gelir.
Dikkat Edilmesi Gereken Zamanlama İsimleri
Modern tarayıcının zamanlama olayları, yükleme adımlarını milisaniyelere ayırmanın tek yoludur. Takip edilecek ilgili gezinme zamanlaması terimleri şunlardır: navigationStart, domainLookupEnd (DNS süresi), connectEnd (TCP süresi), secureConnectionStart ve requestStart (TLS süresi, TTFB) ile geçerli belgenin loadEventStart değeri. Sayfa yükleme süresi, navigationStart ile geçerli belgenin load olayının başlangıcı arasındaki süredir.
Kaynaklar
- Mozilla Developer Network (MDN), *Time to First Byte (TTFB) - Glossary - MDN Web Docs*
- Mozilla Developer Network (MDN), *Navigation and resource timings - Performance | MDN*
- Mozilla Developer Network (MDN), *Populating the page: how browsers work - MDN Web Docs*
- Mozilla Developer Network (MDN), *PerformanceResourceTiming: renderBlockingStatus property - Web APIs | MDN*
- Mozilla Developer Network (MDN), *Speculative loading - Performance - MDN Web Docs*