Everything You Need to Know About Core Web Vitals: The Most Common Issues and How to Overcome Them


10
/ 100


Temel Web Verileri Hakkında Bilmeniz Gereken Her Şey: En Yaygın Sorunlar ve Bunların Üstesinden Gelme Yolları

Kullanıma sunmanın son aşamasının Ağustos 2021’de gerçekleşmesi nedeniyle Önemli Web Verileri güncellemesi zaten kullanıma sunuldu. Bu, artık ön değerlendirmelerden çıkıp bazı ortak kalıpları tanımlayabileceğimiz anlamına geliyor.

Kapsamlı Önemli Web Verileri çalışmamız aşağıdaki alanları kapsamaktadır:

Geçmiş verileri kullanarak hem mobil hem de masaüstü web sitelerinin güncellemeye ne kadar hazır olduğunu ve hangi Önemli Web Verileri metriklerinin (En Büyük İçerikli Boyama, Toplam Engelleme Süresi* ve Kümülatif Düzen Kayması) daha iyi değerlerle geldiğini inceledik.
Ayrıca üç ölçüme göre sayfaların performansını etkileyen en önemli faktörleri de vurgulamayı başardık.
Site Denetimi aracımızdan elde edilen bilgileri kullanarak LCP, TBT ve CLS’nin ortalama değerlerine baktık ve her metrikte en sık karşılaşılan sorunları belirledik.

Bu bilgilerle donanmış olarak sayfalarınızı maksimum CWV uyumluluğu için optimize etmek için daha iyi donanıma sahip olabilir ve böylece üstün kullanıcı dostu olma ve daha yüksek sıralamalar elde edebilirsiniz.

*Not: Site Denetiminde, İlk Giriş Gecikmesi (FID) metriği yerine Toplam Engelleme Süresi (TBT) metriğini kullanırız; ikincisi gerçek kullanıcılardan gelen verilere erişim anlamına gelir. Google’ın kendisi de bu iki ölçümün birbiriyle ilişkili olduğunu ve her ikisinin de etkileşim sorunlarını değerlendirmek için kullanılabileceğini belirtti.

Çalışma Metodolojisi

Çalışmamız birkaç bölüme ayrılmıştır:

Güncelleme öncesi ve sonrası CWV uyumluluğuna yönelik değişikliklerin değerlendirilmesi.
Bir sitenin her ölçüm için eşikleri geçip geçmediğini etkileyen faktörlere bir bakış.
Her bir ölçüm için en sık ve en az sıklıkta karşılaşılan sorunları araştırmak amacıyla analiz edilen web sitelerinin tam bir CWV denetimi.

Çalışmanın ilk kısmı 1,7 milyon masaüstü ve 324 bin mobil URL’nin analizine dayanıyor. LCP, TBT ve CLS metrikleri için Haziran 2021 güncelleme öncesi değerlerini, güncellemenin tamamlandığı Eylül 2021’deki istatistiklerle karşılaştırdık.

Karşılaştırma yapmak için, güncellemeden önce ve sonra her bir ölçüm için üç kategori aralığında (“iyi”, “zayıf”, “geliştirilecek”) kaç sayfa olduğunu kontrol ettik.

İyi İyileştirme Gerekiyor Kötü
LCP ≤ 2,5s ≤ 4s > 4s
TBT < 300 ms ≥ 300 ms ≤ 600 ms > 600 ms
CLS ≤ 0,1 ≤ 0,25 > 0,25

Ayrıca “Herhangi bir TBT” ve “Herhangi bir CLS” puanlarından da bahsediyoruz. Bunlar, TBT veya CLS performanslarına bakılmaksızın tüm URL’ler için ortalama ölçümleri yansıtır.

Her bir ölçümü etkileyen faktörleri belirlemek ve hangi hataların diğerlerinden daha sık ortaya çıktığını görmek için Site Audit’in Eylül 2021’de 4 milyon masaüstü ve 1,7 milyon mobil URL denetimini gerçekleştirdik. Araç genel olarak bu sayfaları CWV’ye özgü 23 farklı kontrolden geçirdi.** Bu da en zor ve geçilmesi kolay denetimleri ortaya çıkarmamıza olanak sağladı.

Çalışmanın tamamı laboratuvar verilerine dayanmaktadır.

**Not: Tüm kontrollerin listesini, tanımlarını ve denetimin tam mobil-masaüstü dökümünü yazının en sonunda bulabilirsiniz.

Önemli Web Verileri Kolay Olabilir

