Shopify Mağaza Hızı Nasıl Artırılır? LCP, INP ve CLS Rehberi

Hızlı bir Shopify mağazası, laboratuvar testinden 100 puan alan mağaza demek değildir. Önemli ürün içeriğini çabuk gösteren, müşteri varyant veya sepete ekle düğmesine dokunduğunda gecikmeden yanıt veren ve kullanıcı işlem yaparken sayfayı yerinden oynatmayan mağaza demektir. Bu deneyimi Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS) metrikleriyle ölçeriz.

Google, iyi deneyim için kullanıcı ziyaretlerinin yüzde 75’lik diliminde LCP’nin 2,5 saniye veya altında, INP’nin 200 milisaniyenin altında ve CLS’nin 0,1 veya altında olmasını öneriyor. Bu eşikleri sıralama ya da satış garantisi olarak değil, teşhis sınırları olarak görün. Core Web Vitals sayfa deneyiminin bir parçasıdır; içerik uygunluğu, fiyat, güven, ürün sunumu ve teklifiniz önemini korur.

Bu rehberde Shopify hızını canlı mağazada kontrolsüz değişiklik yapmadan nasıl denetlediğimizi anlatıyoruz. Ayrıca PageSpeed raporundaki gerçek müşteri sorunlarını, yalnızca teknik görünen ama ticari etkisi zayıf önerilerden nasıl ayıracağınızı gösteriyoruz.

Kod değiştirmeden önce gerçek kullanıcı verisini ölçün

İlk olarak Google Search Console Core Web Vitals raporunu ve PageSpeed Insights sonuçlarını inceleyin. PageSpeed iki farklı bakış sunabilir:

• Saha verisi, uygun Chrome kullanıcılarının belirli bir dönemde oluşan gerçek ziyaretlerinden gelir. Farklı cihazları ve bağlantıları yansıtır.
• Laboratuvar verisi, kontrollü koşullarda tekrarlanabilen bir simülasyondur. Hata ayıklamak için değerlidir fakat bütün müşterileri temsil etmez.

Saha verisi yoksa mağazanın hızlı ya da yavaş olduğu sonucuna atlamayın. Laboratuvar başlangıç değerlerini kaydedin, temsilî şablonları test edin ve mümkünse gerçek kullanıcı performans ölçümü kurun. En azından ana sayfayı, önemli bir koleksiyonu, yüksek trafik alan bir ürünü, sepeti ve bir içerik sayfasını inceleyin. Yalnızca ana sayfayı ölçen denetim, geliri oluşturan şablonları kaçırır.

URL, cihaz sınıfı, LCP öğesi, uzun JavaScript görevleri, CLS kaynakları, etkin uygulamalar ve test tarihi bulunan basit bir tablo tutun. Aynı koşullarda birkaç laboratuvar testi çalıştırıp ortadaki sonucu kullanın. Tema bölümleri, izin aracı, öneri bileşenleri ve üçüncü taraf betikler her çalışmada farklı zamanlanabilir.

LCP teşhisi: ana içeriğin daha erken görünmesini sağlayın

Ürün sayfasında LCP öğesi çoğunlukla ana ürün görseli veya büyük başlıktır. Ana sayfada genellikle hero görselidir. LCP’yi düzeltmek için sunucu yanıtı, kaynağın keşfedilmesi, indirme süresi ve render gecikmesini ayrı ayrı düşünmek gerekir.

Önce PageSpeed veya Chrome DevTools üzerinden gerçek LCP öğesini bulun. Hero görseliyse bu resmi lazy yüklemeyin; gecikmeli yükleme, tarayıcıya kaynağın bekleyebileceğini söyler. Doğru öncelik, boyutlar ve duyarlı görsel seçenekleri verin; Shopify görsel CDN’inden yararlanın.

{{ section.settings.hero_image
  | image_url: width: 1800
  | image_tag:
    widths: '480, 750, 1100, 1500, 1800',
    sizes: '(min-width: 1200px) 1200px, 100vw',
    loading: 'eager',
    fetchpriority: 'high',
    width: section.settings.hero_image.width,
    height: section.settings.hero_image.height,
    alt: section.settings.hero_image.alt
}}

