Headless WooCommerce Performansı: Önemli Hız Karşılaştırmaları

🇬🇧 English: Read this in English →

Headless WooCommerce’in performans iddiaları her yerde: “10 kat daha hızlı!”, “Saniyenin altında sayfa yüklemeleri!” Açık konuşayım, bu tür başlıkları görünce içimde küçük bir alarm çalar — çünkü hız reklamı yapmak kolay, o hızı gerçek bir mağazada, gerçek trafiğin altında tekrar üretmek zordur. O yüzden lafı bırakıp ölçtük. Üç gerçek WooCommerce mağazasını karşılaştırdık: biri düz geleneksel, biri iyi optimize edilmiş geleneksel, biri de Next.js ile headless.

Sana en baştan söyleyeyim: sonuçlar headless’in hızlı olduğunu doğruluyor, ama hikâyenin tamamı o değil. İlginç olan orta sütun — optimize edilmiş geleneksel mağaza. Rakamlara birlikte bakalım, sonra da bunların senin kararında ne anlama geldiğini konuşalım.

Test Kurulumu

Her üç mağaza da aynı ürün kataloğunu (1.847 ürün, 12 kategori) aynı WooCommerce backend’ine karşı çalıştırıyor (WP Engine Pro planı, PHP 8.2, Redis object cache).

Test: WebPageTest (Virginia, Kablo bağlantısı), 5 çalıştırma medyanı, mobil viewport.

Sonuçlar

Anasayfa

Ürün Listeleme Sayfası (48 ürünlü kategori)

Ürün Detay Sayfası

Farkı Yaratan Nedir?

TTFB: Edge vs Origin

Headless mağazanın sıfıra yakın TTFB’si ISR (Incremental Static Regeneration) sayesinde geliyor. Ürün sayfaları önceden render edilip Vercel’in edge network’ünden sunuluyor. Geleneksel mağaza her sayfayı origin sunucuda PHP’den oluşturuyor. Redis ile bile WordPress bootstrap yapmalı, eklentileri yüklemeli ve render etmeli.

JavaScript: React’in Avantajı

Geleneksel WooCommerce jQuery, birden fazla eklenti scripti ve temanın JavaScript’ini yüklüyor — genellikle main thread’i blokleyen 1MB+ JS. Headless mağaza sadece mevcut sayfa için gereken React component’larını gönderiyor, route’lara göre code-split edilmiş.

Görseller: Next.js Image Component

Next.js’in component’i otomatik olarak:

• Tarayıcı desteğine göre WebP/AVIF sunar
• Responsive srcset’ler oluşturur
• Below-the-fold görsellerini lazy load eder
• Görselleri gerçek gösterim boyutlarına göre boyutlandırır

Geleneksel WooCommerce temanın sağladığı her şeyi sunar — genellikle optimize edilmemiş tam boyutlu görseller.

Optimizasyon Farkı

“Optimize edilmiş geleneksel” sonuçları önemli. Uygun caching, CDN ve asset optimizasyonu ile iyi optimize edilmiş bir WooCommerce mağazası Lighthouse’da 70+ skor alabilir. Optimize edilmiş geleneksel (72-78) ile headless (96-98) arasındaki fark gerçek ama varsayılan WooCommerce (31-42) ile headless arasındaki farktan daha dar.

Lighthouse’da 50’nin altında skor alıyorsan, headless’i düşünmeden önce mevcut kurulumunu optimize et. Düşük asılı meyveler (caching, CDN, görsel optimizasyonu, eklenti auditi) seni tam bir yeniden yapılanma olmadan 70+’a getirir. Ben bu işi yıllardır yapıyorum ve gördüğüm mağazaların çoğunda asıl sorun mimari değildi; sıkıştırılmamış bir kahraman görseli, uyuyan bir CDN ve kimsenin denetlemediği on iki eklentiydi.

Dönüşüm Etkisi

Sayfa hızı dönüşüm oranlarını doğrudan etkiler. Google’ın verilerine göre:

• 1s → 3s yüklenme süresi: bounce olasılığı %32 artar
• 1s → 5s yüklenme süresi: bounce olasılığı %90 artar

Headless geçişlerinden öncesi/sonrası müşteri verilerimiz şunları gösteriyor:

Bu iyileştirmeler sadece hıza bağlı değil — headless yeniden yapılanma aynı zamanda UX ve navigasyonu da geliştirdi. Ama hız temeldir.

Optimizasyonun Headless’i Geçtiği Durumlar

Sadece performans için headless’e geçme. Maliyeti düşün:

Mağazan Lighthouse’da 50’nin altındaysa ve başka nedenlerle headless’e ihtiyacın yoksa (omnichannel, özel UI, ekip tercihi), önce optimize et. Maliyetin %10’u için performans faydasının %80’ini alırsın. Bu, mühendislikte nadiren bu kadar net görülen bir takas — ve ben olsam bu %80’i cebe attıktan sonra kalan %20 için 30-80 bin dolarlık bir yeniden yazıma girmeden önce çok iyi düşünürdüm.

Headless WooCommerce için Performans Bütçesi

Headless’e geçiyorsan, bir performans bütçesi belirle ve uygula. Yoksa altı ay sonra o parlak 98’lik skor, kimsenin fark etmeden eklediği izleme kodları ve büyüyen bundle altında yavaş yavaş erir:

Bu rakamlara nasıl bakmalı (ve neye kanmamalı)

Bir benchmark tablosu her zaman belirli bir bağlamın fotoğrafıdır — bu testte WP Engine Pro, PHP 8.2, Redis, 1.847 ürün ve Virginia’dan kablo bağlantısı. Kendi mağazanın donanımı, coğrafyası ve katalog büyüklüğü farklıysa, oranlar da kayar. O yüzden bu tabloları mutlak gerçek değil, doğru büyüklük hissi olarak oku: headless “biraz” değil, kategorik olarak daha hızlı; ama optimize edilmiş geleneksel de “yavaş” değil, çoğu işletmeye yetecek kadar iyi.

Bence en yanıltıcı rakam tek başına Lighthouse skoru. 98 ile 96 arasındaki fark bir ziyaretçinin cebinde hiçbir şey ifade etmez; ama 38 ile 72 arasındaki fark, terk edilen sepet demektir. Ben olsam laboratuvar skoruna değil, gerçek kullanıcı ölçümüne (RUP/CrUX) bakardım — çünkü asıl önemli olan WebPageTest’in dediği değil, senin müşterinin üç yıllık Android telefonunda gerçekten yaşadığı süre. Tabloya kapılıp “98 alacağım” diye yola çıkma; “müşterim mağazamı hızlı hissedecek mi” diye sor.

Sonuç

Toparlayayım. Headless WooCommerce gerçekten üstün performans sunuyor — 95+ Lighthouse skorları hem ulaşılabilir hem sürdürülebilir. Ama performans hikâyesi tek satırlık değil. İyi optimize edilmiş geleneksel bir WooCommerce mağazası da 75-85 alır, ki bu çoğu işletme için fazlasıyla yeterli. Benim dürüst tavsiyem şu: headless’e, performans birkaç sebepten yalnızca biri olduğunda geç (esneklik, omnichannel, geliştirici deneyimi) — tek sebep olduğunda değil. Rakamlar yalan söylemez; ama unutma, maliyet sütunu da yalan söylemiyor.