Lighthouse 95+ skoru duyduğunuzdan daha ulaşılabilir. Müşterilerimizin tüm projelerinde standartlaştırdığımız 8 adımlı bir checklist'imiz var.
LCP (Largest Contentful Paint) — hedef <2.5sn
En önemli unsur: hero image'ın preload edilmesi. Liquid'de "fetchpriority=high" attribute'u, görsel boyutunun width/height belirtilmesi. Shopify CDN'i image_url filtresi ile kullanın — WebP otomatik servis.
LCP'yi ölçerken hangi öğenin LCP olduğunu görmek şart — çoğu mağazada bu hero görseli, bazılarında başlık metni oluyor. Yanlış öğeyi optimize etmek zaman kaybı; tarayıcı geliştirici araçlarındaki performans izi bunu doğrudan gösteriyor.
Font yükleme de sık atlanan bir kalem: özel font kullanıyorsanız font-display ayarı ve preload, metnin görünür hale gelme süresini belirgin biçimde etkiliyor.
CLS (Cumulative Layout Shift) — hedef <0.1
Görsellerde aspect-ratio CSS ile rezerve edin. Web font'lar için font-display: optional. JavaScript ile geç yüklenen banner/popup'lar CLS'in en büyük düşmanı.
CLS'in en sinsi kaynağı sonradan yüklenen içerikler: çerez bandı, duyuru çubuğu, uygulama widget'ları. Bunlara sayfa akışında yer ayırmak ya da akış dışına (fixed) almak sorunu kökten çözüyor.
INP (Interaction to Next Paint) — hedef <200ms
FID'nin yerini alan yeni metrik. Tüm tıklamaların ve scroll'ların ortalama yanıt süresi. JavaScript bundle size'ı küçültmek, ana thread'i bloklamamak şart. "defer" attribute'u Shopify app'lerde unutmayın.
Image optimization
Modern format (WebP/AVIF), responsive (srcset), lazy loading (loading="lazy"). Shopify'da bunların hepsi default değil — Liquid'de manuel eklemek gerek.
3rd party script'leri kontrol
Klaviyo, Triple Whale, Yotpo gibi app'ler her biri ~100kb. Gerçekten ihtiyacın olanı bırak, gerisini kaldır. Tag Manager üzerinden async ve geç yükle.
Uygulama script'lerini değerlendirirken "gerekli mi" sorusundan önce "nerede gerekli" sorusunu sorun. Ürün yorumu widget'ı ana sayfada gerekmiyor; sepet kurtarma script'i koleksiyon sayfasında gerekmiyor. Script'i yalnızca ihtiyaç duyulan şablonda yüklemek çoğu zaman kaldırmaktan daha uygulanabilir bir çözüm.
CDN ve edge cache
Shopify zaten CDN üzerinde ama cache TTL'leri default kısa. Cloudflare Pages önüne koymak performance ve A/B test fırsatı veriyor.
Server-side rendering
Hydrogen veya Next.js ile headless geçerseniz LCP 0.5-1sn'ye düşebilir. Geçiş bedeli yüksek; aylık 500K+ trafik altında ROI'si yok.
Ölçüm ve sürekli takip
Search Console Core Web Vitals raporu haftalık kontrol. PageSpeed Insights detaylı debug için. SpeedCurve veya Calibre sürekli monitoring.
Laboratuvar ölçümü (Lighthouse) ile saha verisi (CrUX) arasındaki farkı da göz önünde tutun: Lighthouse tek bir cihazda tek bir yükleme ölçer, saha verisi gerçek kullanıcıların dağılımını gösterir. Karar verirken saha verisi belirleyicidir; Lighthouse yalnızca neyi düzelteceğinizi söyler.