Önemli Web Verileri Optimizasyonu: e-Ticaret Siteleri için LCP, FID ve CLS

Google araştırmasına göre, Önemli Web Verileri iyi olan sitelerde %24 daha düşük vazgeçme oranları görülüyor. Dönüşüm oranının her yüzde puanının gelire dönüştüğü e-Ticaret için, web performansı teknik olarak sahip olunması iyi bir şey değil, bir iş çarpanıdır. Önemli Web Verileri aynı zamanda onaylanmış bir Google sıralama faktörüdür; bu, düşük puanların, tam olarak potansiyel müşteriler satın almak istediğinde ürün sayfalarınızın arama sonuçlarında aşağı itilmesi anlamına gelir.

Önemli Çıkarımlar

• 2,5 saniyenin altındaki En Büyük İçerikli Boya (LCP), hem sunucu yanıt süresinin hem de kritik kaynak yüklemesinin optimize edilmesini gerektirir
• Next Paint (INP) ile 200 ms'nin altındaki etkileşim, uzun JavaScript görevlerinin kesilmesi ve kritik olmayan yürütmenin ertelenmesi anlamına gelir
• 0,1'in altındaki Kümülatif Düzen Kayması (CLS), tüm resimlerde, yerleştirmelerde ve dinamik olarak enjekte edilen içerikte açık boyutlar gerektirir
• e-Ticaret siteleri benzersiz CWV zorluklarıyla karşı karşıyadır: ağır ürün resimleri, üçüncü taraf komut dosyaları (analiz, sohbet, reklamlar) ve dinamik fiyatlandırma öğeleri

---

Önemli Web Verilerini Anlamak

Önemli Web Verileri, Google'ın sıralama sinyalleri olarak kullandığı kullanıcı merkezli üç performans ölçümüdür. Sayfa deneyiminin kullanıcıların en çok fark ettiği üç özelliği olan yükleme hızını, etkileşimi ve görsel kararlılığı ölçerler.

Not: Mart 2024'te resmi yanıt verme ölçütü olarak FID'nin (İlk Giriş Gecikmesi) yerini INP (Sonraki Boyayla Etkileşim) aldı. INP yalnızca ilk etkileşimi değil, sayfa yaşam döngüsü boyunca tüm etkileşimleri ölçer.

E-Ticaret Siteleri Neden Mücadele Ediyor?

e-Ticaret siteleri, içerik sitelerinin karşılaşmadığı benzersiz performans zorluklarıyla karşı karşıyadır:

• Ağır ürün resimleri -- yüksek çözünürlüklü ürün fotoğrafları dönüşüm için kritik öneme sahiptir ancak yüklenmesi yavaştır
• Üçüncü taraf komut dosyaları -- analizler (Google Analytics, Meta Pixel), sohbet widget'ları (Intercom, Zendesk), kişiselleştirme motorları ve A/B test araçlarının tümü ana ileti dizisi süresi için rekabet eder
• Dinamik içerik -- fiyat değişiklikleri, hisse senedi göstergeleri, promosyon banner'ları ve kişiselleştirilmiş öneriler, kaydırma düzeni ve blok oluşturma
• Karmaşık ödeme akışları -- ödeme işleme komut dosyaları, adres doğrulama ve sahtekarlık tespiti, JavaScript'in ağırlığını artırır

---

En Büyük İçerikli Boyayı (LCP) Optimize Etme

LCP, görünür en büyük öğenin oluşturulmasının ne zaman bittiğini ölçer. Ürün sayfaları için bu genellikle ana ürün resmidir. Kategori sayfaları için ilk ürün kartı görseli veya tanıtım banner'ı olabilir.

Sunucu Yanıt Süresi (TTFB)

LCP, sunucunuzun yanıt süresinden daha hızlı olamaz. İlk Bayta Kadar Geçen Süre (TTFB), tarayıcının HTML'nin ilk baytını ne kadar beklediğini ölçer. TTFB'yi 600 ms'nin altında, ideal olarak 200 ms'nin altında hedefleyin.

Optimizasyon teknikleri:

• Sunucu tarafı oluşturma (SSR) -- doldurulması için JavaScript gerektiren boş bir kabuk göndermek yerine HTML'yi sunucuda oluşturun. Next.js App Router with React Server Components bunu varsayılan olarak sağlar.
• Edge bilişim -- Vercel Edge Functions veya Cloudflare Workers gibi platformları kullanarak sunucu tarafı oluşturmayı kullanıcılara yakın uç konumlara dağıtın
• Veritabanı optimizasyonu -- ürün sayfalarındaki yavaş veritabanı sorguları doğrudan TTFB'yi artırır. Veritabanı sorgu optimizasyonu hakkındaki kılavuzumuza bakın
• Önbelleğe alma -- anonim kullanıcılar için oluşturulan sayfaları önbelleğe alma. CDN ile önbelleğe alınmış bir ürün sayfası, kaynaktan 200 ms'ye kıyasla 20 ms'de sunulur. Bkz. önbelleğe alma stratejileri

