İstanbul/Türkiye
Bizi Takip Edin

Core Web Vitals Nedir?

Core Web Vitals Nedir?

Core Web Vitals Nedir?

Core Web Vitals Türkçe şekilde açıklayacak olursak ” Temel Web Yaşamsal Değerleri” olan kavram, Google’ın yeni algoritması ile açıkladığı web sayfasının genel kullanıcı deneyimlemesinin önemli olduğunu düşündüğü ve geliştirdiği bir faktördür. İnternet kullanıcılarının daha iyi bir internet deneyimini yaşaması için 2021 yılının Haziran ayında kullanılması planlanan ve kullanılan bir metriktir.

Asıl amacı; site sahiplerinin, internet kullanıcılarına sunduğu web sitesi deneyimlemesini ölçmelerine yardımcı olmak odaklı hız, görsel uyumluluk ve tepkime süresi bilgilerini paylaşmak için geliştirilmiş parametreler sunmaktadır. Özetle “Core Web Vitals”, Google’ın sayfa deneyimleme puanının bir yönü olacak parametrelerin bir alt kümesi olmaktadır.

Core Web Vitals Neden Önemlidir?

Google’ın bir girişimi olduğu için, bir sitenin sitede internet kullanıcısının deneyimini değerlendirme yaparken Google, büyük ihtimalle Vitals puanlarını da site puanı açısından önemli faktör olarak ele alacaktır. Eğer web siteniz iyi bir performans gösterdiğini ölçüyor ve düşünüyorsa, sitenizi olumlu olarak değerlendirecektir ve aslında bu arama motoru sonuç sayfalarında olumlu sonuçlamalar almanızı sağlayacaktır.

Core Web Vitals Hangi Alt Kümelerden Oluşmaktadır?

3 ana başlıktan oluşmaktadır;
  • Largest Contentful Paint (LCP),
  • First Input Delay (FID),
  • Cumulative Layout Shift (CLS),
Core Web Vitals Nedir DiperwebLCP (Büyük Zengin İçerikli Boya), gerçek bir internet kullanıcısının ziyaret ettiğindeki bakış açısından bir web sitesinin sayfasında yüklenmesinin ne kadar zaman aldığı ile bağlantılıdır. Başka bir açıdan ele alırsak: bir bağlantıyı elde ettikten sonra, ekranda bulunan içeriğin çoğunu görmek zamanlaması arasında geçen zamandır. Ekrandaki medya öğeleri ve içerikler dışında unsurlar, bu kavrama dahil edilmemektedir. Web sitesinin arka planındaki fonksiyonel yapılar, LCP’yi etkilememektedir.

LCP Sorunu Neden Gerçekleşir?

LCP Sorunu Neden Gerçekleşir DiperwebGoogle’a göre LCP vaktinin yüksek çıkmasının nedeni şunlardır:
  • Oluşturmayı engelleyen Javascript ve CSS kodları,
  • Yavaş kaynak yükleme süreleri,
  • İstemci süreleri oluşturma,
  • Yavaş sunucu yanıt süreleri.

Sitenizde Kullanabileceğiniz LCP Sorunlarını Kaldırmak İçin Kullanabileceğiniz Yöntemler

  • CSS’lerinizi sıkıştırın ve küçültün,
  • Büyük sayfa öğelerini kaldırın,
  • Web barındırıcınızı yükseltin,
  • Geç yüklenmeyi sağlayan sebepleri ve sorunları araştırın,
  • Gereksiz üçüncü parti komut dosyalarını kaldırın.

First Contentful Paint (FCP) Nedir?

First Contentful Paint, Google Search Console aracı kullanılarak yeni ölçüm birimlerindendir. First Contentful Paint, internet kullanıcısının web sitesini ziyaret etmesi anından itibaren tarayıcının ekrandaki ilk içeriği gerçekleştirdiği andan itibaren geçen zaman ölçüsü diyebiliriz. Google, FCP zamanlaması olarak 0-2 saniye aralığında olursa yeşil renk (hızlı) ile derecelendirir, 2-4 saniye aralığında olursa turuncu(orta hızlı), 4 saniye üzerinde ise kırmızı renk(yavaş) olarak derecelendirmesi yapılmaktadır.

FCP Sorunu Neden Oluşur?

  • Web tabanlı yazı tipleri sorunu,
  • Oluşturmayı engelleyen kaynaklar,
  • İstemci tarafı oluşturma,
  • Yavaş sunucu yanıt süreleri.

