Her gün defalarca yaptığımız bir şey var: Tarayıcıyı açıyor, adres çubuğuna bir web sitesi yazıyor ve Enter tuşuna basıyoruz.

Birkaç saniye, hatta çoğu zaman saniyenin çok küçük bir bölümünde web sitesi karşımızda beliriyor.

Peki bu sırada arka planda neler oluyor?

Örneğin adres çubuğuna:

https://example.com

yazdığınızda tarayıcı doğrudan bir sunucuya bağlanıp HTML dosyasını istemiyor. Önce adresin hangi sunucuya ait olduğunu öğreniyor, ardından güvenli bir bağlantı kuruyor, gerekli kaynakları istiyor ve son olarak bunları ekranda gördüğümüz web sayfasına dönüştürüyor.

Üstelik ekranda ilk görüntünün oluşması ile web sitesinin tamamen yüklenmesi aynı şey değil.

Bu yazıda, Enter tuşuna bastığınız andan ilk içeriğin ekranda görünmesine ve sayfanın yüklenmeye devam etmesine kadar olan süreci adım adım inceleyeceğiz.

Önce URL'yi Anlamamız Gerekiyor

Tarayıcıya bir adres yazdığımızda aslında bir URL (Uniform Resource Locator) veriyoruz.

Örneğin:

https://www.example.com/blog

Bu adresin farklı bölümleri vardır:

  • https → Kullanılacak iletişim protokolü

  • www.example.com → Alan adı (domain)

  • /blog → Sunucudan istediğimiz kaynak

Tarayıcı ilk olarak bu adresi analiz eder ve hangi sunucuya, hangi protokolle ve hangi kaynağa erişmesi gerektiğini belirler.

Ancak burada önemli bir sorun vardır:

Tarayıcı example.com'un hangi IP adresinde bulunduğunu henüz bilmiyor olabilir.

İşte burada DNS devreye girer.

DNS: Alan Adını IP Adresine Çevirme

Bilgisayarlar internette iletişim kurarken IP adreslerini kullanır.

Örneğin bir sunucunun IP adresi:

203.0.113.10

olabilir.

Fakat insanların bu tür IP adreslerini ezberlemesi oldukça zordur. Bu nedenle example.com gibi alan adlarını kullanıyoruz.

DNS (Domain Name System), alan adlarını IP adresleriyle eşleştiren sistemdir.

Tarayıcı kabaca şunu öğrenmeye çalışır:

"example.com hangi IP adresine karşılık geliyor?"

DNS sistemi de uygun IP adresini bulup tarayıcıya döndürür.

DNS sorgusu her zaman sıfırdan yapılmaz

Tarayıcı veya işletim sistemi bu alan adına daha önce erişmişse IP adresini önbelleğinde tutuyor olabilir.

Ayrıca DNS bilgileri farklı seviyelerde önbelleğe alınabilir.

Bu nedenle daha önce ziyaret ettiğiniz bir web sitesinde DNS aşaması çok daha hızlı gerçekleşebilir.

TCP Bağlantısı Kuruluyor

IP adresini öğrendikten sonra tarayıcının sunucuyla iletişim kurması gerekir.

HTTPS üzerinden HTTP/1.1 veya HTTP/2 gibi bağlantılarda bunun temelinde genellikle TCP (Transmission Control Protocol) bulunur.

TCP bağlantısı kurulurken üç aşamalı bir el sıkışma gerçekleştirilir.

Buna TCP three-way handshake denir.

Basitleştirirsek:

Tarayıcı → Sunucu: SYN
Sunucu → Tarayıcı: SYN-ACK
Tarayıcı → Sunucu: ACK

Bu işlem tamamlandığında iki taraf arasında TCP bağlantısı kurulmuş olur.

Artık veri alışverişi yapılabilir.

Ancak HTTPS kullanıyorsak henüz işimiz bitmemiştir.

TLS ile Güvenli Bağlantı Kuruluyor

