Web Performansı İçin En İyi Uygulamalar

Performans Neden Önemlidir?

Web sitesi hızı bir lüks değil, kritik bir iş ölçüsüdür. Veriler ilgi çekici:

• Dönüşümler — Sayfa yüklemedeki 1 saniyelik gecikme, dönüşümleri %7 oranında azaltır (Amazon, 100 ms gecikme başına yıllık gelir kaybının 1,6 milyar ABD doları olduğunu tahmin ediyor).
• SEO — Google, 2021'den bu yana sıralama sinyalleri olarak Önemli Web Verilerini kullanıyor.
• Kullanıcı deneyimi — Mobil kullanıcıların %53'ü, yüklenmesi 3 saniyeden uzun süren siteleri terk ediyor.
• Erişilebilirlik — Daha hızlı siteler, yavaş ağlarda ve eski cihazlarda daha iyi çalışır.

Her milisaniye önemlidir. Bu makale, web sitelerinizi çok hızlı hale getirecek kapsamlı stratejileri kapsamaktadır.

---

1. Varlıkları Optimize Edin

Küçültme

HTML, CSS ve JavaScript'teki boşlukları, yorumları ve gereksiz karakterleri kaldırın. Modern yapı araçları bunu otomatik olarak gerçekleştirir:

# Using Terser for JavaScript
npx terser input.js -o output.min.js --compress --mangle

# Using cssnano via PostCSS
npx postcss input.css -o output.min.css --use cssnano

# Using html-minifier
npx html-minifier input.html -o output.min.html --collapse-whitespace

Etki — Küçültme genellikle dosya boyutlarını %30-60 oranında azaltır.

Görüntü Optimizasyonu

Görseller çoğu web sitesinde sayfa ağırlığının %50'sinden fazlasını oluşturur.

Modern formatlar:

• WebP — Aynı kalitede JPEG'den %25-35 daha küçük. Tüm modern tarayıcılarda desteklenir.
• AVIF — JPEG'den %50 daha küçüktür. AV1 video codec bileşenini temel alır. Destek artıyor.
• SVG — Simgeler, logolar ve resimler için ideal vektör formatı.

Duyarlı görseller:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Description"
  loading="lazy"
/>

Aletler:

• Sharp (Node.js) — Sunucu tarafı görüntü işleme.
• Squoosh — Tarayıcı tabanlı görüntü iyileştirici.
• ImageOptim — Üretim için kayıpsız sıkıştırma.
• Cloudinary / Imgix — CDN tabanlı gerçek zamanlı görüntü optimizasyonu.

Etki — Uygun görsel optimizasyonu sayfa ağırlığını %60-80 oranında azaltabilir.

Kod Bölme ve Ağaç Sallama

Kod bölme, JavaScript'inizi isteğe bağlı olarak yüklenen parçalara ayırır:

// React lazy loading
const Dashboard = React.lazy(() => import('./Dashboard'));

// Webpack dynamic import
import(/* webpackChunkName: "chart" */ './Chart').then(module => {
  module.renderChart();
});

Ağaç sallama ölü kodu ortadan kaldırır. Webpack, Rollup ve esbuild, paketleme sırasında kullanılmayan dışa aktarmaları kaldırır. Ağaç sallamanın etkili bir şekilde çalışması için ES modüllerini ("içe aktarma"/"dışa aktarma") kullandığınızdan emin olun.

---

2. Önbelleğe Almadan Yararlanın

Önbelleğe alma, daha önce yerel depolama alanından getirilen kaynakları sunarak ağ isteklerini tamamen ortadan kaldırır.

Tarayıcı Önbelleğe Alma (HTTP Başlıkları)

# Apache .htaccess
<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|js|css|svg|woff2)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# Nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

HTML dosyaları için daha kısa önbellek süreleri (max-age=0, must-revalidate) veya tazelik doğrulaması için ETag'ler kullanın.

Önce Çevrimdışı için Hizmet Çalışanları

Hizmet çalışanları tarayıcıda programlanabilir bir ağ proxy'si görevi görür:

// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // Cache-first strategy for static assets
      return response || fetch(event.request);
    })
  );
});

Hizmet çalışanı önbelleğe alma stratejileri:

