Google'ın Temel Web Vitalsleri İçin Kapsamlı Bir Kılavuz

Kısa süre önce Google , bir sayfanın sağladığı genel deneyimi iyileştirmek için Sayfa deneyimini Analiz etmenin ve iyileştirmenin yeni bir yolunu tanıttı: Mevcut kullanıcı deneyimi sinyalleriyle Temel Web Vitals . Google'ın Temel Web Vitals kılavuzunda, geliştiricilerin Core web Vitals yardımıyla web sitelerini nasıl analiz edip iyileştirebileceklerinden bahsedeceğiz.

Google'ın söylediği gibi, bu yeni sıralama sinyalinin geliştirmenin ilk aşamalarında olduğunu ve 2021'de tamamlanıp piyasaya sürüleceğini söyledi.

Site sahiplerinin bundan sonra olacaklara hazırlıklı olması için şimdiye kadar nasıl çalıştığına dair bir fikir verdiler. Yani, başlayacağız,

Temel Web Hayati Değerleri Nelerdir?

Google'ın bir web sayfasının genel kullanıcı deneyiminde önemli olduğunu düşündüğü bir dizi belirli faktördür. Her Web Vital istatistiği için performans ölçümleri üç sonuca göre derecelendirilir:

  1.     İyi (geçer)
  2.     İyileştirilmesi Gerekiyor
  3.     Başarısız

Bunlar, üç özel sayfa hızı ve kullanıcı etkileşimi ölçümlerinden oluşur: en büyük zengin içerikli boyama, ilk giriş gecikmesi ve kümülatif düzen kayması.

Mevcut Ölçümler:

Mevcut ölçümler, En Büyük Conetentful Paint (LCP), İlk Giriş Gecikmesi (FID) ve Kümülatif Düzen Kaymasıdır. Bu ölçümler, sayfalar kullanıcı deneyimine göre kararlılık noktasına kadar yüklenirken, bu etkinlikler gerçekleşirken tüm etkileşimli veya görsel olarak etkilenen dahil olmak üzere tamamlanan belirli olaylara dayanır.

Puan değerlerinin sayfaya kullanıcı etkileşimine göre değişebileceği anlamına gelir. İzlenme süresi aralıklarında olayların daha hızlı gerçekleşmesini sağlayarak daha iyi puanlar elde edilebilir.

En Büyük Zengin İçerikli Boya (LCP).

 En Büyük İçerikli Boyama (LCP) , sayfayı tamamen işlenene kadar kullanıcının görünüm bağlantı noktasındaki en büyük görüntü veya metin bloğuna tamamen yüklemek için geçen süredir. Sayfa yüklendikçe ve içeriği görebiliyorsak, ancak biriktirme listesindeki en büyük dosya görüntülenmeye devam ederse, puanlarda değişiklik fark edebilirsiniz.

Şimdi bunu bağlantı hızlarında daha fazla fark edebiliriz. İdeal bir LCP ölçümü 2,5 saniye veya daha hızlıdır.

İlk Giriş Gecikmesi (FID).

İlk Giriş Gecikmesi (FID) . t sayfalar montaj zaman, zaman bunlara karşılık gelen olay işleyicileri işleme tıklama, verilirse, veya klavye girişine yanıt verdiklerini alınan bu, aracı kullanıcı etkileşim için hazırlanıyor bir sayfa çekilen ime. İdeal bir FID ölçümü 100 ms'den azdır.

Kümülatif Düzen Kayması (CLS).  

Kümülatif Düzen Kayması (CLS) . t, O nedeniyle DOM işlemi kaymaktadır görünüşüdür noktası mesafesi veya fraksiyonunda yapılan değişikliklerin veya boyutun sıkıntısı özellikleri büyük medya için elemanları. İdeal bir CLS ölçümü 0.1'den azdır. 

Geliştiriciler, bu metriklerin yardımıyla Sayfa deneyimi temel web vitals'ı bu şekilde analiz edecek ve iyileştirecek.