Bugün web sitelerinin büyük bölümünde HTTPS kullanılıyor.

HTTPS, HTTP iletişiminin TLS (Transport Layer Security) ile güvence altına alınmış halidir.

Tarayıcı ile sunucu arasında güvenli bir bağlantı oluşturmak için TLS handshake gerçekleştirilir.

Bu aşamada taraflar:

  • Kullanılacak şifreleme yöntemleri konusunda anlaşır.

  • Sunucunun sertifikası doğrulanır.

  • Güvenli iletişim için gerekli anahtar materyali oluşturulur.

Sonuç olarak tarayıcı ile sunucu arasında şifrelenmiş bir iletişim kanalı oluşur.

Artık gönderdiğiniz HTTP istekleri ağ üzerinde düz metin olarak taşınmaz.

CDN Varsa İstek En Yakın Noktaya Gidebilir

Şimdi sıra web sitesinden istediğimiz içeriği almaya geliyor.

Fakat istek her zaman doğrudan web sitesinin ana sunucusuna gitmek zorunda değildir.

Burada CDN (Content Delivery Network) devreye girebilir.

CDN'ler dünyanın farklı bölgelerinde bulunan sunuculardan oluşan dağıtık ağlardır.

Örneğin web sitesinin ana sunucusu Amerika'da olabilir. Ancak Türkiye'deki bir kullanıcıya bazı içerikler Avrupa'daki veya Türkiye'ye daha yakın bir CDN noktasından sunulabilir.

Özellikle şu tür dosyalar CDN üzerinden sunulmaya çok uygundur:

  • CSS dosyaları

  • JavaScript dosyaları

  • Görseller

  • Fontlar

  • Video ve diğer statik içerikler

Eğer istenen içerik CDN üzerinde önbelleğe alınmışsa, isteğin ana sunucuya kadar gitmesine bile gerek kalmayabilir.

Bu da sayfanın daha hızlı açılmasına yardımcı olur.

Tarayıcı HTTP İsteğini Gönderiyor

Bağlantı hazır olduğunda tarayıcı artık sunucudan istediği kaynağı talep edebilir.

Örneğin mantıksal olarak şöyle bir HTTP isteği gönderilebilir:

GET /blog HTTP/2
Host: example.com

Bu isteğin temel amacı şudur:

"example.com üzerindeki /blog kaynağını bana gönder."

Sunucu isteği işler ve bir HTTP yanıtı oluşturur.

Örneğin:

HTTP/2 200 OK
Content-Type: text/html

Ardından HTML içeriği gönderilir.

Sunucu İşin İçine Giriyor

Burada önemli bir ayrım vardır.

Her web sitesi isteğe karşı hazır bir HTML dosyası göndermiyor.

Bazı sitelerde sunucu yalnızca statik bir dosya gönderirken bazı sitelerde istek geldiğinde uygulama kodu çalışır.

Örneğin PHP, Node.js, Python, Java, C# veya başka bir backend teknolojisi kullanılıyor olabilir.

Sunucu:

  1. İsteği alır.

  2. URL'yi analiz eder.

  3. Gerekli kodu çalıştırır.

  4. Veritabanından bilgi alabilir.

  5. Gerekli verileri işler.

  6. HTML oluşturabilir.

  7. HTTP yanıtını tarayıcıya gönderir.

Örneğin bir blog sayfasında yazının başlığı, içeriği ve yayın tarihi veritabanından alınabilir.

Bu nedenle web sitesinin açılma süresi yalnızca internet bağlantısına bağlı değildir.

Sunucunun isteği ne kadar hızlı işlediği de önemlidir.

HTML Tarayıcıya Ulaştığında Her Şey Bitmiş Olmuyor

Tarayıcı HTML'i aldığında ekranda hemen kusursuz bir web sitesi oluşmaz.

HTML içerisinde başka dosyalara referanslar bulunabilir:

 

Tarayıcı bunları gördüğünde ilgili kaynakları da istemeye başlar.

