HTTP/2 ve HTTP/3: Protokol Performans Karşılaştırması

HTTP/2 ve HTTP/3: Protokol Performans Karşılaştırması

Web performansı büyük ölçüde kullanılan HTTP protokolüne bağlıdır. HTTP/1.1'den HTTP/2'ye ve ardından HTTP/3'e geçiş, web uygulamalarının hız ve güvenilirlik açısından dramatik iyileşmeler yaşamasını sağlamıştır. Bu rehberde her üç protokolü karşılaştıracak, teknik farklılıklarını inceleyecek ve uygulamanızda nasıl aktifleştireceğinizi adım adım ele alacağız.

1. HTTP Protokol Tarihçesi

• HTTP/1.0 (1996): Her istek için ayrı TCP bağlantısı
• HTTP/1.1 (1997): Keep-alive bağlantılar, pipeline (sınırlı)
• HTTP/2 (2015): Multiplexing, header compression, server push
• HTTP/3 (2022): QUIC üzerinde, UDP tabanlı, 0-RTT bağlantı

2. HTTP/1.1'in Sınırlamaları

HTTP/1.1, bugünkü web ihtiyaçları için ciddi darboğazlar yaratmaktadır:

• Head-of-line blocking: Bir istek tamamlanmadan diğeri başlayamaz
• Bağlantı limiti: Tarayıcılar domain başına 6-8 bağlantı açar
• Header overhead: Her istekte tekrarlayan, sıkıştırılmamış header'lar
• Workaround'lar: Domain sharding, CSS sprite, inline kaynak gibi hackler

3. HTTP/2 Özellikleri

Multiplexing

Tek TCP bağlantısı üzerinden aynı anda birden fazla istek ve yanıt gönderilebilir. Bu, HTTP/2'nin en önemli özelliğidir.

# HTTP/1.1 — Sıralı istekler
GET /style.css    → Bekle → Yanıt al
GET /script.js    → Bekle → Yanıt al
GET /image.png    → Bekle → Yanıt al
# Toplam: 3x gecikme

# HTTP/2 — Paralel istekler (tek bağlantı)
GET /style.css  ──┐
GET /script.js  ──┼──→ Tüm yanıtlar paralel
GET /image.png  ──┘
# Toplam: 1x gecikme

Header Compression (HPACK)

# HTTP/1.1 — Her istekte tam header (ortalama 800 byte)
GET /page1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 ...
Accept: text/html ...
Cookie: session=abc123; tracking=xyz ...
# 800+ byte x her istek

# HTTP/2 — HPACK ile sıkıştırılmış header
# İlk istek: tam header (indekslenir)
# Sonraki istekler: sadece farklar
# %85-90 header boyut azalması

Server Push

# Sunucu, istemci istemeden önce kaynakları gönderir
# İstemci /index.html istediğinde:
# Sunucu otomatik olarak style.css ve script.js'i de gönderir

# Nginx yapılandırması
location = /index.html {
    http2_push /css/style.css;
    http2_push /js/app.js;
}

Stream Priority

# HTTP/2 stream önceliklendirme
# CSS ve JS → Yüksek öncelik
# Görüntüler → Orta öncelik
# Analitik/tracking → Düşük öncelik

# fetchpriority attribute ile kontrol
<link rel="stylesheet" href="critical.css" fetchpriority="high">
<img src="hero.jpg" fetchpriority="high">
<img src="footer-logo.png" fetchpriority="low">
<script src="analytics.js" fetchpriority="low"></script>

4. HTTP/3 ve QUIC

HTTP/3, TCP yerine UDP tabanlı QUIC protokolünü kullanır. Bu paradigma değişikliği birçok avantaj sunar.

TCP vs QUIC

0-RTT Bağlantı

# TCP + TLS 1.2 (HTTP/1.1)
İstemci → SYN                    (1. RTT)
Sunucu → SYN-ACK
İstemci → ACK + ClientHello      (2. RTT)
Sunucu → ServerHello + Cert
İstemci → Verify + GET /page     (3. RTT)
# Toplam: 3 RTT

# TCP + TLS 1.3 (HTTP/2)
İstemci → SYN
Sunucu → SYN-ACK
İstemci → ACK + ClientHello      (1. RTT)
Sunucu → ServerHello + Finished
İstemci → GET /page              (2. RTT)
# Toplam: 2 RTT