Strateji	Kullanım Örneği
Önce Önbellek	Statik varlıklar (resimler, CSS, JS)
Önce Ağ	API çağrıları, dinamik içerik
Yeniden Doğrulama Sırasında Eski	Haber akışları, blog gönderileri
Yalnızca Ağ	Formlar, ödeme API'leri

CDN Kenar Önbelleğe Alma

Bir CDN (İçerik Dağıtım Ağı), içeriği coğrafi olarak dağıtılmış uç sunucularda önbelleğe alır. Popüler sağlayıcılar:

• Cloudflare — Küresel ağ, DDoS koruması, HTTP/3 desteği.
• Hızlı — Gerçek zamanlı temizleme, VCL yapılandırması.
• Akamai — Kurumsal düzeyde, devasa ölçek.
• AWS CloudFront — Derin AWS entegrasyonu, Lambda@Edge.

Etki — CDN önbelleğe alma, sunucu yükünü %80+ oranında azaltır ve global kullanıcılar için gecikmeyi %50-80 oranında azaltır.

---

3. Oluşturmayı Engelleyen Kaynakları Azaltın

Tarayıcı "" veya "" etiketleriyle karşılaştığında HTML ayrıştırma duraklatılır. Bu, oluşturmayı engeller.

Erteleme ve Eşzamansız

<!-- Async: download in parallel, execute as soon as downloaded -->
<script async src="analytics.js"></script>

<!-- Defer: download in parallel, execute in order after HTML parsing -->
<script defer src="app.js"></script>

Temel kural:

• DOM erişimi ve yürütme sırası gerektiren komut dosyaları için "erteleme"yi kullanın.
• Bağımsız komut dosyaları (analizler, reklamlar) için "async"i kullanın.
• Hemen yürütülmesi gereken kritik komut dosyaları için ikisini de kullanmayın.

Kritik CSS Satır İçi

Ekranın üst kısmındaki içerik için gereken CSS'yi çıkarın ve satır içi yapın:

<head>
  <style>
    /* Inlined critical CSS */
    header { background: #333; color: white; }
    .hero { min-height: 80vh; display: flex; align-items: center; }
    /* ... only what's visible on initial load */
  </style>
  <!-- Deferred non-critical CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

Araçlar: Kritik (Node.js), Penthouse ve webpack-kritik, satır içi CSS'yi otomatik olarak oluşturur.

Kaynak İpuçları

<!-- Preload critical resources early -->
<link rel="preload" href="hero-image.webp" as="image">

<!-- Preconnect to third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">

<!-- Prefetch resources needed on the next page -->
<link rel="prefetch" href="next-page.html">

---

4. Kritik İşleme Yolunu Optimize Edin

Kritik oluşturma yolu, tarayıcının bir sayfayı oluşturmak için attığı adımların sırasıdır. Bunu optimize etmek etkileşim süresini azaltır.

Sunucu Yanıt Süresi

• İlk Bayta Kadar Geçen Süreyi (TTFB) 200 ms'nin altında tutun.
• Sunucu tarafı önbelleğe almayı kullanın (Vernik, Redis, Memcached).
• Hızlı barındırma ve veritabanlarını seçin.
• Statik ve önbelleğe alınmış dinamik içerik için CDN kullanın.

HTTP/2 ve HTTP/3

Protokol	Temel Özellikler
HTTP/1.1	Bağlantı başına bir istek (sınırlı)
HTTP/2	Çoğullama, sunucu itme, başlık sıkıştırma, ikili protokol
HTTP/3	QUIC tabanlı, sıfır RTT bağlantısı, paket kaybını daha iyi yönetir

HTTP/2, paketlemeyi daha az kritik hale getirir; HTTP/1.1'in bağlantı ek yükü olmadan birçok küçük dosyayı sunabilirsiniz.

Sıkıştırma

# Enable Brotli (preferred, ~20% better than Gzip)
brotli on;
brotli_types text/plain text/css application/json application/javascript;

# Fallback Gzip
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;
gzip_vary on;

---

5. Önemli Web Verileri

Google'ın Önemli Web Verileri, kullanıcı deneyimini en çok etkileyen üç ölçümdür:

LCP (En Büyük İçerikli Boya) — Hedef: < 2,5s

Yükleme performansını ölçer. Görünür en büyük öğenin (kahraman resim, başlık) hızlı bir şekilde oluşturulması gerekir.

Optimizasyon:

• LCP görüntüsünü optimize edin ve önceden yükleyin.
• Oluşturmayı engelleyen kaynakları en aza indirin.
• Bir CDN kullanın.
• LCP öğesinde fetchpriority="high" kullanmayı düşünün:

  <img src="hero.webp" fetchpriority="high" alt="Hero">
  

FID (İlk Giriş Gecikmesi) — Hedef: < 100ms

Etkileşimi ölçer. 2024'te INP (Sonraki Boyayla Etkileşim) ile değiştirildi.

Optimizasyon:

• Uzun JavaScript görevlerini parçalara ayırın (>50ms).
• Yoğun hesaplamalar için Web Çalışanlarını kullanın.
• Kritik olmayan JavaScript'i erteleyin.

CLS (Kümülatif Düzen Kayması) — Hedef: < 0,1

Görsel stabiliteyi ölçer. Öğeler beklenmedik şekilde değişmemelidir.

Optimizasyon:

• Resimler ve videolarda her zaman açıkça "genişlik" ve "yükseklik" ayarlayın.
• Reklamlar ve yerleştirmeler için yer ayırın.
• Özel yazı tipleri için 'font-display: isteğe bağlı' seçeneğini kullanın.
• Mevcut içeriğin üzerine içerik eklemekten kaçının.

img, video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Reserve space for dynamic content */
.ad-container {
  min-height: 250px;
}

---

6. İleri Teknikler

Tembel Yükleme

Yerel tembel yükleme tüm modern tarayıcılarda desteklenir:

<img src="photo.webp" loading="lazy" alt="Lazy loaded image">
<iframe src="map.html" loading="lazy"></iframe>

Daha eski tarayıcılar için kesişim gözlemcisini geri dönüş olarak kullanın:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Ön Bağlantı ve DNS Önceden Getirme

<!-- DNS prefetch resolves domain names early -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Preconnect establishes full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">

Yazı Tipi Optimizasyonu

/* Font-display controls how fonts render while loading */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Show fallback text immediately */
}

