Web Sitesi Hız Optimizasyonu: 2026 Performans Rehberi

1. Hız Neden Bu Kadar Kritik?

Web sitesi hızı, kullanıcı deneyiminin en temel bileşeni. Bir ziyaretçi sitenize tıkladığı anda geri sayım başlar. 2.5 saniyenin altında yüklenen sayfalar, %31 daha yüksek dönüşüm oranı elde ediyor. 1 saniyede yüklenen bir site, 10 saniyede yüklenen bir siteye kıyasla 5 kat daha fazla dönüşüm sağlıyor.

Rakamlar sadece dönüşümle sınırlı değil. Mobil kullanıcıların %53'ü 3 saniyeden uzun süren siteleri terk ediyor. Her 1 saniyelik gecikme, dönüşüm oranını %7'ye kadar düşürebiliyor. Bir e-ticaret sitesinde bu, doğrudan gelir kaybı demek.

Google, sayfa hızını doğrudan sıralama faktörü olarak kullanıyor. Core Web Vitals metrikleri 2021'den bu yana arama sıralama sinyali. Yavaş bir site, hem organik trafiğinizi hem de reklam harcamalarınızın geri dönüşünü olumsuz etkiliyor. SEO stratejiniz ne kadar güçlü olursa olsun, yavaş bir site üzerine inşa edilmişse etkisi sınırlı kalır.

AI tabanlı arama motorları da (Google AI Overviews, Perplexity, ChatGPT Search) içerik alıntılarken teknik kaliteyi dikkate alıyor. Yapılandırılmış veri, hızlı yükleme ve temiz HTML yapısı, bu platformlarda görünürlük şansınızı artırıyor.

E-ticaret siteleri için durum daha da kritik. Swappie, Core Web Vitals'ı iyileştirip yükleme süresini %23 kısalttığında mobil gelirini %42 artırdı. Tüketicilerin %70'i sayfa hızının satın alma kararlarını etkilediğini belirtiyor.

2. Core Web Vitals: Üç Temel Metrik

Google, kullanıcı deneyimini üç temel metrikle ölçüyor. Bu metrikler arama sıralamasını doğrudan etkiliyor ve Google Search Console'da raporlanıyor.

LCP — Largest Contentful Paint

Sayfanın en büyük görsel öğesinin (hero görsel, başlık bloğu, video poster) ne kadar sürede render edildiğini ölçer. Hedef: 2.5 saniyenin altı. LCP'yi etkileyen faktörler: sunucu yanıt süresi, render-blocking kaynaklar, kaynak yükleme süresi ve client-side rendering gecikmeleri.

INP — Interaction to Next Paint

Kullanıcının bir butona tıkladığında veya bir form alanına yazdığında tarayıcının ne kadar sürede görsel yanıt verdiğini ölçer. Mart 2024'te FID'in (First Input Delay) yerini aldı. Hedef: 200 milisaniyenin altı. Sitelerin %43'ü bu eşiği aşamıyor — INP, en çok başarısız olunan Core Web Vital.

CLS — Cumulative Layout Shift

Sayfa yüklenirken içeriklerin beklenmedik şekilde kaymasını ölçer. Bir butona basmak üzereyken içerik kayıp yanlış yere tıklamak — CLS'in ölçtüğü tam olarak bu. Hedef: 0.1'in altı. Genellikle en kolay düzeltilebilen metrik: görsellere width/height tanımlamak ve font yüklemesini optimize etmek çoğu sorunu çözer.

Google bu metrikleri gerçek kullanıcı verilerinin (CrUX — Chrome User Experience Report) yüzde 75. diliminden değerlendiriyor. Yani ziyaretçilerinizin en az %75'inin "iyi" eşiğini geçmesi gerekiyor. Lab testlerinde iyi sonuç almak yetmez; gerçek kullanıcı verileri belirleyicidir.

3. Görsel Optimizasyonu