Böylece tek bir web sitesi isteği aslında onlarca, hatta yüzlerce farklı ağ isteğine dönüşebilir.

Basitleştirilmiş olarak:

HTML
 ├── CSS
 ├── JavaScript
 ├── Logo
 ├── Font
 ├── Görseller
 └── Diğer kaynaklar

Modern web sitelerinde sayfanın yüklenmesi sırasında çok sayıda HTTP isteği gerçekleşmesinin temel sebeplerinden biri budur.

CSS Geldiğinde Tarayıcı Sayfanın Görünümünü Hesaplıyor

HTML sayfanın yapısını tanımlar.

CSS ise bu yapının nasıl görüneceğini belirler.

Örneğin:

body {
    font-family: Arial;
}

h1 {
    font-size: 32px;
}

Tarayıcı HTML ve CSS bilgilerini kullanarak sayfadaki öğelerin nasıl yerleşeceğini hesaplar.

Burada DOM (Document Object Model) ve CSSOM (CSS Object Model) gibi yapılar devreye girer.

Tarayıcı HTML'i bir DOM ağacına dönüştürür.

CSS kurallarını da analiz ederek hangi öğenin nasıl görüntülenmesi gerektiğini belirler.

JavaScript Sayfaya Davranış Kazandırıyor

Bir web sitesi yalnızca HTML ve CSS'den oluşmak zorunda değildir.

JavaScript sayesinde sayfa etkileşimli hale gelir.

Örneğin:

  • Menü açılabilir.

  • Butona basıldığında pencere açılabilir.

  • Form doğrulanabilir.

  • Yeni içerik sunucudan alınabilir.

  • Sayfanın belirli bölümleri değiştirilebilir.

JavaScript dosyaları indirildikten sonra tarayıcının JavaScript motoru tarafından çalıştırılır.

Bu nedenle çok fazla JavaScript kullanan bir web sitesi yalnızca ağ üzerinden değil, kullanıcının cihazındaki işlem gücü açısından da daha fazla kaynak tüketebilir.

İlk Ekranın Görünmesi: Sayfa Henüz Tam Yüklenmedi

Burada çok önemli bir ayrım var:

Ekranda bir şey görmeye başlamanız, web sitesinin tamamen yüklendiği anlamına gelmez.

Tarayıcı, ihtiyaç duyduğu her şeyin tamamlanmasını beklemek yerine sayfanın ilk bölümlerini mümkün olduğunca erken ekrana çizebilir.

Örneğin bir haber sitesini açtığınızda kısa bir süre içinde:

  • Logo

  • Menü

  • Sayfa başlığı

  • İlk metinler

  • Bazı görseller

ekranda görünebilir.

Fakat sayfanın arka planında hâlâ:

  • Diğer görseller indiriliyor olabilir.

  • JavaScript dosyaları çalışıyor olabilir.

  • Web fontları yükleniyor olabilir.

  • Reklamlar getiriliyor olabilir.

  • API istekleri devam ediyor olabilir.

  • Sayfanın aşağı bölümlerindeki içerikler hazırlanıyor olabilir.

Yani kullanıcının gördüğü ilk ekran, web sitesinin tamamen hazır olduğu anlamına gelmez.

İlk Boyama Nedir?

Tarayıcının ekrana ilk kez herhangi bir içerik çizmesine First Paint (FP) denir.

Kullanıcının gerçekten içerik görmeye başlamasını ölçmek için First Contentful Paint (FCP) gibi performans metrikleri de kullanılır.

Örneğin ekranda ilk kez bir yazı, logo veya görsel belirdiğinde kullanıcı artık sayfanın yüklenmeye başladığını görebilir.

Ancak bu noktada sayfanın tamamının yüklenmesi şart değildir.

Bu yüzden web performansında yalnızca:

"Sayfa tamamen ne zaman yüklendi?"

sorusuna bakmak yerine:

"Kullanıcı ne zaman anlamlı bir içerik görmeye başladı?"

sorusuna da bakılır.

Tarayıcı Sayfayı Nasıl Çiziyor?

Tarayıcı HTML'i aldıktan sonra onu bir DOM (Document Object Model) yapısına dönüştürür.

CSS dosyalarını da analiz ederek sayfanın nasıl görünmesi gerektiğini hesaplar.

Basitleştirilmiş şekilde:

HTML
 ↓
DOM + CSSOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Ekranda görüntü

Layout

Tarayıcı her öğenin ekrandaki konumunu ve boyutunu hesaplar.

Örneğin:

  • Başlık nerede olacak?

  • Menü ne kadar geniş olacak?

  • Görsel kaç piksel yer kaplayacak?

  • Paragraflar hangi konumda bulunacak?

gibi hesaplamalar yapılır.

Paint

Daha sonra metinler, renkler, arka planlar, kenarlıklar ve görseller ekrana çizilir.

Bu işlem sonucunda kullanıcı sayfanın ilk bölümünü görmeye başlayabilir.

Fakat bu sırada tarayıcı diğer kaynakları yüklemeye ve işlemeye devam edebilir.

İlk Ekran ile Tam Yükleme Arasındaki Fark

Bunu bir restoran örneğiyle düşünebiliriz.

Restorana girdiğinizde masanıza ilk olarak menünün gelmesi, bütün yemeğin hazır olduğu anlamına gelmez.

Web sitesinde de benzer bir durum vardır.

İlk ekran

Kullanıcı sayfanın ilk anlamlı bölümünü görebilmeye başlar.

Bu aşamadaki amaç:

Kullanıcıya mümkün olduğunca hızlı şekilde anlamlı bir görüntü göstermek.

Tam yükleme

Sayfanın ihtiyaç duyduğu kaynakların daha büyük bölümü yüklendikçe site kullanılabilirliğini artırmaya devam eder.

Ancak modern web uygulamalarında "tam yükleme" her zaman tek bir noktaya karşılık gelmez.

Örneğin window.load olayı, sayfanın ve bağlı kaynakların yüklenmesiyle ilgili belirli bir aşamayı ifade eder.

Fakat JavaScript tarafından daha sonra başlatılan API istekleri veya dinamik olarak yüklenen içerikler bundan sonra da devam edebilir.

Bu nedenle:

İlk ekran ≠ Tam yükleme

demek daha doğru bir yaklaşımdır.

Tam Yükleme Neden Daha Uzun Sürebilir?

İlk ekran hızlı bir şekilde göründüğü halde sayfanın geri kalanının hazırlanması daha uzun sürebilir.

Örneğin:

0 ms
│
├── DNS
├── Bağlantı
├── TLS
├── HTML
│
├── İlk içerik ekrana gelir
│        ↑
│        │
│    Kullanıcı sayfayı görmeye başlar
│
├── CSS
├── JavaScript
├── Görseller
├── Fontlar
├── API istekleri
│
└── Sayfanın geri kalanı hazırlanır

Bu nedenle bir web sitesinin hızını değerlendirirken yalnızca toplam yükleme süresine bakmak yeterli değildir.

Kullanıcının ilk anlamlı içeriği ne kadar hızlı gördüğü de son derece önemlidir.

Peki Sayfa Ne Zaman "Hazır"?

Burada tek bir cevap vermek mümkün değildir.

Bir sayfanın:

  • İlk pikselinin çizilmesi,

  • İlk anlamlı içeriğin görünmesi,

  • Ana içeriğin yüklenmesi,

  • Kullanıcının etkileşim kurabilmesi,

  • Kritik kaynakların yüklenmesi

farklı zamanlarda gerçekleşebilir.

Üstelik modern web uygulamalarında sayfa açıldıktan sonra bile yeni içerikler yüklenmeye devam edebilir.

Örneğin bir sosyal medya sitesinde ana sayfa açıldıktan sonra aşağı kaydırdığınızda yeni gönderiler API üzerinden getirilebilir.