/* Subset fonts to include only needed characters */
/* Use variable fonts for multiple weights in one file */

---

Ölçüm Araçları

Alet	Tip	En İyisi
Deniz feneri	Laboratuvar	Denetim ve öneriler
Sayfa Hızı Analizleri	Laboratuvar + Saha	Google'a özel metrikler
Web Sayfası Testi	Laboratuvar	Detaylı şelale analizi
Chrome Geliştirme Araçları	Laboratuvar	Ağ, performans, kapsama alanı
Sentry Performansı	ROM	Gerçek kullanıcı izleme
Datadog RUM	ROM	Uçtan uca performans takibi
Kalibre	Sürekli	Performans bütçeleri ve CI
Deniz Feneri CI	CI	Gerilemelerin önlenmesi

---

Performans Bütçeleri

Gerilemeleri önlemek için bir performans bütçesi belirleyin:

{
  "budgets": [
    {
      "resourceType": "total",
      "budget": 500000
    },
    {
      "resourceType": "script",
      "budget": 150000
    },
    {
      "resourceType": "image",
      "budget": 200000
    },
    {
      "timing": {
        "metric": "interactive"
      },
      "budget": 5000
    }
  ]
}

---

Çözüm

Web performansı sürekli bir disiplindir. En yüksek etkiye sahip öğelerle başlayın:

1. Mevcut temel seviyenizi ölçün — Lighthouse ve WebPageTest'i kullanın.
2. Resimleri optimize edin — Çoğu site için en büyük hızlı kazanç.
3. Önbelleğe almayı ve sıkıştırmayı etkinleştirin — Yüksek yatırım getirisi ile kolay kazançlar.
4. Oluşturmayı engelleyen kaynakları ortadan kaldırın — JS'yi ve satır içi kritik CSS'yi erteleyin.
5. Önemli Web Verilerini İzleyin — Yalnızca laboratuvarda değil sahada da takip edin.

Performans optimizasyonu hiçbir zaman "tamamlanmaz"; sürekli dikkat gerektirir, ancak kullanıcı memnuniyeti, dönüşümler ve SEO'ya yapılan yatırımın geri dönüşü önemlidir.