Bu yaklaşımı yalnızca muhtemel LCP görseline uygulayın. Her görsele yüksek öncelik vermek kaynakları birbiriyle yarıştırır ve asıl önemli dosyayı yavaşlatabilir. İlk ekranın altındaki görseller çoğunlukla gecikmeli yüklenmelidir.

Görselin ilk HTML içinde keşfedilip keşfedilmediğini kontrol edin. Yalnızca JavaScript slider başlatıldıktan sonra eklenen bir hero, normal bir görsel kadar erken indirilemez. Birçok mağazada mobilde ağır bir carousel yerine tek ve güçlü kampanya görseli kullanmak hem hızı hem mesaj netliğini artırır.

Web fontları büyük metin öğesini geciktirebilir. Aile ve kalınlık sayısını azaltın, yalnızca ilk ekranda gerçekten gereken dosyaları preload edin, font-display: swap kullanın ve ölçüleri yakın sistem fontu seçin. Tüm font kütüphanesini önden yüklemeyin; her preload isteği o dosyanın kritik olduğu iddiasıdır.

Shopify sunucu ve CDN katmanının önemli bölümünü yönetir; yine de tema render gecikmesini belirler. Belge başındaki senkron betikler, aşırı CSS, uygulama başlatma kodları ve istemcide oluşturulan bölümler indirilen LCP kaynağının ekrana çizilmesini geciktirebilir. Performans kaydında “görsel geç indirildi” ile “görsel indi ama geç çizildi” durumlarını ayırın.

INP teşhisi: müşteri işleminden sonraki işi azaltın

INP, ziyaret boyunca yapılan etkileşimlerden sonra sayfanın bir sonraki görsel yanıtı ne kadar hızlı sunduğunu ölçer. Shopify’da sorun çıkaran işlemler genellikle mobil menüyü açmak, varyant seçmek, adet değiştirmek, filtre kullanmak, hızlı ürün penceresi açmak ve sepete ürün eklemektir.

Müşterinin gerçekten yaptığı işlemi test edin. Orta seviye bir mobil cihaz profilinde varyantlara art arda dokunun, büyük koleksiyonda filtreleri açın ve üçüncü taraf araçlar yüklendikten sonra sepet çekmecesini kullanın. Chrome performans kaydı, ana iş parçacığını bloke eden uzun görevleri ve sorumlu dosyayı gösterebilir.

Yaygın nedenler şunlardır:

1. Her tıklamayı veya DOM değişikliğini dinleyen birden fazla uygulama.
2. Her varyant seçiminde büyük bir HTML alanını yeniden kuran kod.
3. Arayüz güncellenmeden önce çalışan senkron analitik işlemleri.
4. Bütün şablonlarda yürütülen büyük JavaScript paketleri.
5. Arama, yorum, kişiselleştirme ve sohbet araçlarının aynı anda başlaması.

Büyük görevleri küçük parçalara ayırın, görünür arayüzü önce güncelleyin ve zorunlu olmayan işi erteleyin. Yüzlerce ayrı dinleyici yerine event delegation kullanılabilir. DOM seçimlerini ve ayrıştırılmış ürün verisini önbelleğe alın. Özelliğin bulunmadığı şablonda o özelliğin kodunu yüklemeyin.

INP’yi düzeltmek için ölçüm altyapısını körlemesine silmeyin. Analitik arayüzü bloke etmemelidir fakat doğru çalışmalıdır. Sepete ekleme olayını görünür durum güncellendikten sonra gönderin ve GA4 DebugView’da doğrulayın. Etkileşimi bir uygulama yönetiyorsa uygulamanın ticari değerini, ana iş parçacığı maliyetiyle birlikte değerlendirin.

CLS teşhisi: geç gelen içerik için baştan yer ayırın

CLS problemi çoğu zaman gözle görülür: yorum yıldızları yüklenince satın alma düğmesi aşağı kayar, kampanya çubuğu sonradan belirir veya görsel indikten sonra büyür. Çözüm, geç gelecek içeriğin nihai alanını ilk render anında ayırmaktır.

Görsel ve videolara gerçek width ve height değerlerini verin ya da aspect-ratio kapsayıcısı kullanın. Yorumlar, abonelik seçeneği, taksit mesajı ve öneriler için sabit bir iskelet alan bırakın. Sayfa yüklendikten sonra mevcut içeriğin üstüne banner eklemeyin. İzin veya kampanya öğesi gerekiyorsa overlay kullanın ya da kapsayıcısını en baştan render edin.

