Hızlı Web Sitesi Nasıl Yapılır? Performans Optimizasyonu Rehberi

Web sitesi hız optimizasyonu, sayfa yüklenme süresini düşürerek kullanıcı deneyimini, SEO sıralamasını ve dönüşüm oranını artırma sürecidir. Hedefler: LCP 2.5 saniye altı, INP 200ms altı, CLS 0.1 altı. Görsel optimizasyonu, tarayıcı önbelleği, CDN, kod küçültme ve kaliteli hosting temel adımlardır. Bu rehberde her adımı gerçek verilerle ve pratik uygulamalarla bulacaksınız.

3 saniye. Bir web sitesinin yüklenmesi için tanınan maksimum süre bu. Google'ın araştırmasına göre 3 saniyeyi geçen mobil sayfalarda ziyaretçilerin yüzde 53'ü siteyi terk ediyor. Portent'ın araştırması daha çarpıcı: 0-5 saniye arasında her ek saniye dönüşüm oranını yüzde 4.42 düşürüyor. 1 saniyede yüklenen sayfalar, 5 saniyede yüklenenlere göre 3 kat daha yüksek dönüşüm oranı elde ediyor.

Gerçek dünya etkisi: Vodafone LCP metriğini yüzde 31 iyileştirdiğinde satışlarda yüzde 8, sepet oranında yüzde 11 artış gördü. Tüketicilerin yüzde 70'i sayfa hızının satın alma kararını etkilediğini söylüyor. Yüzde 64'ü yavaş siteyi terk edip rakipten alışveriş yapıyor. Yani yavaş site sadece kötü deneyim değil, doğrudan gelir kaybı ve rakibe müşteri transferi.

SEO stratejileri yazımızda Google'ın Core Web Vitals'ı resmi bir sıralama faktörü olarak kullandığından bahsetmiştik. Yavaş siteniz Google'da da geride kalıyor. Bu rehberde web sitenizi nasıl hızlandıracağınızı adım adım anlatıyoruz.

Core Web Vitals: Google'ın Hız Karnesi

Google, sitenizin performansını üç temel metrikle değerlendiriyor:

• LCP (Largest Contentful Paint): Sayfadaki en büyük içerik elemanının (genellikle hero görsel veya ana başlık) ne kadar sürede yüklendiği. Hedef: 2.5 saniyenin altı.
• FID / INP (First Input Delay / Interaction to Next Paint): Kullanıcının ilk etkileşimine (tıklama, dokunma) sitenin ne kadar hızlı tepki verdiği. Hedef: 200 milisaniyenin altı.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken elemanların ne kadar kayıp kaydığı. Bir butona basmak üzereyken reklam yükleniyor ve buton aşağı kayıyor, yanlış yere tıklıyorsunuz. Hedef: 0.1'in altı.

Bu üç metrik Google Search Console'da ve PageSpeed Insights'ta görüntülenebilir. Üçünde de "iyi" (yeşil) almak SEO için kritik.

Hız Ölçüm Araçları

Optimizasyona başlamadan önce mevcut durumunuzu ölçün:

• Google PageSpeed Insights: Hem mobil hem masaüstü skoru verir. Gerçek kullanıcı verisi (field data) ve laboratuvar verisi (lab data) sunar. Ücretsiz.
• GTmetrix: Detaylı şelale (waterfall) analizi. Hangi dosyanın ne kadar sürede yüklendiğini gösterir. Ücretsiz plan yeterli.
• Chrome Lighthouse: Tarayıcınızda F12 tuşuna basın, Lighthouse sekmesine gidin, analiz başlatın. Performans, erişilebilirlik, SEO ve en iyi uygulamalar puanı verir.
• WebPageTest: Farklı lokasyonlardan ve farklı cihazlardan test imkanı. İlk yükleme ve tekrar ziyaret karşılaştırması. Ücretsiz.

Performans Bütçesi Belirleyin

Optimizasyona başlamadan önce hedeflerinizi sayısallaştırın. Performans bütçesi, sitenizin aşmaması gereken limitleri tanımlar:

• Toplam sayfa boyutu: 1.5 MB'ın altı (görseller dahil)
• HTTP istekleri: 50'nin altı (her CSS, JS, görsel bir istek)
• LCP: 2.5 saniye altı
• INP: 200 milisaniye altı
• CLS: 0.1 altı
• İlk yükleme süresi: 3 saniye altı (mobil 4G bağlantıda)

Bu limitleri aştığınızda alarm çalmalı. E-ticarette yüzde 1'lik hız iyileşmesi yüzde 2 dönüşüm artışı sağlayabiliyor. 2 saniyelik gecikme hemen çıkma oranını (bounce rate) yüzde 103 artırıyor. 4 saniyeyi geçen sayfalarda ziyaretçilerin yüzde 63'ü geri dönüyor. Mobilde 1 saniyelik gecikme dönüşümü yüzde 20'ye kadar düşürebiliyor. Yani hız doğrudan gelir demek.

Lab Verileri ve Alan Verileri Farkı