Ortalama bir web sayfasının toplam boyutunun %50'den fazlası görsellerden oluşuyor. Görsel optimizasyonu, en az eforla en yüksek hız kazanımını sağlayan alandır.

Modern Formatlar: WebP ve AVIF

JPEG ve PNG artık eski nesil formatlar. WebP, JPEG'e göre %25-35 daha küçük dosya boyutu sunarken aynı görsel kaliteyi koruyor. AVIF ise daha da ileri gidiyor — JPEG'e kıyasla %50'ye kadar daha küçük dosyalar üretiyor. Tarayıcı desteği 2026 itibarıyla WebP için %97, AVIF için %92 seviyesinde.

Responsive Görseller

Her cihaza aynı boyutta görsel göndermek bant genişliği israfıdır. HTML'deki srcset ve sizes öznitelikleri, tarayıcının ekran boyutuna uygun görseli seçmesini sağlar. Mobil kullanıcıya 1920px genişliğinde bir görsel göndermenin anlamı yok — 640px veya 768px yeterli.

Lazy Loading

Ekranın altında kalan görselleri sayfa yüklendiğinde değil, kullanıcı o bölgeye kaydırdığında yüklemek — lazy loading'in mantığı bu. HTML'de loading="lazy" özniteliğiyle uygulanır. Tek istisna: hero görseli veya sayfanın en üstündeki ana görsel. Bu görsele loading="eager" ve fetchpriority="high" ekleyin.

CLS'i Önlemek İçin Boyut Tanımlama

Her <img> etiketine mutlaka width ve height öznitelikleri ekleyin. Bu, tarayıcının görsel yüklenmeden önce doğru alanı ayırmasını sağlar ve düzen kaymasını (CLS) önler. SVG kullanıyorsanız ikonlar ve logolar için SVG sprite kullanmak hem HTTP isteklerini azaltır hem de ölçeklenebilirlik sağlar.

Sıkıştırma Araçları

• Squoosh: Google'ın açık kaynak aracı — tarayıcıda çalışır, formatlar arası dönüşüm ve sıkıştırma karşılaştırması yapar
• ShortPixel: Otomatik toplu sıkıştırma, API desteği, WordPress eklentisi mevcut
• TinyPNG: PNG ve JPEG sıkıştırma konusunda güvenilir ve hızlı
• Sharp (Node.js): Programatik görsel işleme — build sürecinize entegre edilebilir

4. Sunucu ve CDN Yapılandırması

Ön yüz (frontend) optimizasyonu önemli, ama sunucu tarafı yavaşsa her şey oradan darboğaza girer. İlk bayt süresi (TTFB — Time to First Byte) her şeyin başlangıç noktası.

TTFB Optimizasyonu

TTFB, tarayıcının sunucudan ilk bayt veriyi alması için geçen süredir. 800ms'nin altı "iyi" kabul edilir. TTFB'yi iyileştirmek için: hosting kalitesini yükseltin, veritabanı sorgularını optimize edin, sunucu tarafı önbellekleme uygulayın ve gereksiz yönlendirmeleri (redirect) kaldırın.

CDN Kullanımı

CDN (Content Delivery Network), statik dosyalarınızı (görseller, CSS, JS, fontlar) dünya genelindeki edge sunuculara dağıtır. İstanbul'daki bir kullanıcı ABD'deki sunucunuz yerine İstanbul'daki CDN edge noktasından içerik alır. Gecikme süresi %40-80 azalır. Cloudflare, AWS CloudFront ve Fastly popüler seçenekler. Cloudflare'in ücretsiz planı bile ciddi bir fark yaratır.

HTTP/2 ve HTTP/3

HTTP/1.1'de tarayıcı aynı anda sınırlı sayıda istek gönderebiliyordu. HTTP/2 ile multiplexing sayesinde tek bir bağlantı üzerinden onlarca kaynak paralel yüklenir. HTTP/3 (QUIC protokolü) bunu daha da ileri taşıyarak bağlantı kurma süresini kısaltır ve paket kaybında performans düşüşünü minimize eder. CDN sağlayıcılarının çoğu HTTP/3'ü destekliyor.

