Geliştiriciler İçin Core Web Vitals: Rakamları Ne Hareket Ettirir
Core Web Vitals, bir sayfanın nasıl hissettirdiğine dair üç saha ölçümüdür: ana içerik ne kadar sonra görünüyor, yüklenirken ne kadar oynuyor ve girdiye ne kadar hızlı yanıt veriyor. Bir sıralama sinyalidir ve daha önemlisi insanların kalıp kalmamasıyla ilişkilidir.
Bu rehber her metriğin ne ölçtüğünü, zayıf puanların ardındaki somut sebepleri ve yalnız laboratuvar puanını değil saha verisini hareket ettiren düzeltmeleri ele alıyor.
Üç metrik neyi ölçüyor#
Her birinin "iyi" için bir eşiği ve az sayıda alışılmış sebebi var. Sıralama için sayılan sayının, dizüstünüzdeki laboratuvar puanı değil gerçek ziyaretçilerden gelen saha verisi olduğunu unutmayın.
| Metrik | İyi | Ölçtüğü | Zayıfken alışılmış sebep |
|---|---|---|---|
| LCP | 2,5 sn altı | En büyük görünür öğenin çizildiği an | Optimize edilmemiş hero, yavaş sunucu, çizimi engelleyen CSS |
| CLS | 0,1 altı | Yükleme sırasında düzenin ne kadar oynadığı | Boyutsuz görseller, sonradan eklenen bantlar, geç gelen yazı tipleri |
| INP | 200 ms altı | Kullanıcı girdisine yanıt verme hızı | Ana iş parçacığını bloke eden uzun JavaScript görevleri |
Laboratuvar araçları tek bir makinede tek bir yüklemeyi ölçer. Saha verisi gerçek ziyaretlerin 75. yüzdelik dilimidir; buna eski telefonlar ve kötü ağlar da dahildir — yani ayrılma olasılığı en yüksek ziyaretçiler.
LCP’yi düzeltmek#
LCP neredeyse her zaman bir görsel ya da bir başlığın başka bir şeyin arkasında bloke olmasıdır. Sırayla ilerleyin; ilk ikisi çoğu siteyi düzeltir.
- Saha verisinde gerçek LCP öğesini belirleyin. Yanlış görseli optimize etmek en yaygın boşa emektir.
- LCP görselini asla geç yüklemeyin. Onun yerine fetchpriority="high" verin.
- Gösterildiği boyutta ve modern formatta sunun, küçük ekranlar için srcset ile.
- LCP metninin kullandığı yazı tipini preload edin ve font-display: swap kullanın ki metin beklerken görünmez kalmasın.
- Head’den çizimi engelleyen CSS ve JavaScript’i çıkarın; sayfa yeterince küçükse kritik CSS’i satır içi koyun.
- Önbellek ve CDN ile Time to First Byte’ı düşürün — yavaş bir sunucuyu hiçbir front-end işi telafi edemez.
- Kritik yoldaki üçüncü taraf betikleri azaltın. Her biri bir DNS sorgusu, bir bağlantı ve öngörülemeyen bir dosyadır.
CLS’yi düzeltmek#
Düzen kayması neredeyse tamamen önlenebilir ve düzeltmeler ucuzdur. Ayrıca ziyaretçilerin en içgüdüsel fark ettiği metriktir — insanların yanlış şeye basmasına o yol açar.
- Her görsele ve videoya width ve height verin ki tarayıcı yeri ayırsın.
- Reklamlara, gömülü içeriğe ve iframe’lere sabit en boy oranlı bir kapla yer ayırın.
- Yüklemeden sonra mevcut içeriğin ÜSTÜNE asla içerik eklemeyin — çerez bantları alta ait ya da üstte katman olarak.
- Yedek yazı tipi ölçülerini web fontuyla eşleştirin ya da size-adjust kullanın ki değişim sayfayı yeniden akıtmasın.
- Düzen özelliklerini animasyonlamayın. Yeniden akış tetiklemeyen transform ve opacity kullanın.
- Dinamik yüklenen bölümlere min-height verin ki sıfırdan açılmasınlar.
INP’yi düzeltmek#
INP, First Input Delay’in yerini aldı ve daha zordur; çünkü yalnız ilk etkileşimi değil ziyaret boyunca her etkileşimi ölçer. Zayıf INP neredeyse her zaman ana iş parçacığında çalışan fazla JavaScript demektir.
| Sebep | Çözüm |
|---|---|
| Yüklemede ayrıştırılan büyük paket | Kodu bölün; yalnız sayfanın ihtiyacını yükleyin |
| 50 ms üzeri uzun görevler | İşi parçalara bölün ve ana iş parçacığına yol verin |
| Pahalı olay işleyicileri | Debounce uygulayın ve ağır işi etkileşim yolundan çıkarın |
| Ağır üçüncü taraf etiketleri | Etkileşimden sonra yükleyin ya da kaldırın — her birinin kazancını denetleyin |
| Büyük DOM (10.000+ düğüm) | Uzun listeleri sanallaştırın; derin iç içe işaretlemeyi sadeleştirin |
| İşleyicilerde düzen çırpınması | Okuma ve yazmaları iç içe geçirmek yerine gruplayın |
İçerik sitelerinde en yüksek değerli INP düzeltmesi genelde JavaScript’i optimize etmek değil silmektir. Her betiğin ne kazandırdığını sorun; etiket yöneticileri kimsenin eklediğini hatırlamadığı betikler biriktiriyor.
Sık sorulan sorular
Core Web Vitals sıralamayı ne kadar etkiler?
Gerçek ama ölçülü bir sinyaldir ve alaka düzeyinin yerine geçmez, eşitlik bozucu olarak çalışır. Yanlış konu hakkındaki hızlı bir sayfa, sorguyu cevaplayan daha yavaş bir sayfayı geçmez. Düzeltmek için daha güçlü gerekçe davranışsaldır: yavaş ve oynayan sayfalar sıralama devreye girmeden ziyaretçi kaybettirir.
Lighthouse puanım iyi ama saha verim neden kötü?
Çünkü Lighthouse sizin makinenizde sizin bağlantınızla tek bir yüklemeyi taklit ediyor, saha verisi ise gerçek ziyaretlerin 75. yüzdeliği — üç yaşındaki telefonlar ve tıkalı mobil ağlar dahil. İkisi çeliştiğinde sayılan saha verisidir. Laboratuvar araçlarını puanlamak için değil teşhis için kullanın.
Üç metriği de düzeltmem gerekir mi?
Başarısız olanları, ziyaretçilerinizin deneyimlediği sıraya göre düzeltin. CLS genelde düzeltmesi en ucuz ve kullanıcıyı en çok rahatsız edendir, o yüzden başlamak için iyi bir yerdir. LCP insanların bekleyip beklememesinde en büyük etkiye sahiptir. INP etkileşimli sitelerde en çok, durağan makalelerde en az önem taşır.
İyileştirmeler ne zaman görünür?
Saha verisi 28 günlük kayan bir penceredir, dolayısıyla bir düzeltme tüm ziyaretçilere dağıtıldıktan yaklaşık dört hafta sonra anlamlı hareket görülür. Üç gün sonra karar vermeyin. Ama laboratuvar metriklerini hemen kontrol edin ki düzeltmenin beklediğiniz şeyi yaptığını doğrulayın.
core web vitalslcpclsinpsayfa hızıweb performansı
