Tüm yazılar

#web teknolojileri#dns#http

Adres Çubuğuna Yazıp Enter'a Bastığınızda Ne Oluyor? Bir Web Sayfasının 300 Milisaniyelik Yolculuğu

Tarayıcıya bir adres yazıp Enter'a bastığınız an, dünyanın öbür ucundaki sunuculara uzanan bir zincir başlıyor: DNS, TCP, TLS, HTTP ve ekrana çizim. Bir web sayfasının açılışını adım adım, sade bir dille anlatıyoruz.

Adres Çubuğuna Yazıp Enter'a Bastığınızda Ne Oluyor? Bir Web Sayfasının 300 Milisaniyelik Yolculuğu
İçindekiler 9

Her gün yüzlerce kez yaptığınız bir hareket: tarayıcının adres çubuğuna bir site adı yazıyor, Enter'a basıyorsunuz. Göz açıp kapayıncaya kadar sayfa önünüzde. Ama o göz açıp kapama süresinde, bilgisayarınız dünyanın farklı yerlerindeki birkaç sunucuyla konuşuyor, şifreli bir bağlantı kuruyor, dosyalar indiriyor ve milyonlarca pikseli hesaplıyor.

Bu yolculuk, yazılım mülakatlarının en klasik sorusudur. Ama sadece geliştiriciler için değil, sitesi yavaş açılan her işletme sahibi için de öğretici: çünkü yavaşlığın nerede saklandığını gösterir.

Kısaca:

  • DNS: Tarayıcı, alan adını bir IP adresine çevirir.
  • TCP ve TLS: Sunucuyla bağlantı kurulur ve şifreleme anlaşması yapılır.
  • HTTP: Sayfa istenir, sunucu HTML ile cevap verir.
  • Çizim: Tarayıcı HTML, CSS ve JavaScript'i işleyip ekrana piksel olarak çizer.
  • Her adımda gidiş-dönüş süresi birikir. Hızlı bir site, bu gidiş-dönüşleri azaltan sitedir.

Adım 0: Tarayıcı ne yazdığınızı anlamaya çalışır

Enter'a bastığınızda tarayıcı önce şunu sorar: bu bir web adresi mi, yoksa arama yapılacak bir kelime mi? "engerektech.com" bir alan adına benziyor, "hava durumu" ise bir arama. Adres olduğuna karar verirse başına https:// ekler.

Tarayıcı ayrıca siteye daha önce girip girmediğinize bakar. Site, HSTS adı verilen bir kuralla "benimle yalnızca HTTPS üzerinden konuş" demişse, tarayıcı güvensiz HTTP'yi hiç denemeden doğrudan şifreli bağlantıya geçer.

Adım 1: DNS — İnternetin telefon rehberi

Bilgisayarlar birbirini isimle değil, IP adresleriyle bulur. "engerektech.com" gibi bir alan adını bir IP adresine çeviren sisteme DNS (Domain Name System) denir.

Tarayıcı önce kendi hafızasına, sonra işletim sistemine bakar. Adres yakın zamanda kullanıldıysa cevap hazırdır ve bu adım neredeyse sıfır sürer. Değilse soru, genellikle internet sağlayıcınızın ya da seçtiğiniz bir DNS hizmetinin çözümleyicisine (resolver) gider. Çözümleyici de cevabı bilmiyorsa zincirleme bir sorgu başlatır:

  1. Kök sunucular: ".com adreslerini kim biliyor?" 13 farklı kök sunucu kimliği var, ama anycast adı verilen bir teknikle dünyaya dağılmış yüzlerce kopyası bulunuyor.
  2. TLD sunucuları: ".com" alan adlarından sorumlu sunucular, "engerektech.com için yetkili sunucu şu" der.
  3. Yetkili sunucu: Alan adının kayıtlarını tutan sunucu, nihayet IP adresini verir.

Her cevap, kaydın belirlediği bir süre (TTL) boyunca önbellekte tutulur. Böylece aynı soru binlerce kez sorulmaz.

Kendi bilgisayarınızda bunu görmek için komut satırına şunu yazabilirsiniz:

nslookup engerektech.com

Adım 2: TCP — Bağlantıyı kurmak

