Core Web Vitals Nasıl İyileştirilir (LCP, INP, CLS)

Core Web Vitals, Google'ın doğrudan sıralama sinyali olarak kullandığı üç metriktir: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS). Bu metriklerde başarısız olan siteler sıralama kaybeder, ve kullanıcıları rahatsız eder.

Üç metrik

LCP: Largest Contentful Paint

En büyük görünür öğenin (genellikle hero resmi veya başlık) oluşturulmasının tamamlanmasına kadar geçen süre. İyi: < 2.5 sn. Zayıf: > 4 sn.

Nasıl düzeltilir: hero resmini modern formatlarda (AVIF / WebP) sunun, fetchpriority="high" ayarlayın, kritik fontları önceden yükleyin, kritik olmayan JavaScript'i erteleyin, bir CDN kullanın.

INP: Interaction to Next Paint

Kullanıcı etkileşimi (dokunma, tıklama) ile sonraki görsel güncelleme arasındaki en uzun gözlenen gecikme. Mart 2024'te FID'nin yerini aldı. İyi: < 200 ms. Zayıf: > 500 ms.

Nasıl düzeltilir: uzun JavaScript görevlerini (> 50 ms) bölün, gerekli olmayan üçüncü taraf betikleri erteleyin, acil olmayan işler için requestIdleCallback kullanın.

CLS: Cumulative Layout Shift

Sayfa yüklenirken görünür içeriğin beklenmedik şekilde ne kadar kaydığı. İyi: < 0.1. Zayıf: > 0.25.

Nasıl düzeltilir: resimler ve iframe'ler için daima width ve height ayarlayın, reklamlar için CSS aspect-ratio ile alan ayırın, yüklemeden sonra mevcut içeriğin üzerine içerik eklemekten kaçının.

Nasıl ölçülür?

1. Laboratuvar: Lighthouse, PageSpeed Insights, WebPageTest.
2. Saha: Chrome User Experience Report (CrUX), Search Console Core Web Vitals raporu, web-vitals JS kütüphanesi.

Google saha verisine göre sıralama yapar, laboratuvar verisine değil. Laboratuvar puanları hata ayıklama içindir; saha puanları sıralamaları hareket ettirir.

80/20 düzeltme listesi

• Resimleri sıkıştırın ve boyutlandırın; AVIF/WebP sunun, JPEG yedek olarak.
• Her <img> öğesine width/height ekleyin.
• Hero resminizi ve web fontlarınızı önceden yükleyin.
• Üçüncü taraf betikleri async veya defer ile erteleyin.
• Fontları kendiniz barındırın veya font-display: swap kullanın.
• Sunucunuzda HTTP/2 ve brotli sıkıştırmasını etkinleştirin.

AuditAI her denetimde altı Core Web Vitals sinyalini kontrol eder. Şimdi çalıştırın →