PageSpeed Insights iki tür veri gösterir: Lab data (laboratuvar) ve Field data (alan). Bu ayrımı bilmek önemli.

Lab verileri: Kontrollü ortamda yapılan ölçüm. Lighthouse simülasyonu. Sabit ağ hızı ve cihaz ile test edilir. Sorunları tespit etmek için kullanılır.

Alan verileri: Gerçek kullanıcılardan toplanan veri. Chrome UX Report (CrUX) üzerinden gelir. Google sıralama için alan verilerini kullanır, lab verilerini değil. Siteniz yeterince trafik aldığında alan verileri görünmeye başlar.

Lab skoru düşük ama alan verileri iyi olabilir veya tersi. Önceliğiniz alan verilerini iyileştirmek olmalı çünkü Google bunu dikkate alır.

Performans Optimizasyonu Adımları

1. Görsel Optimizasyonu (En Büyük Etki)

Web sayfalarının ortalama boyutunun yüzde 50-70'ini görseller oluşturuyor. Görsel optimizasyonu tek başına en büyük hız kazancını sağlar.

Modern formatlar kullanın: AVIF en iyi sıkıştırma oranını sunar (JPEG'e göre yüzde 50 daha küçük dosya boyutu). WebP de mükemmel bir alternatif (yüzde 30 daha küçük). Eski tarayıcılar için JPEG fallback bırakın. PNG'yi sadece şeffaflık gerektiren görsellerde kullanın.

Doğru boyutta sunun: 400 piksel genişliğinde görünecek bir alana 4000 piksel genişliğinde görsel yüklemeyin. Görseli gösterileceği boyutta hazırlayın. srcset özelliğiyle farklı ekran boyutlarına farklı görsel sunun.

Lazy loading: Ekranın altında kalan görselleri sayfa yüklenirken değil, kullanıcı oraya kaydırdığında yükleyin. HTML'de loading="lazy" özelliği bunu otomatik yapar. Hero görseli (sayfanın en üstündeki) lazy loading YAPMAMALI, diğer tüm görseller lazy olmalı.

2. Tarayıcı Önbelleği (Browser Caching)

CSS, JavaScript ve görsel dosyaları ilk ziyarette indirilir. Tarayıcı önbelleği bu dosyaları saklar; tekrar ziyarette sunucudan tekrar indirmek yerine yerel kopyadan yükler. Sonuç: İkinci ve sonraki ziyaretlerde çok daha hızlı yüklenme.

CSS ve JavaScript dosyaları için 1 yıl cache süresi ideal. Dosya güncellendiğinde ?v=2 gibi versiyon parametresi eklersiniz, tarayıcı yeni versiyonu indirir. HTML sayfaları ise cache'lenmemeli (her zaman güncel içerik gösterilmeli).

3. GZIP/Brotli Sıkıştırma

Sunucunuz dosyaları sıkıştırarak gönderdiğinde transfer boyutu yüzde 70-80 azalır. GZIP yaygın ve güvenilir bir sıkıştırma algoritması. Brotli (Google tarafından geliştirildi) GZIP'ten yüzde 15-20 daha iyi sıkıştırma sağlar. Modern sunucuların çoğu ikisini de destekler. Apache'de mod_deflate, Nginx'te gzip modülü ile aktifleştirilir.

4. CDN (İçerik Dağıtım Ağı) Kullanın

CDN, sitenizin statik dosyalarını (görseller, CSS, JS) dünya genelindeki sunuculara dağıtır. Samsun'daki sunucunuzdan İstanbul'daki ziyaretçiye dosya göndermek yerine İstanbul'daki CDN noktasından gönderir. Sonuç: Daha düşük gecikme, daha hızlı yükleme.

Cloudflare ücretsiz planı bile ciddi fark yaratır. DDoS koruması, SSL ve temel CDN hizmeti ücretsiz. Özellikle yurt dışından ziyaretçi alan siteler için CDN olmazsa olmaz.

5. CSS ve JavaScript Optimizasyonu

Minification (küçültme): CSS ve JS dosyalarındaki boşlukları, yorumları ve gereksiz karakterleri kaldırın. Dosya boyutu yüzde 20-30 azalır. Online araçlar veya build sürecinde otomatik yapılabilir.

Kullanılmayan kodu kaldırın: Sayfada kullanılmayan CSS ve JS kodları yüklenme süresini gereksiz uzatır. Chrome DevTools'taki Coverage sekmesi hangi kodun kullanılıp kullanılmadığını gösterir.

Defer ve async: JavaScript dosyalarını defer veya async özelliğiyle yükleyin. Bu sayede JS dosyaları HTML parse'ı engellemez ve sayfa daha hızlı görünür hale gelir. Kritik olmayan JS'leri sayfanın sonuna taşıyın.

6. Font Optimizasyonu

Web fontları LCP ve CLS'i doğrudan etkiler. Font dosyası yüklenene kadar ya metin görünmez (FOIT) ya da varsayılan fontla gösterilip sonra değişir (FOUT - CLS'e neden olur). Çözüm: font-display: swap kullanın. Bu ayar fontu yüklenene kadar sistem fontu gösterir, yüklenince değiştirir. Google Fonts kullanıyorsanız URL'ye &display=swap parametresi ekleyin. Sadece kullandığınız font ağırlıklarını yükleyin; tüm ailesi değil (Regular ve Bold genellikle yeterli).