Sıkıştırma: Gzip ve Brotli

Sunucudan gönderilen metin tabanlı dosyaları (HTML, CSS, JS) sıkıştırmak transfer boyutunu %60-80 azaltır. Brotli, Gzip'e göre %15-20 daha iyi sıkıştırma oranı sunar ve modern tarayıcıların tamamı tarafından desteklenir. Sunucu yapılandırmanızda Brotli'yi etkinleştirmeniz yeterli.

5. CSS ve JavaScript Optimizasyonu

CSS ve JavaScript dosyaları, sayfanın render edilmesini doğrudan etkiler. Optimize edilmemiş kod, tarayıcının sayfayı görüntülemesini geciktirir.

Minification (Küçültme)

CSS ve JavaScript dosyalarındaki boşlukları, yorumları ve gereksiz karakterleri kaldırmak dosya boyutunu %20-40 azaltır. Terser (JavaScript) ve cssnano (CSS) popüler minification araçları. Build sürecinize entegre ederek her deploy'da otomatik çalışmasını sağlayın.

Kritik CSS

Sayfanın ilk ekranda görünen kısmı (above the fold) için gereken CSS'i <style> etiketi içinde HTML'e inline olarak yerleştirin. Geri kalan CSS'i <link> ile asenkron yükleyin. Bu, tarayıcının harici CSS dosyasını beklemeden sayfayı render etmeye başlamasını sağlar — LCP'ye doğrudan etkisi vardır.

JavaScript Yükleme Stratejisi

<script> etiketlerinde defer veya async özniteliğini kullanın. defer, script'in HTML parse'ı tamamlandıktan sonra sırayla çalışmasını sağlar. async ise script hazır olduğunda hemen çalıştırır — sıra garantisi vermez. Ana uygulama kodunuz için defer, bağımsız analitik scriptleri için async tercih edin.

Kullanılmayan Kodu Temizleme

CSS dosyanızın ne kadarı gerçekten kullanılıyor? Chrome DevTools'un Coverage sekmesi bunu gösterir. WordPress sitelerinde tema ve eklentilerin yüklediği kullanılmayan CSS oranı %60-80'e çıkabiliyor. Özel geliştirme projelerinde tree shaking ve code splitting ile sadece gereken kod gönderilir.

6. Önbellekleme Stratejileri

Bir kullanıcı sitenizi ikinci kez ziyaret ettiğinde aynı dosyaları tekrar indirmesine gerek yok. Doğru önbellekleme stratejisi, tekrar ziyaretlerde yükleme süresini neredeyse sıfıra indirir.

Tarayıcı Önbelleği (Browser Cache)

Cache-Control header'larıyla tarayıcıya hangi dosyaları ne kadar süre saklaması gerektiğini bildirin. Önerilen süreler:

• Görseller, fontlar: 1 yıl (max-age=31536000, immutable)
• CSS, JS: 1 yıl (dosya adında hash kullanarak — değiştiğinde yeni dosya adı)
• HTML: Kısa süre veya no-cache (max-age=0, must-revalidate)

Statik dosyalarda dosya adına versiyon hash'i eklemek (style.a1b2c3.css) en güvenilir cache invalidation yöntemidir.

Service Worker

Service Worker, tarayıcıda arka planda çalışan bir JavaScript işçisidir. Ağ isteklerini yakalayabilir, önbellekten yanıt dönebilir ve çevrimdışı erişim sağlayabilir. Progressive Web App (PWA) yaklaşımının temel yapı taşıdır. Özellikle tekrar eden ziyaretçilerin deneyimini dramatik şekilde iyileştirir.

CDN Edge Cache

CDN sağlayıcınızın edge sunucularında statik dosyalar otomatik önbelleklenir. Dinamik içerikler için de edge cache kuralları tanımlanabilir. Cloudflare'de Page Rules veya Cache Rules ile hangi URL'lerin ne kadar süre önbellekleneceğini kontrol edebilirsiniz.

