Shopify’da Core Web Vitals: LCP, INP ve CLS’yi teknik olarak nasıl düzeltirsiniz

Core Web Vitals nedir ve 2026’da eşikler nelerdir?

Veri kaynağı Chrome User Experience Report’tur (CrUX). Yani laboratuvar aracı Lighthouse’ta 95 puan almanız, gerçek müşterilerinizin telefonlarında yeşil olduğunuz anlamına gelmez. Shopify mağazalarında trafiğin büyük bölümü mobil olduğu için mobil veriyi esas alın.

Metrik	Ne ölçer	İyi	Geliştirilmeli	Zayıf
LCP (Largest Contentful Paint)	Ekrandaki en büyük içerik öğesinin görünme süresi	≤ 2,5 sn	2,5 – 4,0 sn	> 4,0 sn
INP (Interaction to Next Paint)	Tıklama, dokunma ve klavye etkileşimlerine tepki gecikmesi (sayfa boyunca en kötü değer)	≤ 200 ms	200 – 500 ms	> 500 ms
CLS (Cumulative Layout Shift)	Beklenmeyen yerleşim kaymalarının toplamı	≤ 0,1	0,1 – 0,25	> 0,25

INP, 12 Mart 2024’te FID’in (First Input Delay) yerini aldı. FID yalnızca ilk etkileşimi ölçüyordu; INP tüm oturum boyunca en yavaş etkileşimi raporlar. Shopify mağazalarında metriklerin en sık kırmızıya düşeni bu yüzden INP’dir: çok sayıda uygulama script’i ana iş parçacığını (main thread) meşgul eder.

Hızın ciro etkisi ölçülmüş bir gerçektir. Google ve Deloitte’un 37 markayı kapsayan “Milliseconds Make Millions” araştırmasına göre mobil site hızında 0,1 saniyelik iyileşme perakende dönüşümünü %8,4 artırdı. Vodafone, LCP’yi %31 iyileştirdiğinde satışlarda %8 artış ölçtü (web.dev vaka çalışması).

Shopify’da neyi değiştirebilirsiniz, neyi değiştiremezsiniz?

Shopify barındırılan (hosted) bir platformdur. Sunucu, CDN ve ödeme sayfası sizin kontrolünüzde değildir; tema kodu, görseller, fontlar ve uygulamalar ise tamamen sizin elinizdedir. Gerçekçi bir optimizasyon planı bu ayrımla başlar.

Katman	Kontrol	Ne yapabilirsiniz
Sunucu yanıtı (TTFB), CDN, HTTP/2 ve HTTP/3	Shopify	Hiçbir şey; zaten iyi durumdadır
Ödeme sayfaları (checkout)	Shopify	Checkout Extensibility ile sınırlı; performans Shopify’ındır
Tema (Liquid, CSS, JS, bölümler)	Siz	LCP, CLS ve INP’nin büyük kısmı burada çözülür
Görseller ve fontlar	Siz	Boyut, format, öncelik ve yükleme stratejisi
Uygulamalar (apps) ve app embed’ler	Siz	INP’nin bir numaralı nedeni; kaldırma ve kapatma
Üçüncü taraf etiketler (Pixel, chat, A/B test)	Siz	Yükleme zamanlaması ve consent ile koşullu yükleme

Önce ölçün: hangi metrik, hangi sayfa tipi?

Üç veri kaynağını birlikte kullanın. Tek bir araca güvenmek Shopify’da en sık yapılan hatadır.

1. Shopify Admin → Online Store → Themes → Web performance. Shopify’ın kendi CrUX tabanlı raporu. LCP, CLS ve INP’yi mağazanızın gerçek ziyaretçileri üzerinden gösterir ve “Shopify ortalaması” ile kıyaslar. Buradan başlayın.
2. Google Search Console → Deneyim → Core Web Vitals. Hangi URL gruplarının (ürün sayfaları, koleksiyonlar, ana sayfa) zayıf olduğunu söyler. Shopify’da sorun genellikle sayfa tipine özgüdür.
3. PageSpeed Insights. Üstte alan verisi (CrUX), altta laboratuvar teşhisi. “LCP öğesi” ve “Yerleşim kaymasına neden olan öğeler” bölümleri hangi DOM öğesini düzelteceğinizi gösterir.