7. Preload ve Preconnect

Tarayıcıya "bu kaynağa yakında ihtiyacın olacak, şimdiden hazırlan" diyebilirsiniz. Hero görseli, ana font dosyası, kritik CSS gibi kaynakları preload ile önceden yükletin. Üçüncü parti servislere (Google Fonts, CDN, analitik) preconnect ile önceden bağlantı kurun. Bu teknikler LCP'yi önemli ölçüde iyileştirir. Dikkat: Her şeyi preload yapmayın, sadece sayfanın ilk görünen kısmı için kritik kaynakları.

6. Sunucu ve Hosting Seçimi

En iyi optimizasyonu yapsanız bile kötü hosting her şeyi sabote eder. Ucuz paylaşımlı hostingler aynı sunucuyu yüzlerce siteyle paylaşır. Bir site yoğunluk yaşadığında diğer herkes etkilenir.

Kaliteli hosting yıllık 50-100 dolar aralığında bulunabilir. İki seçenek:

• Yönetilen VPS (50-60 dolar/yıl): Küçük-orta siteler için ideal. Garanti edilmiş kaynak, iyi performans.
• Bulut hosting (80-100 dolar/yıl): Trafik dalgalanmalarına otomatik ölçeklenen altyapı. E-ticaret ve yoğun trafik alan siteler için.

Sunucu konumu da önemli. Hedef kitleniz Türkiye'deyse Türkiye veya yakın bölgedeki (Almanya, Hollanda) sunucuları tercih edin. CDN kullanıyorsanız sunucu konumu daha az kritik olur.

7. Veritabanı Optimizasyonu

Dinamik siteler her sayfa yüklemesinde veritabanı sorgusu çalıştırır. Yavaş sorgular sayfanın yüklenmesini geciktirir. Düzenli veritabanı bakımı yapın: Gereksiz kayıtları temizleyin (spam yorumlar, eski revizyon kayıtları), tablo indekslerini optimize edin, sorgu önbellekleme (query caching) kullanın.

8. Kritik CSS (Above the Fold)

Sayfanın ilk görünen kısmı (ekrana sığan alan) için gereken CSS'i HTML içinde inline olarak ekleyin. Böylece tarayıcı harici CSS dosyasını beklemeden sayfanın üst kısmını hemen render eder. Geri kalan CSS'i async olarak yükleyin. Bu teknik özellikle LCP metriğini ciddi iyileştirir.

Hosting Karşılaştırması

Doğru hosting seçimi performansın temelidir. İşte genel karşılaştırma:

• Paylaşımlı hosting (10-30 dolar/yıl): En ucuz ama en yavaş. Kişisel bloglar için idare eder, iş siteleri için yetersiz.
• VPS (50-100 dolar/yıl): Kendi sunucu kaynağınız. Hız ve güvenilirlik çok daha iyi. Kurumsal siteler ve küçük e-ticaret için ideal.
• Bulut hosting (80-200 dolar/yıl): Otomatik ölçekleme. Trafik artınca kaynak artar, azalınca düşer. Büyüyen siteler ve e-ticaret için.
• Dedicated sunucu (200+ dolar/yıl): Büyük e-ticaret ve yoğun trafik siteleri için.

Optimizasyon Sonrası Kontrol Listesi

• PageSpeed Insights mobil skoru 70+, masaüstü 85+ mü?
• LCP 2.5 saniyenin altında mı?
• CLS 0.1'in altında mı?
• Görseller WebP veya AVIF formatında mı?
• GZIP/Brotli sıkıştırma aktif mi?
• Tarayıcı önbelleği doğru ayarlanmış mı?
• Gereksiz CSS/JS kaldırılmış mı?
• Lazy loading uygulanmış mı?

Google Analytics rehberimizde anlattığımız gibi hız iyileştirmelerinin etkisini verilerle takip edin. Hız artışı sonrası bounce rate (hemen çıkma oranı) düşecek, oturum süresi artacaktır.

Sonuç

Web sitesi hızı kullanıcı deneyimi, SEO ve dönüşüm oranının temelidir. Görsel optimizasyonu, caching, CDN ve kaliteli hosting ile sitenizi ciddi şekilde hızlandırabilirsiniz. En kolay kazanım görsel optimizasyonudur: Görselleri WebP/AVIF'e çevirin, lazy loading ekleyin, doğru boyutta sunun. Tek başına bu adım bile büyük fark yaratır.

Sitenizin hız analizi ve optimizasyonu için WhatsApp üzerinden bize ulaşın. tema.alfadizayn.com üzerindeki tüm temalarımız performans optimizasyonu yapılmış olarak geliyor: WebP/AVIF görsel dönüşümü, lazy loading, minified CSS/JS ve cache altyapısı hazır.