7. Üçüncü Parti Scriptler ve Performans

Google Analytics, canlı sohbet widget'ları, sosyal medya butonları, reklam scriptleri — her biri ayrı bir HTTP isteği, ayrı bir JavaScript dosyası, ayrı bir render maliyeti. Üçüncü parti scriptler, kontrol edemediğiniz performans darboğazlarıdır.

Etkiyi Ölçme

Chrome DevTools'un Network sekmesinde üçüncü parti istekleri filtreleyin. Toplam yükleme süresinin ne kadarını oluşturduklarını görün. Lighthouse raporunda "Reduce the impact of third-party code" uyarısı varsa harekete geçin.

Font Yükleme Stratejisi

Google Fonts CDN'den font yüklemek ek DNS lookup ve bağlantı maliyeti getirir. Fontları kendi sunucunuzda barındırmak (self-hosting) bu maliyeti ortadan kaldırır. font-display: swap veya font-display: optional kullanarak font yüklenene kadar sistem fontunu gösterin — bu, CLS ve LCP'yi korur.

Facade Pattern

YouTube videoları, Google Maps ve canlı sohbet widget'ları için facade pattern uygulayın. Gerçek embed yerine hafif bir önizleme görseli koyun; kullanıcı tıkladığında gerçek içerik yüklensin. Bir YouTube embed'i tek başına 500KB-1MB ekstra yük demek. Facade ile bu yük, yalnızca ilgilenen kullanıcılar için oluşur.

Tag Manager Kullanımı

Google Tag Manager (GTM) scriptleri tek bir konteynerda toplamak için faydalı, ama konteyner büyüdükçe performans düşer. GTM içindeki her etiketi düzenli olarak denetleyin. Kullanılmayan etiketleri kaldırın. Tetikleyicileri (trigger) mümkün olduğunca dar kapsamda tanımlayın — her sayfa yüklemesinde tüm etiketlerin çalışmasına gerek yok.

8. Performans Ölçüm Araçları

Ölçemediğiniz şeyi iyileştiremezsiniz. Performans optimizasyonuna mevcut durumu tespit ederek başlayın.

• Google PageSpeed Insights: Hem lab verisi (Lighthouse simülasyonu) hem de gerçek kullanıcı verisi (CrUX) sunar. İlk başvurulacak araç — ücretsiz ve doğrudan Google verisiyle çalışır
• Google Search Console: Core Web Vitals raporu tüm sayfalarınızın durumunu toplu olarak gösterir. "İyi", "İyileştirme gerekli" ve "Kötü" kategorilerinde kaç URL olduğunu takip edin
• Lighthouse (Chrome DevTools): Performans, erişilebilirlik, SEO ve best practice'ler için kapsamlı denetim. F12 > Lighthouse sekmesinden çalıştırılır. Lab ortamında test yapar — gerçek kullanıcı verisini yansıtmaz ama sorunları tespit etmek için güçlüdür
• GTmetrix: Waterfall grafikleriyle her kaynağın yükleme süresini detaylı gösterir. Farklı lokasyonlardan test imkânı sunar
• WebPageTest: Farklı tarayıcılar, cihazlar ve ağ koşullarından test yapabilirsiniz. Film şeridi görünümüyle sayfanın yükleniş sürecini kare kare izleyebilirsiniz. Gelişmiş kullanıcılar için en kapsamlı araç
• CrUX Dashboard: Chrome User Experience Report verilerini görselleştiren Google Data Studio panosu. Sitenizin gerçek kullanıcı performansını zaman içinde izlemenizi sağlar

9. Adım Adım Optimizasyon Kontrol Listesi

Nereden başlayacağınızı bilmiyorsanız bu sırayı takip edin. Öncelik sırası, etkisi en yüksek adımlardan başlayacak şekilde düzenlenmiştir.