Kritik Kaynak Yükleme

HTML geldikten sonra tarayıcının, LCP öğesini oluşturmadan önce CSS'yi, yazı tiplerini ve resimleri yüklemesi gerekir.

LCP için görüntü optimizasyonu:

• Tarayıcıya öncelik vermesini bildirmek için LCP görüntüsü için <img> ile fetchpriority="high" kullanın
• Modern formatları kullanın: WebP (JPEG'den %30 daha küçük) veya AVIF (JPEG'den %50 daha küçük)
• 400 piksellik bir mobil ekrana 2000 piksellik bir resim yüklenmesini önlemek için duyarlı resimleri srcset ve sizes ile sunun
• LCP görüntüsünü <head> belgesine <link rel="preload" as="image"> ile önceden yükleyin
• LCP görüntüsünü geç yüklemekten kaçının; geç yükleme, hemen yüklenmesini istediğinizde görüntüyü erteler

CSS optimizasyonu:

• Oluşturmayı engelleyen CSS isteklerini önlemek için HTML <head> içindeki kritik CSS'yi satır içi olarak kullanın
• Kritik olmayan CSS'yi (animasyonlar, ekranın alt kısmı stilleri) media="print" ile erteleyin ve yüklendiğinde media="all" ile değiştirin
• Kullanılmayan CSS'yi kaldırın - PurgeCSS gibi araçlar ölü kuralları ortadan kaldırır

Yazı tipi optimizasyonu:

• Özel yazı tipi yüklenirken metni hemen bir yedek yazı tipiyle göstermek için font-display: swap kullanın
• Birincil yazı tipi dosyasını <link rel="preload" as="font" crossorigin> ile önceden yükleyin
• Yalnızca kullandığınız karakterleri içerecek alt küme yazı tipleri (tam Unicode yerine Latince alt küme)
• Gövde metni için sistem yazı tipi yığınlarını göz önünde bulundurun; sıfır ağ isteğiyle anında yüklenirler

---

Sonraki Boyayla Etkileşimi Optimize Etme (INP)

INP, bir kullanıcı etkileşimi (tıklama, dokunma, tuşa basma) ile bir sonraki görsel güncelleme arasındaki gecikmeyi ölçer. Sayfa oturumu sırasındaki tüm etkileşimleri yakalar ve en kötü olanı bildirir (98. yüzdelik dilimde). Zayıf INP, sayfanın yavaşladığı ve yanıt vermediği anlamına gelir.

Uzun Görevleri Sonlandırmak