Sitenizdeki FCP sorunlarını çözmek için kullanabileceğiniz yöntemler:

  • FCP sürelerini optimize etmek için iyi bir web barındırma hizmeti kullanmanız gereklidir.
  • Önbellekleme, sunucu işlem süresini azaltmaya yardımcı olmaktadır.
  • Websitenizde, HTML, CSS ve JS komut dosyaları gibi birden fazla öğeyi bir araya getirilmesinden sonra tarayıcı tarafından oluşturulmaktadır. Bu kaynakları sıkıştırma yöntemi ile ve kullanılmayan kaynakların silerek veya başka sayfada kullanılan kaynakları o sayfaya özel dosya ile çağırarak “Oluşturulmasını engelleyen kaynakları kaldırın” uyarısından kurtulmanız sağlanabilir. Böylelikle FCP değerleriniz olumlu etkilenir.
  • Lazy Load kullanmanız ile birlikte web sayfalarınızın alt kısmında kalan medya içeriklerini ertelemek için mükemmeldir. Ancak lazy load, tarayıcının herhangi bir medyayı işleyebilmesi için JS kullanması gerekli olduğunda dolayı, FCP sürenizi bir miktar arttıracaktır. Bundan kaynaklı olarak web sitenizde görünür üst kısımda lazy load özelliğini kullanmanızı tavsiye etmemekteyiz.
  • Bazı internet tarayıcıları, tüm yazı tiplerini yükleyene kadar metinleri oluşturmamaktadır. Web sitenize özel yazı tipleri yüklenirken tarayıcıyı geçiçi bir yazı tipi edinmesi için sistem yazı tipini göstermeyi zorlayarak bu sorunu düzeltebilirsiniz.

First Index Delay Nedir DiperwebFirst Input Delay (FID) Nedir?

İlk Giriş Gecikmesi olan FID, bir internet kullanıcısının bir web sayfası ile etkileşime geçtiği zamandan (yani bir bağlantıya tıkladığında,dokunduğunda veya özel, Javascript desteği mevcut denetim kullanıldığında) tarayıcının işleyicilerinin başlayabildiği zamana kadar geçen süreyi ölçmektedir. İnternet kullanıcısının, web siteniz hakkında ilk düşünceleri konusunda önemli bir konumda yer almaktadır. Tarayıcı ne kadar hızlı işlem gerçekleştirirse, internet sayfası o kadar duyarlı gözükür. FID, internet sayfasının yüklenirken gerçekleşen tüm etkileşimleri ölçmektedir. Bunlar tıklama, dokunma ve tuşa basma gibi girdi eylemleridir. Ancak kaydırma ve yakınlaştırma gibi etkileşimler dahil değildir. Google’ın yeni belirlediği ölçüm koşullarına göre, duyarlı görünmenin sağlanması için 100 ms’den daha az olması gerekmektedir. 100 ms ile 300 ms arasında değer çıkmakta ise web sitenizin iyileştirilmesi gerekmektedir.

Sitenizdeki FID sorunlarını çözmek için kullanabileceğiniz yöntemler:

  • Bir tarayıcı önbelleği kullanın,
  • Kritik olmayan üçüncü taraf komut dosyalarını kaldırın,
  • Javascript’i erteleyin veya en aza indirin,

Cumulative Layouts Shift (CLS) Nedir?

Kümülatif Düzen Kaydırma (CLS), bir web sayfasının yükleme sırasında ne kadar kararlı olduğudur. Buna, görsel kararlılıkta denmektedir. Sayfa yüklenirken web sayfası yüklenirken sayfa içerisinde bulunan öğeler hareketlenirse (açılır pencereler, reklamlar vb.), CLS hızı da o kadar çok etkilenecektir.

CLS’nin Sebepleri Nelerdir?

  • Bannerlar, Pop-ups,
  • Dinamik olarak eklenen öğeler,
  • Reklamlar,
  • Boyutları belirtilmemiş görseller.

Bannerlar, Pop-Ups

E-posta listesine kayıt ol vb. gibi sabit olarak eklenmiş ve belirlenmiş bir alanda belirtilmemiş içerik kısmı yüklenirken kaymaya neden olmaktadır. Bundan kaynaklı olarak web sitelerinde bu kavramlara özel alanlar oluşturulmalı ve bu alanlardan taşmamalıdır.

Dinamik Olarak Eklenen Öğeler

Web sitesine başka bir sosyal medya postu veya Youtube içeriği embed edildiğinde bu içeriklerinde boyutlandırması yapılmalıdır.

Reklamlar

Reklamların belirlediğiniz bölgeden taşmaması için statik olarak belirlenmesi ile birlikte aksi bir durumun yaşanması engellenmiş olur.

Boyutları Girilmemiş Görseller

Width ve Height değerleri girilmemiş görseller CLS puanınızı olumsuz şekilde etkilemesinden, web sitenizde bulunan görsellerin belirli bir boyuta sahip olması gereklidir. Eğer görseller responsive özelliğine sahip olarak farklı boyutlama da eklenmiş ise bütün görsellerin width – height oranı aynı olmalıdır.

Düzen kayma sorunlarını çözmek için kullanabileceğiniz yöntemler:

  • Diğer içeriklerin bulunduğu alanın üstüne pop-uplar ve reklamlar eklemekten kaçınmanız gereklidir. Bir web sayfasındaki içeriğin üstüne içerik eklemek görüntülemeyi ve okunabilirliği olumsuz etkileyecektir.
  • Görüntülere genişlik ve yükseklik değerleri belirleyin.
  • Özel bir yazı tipi kullanıyorsanız, tarayıcının yazı tipini “önyükleme” tercihleri arasına almalısınız.
Diperweb olarak bu yazımızda uzun ve çözüm dolu bir konuyu ele alarak siz değerli internet kullanıcılarına sunmayı hedefledik.
İlgili Yazılar
Leave a Reply

Your email address will not be published.Required fields are marked *

Sohbet Başlat!
Tamamen dijitale geçtiniz mi?
Merhaba
İşletmenizi veya markanızı hemen dijitalleştirelim!