Web Sitesi Sahipleri İçin Core Web Vitals Rehberi
Core Web Vitals yüklenmeyi, yanıt hızını ve görsel kararlılığı ölçer. LCP, INP ve CLS'nin anlamını, hedef puanları ve nereden başlayacağınızı öğrenin.
Core Web Vitals, Google'ın bir sayfanın gerçek bir ziyaretçiye nasıl hissettirdiğini tanımlamak için kullandığı üç ölçümdür: ana içeriğin ne kadar hızlı göründüğü, birisi dokunduğunda veya tıkladığında sayfanın ne kadar çabuk tepki verdiği ve yüklenirken düzenin oynayıp oynamadığı. Bunlar Google'ın sayfa deneyimi sinyallerinin bir parçasıdır, ancak önemsemek için daha önemli neden daha basittir: ziyaretçiler yavaş ve oynayan sayfaları terk eder ve size nedenini nadiren söyler.
Bu rehber üç metriği sade bir dille, Google'ın yayımladığı eşikleri ve sıradan bir küçük işletme sitesinde önce neyi düzeltmeniz gerektiğine nasıl karar vereceğinizi açıklar.
Üç metriğe genel bakış
| Metrik | Neyi ölçer? | İyi | Zayıf |
|---|---|---|---|
| LCP (Largest Contentful Paint) | En büyük görünür öğenin oluşturulmasına kadar geçen süre | 2,5 saniye veya daha az | 4 saniyeden fazla |
| INP (Interaction to Next Paint) | Dokunma, tıklama veya tuşa basma sonrasında sayfanın görsel olarak yanıt vermesinin ne kadar sürdüğü | 200 milisaniye veya daha az | 500 milisaniyeden fazla |
| CLS (Cumulative Layout Shift) | Görünür içeriğin beklenmedik biçimde ne kadar kaydığı | 0,1 veya daha az | 0,25'ten fazla |
"İyi" ile "zayıf" arasındaki değerler "iyileştirme gerekli" bandına girer. Google bir sayfayı gerçek ziyaretlerin 75. yüzdelik diliminde değerlendirir; yani ziyaretçilerinizin dörtte üçü eşikte veya eşikten daha iyi bir deneyim yaşamalıdır. Kendi dizüstü bilgisayarınızdaki tek bir hızlı test, sayfanın geçtiğini kanıtlamaz.
Largest Contentful Paint: sayfa görünüyor mu?
LCP, ilk ekrandaki en büyük görsele, video posterine veya metin bloğuna bakar ve oluşturulmasının ne zaman bittiğini kaydeder. Çoğu sitede bu, bir ana görsel veya büyük bir başlıktır. Yavaş bir LCP genellikle dört nedenden birinden kaynaklanır: yavaş sunucu yanıtı, ağır veya kötü biçimlendirilmiş bir görsel, oluşturmayı engelleyen CSS ya da JavaScript, veya tarayıcının anahtar görseli çok geç keşfetmesi.
Interaction to Next Paint: sayfa yanıt veriyor mu?
INP, Mart 2024'te eski First Input Delay metriğinin yerini aldı. First Input Delay yalnızca ilk etkileşime ve yalnızca başlamadan önceki gecikmeye bakarken, INP ziyaret boyunca tüm etkileşimleri ele alır ve girdiden bir sonraki karenin çizilmesine kadar en yavaşlardan birini raporlar. Hızlı yüklenen ama bir menüyü açtığınızda ya da bir düğmeye bastığınızda takılıyormuş gibi hissettiren sayfalarda genellikle bir JavaScript sorunu vardır: ana iş parçacığında aynı anda çok fazla kod çalışmaktadır.
Cumulative Layout Shift: sayfa yerinde duruyor mu?
CLS, görünür öğelerin beklenmedik hareketlerini toplar. Bir bağlantıya dokunmak üzereyken üstüne bir banner yüklenip bağlantıyı aşağı ittiğinde bunu yaşamışsınızdır. Yaygın tetikleyiciler; genişlik ve yükseklik öznitelikleri olmayan görseller, geç yüklenen reklamlar ve gömülü içerikler, değişip metin boyutunu değiştiren yazı tipleri ve sayfanın üstüne eklenen çerez bannerlarıdır.
Laboratuvar verisi ve saha verisi
İki tür ölçüm vardır ve bunları karıştırmak kafa karışıklığına yol açar.
- Saha verisi, gerçek cihazlar ve ağlar kullanan gerçek ziyaretçilerden gelir. Google bunu Chrome kullanıcılarından toplar ve sitenizin yeterli trafiği olduğunda PageSpeed Insights ile Search Console'da gösterir. Değerlendirmede sayılan budur.
- Laboratuvar verisi, Lighthouse gibi simüle edilmiş bir testten gelir. Tekrarlanabilirdir, bu da onu hata ayıklama için ideal yapar; ancak tek bir bağlantıdaki tek bir cihazdır.
Küçük bir sitenin hiç saha verisi olmayabilir. Bu durumda sorunları bulmak için laboratuvar testlerini kullanın ve sonuçları bir hüküm olarak değil, rehber olarak değerlendirin.
Düzeltmeye nereden başlamalı?
- Önemli sayfaları ölçün. Ana sayfanızı, en çok ziyaret edilen açılış sayfanızı ve tipik bir makale ya da ürün sayfasını mobil profilde test edin. Tüm sitenin ortalamasını almayın.
- Önce en yavaş metriği düzeltin. LCP zayıf, CLS iyiyse LCP üzerinde çalışın.
- Ucuz kazanımlarla başlayın. Ana görseli sıkıştırın ve yeniden boyutlandırın, görsel boyutlarını belirtin, önbelleklemeyi etkinleştirin, bir CDN düşünün ve artık kullanmadığınız eklentileri veya betikleri kaldırın.
- Her değişiklikten sonra yeniden test edin. Neyin işe yaradığını bilmek için her seferinde tek bir şeyi değiştirin.
- Saha verisinin yetişmesini bekleyin. Gerçek dünya rakamları kayan bir dönem boyunca toplanır; bu yüzden iyileştirmelerin tam olarak görünmesi birkaç hafta sürer.
Hostingin bununla ilgisi ne?
Core Web Vitals büyük ölçüde bir sayfanın nasıl inşa edildiğiyle ilgilidir, ancak hosting tabanı belirler. Yavaş bir sunucu yanıtı, ardından gelen her şeyi geciktirir ve bu doğrudan LCP'ye zarar verir. Kalabalık sunucular, eski PHP sürümleri ve eksik sunucu tarafı önbellekleme, tarayıcı ilk baytı almadan önce zaman ekler. İyi bir ön yüz çalışması, yavaş bir arka ucu tam olarak telafi edemez.
Gerçekçi bir beklenti
Üç metriğin hepsini geçmek değerli bir hedeftir, ancak sihirli bir sıralama anahtarı değildir. İçerik uygunluğu hâlâ çok daha önemlidir. Core Web Vitals'ı sürtünmeyi gidermek olarak düşünün: zayıf bir sayfayı sıralamaya sokmazlar, ama yavaş ve oynayan bir sayfa, zaten kazandığınız ziyaretçileri elde tutmayı zorlaştırır.
Site sahiplerinin yaptığı yaygın hatalar
- Kusursuz bir Lighthouse puanının peşinde koşmak. Laboratuvar testinde 100 almak hedef değildir. Gerçek ziyaretçiler için üç eşiği geçmek hedeftir.
- Yalnızca masaüstünde test etmek. Değerlendirmenin çoğu mobilde yapılır ve mobil cihazların işlemcileri ile bağlantıları daha yavaştır.
- Bir hız eklentisi kurup orada durmak. Eklentiler önbellekleme ve görsel işlemede yardımcı olabilir, ancak 3 MB'lık bir ana görseli veya bir düzine pazarlama betiğini ortadan kaldıramaz.
- Şablonları göz ardı etmek. Aynı şablondan oluşturulan sayfalar genellikle aynı sorunları paylaşır; bu yüzden şablonu düzeltmek birçok sayfayı birden düzeltir. Search Console benzer URL'leri tam da bu nedenle gruplar.
Neyi değiştirdiğinizin ve öncesi ile sonrasındaki puanın basit bir kaydını tutun. Bir eklenti güncellemesinden sonra bir şey gerilediğinde tahmin yürütmekten kurtarır.
Hızlı sayfalar sunucuyla başlar
Zebra Hosting Cloud'da her pakette, güncel PHP sürümlerini seçebileceğiniz Plesk kontrol paneli bulunur ve barındırılan sitelerde statik dosyaları ziyaretçilere daha yakın sunmak için Cloudflare CDN kullanılabilir. Bunlar birlikte denklemin sunucu tarafını kapsar; böylece sayfanın kendisine odaklanabilirsiniz. Her paketin neler sunduğunu hosting genel bakış sayfasında görün.