IP adresi bulundu. Şimdi tarayıcı sunucuyla güvenilir bir bağlantı kurmalı. Klasik yöntem TCP'dir ve üç adımlık bir el sıkışmayla başlar:

  • Tarayıcı: "Konuşabilir miyiz?" (SYN)
  • Sunucu: "Evet, sen de beni duyuyor musun?" (SYN-ACK)
  • Tarayıcı: "Duyuyorum, başlayalım." (ACK)

Bu el sıkışma bir tam gidiş-dönüş (round trip) sürer. Gidiş-dönüş süresi ise fiziğe bağlıdır: ışık fiber optik kabloda boşluktakinden yaklaşık üçte bir daha yavaş, saniyede yaklaşık 200.000 km hızla ilerler. İstanbul'daki bir kullanıcı ile Amerika'daki bir sunucu arasında sadece bu fiziksel sınır bile her gidiş-dönüşe onlarca, pratikte çoğu zaman 100 milisaniyeden fazla ekler. Sunucunun kullanıcıya yakın olması bu yüzden önemlidir.

Adım 3: TLS — Şifreli tünel

Adres çubuğundaki kilit simgesinin arkasında TLS vardır. Bağlantı kurulduktan sonra tarayıcı ve sunucu şunlar üzerinde anlaşır:

  • Kimlik doğrulama: Sunucu, güvenilir bir sertifika otoritesinin imzaladığı sertifikasını gösterir. Tarayıcı, gerçekten doğru siteyle konuştuğunu buradan anlar.
  • Anahtar değişimi: İki taraf, aradaki kimsenin bilmediği ortak bir şifreleme anahtarı üretir.

Güncel sürüm olan TLS 1.3 bu anlaşmayı tek bir gidiş-dönüşe indirdi; daha önceki TLS 1.2 iki gidiş-dönüş gerektiriyordu. Daha önce bağlandığınız bir siteye tekrar bağlanırken, belirli koşullarda veri ilk mesajla birlikte bile gönderilebiliyor (0-RTT).

Adım 4: HTTP — Sayfayı istemek

Şifreli tünel hazır. Tarayıcı artık asıl isteğini gönderir:

GET / HTTP/2
Host: engerektech.com
Accept: text/html
Accept-Language: tr-TR

Sunucu isteği alır, gerekirse veritabanına sorar, sayfayı hazırlar ve bir durum koduyla cevap verir: 200 (tamam), 301 (kalıcı olarak taşındı), 404 (bulunamadı) ya da 500 (sunucu hatası). Cevabın ilk baytının ulaşma süresine TTFB (Time to First Byte) denir ve sunucu performansının en önemli göstergelerinden biridir.

HTTP/3 ve QUIC: El sıkışmayı kısaltmak

Web'in en yeni protokolü HTTP/3, TCP yerine UDP üzerine kurulu QUIC protokolünü kullanır. QUIC'in en büyük kazancı, bağlantı kurma ve TLS şifreleme anlaşmasını tek bir adımda birleştirmesidir. TCP + TLS 1.3 ile iki gidiş-dönüş süren hazırlık, QUIC ile bire iner. Ayrıca kaybolan tek bir paket, diğer dosyaların indirilmesini bekletmez. Mobil ağlar gibi paket kaybının sık olduğu ortamlarda fark belirgindir.

Kendi sitenizin her aşamada ne kadar zaman harcadığını görmek için curl kullanabilirsiniz:

curl -o /dev/null -s -w "DNS: %{time_namelookup}s
TCP: %{time_connect}s
TLS: %{time_appconnect}s
İlk bayt: %{time_starttransfer}s
Toplam: %{time_total}s
" https://engerektech.com

Çıktıdaki süreler kümülatiftir; her satır, isteğin başından o aşamanın bitişine kadar geçen süreyi gösterir.

Adım 5: Tarayıcı sayfayı çizer

HTML geldi ama iş bitmedi. Tarayıcı şimdi ham metni ekrandaki bir sayfaya dönüştürmeli:

  1. HTML ayrıştırma: HTML okunur ve sayfanın ağaç yapısı (DOM) oluşturulur. Okurken karşılaşılan CSS, JavaScript, görsel ve yazı tipi dosyaları için yeni istekler başlatılır.
  2. CSS işleme: Stil kuralları okunur ve her öğenin nasıl görüneceği hesaplanır.
  3. JavaScript: Betikler indirilip çalıştırılır. defer ya da async olmadan sayfanın başına konan bir betik, HTML okumasını durdurabilir. Yavaş sitelerin en yaygın nedenlerinden biri budur.
  4. Yerleşim (layout): Her öğenin ekrandaki tam konumu ve boyutu hesaplanır.
  5. Boyama ve birleştirme: Öğeler piksellere dönüştürülür, katmanlar birleştirilir ve sayfa ekranda belirir.