Yeni 'Sayfa Deneyimi' Sinyali

Sayfa deneyimi sinyali, Temel Web Vitals ile şu mevcut sayfa deneyimi ölçümlerinden oluşur:

  • Mobil uyumluluk- Bir mobil cihazda bir web sitesi açarsak veya sekme dersek, web sitesinin düzeninde veya görünürlüğünde değişiklik yapmadan cihazın çözünürlüğüne veya ekran boyutuna göre küçülebilmelidir.
  • Güvenli tarama -  Bu hizmetlerin yardımıyla, istemcinin uygulamaları, google'ın güncellenmiş güvenli ve güvensiz kaynaklar listesi ile URL'yi kontrol edebilecektir. Zararlı bir bağlantı veya virüslü bir sayfaya yönlendiren bir şey olduğunda, kullanıcılar platforma ve tehdit türlerine bağlı olarak aynı konuda uyarılacaktır.
  •  
  • HTTPS güvenliği- Ağlar üzerinden güvenliği sağlar. İstemci ile sunucu arasındaki iletişimin şifrelenmesini sağlayan bir protokol olduğundan çift yönlü olacaktır.
  • İzinsiz geçiş reklamı yönergeleri - Sayfanın ana içeriğinin çoğunu kapsayan afişleri veya açılır pencereleri azaltmak için kullanılan yönergelerdir. 

Bu, en önemli şeyin SEO'dan çok performans olduğu anlamına gelir .

Temel Web Vitals Nasıl Ölçülür Ve Raporlanır?

Sayfa Deneyimini Değerlendirme

Kullanıcı deneyimi için tüm sayfayı tek seferde değerlendirmek için özel bir araç bulamadık. Şimdilik, sayfa deneyimi sinyalinin oluşturulmasında kullanılan tek bir bileşeni tek bir zamanda ölçmek mümkündür. 

Temel Web Hayati Değerlerini Ölçme Araçları

Konu Temel Web Vitalsini ölçmek olduğunda, SEO'lar ve site sahipleri Google'ın aşağıdakiler gibi çeşitli araçlarını kullanabilir:

  • Chrome Kullanıcı Deneyimi Raporu
  • Arama Konsolu
  • Chrome Geliştirme Araçları
  • Chrome UX raporu
  • PageSpeed ​​Insights 
  • Deniz feneri

Çok yakında, google tarafından sağlanacak olan krom tarayıcı için eklentilerimiz olacak. Ve geliştiriciler, herhangi bir sayfa için Temel Web Vitals'ı hızla değerlendirebilir. Bir rapora göre Google, Core Web Vitals'ı diğer araçlara getirmek için üçüncü taraflarla da çalıştıklarını açıkladı.

1. Chrome Kullanıcı Deneyimi Raporu

Gerçek dünyadaki Chrome kullanıcılarının web sitelerini

nasıl algıladıklarına ilişkin ölçümler sağlar Gerçek kullanıcı verileri bu ölçümleri yönlendirir. Sonuçlar, tanımlanmış ve simüle edilmiş ortamlarda sanal veya yerel testlere kıyasla ziyaret edilen menşei gerçek kullanıcılarının deneyimlerini gösterir. Sonuç olarak, nihai kullanıcı deneyimini oluşturan ve buna yol açan bir dizi harici değişken görebileceğiz.

2. Arama Konsolu

Durum, metrik türü ve URL grubuna (benzer web sayfası grupları) göre gruplanmış URL performansını gösterir. Üç Temel Web Vitals metriğine dayanır: LCP, FID ve CLS. Bir URL bu metriklerden herhangi biri için minimum raporlama verisine sahip değilse, rapordan çıkarılır. URL herhangi bir metrik için bir veri eşiğine sahipse, sayfa durumu en zayıf metrikleri gösterecektir.

3. Chrome Geliştirme Araçları