Alien Road Co. Saha Denetimi ile

 

Hayati Bilgilerinizi Denetleyin →
Mobil ve Masaüstü Bilgisayarlara Yönelik Önemli Web Verileri Çalışması Bulguları
Kaç URL LCP, TBT ve CLS Puanlarını Yükseltti?

Aşağıdaki grafikler, Haziran 2021 ve Eylül 2021 itibarıyla mobil ve masaüstü olmak üzere kaç sayfanın üç CWV metriği (birleşik ve bireysel) için iyi eşikleri gerçekten geçtiğini gösteriyor.

Güncellemeden önce, masaüstü sayfalarının yalnızca %34,5’i her üç ölçüm için gerekli eşikleri karşılayabiliyordu. Güncelleme sonrasında, LCP, TBT ve CLS için tümü “iyi” puanlarla gelen masaüstü URL’lerinin sayısı yüzde 7 arttı.

Mobil URL’ler, mobil sayfaların %4’ünden daha azının her üç ölçüm için de “iyi” eşikleri aştığı daha karanlık bir tablo sergiliyor. Haziran 2021’de bu sayı neredeyse üç kat daha fazlaydı; bu da mobil sayfaların masaüstü sayfalara göre güncellemeye daha az hazır olduğunu gösteriyordu.

Güncelleme Öncesi ve Sonrası CWV Metriklerinde Olumlu Değişimlerin Değerlendirilmesi

Ancak CWV metrikleri yalnızca “iyi” bir puandan daha fazla katmana sahiptir. LCP, TBT ve CLS üç kategoriye ayrılabilir: “İyi”, “Gelişmek için” ve “Kötü”.

Güncelleme sonrası değişiklikleri daha ayrıntılı bir düzeyde analiz etmek için, üç ölçümde meydana gelen tüm iyileştirmeleri kontrol ettik, kaç URL’nin bazı kazançlar sağladığını araştırdık ve LCP, TBT ve CLS puanlarını kategoriden kategoriye taşıdık.

Güncelleme öncesi ve sonrası puanlarda olumlu değişimler söz konusu olduğunda aşağıdaki eğilimleri görüyoruz:

Mobil URL’ler

TOPLAM (eşikler arasında iyileşen herhangi bir değişim) İyileştirmek için -> İyi Kötü -> İyi Kötü -> İyileştirmek için
İyileşen URL’lerin payı (3 ölçümün tümü) %0,1 %0,01 %0,07 %0,02
İyileşen URL’lerin payı (yalnızca TBT) %14 %5 %3 %6
İyileşen URL’lerin payı (yalnızca CLS) %19 %8 %7 %4
İyileşen URL’lerin payı (yalnızca LCP) %7 %1 %1 %5
İyileşen URL’lerin payı (en az 1 metrik) %38 %14 %10 %14

Masaüstü URL’leri

TOPLAM (eşikler arasında iyileşen herhangi bir değişim) İyileştirme → İyi Zayıf → İyi Zayıf → İyileştirme
İyileşen URL’lerin payı (3 ölçümün tümü) %0,09 %0,05 %0,03 %0,01
İyileşen URL’lerin payı (yalnızca TBT) %7 %4 %1 %1
İyileşen URL’lerin payı (yalnızca CLS) %21 %9 %7 %5
iyileşen URL’lerin payı (LCP açık)

yaklaşık) %14 %9 %2 %4
İyileşen URL’lerin payı (en az 1 metrik) %39 %21 %10 %9
Tüm puanları artıran çok düşük (%0,1’e kadar) sayfa sayısı gördük. Ancak tüm sayfaların üçte birinde en az bir metrik için puan artışı görüldü. Bu hem mobil hem de masaüstü URL’ler için geçerlidir.
Mobil cihazlarda, her üç ölçüm için de en popüler kategori değişikliği “zayıf”tan “gelişecek” aralığına doğru oldu. URL’lerin LCP, TBT ve CLS puanlarının çoğunluğunun “geliştirilecek” kategorisinden “iyi” kategorisine geçmesi nedeniyle masaüstü URL’ler daha olumlu eğilimler gösteriyor.
Mobil cihazlarda “zayıf” durumdan “iyi”ye geçiş neredeyse imkansız gibi görünüyor, tek bir istisna dışında. CLS, “zayıf”tan “iyiye” doğrudan geçiş için en kolay eşiğe sahip gibi görünüyor ve daha fazla sayfa, CLS puanlarında önemli iyileşmeler sağladı.

