Vaka Çalışması: Bir E-Ticaret Sitesini 3.8s LCP'den 0.9s'ye Nasıl Düşürdük?
Web Görsel
Başlangıç Durumu
Müşteri: Aylık 180 bin tekil ziyaretçi alan, 3.200 ürünlü bir kadın giyim e-ticaret sitesi. Problem: "Mobilde çok yavaş, Google sıralamamız düştü, sepet terk oranı %74''e çıktı."
İlk Ölçümler (Chrome UX Report + kendi RUM)
| Metrik | Mobil | Masaüstü | Hedef |
|---|---|---|---|
| LCP | 3.840 ms | 2.100 ms | < 2.500 ms |
| INP | 320 ms | 180 ms | < 200 ms |
| CLS | 0.18 | 0.09 | < 0.1 |
| TTFB | 1.120 ms | 680 ms | < 600 ms |
| Lighthouse Performance | 42 | 68 | > 90 |
Altyapı: PHP 7.4 + WooCommerce, 50+ eklenti, paylaşımlı hosting, jQuery ağırlıklı tema.
Metodoloji: Önce Ölç, Sonra Değiştir
- Gerçek kullanıcı verisi (RUM) kuruldu — web-vitals.js ile sunucuya metrik gönderimi
- WebPageTest ile "Competitive Benchmark" alındı (3 rakip karşılaştırması)
- Chrome DevTools Performance paneliyle başlangıç sayfası, kategori, ürün, sepet, ödeme akışları profillendi
- Hangi metriğin hangi kullanıcı davranışını etkilediği hipotezleri yazıldı
11 Adımlık İyileştirme Planı
Adım 1: Hosting Yükseltmesi (TTFB 1120 → 380 ms)
Paylaşımlı hosting''ten LiteSpeed tabanlı VPS''e geçildi. PHP 8.3''e yükseltildi. OPcache + JIT aktif edildi. Sonuç: TTFB üçte birine indi. Maliyet: aylık 450 TL → aylık 1.800 TL.
Adım 2: Veritabanı Tuning (TTFB 380 → 260 ms)
- MySQL innodb_buffer_pool_size sunucu RAM''inin %70''ine ayarlandı
- Slow query log incelendi; 12 adet n+1 sorgusu tespit edildi
- wp_options tablosunun autoloaded satırları 3.200''den 420''ye indirildi
- Transient API temizliği — gereksiz 18 bin satır silindi
Adım 3: CDN + Edge Cache (TTFB 260 → 90 ms Türkiye''den)
Cloudflare Pro kuruldu. Page Rules ile statik varlıklar 1 yıl cache, HTML 2 saat stale-while-revalidate. Çıkış: Türkiye''den TTFB 90 ms, uluslararası 140 ms.
Adım 4: Görsel Optimizasyonu (LCP''ye +600 ms katkı)
- Tüm ürün görselleri WebP''e dönüştürüldü (orijinaller fallback olarak saklandı)
- Responsive srcset + sizes; mobilde 400 px, masaüstünde 1600 px varyantı
- Lazy loading native "loading=lazy"; ilk görünür 3 ürün eager
- Hero görseli için
fetchpriority="high"vepreload
Ortalama görsel boyutu 380 KB''den 72 KB''ye düştü.
Adım 5: JavaScript Temizliği (INP 320 → 140 ms)
- 14 eklenti kaldırıldı; iki benzer slider yerine tek hafif alternatif (Swiper)
- jQuery ve jQuery UI 420 KB → yerine 40 KB''lik vanilla JS
- Üçüncü parti pixel''ler (Facebook, Google Tag Manager) Partytown ile web worker''a taşındı
- Google Analytics GA4 → partytown + delayed loading
Adım 6: CSS Optimizasyonu (LCP''ye +400 ms katkı)
- Critical CSS ana sayfa, kategori ve ürün için ayrı ayrı inline
- Ana stylesheet 420 KB → 180 KB (kullanılmayan WooCommerce bileşenleri çıkarıldı)
- Font-display: swap + unicode-range ile Türkçe subset
Adım 7: Font Yükleme Stratejisi
- Google Fonts yerine self-hosted (/fonts/ dizininde)
- Preload + preconnect optimal olarak ayarlandı
- WOFF2 subset (sadece Türkçe karakterler) — 180 KB → 42 KB
Adım 8: CLS Düzeltmeleri (0.18 → 0.04)
- Ürün görsel yer tutucu (aspect-ratio CSS)
- Reklam alanlarına sabit yükseklik
- Dinamik yüklenen "Popüler Ürünler" için intersection observer + skeleton
Adım 9: Third-Party Script Disiplini
Eski sitede 24 üçüncü parti script vardı. Audit sonrası 9''a indirildi. Kalanlar Partytown veya defer ile yüklendi. Chat widget, sayfa açıldıktan 3 saniye sonra yükleniyor.
Adım 10: HTTP/3 + Brotli
Cloudflare üzerinden HTTP/3 + QUIC aktif. Brotli seviye 6 sıkıştırma. Ortalama response boyutu %28 azaldı.
Adım 11: Temel Sayfa Mimarisi
- WooCommerce kategori sayfaları için özel bir cache katmanı (Redis Object Cache)
- "Sepet" ve "Hesabım" sayfaları cache dışı; diğerleri full page cache
- Ana sayfada 72 ürün gösteriliyordu → 24''e indirildi, "daha fazla yükle" butonu eklendi
Sonuç: Önce–Sonra
| Metrik | Önce | Sonra | Değişim |
|---|---|---|---|
| LCP (mobil) | 3.840 ms | 900 ms | -76% |
| INP | 320 ms | 95 ms | -70% |
| CLS | 0.18 | 0.04 | -78% |
| TTFB | 1.120 ms | 90 ms | -92% |
| Lighthouse (mobil) | 42 | 96 | +128% |
| Toplam JS | 980 KB | 180 KB | -82% |
İş Sonuçları (İlk 60 Gün)
- Organik trafik: %38 artış (Google sıralaması yükseldi)
- Sepet terk oranı: %74 → %62
- Dönüşüm oranı: %2.1 → %3.4
- Ortalama sayfa / oturum: 3.8 → 5.9
- Mobil dönüşüm: %68 artış
- Ek yıllık ciro tahmini: ~3.2M TL
Çıkarılan Dersler
- En büyük kazanımlar sık göz ardı edilen yerlerdedir: hosting ve DB tuning
- Üçüncü parti script''ler INP''nin en büyük düşmanı
- WordPress/WooCommerce mutlaka yavaş değildir — eklenti kültürü yavaşlatır
- Görsel optimizasyonu basit ve en yüksek ROI''li adım
- Ölçmeden iyileştirme yapma — RUM ve lab verisi birlikte değerlendirilmeli
Süre ve Maliyet
Tüm proje 6 hafta sürdü; 2 kıdemli geliştirici + 1 DevOps. Toplam maliyet: ~220 bin TL. 60 günde yatırım geri dönmüş oldu.
Sıkça Sorulan Sorular
Bu adımları kendim uygulayabilir miyim?
Görsel optimizasyonu, cache eklentisi kurulumu gibi 4-5 adım teknik olmayan ekipler tarafından yapılabilir. DB tuning, critical CSS ve JS ayrıştırma uzman gerektirir.
Neden WordPress''ten Next.js''e geçmediniz?
Müşteri içerik yönetim alışkanlıklarını değiştirmek istemiyordu. WordPress + WooCommerce doğru optimizasyonla yeterli performans veriyor.
Shopify''da benzer kazanımlar mümkün mü?
Evet ama kısıtlı. Shopify tema / uygulama ekosistemi ağır; Shopify Plus''ta script tag kontrolü daha iyi. Orta seviye optimizasyon 40-50 puan Lighthouse kazandırır.
Hızı korumak için ne gerekiyor?
Aylık performans denetimi, yeni eklentilerin hız etkisi testi, üçüncü parti script''lerin yarıyıllık temizliği.
Sonraki Adım
Kendi sitenizin performans denetimi için ön görüşme talep edin. Ücretsiz ilk PageSpeed ve Core Web Vitals raporunu çıkartıyoruz. İlgili: Core Web Vitals Rehberi, 10 Hızlandırma İpucu.
Yorumlar (0)
Bu konuda yardima mi ihtiyaciniz var?
Ekibimiz, projenize en uygun cozumleri sunmak icin hazir.
Iletisime Gecin