Doğrudan Google Chrome'a ​​dahil edilmiş bir web geliştirme araçları paketidir. Bunun yardımıyla, daha iyi web sitelerini daha hızlı oluşturmak için anında sayfaları hızla düzenleyebilir ve sorunları çözebilirsiniz. Ayrıca, site sahiplerinin bir sayfadaki Kümülatif Düzen Kaymasına (CLS) yol açabilecek görsel kararsızlık sorunlarını bulmasına ve düzeltmesine olanak tanır.

4. Web Vitals Uzantısı

Üç temel web vitals metriği artık yeni bir uzantıda mevcuttur. Yükleme, etkileşim ve düzen değiştirme ölçümleri hakkında gerçek zamanlı geri bildirim sağlayan Çekirdek Web Vitals'ı ölçer. Chrome'un bu ölçümleri nasıl test ettiğiyle tutarlıdır ve Google'ın diğer araçlarına rapor verir.

5. Deniz Feneri

Bu otomatik web sitesi denetim aracının yardımıyla, geliştiriciler sorunları teşhis eder ve sitelerinin kullanıcı deneyimini iyileştirir. Performans ve erişilebilirlik dahil olmak üzere bir laboratuvar ortamında kullanıcı deneyimi kalitesinin çeşitli boyutlarını ölçer. Lighthouse'un en son sürümü, ek denetimler, yeni ölçümler ve yeni oluşturulmuş bir performans puanı içerir.

6. PageSpeed ​​Insights

Hem mobil hem de masaüstü cihazlarda bir sayfanın laboratuar ve saha performansı hakkında rapor verir. Bu araç, gerçek dünyadaki kullanıcıların sayfayla ilgili deneyimleri hakkında bir fikir verir. Ayrıca, bir site sahibinin sayfa deneyimini nasıl iyileştirebileceği konusunda bir dizi öneri de sunarlar.

Temel Web Hayati Değerleri Nasıl Geliştirilir

Raporu aldıktan sonra, değişiklik yapmanız gerektiğini düşünüyorsanız. Web sayfasının üst kısmındaki içeriği en önemli bilgilerle sınırlandırarak LCP'yi geliştirebilirsiniz. Ziyaretçinin çözmeye çalıştığı bir sorun için kritik öneme sahip değilse sayfanın aşağısına taşıyın.

FID'yi iyileştirmek basittir ve ele almak isteyeceğiniz dört ana sorun vardır:

  1. Üçüncü taraf kod etkisini azaltın : Aynı anda çalışan birçok farklı işleminiz varsa, eylemin çalışmaya başlaması daha uzun sürebilir.
  2. JavaScript çalıştırma süresini azaltın: Yalnızca kullanıcılarınızın ihtiyaç duyduğu kodu gönderin ve gereksiz her şeyi kaldırın.
  3. Ana iş parçacığı çalışmasını en aza indirin : İşin çoğunu ana iş parçacığı yapar, bu nedenle bu sorunu yaşıyorsanız stilinizin ve düzeninizin karmaşıklığını azaltmanız gerekir.
  4. İstek sayılarını düşük ve aktarım boyutlarını küçük tutun : Büyük dosyaları aktarmaya çalışmadığınızdan emin olun.

CLS'yi iyileştirmek için, tüm medyadaki boyut özelliklerine ve video öğelerine dikkat etmeniz gerekir. Bir içerik parçası yüklenmeden önce doğru miktarda alana izin verdiğinizde, işlem sırasında herhangi bir sayfa kayması yaşamazsınız. Bunun yardımıyla, isteseniz de istemeseniz de, birçoğu mizanpaj değişikliklerini tetikleyebileceği için, dönüşüm animasyonunu da sınırlayabilirsiniz. 

Bu tamamen Core Web Vitals ile ilgili.

Herhangi bir sorununuz varsa, yardım sayfamızdan bir bilet eklemekten çekinmeyin.