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
Mart 2024'te FID'nin yerini aldı. Sayfadaki tıklama, dokunma ve klavye etkileşimlerinin bir sonraki çizime kadar geçen süresini ölçüyor ve en yavaş etkileşimlere yakın bir değeri raporluyor; bir ortalama değil, kaydırma da ölçüme girmiyor. JavaScript yükünü küçültmek ve ana iş parçacığını uzun görevlerle bloklamamak şart; tema ve uygulama script'lerinde defer kullanın.
Image optimization
Modern format (WebP/AVIF), duyarlı boyut (srcset) ve ekran altındaki görsellerde geç yükleme (loading="lazy"). Shopify'ın CDN'i formatı tarayıcıya göre kendisi seçiyor; Dawn gibi güncel temalar srcset ve geç yüklemeyi hazır getiriyor. Eski veya özel temalarda bunların Liquid'de doğru kurulup kurulmadığını kontrol edin; ilk ekrandaki ana görselde geç yükleme kullanılmamalı.
3rd party script'leri kontrol
Pazarlama, yorum ve analiz uygulamalarının her biri sayfaya kendi script'ini ekliyor ve toplam yük çoğu zaman temanın kendisini geçiyor. Gerçekten ihtiyacınız olanı bırakın, gerisini kaldırın; kalanları yalnızca gerektiği şablonda ve geç yükleyin.
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 mağazaları zaten Shopify'ın küresel CDN'i üzerinden sunuluyor ve önbellek platform tarafından yönetiliyor. Mağazanın önüne ayrıca kendi CDN'inizi veya vekil sunucunuzu koymak çoğu durumda kazanç getirmiyor, sertifika ve önbellek sorunları üretebiliyor; hız için asıl iş tema ve script tarafında.
Server-side rendering
Hydrogen veya başka bir çerçeveyle headless'a geçmek hızı kendiliğinden getirmiyor; iyi kurulmuş bir Liquid teması çoğu mağaza için yeterince hızlı ve geçişin bedeli yüksek. Headless'ın gerçekten anlamlı olduğu durumları Hydrogen ne zaman maliyetini çıkarır? yazısında anlattık.
Ö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.
Yavaşlığın en sık sebepleri mağazanız neden yavaş?, uygulamaların gerçek hız maliyeti Shopify uygulama seçimi yazısında. Ölçüm ve düzeltmeyi bize bırakmak isterseniz Shopify hız optimizasyonu sayfasına bakın.
Sık sorulan sorular
Core Web Vitals nedir?
Google'ın sayfa deneyimini ölçtüğü üç metrik: yüklenme için LCP, görsel kayma için CLS ve etkileşime tepki için INP. Search Console bu metrikleri gerçek kullanıcı verisiyle raporlar.
Shopify'da LCP nasıl düşürülür?
İlk ekrandaki ana görseli öncelikli ve doğru boyutta yükleyin, bu görselde geç yükleme kullanmayın, fontları sınırlayın ve ilk ekranı geciktiren uygulama script'lerini kaldırın ya da erteleyin.
INP neden kötü çıkar?
Çoğunlukla ana iş parçacığını meşgul eden JavaScript yüzünden: uygulama script'leri, ağır slider'lar ve ölçüm kodları. Script sayısını azaltmak ve yalnızca gereken sayfalarda yüklemek INP'yi iyileştirir.
Lighthouse puanı mı, Search Console verisi mi esas alınmalı?
Search Console'daki gerçek kullanıcı verisi. Lighthouse tek bir cihazda tek bir yüklemeyi ölçer ve neyi düzelteceğinizi gösterir; düzeltmenin işe yarayıp yaramadığını saha verisi söyler.