INP için laboratuvar araçları yetersizdir; etkileşim gerekir. Chrome DevTools’un Performance panelinde “Interactions” şeridini kullanın ya da sayfaya geçici olarak web-vitals kütüphanesinin attribution derlemesini ekleyip hangi script’in gecikmeye neden olduğunu loglayın:

<script type="module">
import {onINP, onLCP, onCLS} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js';
const log = m => console.log(m.name, Math.round(m.value), m.attribution);
onINP(log); onLCP(log); onCLS(log);
</script>

LCP: hero görselini ilk byte’tan itibaren önceliklendirin

Shopify mağazalarında LCP öğesi %90 ihtimalle ana sayfadaki hero görseli, koleksiyonda ilk ürün görseli, ürün sayfasında ise ana ürün fotoğrafıdır. Dört teknik yeterlidir.

1. Doğru boyutta, modern formatta görsel isteyin

Shopify CDN görselleri otomatik olarak WebP/AVIF’e dönüştürür ama yalnızca doğru width ve sizes verdiğinizde doğru boyutu gönderir. 4000 piksellik orijinali 390 piksellik telefona göndermek en yaygın LCP hatasıdır.

{{ section.settings.image
   | image_url: width: 1600
   | image_tag:
       widths: '480, 768, 1024, 1366, 1600',
       sizes: '100vw',
       loading: 'eager',
       fetchpriority: 'high',
       preload: true,
       alt: section.settings.image.alt }}

preload: true Shopify’ın image_tag filtresinde <link rel="preload"> üretir; fetchpriority="high" tarayıcıya bu görseli diğer kaynaklardan önce indirmesini söyler. Bu iki satır tek başına LCP’yi 0,5–1,5 saniye düşürebilir.

2. Ekran üstü görsellerde lazy loading kullanmayın

Dawn tabanlı temalarda tüm görseller varsayılan olarak loading="lazy" gelir. Hero ve ilk ürün kartları için bunu eager yapın. Lazy yüklenen bir LCP görseli, tarayıcı yerleşimi hesaplayana kadar indirilmeye başlamaz.

3. Slider’dan vazgeçin

Otomatik kayan hero slider’ları hem LCP’yi geciktirir hem CLS üretir hem de dönüşüme katkısı ölçülmüş çok az örnek vardır. Tek statik hero + net başlık + tek CTA, Shopify’da en iyi performans veren kalıptır.

4. Fontları ve CSS’i yoldan çekin

Shopify’ın font_face filtresine font_display: 'swap' ekleyin ve font dosyasını preload edin. Üçüncü taraf font servislerinden (Google Fonts dahil) kaçının; Shopify’ın kendi font kütüphanesi CDN’den gelir ve ek DNS/TLS maliyeti yoktur.

{{ settings.type_header_font | font_face: font_display: 'swap' }}
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="{{ settings.type_header_font | font_url }}">

INP: uygulama script’lerini denetleyin

INP’de sorun neredeyse her zaman JavaScript’tir ve Shopify’da JavaScript’in çoğu sizin yazmadığınız uygulamalardan gelir. Her yüklü uygulama ortalama 1–3 script, bazıları 10’dan fazla dosya ekler. Bunlar ana iş parçacığında uzun görevler (long tasks, >50 ms) oluşturur; kullanıcı “Sepete ekle”ye bastığında tarayıcı boşta değildir.

Denetim adımları

1. Tüm uygulamaları listeleyin ve son 90 günde gerçekten kullanılanları işaretleyin. Kullanılmayan her uygulamayı kaldırın. Kaldırmak yetmez: Online Store → Themes → Customize → App embeds bölümünden kalan embed’leri kapatın; bazı uygulamalar kaldırıldıktan sonra da theme.liquid içinde kod bırakır.
2. theme.liquid ve layout dosyalarını temizleyin. Eski uygulamaların bıraktığı <script> satırlarını arayın. Arama: cdn.shopify.com/extensions ve {{ content_for_header }} dışındaki script’ler.
3. Ölçün ve karşılaştırın. DevTools Performance → kayıt alın → “Sepete ekle”ye tıklayın → Interactions şeridinde süreye ve “Long tasks”a bakın. Hangi dosyadan geldiği dosya adıyla görünür.
4. Kalan script’leri erteleyin. Kendi tema JS’inizde defer kullanın; etkileşim gerektirmeyen işleri requestIdleCallback ile boşa alın; scroll ve resize dinleyicilerini { passive: true } yapın.