Analizlerimizi Google’ın CLS eşiğini düşürmesinin ardından topladık, dolayısıyla görünürdeki kolaylık muhtemelen bu değişiklikle bağlantılı.

Mobil sayfalar, LCP söz konusu olduğunda en az olumlu değişimle karşı karşıya kalırken, masaüstü URL’ler için en büyük zorluklara TBT neden oluyor gibi görünüyor ve en düşük olumlu değişim eğilimini (%6,7) gösteriyor.
LCP, TBT ve CLS Puanlarını Etkileyen Faktörler

Her metriğin unsurlarını daha ayrıntılı bir şekilde analiz ederek bu puanları etkileyen faktörleri belirlemeyi başardık.

Düşük LCP Puanlarına Neden Olan Nedir?

LCP, kullanıcının görüntü alanı içindeki en büyük sayfa öğesinin (görüntü veya metin bloğu) yükleme süresini ölçtüğünden, ekranın dışına taşan hiçbir şey sayılmaz.

Bu nedenle analiz edilen sayfalarda aşağıdaki unsurlardan hangilerinin mevcut/yok olduğuna baktık:

<img> etiketleri resimler, video poster resimleri, arka plan resimleri vb.’dir;
<div> / <section> etiketleri sayfadaki herhangi bir öğeyi (kapsayıcıyı) belirtir;
<p> etiketi bir paragraftır (metin);
<span> etiketi genellikle bir tür metin öğesine işaret eder; Ve
<h1> / <h2> / <h3> etiketleri çeşitli sayfa başlıklarını ve alt başlıklarını belirtmek için kullanılır.

Analizimiz, <img> ve <div> etiketlerinin LCP yavaşlamasına neden olan en yaygın öğeler olduğunu gösterdi.

Ancak daha yakından bakarsak, LCP puanlarını etkileyen mobil-masaüstü etiketi öğeleri arasında daha fazla fark görürüz.

<img> ve <div> etiketleri çoğunlukla “zayıf” LCP aralığındaki mobil URL’ler için bir sorundur. LCP’si “iyi” ve “geliştirilecek” aralığında olan mobil sayfalar çoğunlukla <p> ve <img> etiketlerinden etkilenir.
H1, mobil cihazlarda bir sorun olmaya başlıyor, bunun nedeni muhtemelen h1’lerin, daha küçük ekranlarla uğraştığımızda görüntü alanındaki en büyük öğelerden biri olmasıdır.

Bu, mobil cihazdaki en büyük öğe olarak kabul edilen öğe ile masaüstü öğe arasında bir fark olduğu anlamına gelir.

Özel durumunuzda hangi belirli sayfa öğesinin görünüm içinde en büyük içerikli öğe olarak kabul edildiğini açmak için Site Denetimi aracını kullanabilirsiniz.

TBT Puanlarını Neler Etkiler?

TBT, kullanıcıların sayfanın öğeleriyle ne kadar hızlı etkileşime girebileceğini ölçtüğünden, uzun görevlere bakmamız gerekti.

Uzun görevler, kullanıcı arayüzünü donduran bir JavaScript kodunun parçası olduğundan, “iyi” bir TBT puanı almak için genel TBT’nizi 300 ms’nin altında tutmalısınız.

İstediğiniz kadar uzun görevi üstlenebilseniz de (300 ms eşiğini aşmadıkları sürece), “iyi” TBT puanına sahip hem mobil hem de masaüstü sayfaların en düşük sayıya sahip olduğunu görmek yine de ilginç. uzun görevler:

Ortalama olarak, “zayıf” TBT puanına sahip bir masaüstü sayfası, “iyi” aralığa girenlere kıyasla 6 kat daha uzun görevlere sahiptir. Mobilde bu fark daha mütevazı; üç katı.

CLS Puanlarını Neler Etkiler?

Sayfanın görsel stabilitesini ölçen CLS metriği, büyük ölçüde, görünür bir öğenin oluşturulan bir çerçeveden diğerine konumu değiştiğinde ortaya çıkan düzen kaymalarına bağlıdır.

TBT’de olduğu gibi, düzen değişiklikleri de bu değişikliklerin sayısından ziyade kapsamıyla ilgilidir. TBT’de bunun doğrudan kanıtını göremesek de CLS analizimiz bunu açıkça ortaya koyuyor:

Çeşitli CLS puanlarına sahip sayfalar arasındaki düzen değişikliği sayısında büyük bir fark görmüyoruz; bu, eşikleri karşıladıkları sürece çok sayıda vardiyaya sahip olabileceğiniz anlamına geliyor.

En Yaygın Temel Web Vitals Sorunları ve Bunların Nasıl Düzeltileceği

Sayfaların CWV puanlarını etkileyen en önemli faktörleri belirlemiş olsak da bu, bunların site sahipleri için en acil sorunlar olarak görülebileceği anlamına gelmez.

Burası Site Denetiminin Önemli Web Verileri raporunun devreye girdiği ve geçilmesi en zor kontrollerin belirlenmesine yardımcı olduğu yerdir.

Site Denetimi aracı, Pagespeed Insights mantığını ele aldığımız ve aşağıdakileri dikkate aldığımız her sayfayı 23 farklı kontrolden geçirir:

Kontrol 90 işaretini aşarsa sayfa yeşil bölgeye gider ve bu denetimi geçilmiş olarak kabul ederiz;
50-89 işareti sayfayı sarı bölgeye sokar; Ve
Değer 49’dan küçükse sayfa belirli bir kontrol için kırmızı bölgeye taşınır.

Önemli Web Verileri Kolay Olabilir

Alien Road Co. Saha Denetimi ile

 

Hayati Bilgilerinizi Denetleyin →

Kuşbakışı bakıldığında mobil sayfaların CWV ile çok daha fazla sayıda sorunla karşı karşıya olduğunu görebiliriz. Masaüstü URL’leri CWV kontrollerini geçme konusunda oldukça iyi bir iş çıkarıyor gibi görünüyor

Çeklerin çoğunluğu (%68) yeşil noktadadır.

Sayfaların kontrollerin çoğunu geçtiği masaüstü bilgisayarların aksine, mobilde kontrollerin yalnızca %34’ü yeşildir. Tüm denetimlerin %65’inin endişe verici şekilde sarı veya kırmızı olması, mobil sayfaların bu kontroller için CWV gereksinimlerini karşılamadığı anlamına gelir.

Tüm kontrollere daha ayrıntılı bir göz atalım ve hem mobil hem de masaüstü sayfalar için geçilmesi en kolay ve en zor üç kontrolü görelim.

Üst kısımlar neredeyse aynı görünüyor; ister masaüstü ister mobil URL’ler olsun:

Genişliği ve yüksekliği açıkça belirtilmeyen resim öğeleri hem mobil hem de masaüstü sayfalar için en büyük sorun olarak karşımıza çıkıyor.
JavaScript paketlerindeki yinelenen modüller, birden fazla sayfa yönlendirmesi ve verimli animasyonlu içerik için video formatlarının kullanımı genellikle çok az sorunla veya hiç sorun olmadan iletilir.
Ancak iş, oluşturmayı engelleyen kaynakların ortadan kaldırılmasına gelince, fark dikkat çekicidir: Masaüstü USL’ler neredeyse bu kontrolü geçerken, mobil USL’ler sarı bölgeye zar zor ulaşır.

Site Denetimi yalnızca tüm ölçümlerdeki sorunları tespit etmekle kalmaz, aynı zamanda bunları LCP, CLS ve TBT ile ilgili sorunlara da ayırır.

Site Denetimi aslında sorunu çözümü içerecek şekilde şekillendirdiğinden, belirli sayfalarınız için en yaygın sorunların metrik metrik dökümünü incelediğinizden emin olun.

Özetliyor

Önemli Web Verileri Güncellemesi halihazırda mevcut olduğundan, Google’a sayfalarınızın en üst düzeyde kullanıcı dostu olduğunu ve bu sıralamaları hak ettiğini göstermek için her üç ölçüm (CLS, LCP ve TBT) için puanınızı artırmaktan başka seçeneğiniz yoktur.

Pek çok alanı kapsayan ve temel bilgileri ortaya koyan çalışmamızın, optimizasyon çabalarınızı daha da desteklemek için net bir rehberlik sağlayacağını umuyoruz.

Tüm keşiflere tekrar göz atmanızı önersek de, bu çalışmadan çıkarmanız gereken birkaç şey var:

Web henüz CWV’ye tam olarak hazır değil.

Masaüstü URL’lerin yalnızca üçte biri ve mobil URL’lerin %3’ü, üç CWV metriğinin tümü için eşikleri geçebiliyor.

Güncellemeden bu yana, sayfaların yalnızca yaklaşık %1’inde genel olarak iyileştirmeler gördük. Ve yalnızca %40’tan azı en az bir metrik için daha iyi puanlar elde etti.