Bu nedenle modern web performansında "sayfanın tamamen yüklenmesi" yerine kullanıcı deneyimini daha iyi açıklayan birden fazla performans metriğine bakılır.

Her Web Sitesinde Aynı Sıra Olmaz

Burada anlattığımız süreç önemli bir basitleştirmedir.

Gerçek dünyada süreç bundan daha karmaşıktır.

Örneğin modern tarayıcılar HTTP/3 ve QUIC kullanabilir.

Bu durumda klasik TCP bağlantısı yerine QUIC üzerinden bağlantı kurulabilir.

DNS sorguları da farklı yöntemlerle gerçekleştirilebilir.

Örneğin DNS bilgisi tarayıcı, işletim sistemi, yerel ağ veya DNS resolver tarafında önbelleğe alınmış olabilir.

Benzer şekilde bir CDN kullanılıyorsa isteğin izlediği ağ yolu da web sitesinin mimarisine göre değişebilir.

Yani:

"Her web sitesi açılırken tam olarak şu 10 adım gerçekleşir."

demek doğru değildir.

Daha doğru ifade şudur:

Tarayıcı, ağ ve sunucu tarafında birçok farklı işlemi koordine ederek web sayfasını mümkün olduğunca hızlı şekilde ekrana getirir.

Enter'a Bastığınızda Gerçekte Ne Oluyor?

Artık süreci daha doğru şekilde özetleyebiliriz:

URL girilir
    ↓
DNS / bağlantı kurulumu
    ↓
HTTP isteği
    ↓
CDN / Sunucu
    ↓
HTML gelir
    ↓
CSS + JS + diğer kaynaklar keşfedilir
    ↓
DOM + CSSOM oluşturulur
    ↓
Layout + Paint
    ↓
İLK EKRAN GÖRÜNÜR
    ↓
Diğer kaynaklar yüklenmeye devam eder
    ↓
JavaScript / API işlemleri
    ↓
Görseller ve diğer içerikler
    ↓
Sayfa giderek daha fazla tamamlanır

Buradaki en önemli nokta şu:

Kullanıcının sayfayı görmeye başlaması ile tarayıcının tüm işi bitirmesi aynı şey değildir.

İyi optimize edilmiş bir web sitesi, bütün kaynakların tamamlanmasını beklemek yerine kullanıcıya mümkün olduğunca hızlı şekilde anlamlı bir ilk ekran gösterebilir.

Sonuç: Enter Tuşunun Arkasında Büyük Bir Sistem Var

Bir web sitesinin adresini yazıp Enter'a bastığımızda aslında oldukça uzun bir teknoloji zincirini tetikliyoruz.

DNS alan adını IP adresiyle eşleştirir.

TCP veya QUIC iletişim kanalının oluşturulmasında rol oynar.

TLS, HTTPS bağlantısını güvenli hale getirir.

CDN içeriği kullanıcıya daha yakın bir noktadan sunabilir.

Sunucu isteği işler ve gerekli kaynakları gönderir.

Tarayıcı ise HTML, CSS ve JavaScript'i işleyerek bunları ekranda gördüğümüz web sitesine dönüştürür.

Üstelik bütün bunların sonunda tek bir "yükleme" anı yoktur.

Önce kullanıcı ilk içeriği görmeye başlar, ardından tarayıcı arka planda çalışmaya devam eder ve sayfanın diğer bölümleri yüklenir.

Bütün bunlar bize yalnızca birkaç saniye, hatta çoğu zaman bir saniyeden çok daha kısa bir süre gibi görünür.

Bir sonraki kez bir web sitesini açtığınızda, ekranda beliren sayfaya sadece bir web sitesi olarak bakmayın.

Arka planda DNS sunucularından veri merkezlerine, CDN noktalarından web sunucularına ve tarayıcının render motoruna kadar birçok farklı sistem aynı anda çalışıyor.