# QUIC (HTTP/3) — İlk bağlantı
İstemci → Initial + ClientHello  (1. RTT)
Sunucu → Initial + ServerHello
İstemci → GET /page
# Toplam: 1 RTT

# QUIC (HTTP/3) — Tekrar bağlantı (0-RTT)
İstemci → 0-RTT Data + GET /page (0 RTT!)
# Toplam: 0 RTT

5. Performans Karşılaştırması

# Gerçek dünya performans farkları (ortalama)

Metrik              | HTTP/1.1 | HTTP/2 | HTTP/3
-------------------------------------------------
İlk bağlantı (ms)  |   300    |  200   |  100
Tekrar bağlantı(ms) |   150    |  100   |   0-50
Sayfa yükleme (s)  |   3.5    |  2.1   |  1.8
Paket kaybında (s)  |   5.0+   |  3.5   |  2.0
Mobilde (s)         |   6.0+   |  3.8   |  2.5

6. Sunucu Yapılandırması

Nginx HTTP/2

# nginx.conf
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/ssl/cert.pem;
    ssl_certificate_key /etc/ssl/key.pem;

    # HTTP/2 optimizasyonları
    http2_max_concurrent_streams 128;
    http2_initial_window_size 65536;

    # Gzip
    gzip on;
    gzip_comp_level 5;
    gzip_types text/plain text/css application/json application/javascript;

    # Brotli (daha iyi sıkıştırma)
    brotli on;
    brotli_comp_level 6;
    brotli_types text/plain text/css application/json application/javascript;
}

Nginx HTTP/3

# nginx.conf — HTTP/3 desteği
server {
    listen 443 ssl http2;
    listen 443 quic reuseport;  # HTTP/3
    server_name example.com;

    ssl_certificate /etc/ssl/cert.pem;
    ssl_certificate_key /etc/ssl/key.pem;
    ssl_protocols TLSv1.3;

    # HTTP/3 advertisement
    add_header Alt-Svc 'h3=":443"; ma=86400';

    # QUIC ayarları
    quic_retry on;
    ssl_early_data on;
}

Node.js ile HTTP/2

const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem'),
  allowHTTP1: true, // HTTP/1.1 fallback
});

server.on('stream', (stream, headers) => {
  const path = headers[':path'];

  if (path === '/') {
    stream.respond({
      ':status': 200,
      'content-type': 'text/html',
    });
    stream.end('<h1>HTTP/2 Server</h1>');
  }
});

server.listen(443);

7. Protokol Seçimi ve Test

# Protokolü kontrol etme
curl -sI --http2 https://example.com | grep -i 'http/'
# HTTP/2 200

curl -sI --http3 https://example.com | grep -i 'http/'
# HTTP/3 200

# Chrome DevTools
# Network sekmesi → Protocol sütunu → h2 veya h3

8. HTTP/2 Döneminde Gereksiz Optimizasyonlar

HTTP/1.1 için yapılan bazı optimizasyonlar HTTP/2'de gereksiz hatta zararlıdır:

• Domain sharding: Artık gereksiz, tek domain kullanın
• CSS/JS birleştirme: Daha küçük dosyalar daha iyi cache'lenir
• Image spriting: Bireysel resimler tercih edilebilir
• Inline CSS/JS: Harici dosyalar cache'den sunulabilir

Sonuç

HTTP/2 ve HTTP/3, web performansını temelden iyileştiren protokollerdir. HTTP/2'nin multiplexing ve header compression özellikleri sayfa yükleme sürelerini %30-50 azaltırken, HTTP/3'ün QUIC protokolü özellikle mobil ve yüksek gecikme ortamlarında ek performans kazanımı sağlar. 0-RTT bağlantı kurulumu, bağlantı göçü ve stream-level hata yönetimi HTTP/3'ün öne çıkan avantajlarıdır. Sunucunuzu HTTP/2 destekleyecek şekilde yapılandırın ve HTTP/3'ü kademeli olarak aktifleştirin.

Kaynaklar

• MDN — HTTP Overview
• web.dev — HTTP/2 Performansı
• RFC 9114 — HTTP/3
• Cloudflare — HTTP/3 Nedir?
• Can I Use — HTTP/3