1. Mevcut durumu ölç: PageSpeed Insights ve Search Console ile tüm sayfalarınızın Core Web Vitals skorlarını kaydedin. Bu, sonraki iyileştirmelerin referans noktası olacak
2. Görselleri optimize et: Tüm JPEG/PNG görselleri WebP veya AVIF'e dönüştürün. Boyutları responsive olarak ayarlayın (srcset). Her görsele width/height ekleyin
3. Lazy loading uygula: Ekranın altındaki tüm görsellere loading="lazy" ekleyin. Hero görseline fetchpriority="high" verin
4. CSS ve JS dosyalarını küçült: Minification uygulayın. Kullanılmayan CSS'i tespit edip kaldırın
5. CDN etkinleştir: Henüz CDN kullanmıyorsanız Cloudflare'in ücretsiz planı bile yeterli bir başlangıçtır
6. Önbellekleme kurallarını ayarla: Statik dosyalar için uzun süreli cache, HTML için kısa süreli cache tanımlayın
7. Üçüncü parti scriptleri temizle: Kullanılmayan analitik, widget ve eklenti scriptlerini kaldırın. Kalanları lazy load edin
8. Kritik CSS'i inline yap: Above the fold CSS'i HTML'e inline ekleyin, geri kalanı asenkron yükleyin
9. Font stratejisini optimize et: Fontları self-host edin, font-display: optional veya swap kullanın, kullanmadığınız font ağırlıklarını kaldırın
10. Mobil performansı ayrıca test et: Lighthouse'da mobil modda test edin. 3G throttling ile gerçek mobil deneyimi simüle edin

10. Sık Sorulan Sorular

Web sitesi hızı SEO sıralamasını etkiler mi?

Evet, sayfa hızı Google'ın doğrudan sıralama faktörlerinden biri. Google, Core Web Vitals metriklerini (LCP, INP, CLS) sıralama sinyali olarak kullanıyor. Hızlı siteler hem arama sonuçlarında üst sıralarda yer alıyor hem de daha düşük hemen çıkma oranına sahip. Araştırmalar, 1 saniyelik gecikmenin dönüşüm oranını %7'ye kadar düşürebildiğini gösteriyor.

Core Web Vitals nedir ve nasıl ölçülür?

Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metriktir. LCP yükleme hızını, INP etkileşim yanıt süresini, CLS görsel kararlılığı ölçer. Google PageSpeed Insights, Search Console ve Chrome DevTools'taki Lighthouse ile ölçülebilir. Google bu metrikleri gerçek kullanıcı verilerinin yüzde 75. diliminden değerlendiriyor.

Web sitesi hızını artırmak için en etkili yöntem nedir?

En yüksek etkiyi genellikle görsel optimizasyonu sağlar. Görselleri WebP veya AVIF formatına dönüştürmek dosya boyutunu %50-70 azaltabilir. Bunu CDN kullanımı, tarayıcı önbellekleme, CSS/JS minification ve gereksiz üçüncü parti scriptleri kaldırma takip eder. Kritik CSS'i inline yerleştirmek de ilk yükleme hızını belirgin şekilde iyileştirir.

CDN nedir ve site hızını nasıl etkiler?

CDN (Content Delivery Network), web sitenizin statik dosyalarını dünya genelindeki sunuculara dağıtarak kullanıcılara en yakın noktadan sunan bir altyapıdır. Gecikme süresi %40-80 oranında azalabilir. Cloudflare, AWS CloudFront ve Fastly gibi hizmetler aynı zamanda DDoS koruması ve otomatik görsel optimizasyonu da sunuyor.

Mobil site hızı neden ayrıca önemli?

Türkiye'de internet trafiğinin %70'inden fazlası mobil cihazlardan geliyor. Google, mobile-first indexing kullandığı için sitenizin mobil performansı masaüstünden daha belirleyici. Mobil kullanıcıların %53'ü 3 saniyeden uzun süren siteleri terk ediyor. Responsive tasarım, dokunmatik hedef boyutları ve mobil ağ koşullarına uygun kaynak yönetimi kritik.