Fallback font ile web fontunun ölçüleri çok farklıysa metin yer değiştirebilir. Daha yakın bir fallback veya font metric override kullanın. İndirimli fiyat, tükenmiş ürün, çok seçenekli ürün, uzun başlık ve Türkçe etiket gibi dinamik durumları da test edin. Kısa İngilizce ürünle stabil görünen şablon, Türkçe içerikte kayabilir.

transform kullanan animasyonlar genellikle yerleşimi değiştirmez; top, height veya margin değiştiren animasyonlar kaymaya yol açabilir. Hareket azaltma tercihlerine saygı gösterin ve dekoratif hareketi satın alma kontrollerinden uzak tutun.

Shopify uygulamalarını geliri bozmadan denetleyin

Her uygulama otomatik olarak performans sorunu değildir; uygulamayı kaldırmak da her zaman bütün kodunu temizlemez. Uygulama adı, sahibi, amacı, kullanıldığı şablonlar, ticari katkı, yüklediği betikler ve yenileme tarihi bulunan bir envanter hazırlayın. Ardından uygulamaları sınıflandırın:

• gerekli ve verimli çalışan;
• gerekli fakat teknik olarak pahalı;
• Shopify veya tema özelliğiyle değiştirilebilir;
• kullanılmayan ya da etkisi ölçülmeyen.

Tema kopyasında uygulama embed ve bloklarını tek tek kapatın. Ağ isteklerini, JavaScript yürütme süresini, yerleşim kaymasını ve müşteri akışını karşılaştırın. Abonelik, paket, indirim, arama, yorum, izin ve ölçüm özelliklerini kaldırmadan önce test edin. Eski uygulamalar temada snippet veya asset bırakmış olabilir; sağlayıcının kaldırma yönergesini ve kod geçmişini inceleyin.

Aynı işi yapan araçları üst üste kurmayın. İki yorum sistemi veya çakışan pikseller gereksiz dosya, mükerrer arayüz ve çift olay üretebilir. Güvenli süreç için Shopify uygulama şişkinliği temizleme rehberimize bakabilirsiniz.

Üçüncü taraf betikleri ve izin durumunu yönetin

Pazarlama etiketleri, sohbet, ısı haritası, A/B testi, yorum ve kişiselleştirme araçları bağlantı ve ana iş parçacığı için yarışır. Her üçüncü taraf isteğini ve sorumlusunu belgeleyin. Tag Manager yalnızca dağıtım yöntemidir; içine eklenen kodun performans maliyetini ortadan kaldırmaz.

Uygun olduğunda zorunlu olmayan araçları izin, ilk etkileşim veya boşta çalışma anına erteleyin. Hukuki ve ölçüm gereksinimlerini koruyun. Hem izin verilmemiş hem kabul edilmiş durumu test edin; mağaza etiketler blokluyken hızlı, kabulden sonra yavaş olabilir. Yinelenen GA4 yapılandırmasını, çift purchase olaylarını ve artık kullanılmayan kampanya etiketlerini kontrol edin.

Shopify müşteri gizliliği ve pixel araçları bazı ölçümleri merkezileştirebilir, ancak kurulum yine doğrulanmalıdır. Hızlı fakat satın alma atfı bozuk mağaza başka bir ticari sorun yaratır. Hedef; sahibi, amacı ve test adımı belli olan daha az sayıda betiktir.

Tema CSS, Liquid ve bölümlerini en son optimize edin

Görsel, uygulama ve üçüncü taraf katmanı anlaşıldıktan sonra tema koduna geçin. Bir kodu bütün şablon ve durumlarda kullanılmadığını kanıtlamadan silmeyin. Global CSS çoğu zaman yalnızca belirli bölümde gereken stilleri içerir. Slider, tahminli arama, yerelleştirme ve ürün medyası kodu ilgili bileşenin olmadığı sayfada başlamamalıdır.