Bu, iyileştirme için çok fazla alanınız olduğu ve doğru ve erken yapıldığında sayfa optimizasyon çabalarınızın sayfalarınıza rekabet avantajı sağlayabileceği anlamına gelir.

Mobil sayfalarınıza özellikle dikkat edin.

Masaüstü bilgisayarlar için yapılan kontrollerin çoğunluğu yeşil (geçti olarak da bilinir), cep telefonları için ise çoğunlukla sarı ve kırmızı renkler görüyoruz. Bu, mobil sayfalarda ortalama olarak masaüstü sayfalara göre daha fazla sorunla karşı karşıya olduğundan, denetimleri masaüstünde geçirmenin mobil ortama göre daha kolay olduğu anlamına gelir.

Bunun nedeni büyük olasılıkla mobil eşiklerden ve laboratuvar verilerinin bir 3G cihazında simüle edilmesinden kaynaklanmaktadır.

LCP (mobil için) ve TBT (masaüstü için) puanlarınız üzerinde çalışın.

CLS’nin en az ‘sorunlu’ ölçüm olduğu göz önüne alındığında, LCP ve TBT puanlarınızı iyileştirmeye çalışmanız gerekir:

CLS iyileştirmelerinin size “zayıf” puan aralığından “iyi” puan aralığına hızlı bir geçiş sağlama olasılığı daha yüksektir.
LCP puanınızı düşürmediklerinden emin olmak için <img>, <div>, <p> ve <h1> etiketlerinizi denetleyin. Yavaşlığa neden olan sayfa öğelerini belirlemek için Site Denetimi aracını kullanın.
“İyi” bir TBT puanı elde etmek için toplam engelleme sürenizi 300 ms’de tutun. Bir kez daha Site Denetimi aracı, hangi uzun görevlerin genel TBT puanınızı en çok engellediğini belirlemenize yardımcı olacaktır.
Düzen değişimlerinizin kapsamına dikkat edin ve CLS eşik alanını çok fazla kaplayanlardan kurtulun. Saha Denetimi, en büyük yerleşim değişikliklerinin her birinin CLS katkısını yansıtır.
Görüntü öğelerinin yüksekliğine ve genişliğine ve diğer yaygın CWV sorunlarına dikkat edin. Geçilmesi en zor denetimlere ikinci kez bakın. Hem mobil hem de masaüstü URL’lerinde sorunların çoğu resim boyutlarından kaynaklanmaktadır. Oldukça hızlı bir düzeltmeye sahip olan CLS ile ilgili bir çek olduğundan, bunu CLS puanınızı artırmak için hızlı bir kazanç olarak kullanabilirsiniz.
Makul beklentileri koruyun.

Masaüstü bilgisayarlar için en yaygın değişim, “iyileştirme” aralığından “iyi” aralığa geçiştir. Ancak mobil URL’lerin çoğunluğu “zayıf” kategorisinden “iyileştirilecek” kategorisine atlıyor; tek istisna CLS’dir. Bu nedenle, her bir CWV metriğinde tüm “zayıf” puanlardan tüm “iyi” puanlara doğru hızlı bir geçiş yapmayı beklemeyin ve eşiklerdeki değişikliklere dikkat edin.

Bonus: Mobil ve Masaüstü URL’ler için En Yaygın CWV Sorunlarının Tam Listesi

Tüm Site Denetimi kontrollerinin tam listesini keşfetmeyi ve mobil masaüstü sayfalarının ortalama puanlarını görmeyi merak ediyorsanız, aşağıdaki tabloya gelin ve resmin tamamını görün.

Ortalama Denetim Puanları
Denetim Ortalama puanı (masaüstü) Ortalama puanı (mobil)
JavaScript paketlerindeki yinelenen modülleri kaldırın %100 %100
Birden fazla sayfa yönlendirmesinden kaçının %100 %100
Animasyonlu içerik için video formatlarını kullanın %100 %99
CSS’yi küçült %100 %98
Eski JavaScript’i modern tarayıcılara sunmaktan kaçının %99 %97
Üçüncü taraf kodunun etkisini azaltın %99 %72
JavaScript yürütme süresini azaltın %99 %88
JavaScript’i küçültün %99 %96
Ana iş parçacığı işini en aza indirin %99 %74
Gerekli kaynaklara önceden bağlanma %94 %86
Metin sıkıştırmayı etkinleştirme 93

Leave A Comment