Tipik bir sayfa, ilk HTML'den sonra onlarca ek dosya ister. Her biri yeni bir istek, bazen yeni bir bağlantı demektir. HTTP/2 ve HTTP/3, bu istekleri aynı bağlantı üzerinden paralel göndererek süreyi ciddi biçimde kısaltır.

Yavaşlık nerede saklanıyor?

Bu yolculuğu bilmek, bir sitenin neden yavaş açıldığını anlamayı kolaylaştırır:

Aşama Yavaşsa olası neden Çözüm
DNS Yavaş DNS sağlayıcısı, çok kısa TTL Hızlı bir DNS hizmeti, makul TTL
TCP/TLS Sunucu kullanıcıdan çok uzakta CDN, kullanıcıya yakın sunucu, HTTP/3
İlk bayt (TTFB) Yavaş veritabanı sorguları, önbellek yok Sorgu optimizasyonu, sunucu önbelleği
Çizim Büyük görseller, engelleyen JavaScript Görsel sıkıştırma, defer, gereksiz betikleri kaldırma

CDN (içerik dağıtım ağı), sitenizin kopyalarını dünyanın farklı şehirlerindeki sunuculara dağıtır. Kullanıcı en yakın sunucudan hizmet alır ve el sıkışmalardaki gidiş-dönüş süreleri kısalır.

Sıkça sorulan sorular

Bütün bu süreç ne kadar sürer?

Kullanıcıya yakın, iyi yapılandırılmış bir sitede DNS, bağlantı ve ilk bayt toplamda birkaç yüz milisaniyenin altında kalabilir. Sunucu uzaksa, önbellek yoksa ve sayfa ağır JavaScript içeriyorsa aynı süreç birkaç saniyeye çıkabilir.

HTTPS siteyi yavaşlatır mı?

Eskiden şifreleme anlaşması belirgin bir ek süre getiriyordu. TLS 1.3 ve HTTP/3 ile bu maliyet büyük ölçüde azaldı. Üstelik HTTP/2 ve HTTP/3'ün hız kazançlarından tarayıcılarda yararlanmak için pratikte HTTPS gerekiyor. Yani bugün HTTPS, çoğu zaman siteyi hızlandırır.

DNS değiştirmek internetimi hızlandırır mı?

Yalnızca DNS çözümleme adımını etkiler. Sağlayıcınızın çözümleyicisi yavaşsa fark hissedebilirsiniz, ama cevaplar önbelleğe alındığı için genel gezinme hızına etkisi genellikle sınırlıdır.

Sitemin hangi aşamada yavaş olduğunu nasıl anlarım?

Tarayıcının geliştirici araçlarındaki (F12) "Network" sekmesi, her isteğin DNS, bağlantı, TLS ve bekleme sürelerini ayrı ayrı gösterir. Yukarıdaki curl komutu da hızlı bir ölçüm sağlar.

Bir web sayfasının açılışı, internetin en karmaşık ama en zarif mühendislik zincirlerinden biri. Hızlı açılan, kullanıcıyı bekletmeyen web siteleri ve uygulamalar geliştirmek isterseniz web uygulama geliştirme sayfamızdan bize ulaşabilirsiniz.

Kaynaklar

PaylaşLinkedInXWhatsApp
Bu konuda yardıma mı ihtiyacınız var?

Yazıda anlattıklarımızı kendi projenize uygulamak isterseniz birlikte bakalım.

Bize yazın
YE

EngerekTech’in kurucusu. İşletmeler için web, mobil ve kurumsal yazılım geliştiriyor; Angular, Spring Boot ve Flutter ile çalışıyor, KPSS Düello ve Kelime Kavanozu uygulamalarını geliştirdi. Blogda yapay zekâ araçlarını ve yazılım geliştirmeyi kendi projelerinde kullandığı haliyle anlatıyor.