Liquid Shopify sunucularında işlenir fakat gönderilen HTML’i ve kaynakları belirler. Devasa gizli menülerden, tekrar eden ürün JSON verilerinden ve ilk ekranın çok altındaki onlarca bölümün erken render edilmesinden kaçının. Uzun listeleri sayfalayın. Kritik HTML’i sunucuda üretip JavaScript ile aşamalı olarak geliştirin.

Tema kopyasında çalışın, değişiklikleri Git ile sürümleyin ve geri dönüş noktası oluşturun. Yaygın ekran boyutlarında ekran görüntüsü ile müşteri akışlarını karşılaştırın. Klavye, odak, azaltılmış hareket ve yavaş bağlantıyı test edin. Varyant seçimini veya erişilebilirliği bozan hız yaması optimizasyon değildir.

Güvenli 14 günlük uygulama planı

1–2. gün: Search Console gruplarını, PageSpeed ölçümlerini, analitik başlangıç değerlerini, en çok ziyaret edilen açılış sayfalarını ve betik/uygulama envanterini kaydedin.

3–5. gün: Tema kopyasında LCP görsel önceliğini, duyarlı boyutları, görsel ölçülerini ve belirgin CLS alanlarını düzeltin.

6–8. gün: Temel etkileşimleri profilleyin, yinelenen başlatma kodlarını kaldırın ve özellik kodunu ilgili şablonlarla sınırlayın.

9–10. gün: Uygulama embed’lerini ve üçüncü tarafları ayrı ayrı test edin. Gelir veya uyumlulukla ilişkili aracı kapatmadan önce iş sorumlusuyla anlaşın.

11–12. gün: Ürün, koleksiyon, sepet, arama, dil, izin ve analitik akışlarında regresyon testi yapın.

13–14. gün: Trafiğin sakin olduğu saatte yayınlayın, analitiğe not ekleyin, hata ve dönüşümü izleyin, geri dönüş temasını saklayın.

Saha verisi hareketli bir dönem kullandığı için hemen değişmez. Rapor güncellenirken kaynak zamanlaması, JavaScript hatası, çıkış davranışı, sepete ekleme ve dönüşüm gibi erken sinyalleri takip edin.

İyi bir hız raporunda ne bulunmalı?

İyi rapor genel Lighthouse önerilerini kopyalamaz. Etkilenen şablonu, gerçek LCP öğesini, uzun görevin betiğini, kaymaya yol açan DOM düğümünü, ticari riski, sorumluyu ve doğrulama yöntemini gösterir. Ayar düzeyindeki hızlı kazanımlarla kod ve tedarikçi kararlarını ayırır.

Önceliği erişim, şiddet, güven ve efora göre verin. Organik ziyaretçilerin yüzde 70’ini etkileyen ürün şablonu sorunu, az ziyaret edilen sayfayı 94 puandan 100’e çıkarmaktan çoğunlukla değerlidir. Görsel ağırlığı, JavaScript ve üçüncü taraf istekleri için performans bütçesi belirleyerek gerilemeyi engelleyin.

Metrik tanımları ve eşikler için Google’ın Core Web Vitals dokümantasyonunu, platform uygulamaları için Shopify’ın tema performansı rehberini kaynak alın. Platform veya metrikler değiştiğinde ikisini yeniden kontrol edin.

Son kontrol listesi

• Saha ve laboratuvar verisini birlikte değerlendirin.
• Ürün, koleksiyon, sepet ve içerik şablonlarını ayrı test edin.
• Gerçek LCP kaynağını önceliklendirin; yalnızca kritik olmayan görselleri lazy yükleyin.
• Medya, banner, yorum ve uygulama bileşenleri için yer ayırın.
• INP kaynağını gerçek müşteri etkileşimlerini profilleyerek bulun.
• Uygulama değerini kaldırmadan önce ölçün ve tema kopyasında test edin.
• Betik değişikliğinden sonra GA4, izin ve purchase ölçümünü doğrulayın.
• Geri dönüş noktasıyla yayınlayıp hızın yanında dönüşümü izleyin.

Mağazanız için şablon bazında teşhis gerekiyorsa problemi bize anlatın. Shopimaster tema, uygulama ve betik maliyetlerini ayırabilir; onaylanan düzeltmeleri tema kopyasında uygulayabilir ve yayın sonrasında müşteri yolculuğu ile analitiğin çalıştığını doğrulayabilir.