Core Web Vitals: LCP, INP ve CLS'yi İyileştirme

Core Web Vitals: LCP, INP ve CLS'yi İyileştirme hakkında dağınık bilgiler yerine derli toplu bir kaynak arıyorsanız doğru yerdesiniz. Bu yazı 5 temel noktayı ve bunları bir araya getiren HTML örneğini sade bir dille açıklıyor.

Core Web Vitals: LCP, INP ve CLS'yi İyileştirme nedir, neden önemlidir?

Google, sayfa deneyimini üç ölçüyle değerlendirir: en büyük içeriğin ne kadar sürede göründüğü (LCP), sayfanın tıklamalara ne kadar hızlı yanıt verdiği (INP) ve yükleme sırasında içeriğin kayıp kaymadığı (CLS). Bu ölçüler gerçek kullanıcı verisinden gelir ve sıralamada dikkate alınır. Çoğu sorun birkaç basit düzeltmeyle çözülür.

Öne çıkan noktalar

• LCP 2,5 saniyenin altında: Kahraman görselini sıkıştırın (WebP/AVIF), preload ve fetchpriority=high ile öne alın.
• INP 200 ms'nin altında: Uzun JavaScript görevlerini bölün, üçüncü taraf betikleri azaltın, defer kullanın.
• CLS 0,1'in altında: Görsel ve reklam alanlarına width/height verin; yazı tipinde font-display: swap kullanın.
• Ölçüm: PageSpeed Insights ve Search Console Core Web Vitals raporu gerçek kullanıcı verisini gösterir.
• Önce mobil: Google sıralamada mobil sürümü esas alır; testleri mobil profille yapın.

HTML ile uygulama

Aşağıdaki HTML örneği, yukarıdaki noktaların gerçek bir kodda nasıl bir araya geldiğini gösteriyor:

<!-- LCP: kahraman görseli öncelikli yükle -->
<link rel="preload" as="image" href="/gorseller/kapak.webp" fetchpriority="high">

<!-- CLS: görsele boyut ver, yer önceden ayrılsın -->
<img src="/gorseller/kapak.webp" width="1200" height="630" alt="Kapak">

<!-- Ekran dışındaki görselleri ertele -->
<img src="/gorseller/galeri-1.webp" width="600" height="400" loading="lazy" alt="Galeri">

<!-- Sayfayı bekletmeyen betik -->
<script src="/js/site.js" defer></script>

Örnek bilinçli olarak kısa tutuldu; gerçek projede hata yönetimi ve günlükleme gibi katmanlar eklenmelidir.

Size ne kazandırır?

Bu yaklaşımı benimsediğinizde elde edeceğiniz başlıca faydalar:

• Arama sıralamasında olumlu sinyal sağlar
• Hemen çıkma oranını düşürür
• Mobil kullanıcıların dönüşüm oranını artırır

Sonuç

Core Web Vitals: LCP, INP ve CLS'yi İyileştirme, küçük ama düzenli adımlarla ustalaşılan konulardan biri. Özellikle LCP 2,5 saniyenin altında ve Önce mobil başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• Schema.org JSON-LD ile Google'da Zengin Sonuç Alma

Daha fazla uygulamalı içerik için Akademi derslerine ve blog yazılarına göz atabilirsiniz.