Tarayıcının ana iş parçacığı, JavaScript yürütmeyi, düzen hesaplamalarını, boyamayı ve kullanıcı girişi işlemeyi yönetir. Uzun bir JavaScript görevi (50 ms'nin üzerinde) tüm bunları engeller ve kullanıcılar etkileşimde bulunduğunda gözle görülür bir gecikme yaratır.

Ana iş parçacığının tıkanmasını azaltma teknikleri:

• Kod bölme -- yalnızca geçerli sayfa için gereken JavaScript'i yükleyin. Next.js bunu rota başına otomatik olarak yapar, ancak sayfa içindeki dinamik içe aktarmalar daha hassas kontrol sağlar
• Kritik olmayan JavaScript'i erteleyin -- analizlerin, sohbet widget'larının ve sosyal medya yerleştirmelerinin, sayfa etkileşimli hale gelmeden önce yüklenmesine gerek yoktur. defer veya async özelliklerini kullanın veya kullanıcı etkileşiminden sonra bunları yükleyin
• Web Çalışanları -- ağır hesaplamaları (fiyat hesaplamaları, büyük ürün listelerini filtreleme, arama dizini oluşturma) ana ileti dizisini engellemeyen bir Web Çalışanı ileti dizisine taşıyın
• requestIdleCallback -- boşta kalma süreleri sırasında düşük öncelikli işleri (gelecekteki sayfaların önceden yüklenmesi, ekran dışı bileşenlerin önceden oluşturulması) planlayın

Hidrasyon Optimizasyonu

Sunucu tarafından oluşturulan React uygulamaları, olay dinleyicilerini ekleyerek ve sunucu tarafından oluşturulan HTML'yi istemci tarafı durumuyla uzlaştırarak "hidratlanmalıdır". Birçok etkileşimli bileşene sahip büyük sayfalar için doldurma işlemi 500 ms veya daha fazla sürebilir.

Nemlendirme stratejileri:

• Seçici nemlendirme -- Suspense sınırlarıyla React 18, sayfanın bazı bölümlerinin bağımsız olarak nemlendirilmesine olanak tanır. Öncelik kullanıcının etkileşimde bulunduğu bileşenlere verilir
• Aşamalı nemlendirme -- Önce ekranın üst kısmındaki bileşenleri nemlendirin, kullanıcı ekranı kaydırıncaya kadar ekranın alt kısmındaki nemlendirmeyi erteleyin
• React Sunucu Bileşenleri -- Next.js Uygulama Yönlendiricisi, sunucudaki bileşenleri, JavaScript'lerini istemciye göndermeden işler. Yalnızca etkileşimli bileşenler istemci tarafı JavaScript'e ihtiyaç duyar

Üçüncü Taraf Komut Dosyası Yönetimi

Üçüncü taraf komut dosyaları, e-Ticaret sitelerindeki en büyük INP suçlusudur. Tipik bir Shopify mağazası, toplu olarak 1-3 MB JavaScript ekleyen ve ana iş parçacığı süresi için rekabet eden 15-25 üçüncü taraf komut dosyası yükler.

---

Kümülatif Düzen Kaymasını Önleme (CLS)

CLS, sayfa yaşam döngüsü sırasında beklenmeyen düzen değişikliklerini ölçer. Görünür bir öğe, kullanıcı etkileşimi olmadan konumunu değiştirdiğinde düzen değişikliği meydana gelir. Kullanıcılar bunu sarsıcı buluyor; siz ona ulaştığınızda hareket eden bir düğmeyi tıklamak veya üzerinde bir reklam yüklendiğinde aşağı inen metni okumak.

Yaygın CLS Nedenleri ve Çözümleri

Boyutsuz resimler: Her <img> öğesi açık width ve height niteliklerine veya CSS aspect-ratio'e sahip olmalıdır. Boyutlar olmadan, tarayıcı görüntü için sıfır alan ayırır, ardından görüntü yüklendiğinde ve yer kapladığında içeriği değiştirir.

Dinamik olarak eklenen içerik: Mevcut içeriğin üzerine eklenen promosyon banner'ları, çerez izin çubukları ve bildirim tostları değişikliklere neden olur. Bu öğeler için yer ayırın veya içeriği aşağı itmeyecek şekilde (sabit konumlandırma, kaplamalar) enjekte edin.

Metnin yeniden akışına neden olan web yazı tipleri: Özel bir yazı tipi yüklendiğinde ve yedek yazı tipinin yerini aldığında, farklı karakter genişlikleri nedeniyle metin yeniden akıtılabilir. Dikkatlice eşleşen yedek yazı tipi ölçümleriyle font-display: optional (ara sıra geri dönüş görüntülemeyi kabul ediyorsanız) veya font-display: swap kullanın.

Geç yüklenen reklamlar ve yerleştirmeler: CSS min-height veya aspect-ratio kullanarak reklam alanları ve yerleştirmeler için yer ayırın. Reklam sunucusu yavaş olsa bile düzen sabit kalır.

Sayfa Türüne Göre CLS Bütçesi

---

CWV'yi Ölçme ve İzleme

Laboratuvar Araçları (Sentetik Test)

• Lighthouse -- Chrome DevTools'a entegre edilmiştir ve optimizasyon önerileriyle birlikte CWV puanları sağlar
• WebPageTest -- her öğenin tam olarak ne zaman oluşturulduğunu gösteren film şeridi görünümüyle ayrıntılı şelale analizi
• PageSpeed Insights -- tam bir resim elde etmek için laboratuvar verilerini (Lighthouse) saha verileriyle (CrUX) birleştirir

Saha Verileri (Gerçek Kullanıcı İzleme)

Laboratuvar araçları kontrollü koşullar altında test edilir. Saha verileri farklı cihazlar, ağlar ve koşullardaki gerçek kullanıcı deneyimini yakalar.

• Chrome Kullanıcı Deneyimi Raporu (CrUX) -- gerçek Chrome kullanıcılarından alınan toplu CWV verileri, PageSpeed Insights ve BigQuery'de mevcuttur
• web-vitals kitaplığı -- Üretimde CWV'yi ölçen ve analizlerinize rapor veren JavaScript kitaplığı
• RUM sağlayıcıları -- Datadog RUM, SpeedCurve ve Sentry Performance, iş ölçümlerinin yanı sıra CWV'yi de yakalar

Sürekli İzleme

Puanlar düştüğünde uyarı veren otomatik CWV izlemeyi kurun:

1. Dağıtımdan önce gerilemeleri yakalamak için CI/CD işlem hattınızda Lighthouse CI'yı çalıştırın
2. En önemli sayfalarınızdaki trendler için CrUX verilerini aylık olarak izleyin
3. CWV puanlarını iş ölçümleriyle (dönüşüm oranı, hemen çıkma oranı, oturum başına gelir) ilişkilendirmek için RUM'u kullanın.
4. İş etkisini doğrudan ölçmek için A/B testi performansı değişiklikleri

Kapsamlı izleme kurulumu için gözlemlenebilirlik ve APM kılavuzumuza bakın.

---

e-Ticaret'e Özel Optimizasyon Kontrol Listesi

E-Ticaret sitenizdeki CWV'yi sistematik olarak iyileştirmek için bu kontrol listesini kullanın:

---

Sıkça Sorulan Sorular

Önemli Web Verileri gerçekten Google sıralamalarını etkiler mi?

Evet. Google, Sayfa Deneyimi güncellemesinde Önemli Web Verilerinin bir sıralama sinyali olduğunu doğruladı. İçerik alaka düzeyi baskın faktör olmaya devam ederken CWV, benzer içerik kalitesine sahip sayfalar arasında eşitliği bozan bir rol oynar. Rekabetçi e-Ticaret anahtar kelimeleri için iyi CWV puanları ölçülebilir bir sıralama avantajı sağlar.

Sunucu yapılandırmasına erişim olmadan Shopify'da CWV'yi nasıl düzeltirim?

Neleri kontrol edebileceğinize odaklanın: görselleri optimize edin (Shopify'ın yerleşik görsel optimizasyonunu veya Crush.pics gibi uygulamaları kullanın), yüklü uygulamaları en aza indirin (her biri JavaScript ekler), hafif bir tema kullanın, yavaş yüklemeyle üçüncü taraf komut dosyalarını erteleyin ve tüm görsellere açık boyutlar ekleyin. Gelişmiş optimizasyon için Shopify hız optimizasyon hizmetlerimize bakın.

LCP'ye, INP'ye veya CLS'ye öncelik vermeli miyim?

En kötü puanı alan metriğe ilk önce öncelik verin. Hepsi kötüyse LCP ile başlayın çünkü kullanıcı algısı ve hemen çıkma oranı üzerinde en doğrudan etkiye sahiptir. LCP iyileştirmeleri (sunucu optimizasyonu, görüntü optimizasyonu), genel sayfa ağırlığını azaltarak genellikle INP'yi de iyileştirir.

CWV iyileştirmelerinin SEO'yu etkilemesi ne kadar sürer?

Google, sıralama sinyalleri için 28 günlük dönüşümlü CrUX verilerini kullanır. İyileştirmeleri uyguladıktan sonra, değişikliklerin CrUX verilerine yansımasından 4-6 hafta öncesini ve sıralama değişikliklerinin görünür hale gelmesinden önce muhtemelen daha uzun bir süre bekleyin. İlerlemeyi takip etmek için Search Console'da CrUX verilerini izleyin.

Rekabetçi e-Ticaret için hangi CWV puanlarını hedeflemeliyim?

"İyi" aralığındaki üç ölçümün tümünü hedefleyin: 2,5 saniyenin altında LCP, 200 ms'nin altında INP, 0,1'in altında CLS. Rekabetçi kategoriler için en üst düzey performansı hedefleyin: 1,5 saniyenin altında LCP, 100 ms'nin altında INP, 0,05'in altında CLS. Bu puanlar sizi e-Ticaret sitelerinin %80-90'ının önüne geçirir.

---

Sırada Ne Var

En yüksek trafik alan sayfalarınızdaki mevcut Önemli Web Verilerinizi PageSpeed ​​Insights ile ölçerek başlayın. En kötü puanı alan metriği belirleyin ve bu kılavuzdaki optimizasyon teknikleri üzerinde çalışın. Küçük iyileştirmeler bileşimi: 100 ms'lik INP azaltma ve 0,05 CLS iyileştirmesi ile birlikte 500 ms'lik bir LCP iyileştirmesi, hem sıralamayı hem de dönüşüm oranını ölçülebilir şekilde iyileştirebilir.

Performans mühendisliği resminin tamamı için iş platformunuzu ölçeklendirme hakkındaki temel kılavuzumuza bakın. CWV puanlarınızı zorlayan trafik artışlarına hazırlıklı olmak için Kara Cuma için yük testi kılavuzumuzu okuyun.

ECOSIRE, e-Ticaret platformları için Shopify hız optimizasyonu ve Core Web Vitals denetimleri sağlar. Kapsamlı bir CWV analizi için performans ekibimizle iletişime geçin.

---

ECOSIRE tarafından yayınlandı — işletmelerin Odoo ERP, Shopify eCommerce ve OpenClaw AI genelinde yapay zeka destekli çözümlerle ölçeklenmesine yardımcı oluyor.