// Uzun görevleri parçalayın: ağır işi etkileşimden sonraya bırakın
button.addEventListener('click', () => {
  updateCartUI();                       // hemen görünür tepki
  requestIdleCallback(() => {           // ağır iş boşta yapılır
    trackAnalytics(); rebuildRecommendations();
  });
});

CLS: her öğeye yer ayırın

Yerleşim kayması üç nedenden olur: boyutu bildirilmemiş görseller, sayfa yüklendikten sonra eklenen banner/widget’lar ve font değişimi. Üçünün de çözümü “yeri önceden ayır” ilkesidir.

• Görseller: image_tag filtresi width ve height özniteliklerini otomatik ekler. Elle yazdığınız <img> etiketlerinde bunları eksik bırakmayın ya da CSS aspect-ratio kullanın.
• Duyuru çubuğu ve uygulama widget’ları: Sonradan DOM’a eklenen her şey (ücretsiz kargo çubuğu, chat balonu, pop-up) aşağısındaki içeriği iter. Konteyner için min-height ayırın; pop-up’ları akışın dışında (position: fixed) tutun.
• Font değişimi: font-display: swap görünürlüğü çözer ama metrikleri farklı fontlar kaymaya neden olur. Yedek fontu size-adjust ve ascent-override ile eşleyin:

@font-face {
  font-family: "Fallback-Heading";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
}
h1, h2 { font-family: "Marka-Font", "Fallback-Heading", sans-serif; }

Ürün sayfalarında varyant seçildiğinde görsel galerisinin yeniden çizilmesi de CLS üretir. Galeri konteynerine sabit en-boy oranı verin ve varyant görsellerini aynı oranda yükleyin.

Shopify’a özel kontrol listesi

Kontrol	Etkilediği metrik	Nerede
Online Store 2.0 tema (Dawn ve türevleri) kullanılıyor	Hepsi	Themes
Hero görseli: loading: 'eager', fetchpriority: 'high', preload: true	LCP	sections/image-banner.liquid
Koleksiyonda ilk 2–4 ürün kartı eager, gerisi lazy	LCP	sections/main-collection-product-grid.liquid
Tüm görsellerde widths + sizes	LCP, CLS	snippets/card-product.liquid
Kullanılmayan uygulamalar kaldırıldı, app embed’ler kapalı	INP	Apps, Theme → App embeds
theme.liquid içinde yetim script yok	INP	layout/theme.liquid
Shopify fontları, font_display: 'swap' + preload	LCP, CLS	snippets/… veya layout
Duyuru çubuğu ve widget’lara min-height	CLS	CSS
Pixel, chat ve A/B test script’leri consent ile koşullu yükleniyor	INP	Customer events / GTM
Ana sayfada video arka plan yok ya da preload="none" + poster	LCP	sections

Sıralama ve ciro etkisini nasıl doğrularsınız?

Değişikliklerden sonra CrUX verisinin yenilenmesi 28 günlük kayan pencere nedeniyle 2–4 hafta alır. Bu süre boyunca iki şeyi izleyin: Search Console’daki “iyi” URL sayısının artışı ve Shopify Analytics’te mobil dönüşüm oranı. Hız çalışmasını reklam dönemleriyle birlikte planlayın; INP’si kötü bir mağazaya trafik satın almak, bütçenin bir kısmını çöpe atmaktır.

Core Web Vitals, teknik SEO’nun yalnızca bir parçasıdır. Yapılandırılmış veri ve dönüşüm ölçümü için blogdaki E-ticaret için Schema.org JSON-LD rehberi ve GA4 Consent Mode v2 ve Meta CAPI kurulumu yazılarına bakın.