Google Önemli Web Verileri Hataları [Çözüm]

Core Web Vitals Nedir (Önemli Web Verileri): Arama motoru Google’ın internet sitelerinin sunduğu kullanıcı deneyimini gerçek zamanlı kullanım verileri aracılığıyla hız, etkileşim ve stabillik açısından ölçtüğü verilerdir. Bu veriler hem daha iyi bir kullanıcı deneyimi sunmak ve hem de Google’da daha iyi sıralamalar elde edebilmek açısından iyileştirilmelidir.

Bu yazıda sırasıyla ilk zengin içerikli boya (LCP), ilk giriş gecikmesi (FID) ve kümülatif düzen kayması (CLS) sorunları ele alınmış ve önemli web verileri hakkında genel bir bilgilendirme yapılmıştır. İsterseniz sırasıyla tüm yazıyı okuyabilir isterseniz de ekranı kaydırmakla vakit kaybetmeden sadece tek bir tık ile istediğiniz bölüme ulaşabilirsiniz:
1- LCP Sorunu ve Çözümü: “Tıklayın“
2- FID Sorunu ve Çözümü: “Tıklayın“
3- CLS Sorunu ve Çözümü: “Tıklayın“
4- Önemli Web Verileri: “Tıklayın“

Önemli Web Verileri Nelerdir?

1.1 – İlk Zengin İçerikli Boya Nedir? (LCP)

İlk Zengin İçerikli Boya (Largest Contentful Paint) Nedir: İnternet sayfalarının kullanıcıların cihazlarında yüklenirken, cihazın ilk baştaki görüş alanında görünen en büyük görsel veya metin bloğunun oluşma süresine verilen isimdir. LCP ölçümünde resim, video ve metin elemanları baz alınmaktadır. Bu metrik sitenin yüklenme hızı ile alakalıdır.
(Ayrıca Bakınız: Google Pagespeed İle Site Hızlandırma Rehberi)

Arama motoru Google LCP ölçümünde şu kritik değerleri baz almaktadır:
Başarılı Düzey: 2.5 Saniyeden Kısa (İdeal Olarak Değerlendirilen Düzey)
Geliştirilmeli: 2.5 Ve 4 Saniye Arası (LCP Sorunu: 2.5 Sn. Değerinden Uzun)
Kötü Düzey: 4 Saniyeden Uzun (LCP Sorunu: 4 Sn. Değerinden Uzun)

1.2 – LCP Sorununun Sebepleri Nelerdir?

İlk zengin içerikli boya süresinin uzun olmasının olası sebepleri şunlardır:
• Olması gerekenden uzun sunucu yanıt süreleri
• Oluşturmayı engelleyen JS vs CSS dosyaları
• Yavaş dosya ve kaynak yükleme süreleri
• Kullanıcı kaynaklı oluşturma sorunları

1.3 – İlk Zengin İçerikli Boya (LCP) Sorunu Nasıl Çözülür?

1.3.1 – Olması Gerekenden Uzun Sunucu Yanıt Süreleri

Sunucu yanıt süresi, sunucunun gönderilen istekleri yanıtlama süresine verilen isimdir. İdeal sunucu yanıt süresi 0.2 saniyeden kısadır. Eğer sunucunuzun isteklere yanıt verme süresi uzunsa, bu durum LCP süresini doğrudan uzatmaktadır. Normalden uzun sunucu yanıt süresini kısaltmanın yöntemleri şunlardır:

➽ Sunucuyu optimize etmek veya daha kaliteli bir sunucu kullanmak
➽ Kullanıcılara yakın konumlarda içerik dağıtım ağı (CDN) kullanmak
➽ Sunucu önbelleği ve tarayıcı önbelleği kullanmak
➽ Önceden oluşturulmuş HTML sayfalarını önbellek ile sunmak (service worker)
➽ Üçüncü taraf kaynaklara erkenden bağlanmak (preconnect ve prefetch)
➽ Temiz kodlanmış ve optimize edilmiş temalar kullanmak

1.3.2 – Oluşturmayı Engelleyen JS ve CSS Dosyaları

Oluşturmayı engelleyen kaynaklar, internet sayfalarının hızlı bir şekilde yüklenmesine ve oluşturulmasına doğrudan engel olan dosyalara verilen isimdir. Eğer sitenizde oluşturmayı engelleyen JavaScript ve CSS dosyaları varsa, bu durum da LCP süresini doğrudan uzatmaktadır. Oluşturmayı engelleyen kaynakları ortadan kaldırmanın yöntemleri şunlardır:

✅ CSS boyutu küçültmeli, sayfanın yüklenmesi için kritik olmayan CSS ertelenmeli ve kritik CSS oluşturulup aşağıdaki görseldeki gibi satır içi (inline) olarak eklenmelidir:
(Ayrıca Bakınız: Programların Kod Boyutu Nasıl Küçültülür?)

✅ Javascript engelleme süresi kısaltılmalıdır. Bunun için Javascript boyutu küçültülmeli, oluşturmayı engelleyen Javascript ertelenmeli ve kullanılmayan çoklu dolguların (polyfill) sayısı da olabildiğince azaltılmalıdır.

1.3.3 – Yavaş Dosya ve Kaynak Yüklemeleri

✅ Sayfaların ilk açılış ekranında logonun haricinde bir görüntü olmaması; tercihen ekranda sadece yazı olması, en azından büyük çoğunluğunun yazı olması ve eğer reklam varsa HTML <div> etiketleri içerisinde olması açılış ekranındaki yavaş dosya ve kaynak yüklemelerinin önüne geçecektir.

✅ HTML, CSS ve JS gibi dosyaların boyutlarını küçülten GZIP ve Brotli gibi metin sıkıştırma özellikleri aktifleştirilmelidir. GZIP daha çok tarayıcı tarafından desteklense de Brotli daha iyi bir sıkıştırma yapmaktadır.

✅ Görsel ve videoların dosya boyutları küçültülmeli, görseller yeni nesil uzantılar (JPEG 2000, Webp vb.) ile sunulmalı, duyarlı görseller kullanılmalı ve gerekirse görseller ayrı bir küresel içerik dağıtım ağı (CDN) ile sunulmalıdır.
(Ayrıca Bakınız: Görsel SEO Nasıl Yapılır? [Resim İçin SEO])

✅ Gerekli üçüncü taraf kaynaklara preconnect ve dns-prefetch kullanımı ile önceden bağlanın. Font ve CDN servisleri erkenden bağlanılacak kaynaklara örnek olarak verilebilir. Bu komutlara ait örnek kullanımlar şu şekildedir:

<head>
  …
  <link rel="preconnect" href="https://örneksite1.com">
  <link rel="dns-prefetch" href="https://örneksite2.com">
</head>

✅ Sitenin oluşturulması için önemli olan kaynaklar “rel=preload” HTML etiketi ile öncelikli olarak yüklenmelidir. Örneğin öne çıkarılan görseli bu etiketle yüklemek, açılış performansını arttırabilir. Bu etiketin farklı dosya biçimleri ile kullanım örnekleri ve açılış süresine etkisi aşağıdaki gibidir:

<link rel="preload" as="script" href="script.js">
<link rel="preload" as="style" href="style.css">
<link rel="preload" as="image" href="logo.png">
<link rel="preload" as="video" href="vid.webm" type="video/webm">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

✅ Ağ bağlantısına göre farklı kaynaklar sunulmalıdır. Örneğin bu yöntem sayesinde yavaş bağlantılar için ek yazı tiplerini etkisizleştirmek gibi işlemler yapabilirsiniz. Bunun uygulanışına ilişkin bir örnek şu şekildedir:

if (navigator.connection && navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Hızlı İnternet Bağlantısında Videoları ve Resimleri Yükle
  } else {
    // Yavaş İnternet Bağlantısında Sadece Resimleri Yükle
  }
}
// Detaylı Bilgi İçin: Network Information, Device Memory ve HardwareConcurrency API'lerine Bakabilirsiniz.

1.3.4 – Kullanıcı Kaynaklı Oluşturma Sorunları

Sunucu tabanlı oluşturma (içeriğin kullanıcıdan önce sunucuda oluşturulması) ve ön oluşturma (sayfaların statik HTML dosyalarının önceden oluşturulması) da LCP süresinin önemli ölçüde kısaltılmasını sağlar.

Service worker’ler tekrarlanan isteklerde tarayıcıya sunulabilen herhangi bir statik kaynağı önbelleğe almak için de kullanılabilirler. İşte service worker kullanılan bir önbellekleme hem sunucu yanıt süresini hem de site açılış süresini önemli ölçüde kısaltacaktır.

2.1 – İlk Giriş Gecikmesi Nedir? (FID)

İlk Giriş Gecikmesi (First Input Delay) Nedir: İnternet sayfalarının etkileşime geçebilir hale gelmesi için geçen süredir. Başka bir ifadeyle kullanıcıların sayfayla etkileşimde bulunduğunda tarayıcının bu komutları işlemeye başlayabileceği süreyi ölçer. Bu metrik sitenin interaktiflik değerini ifade eder. Bu metrik hız değil, kullanıcı deneyimi ile alakalı bir faktördür.
(Ayrıca Bakınız: Kullanıcı Deneyimi (UX) Nedir? Nasıl Geliştirilir?)

Arama motoru Google FID ölçümünde şu kritik değerleri baz almaktadır:
Başarılı Düzey: 100 Ms’den Kısa (İdeal Olarak Nitelendirilen Düzey)
Geliştirilmeli: 100 ve 300 Ms. Arası (FID Sorunu: 100 Ms Değerinden Uzun)
Kötü Düzey: 300 Ms’den Uzun (FID Sorunu: 300 Ms Değerinden Uzun)

Örneğin günlük hayatta yolda araba sürerken aniden yola bir kedi fırladığında kediyi algılayıp firen pedalına basma arasında geçen süre etkileşim süresidir. İşte bu sürenin internet sitelerine uyarlanmış haline de ilk giriş gecikmesi (FID) denmektedir. İnternet sitelerindeki etkileşim unsurları ise bir bağlantıya tıklama, bir düğmeye dokunma vb. şeylerdir.

2.2 – FID Sorununun Sebepleri Nelerdir?

İlk giriş gecikmesi süresinin uzun olmasının yaygın sebepleri şunlardır:
• Uzun süreli Javascript işlemleri yapılması
• Aralıksız olarak Javascript işlemleri yapılması
• Ağır Javascript işlemleri yapılması
• Gecikmeli veri yönetimi yapılmaması

2.3 – İlk Giriş Gecikmesi (FID) Sorunu Nasıl Çözülür?

✅ Uzun ve aralıksız olarak çalışan Javascript kodları parçalara bölünmeli ve küçültülerek senkronize (async) olarak çalıştırılmalıdır. Bu sayede aynı işin daha hızlı ve gecikmeye sebep olmayacak bir şekilde gerçekleştirilmiş olur. Bunun yapılış şekli ve etkileşime etkisi hakkında güzel bir örnek şu şekildedir:

import('modül1.js')	
  .then((modül1) => {	
    // Modül 1'in çalışması bittikten sonra burada diğer JS dosyaları çağırılır.	
  });	

✅ 3. taraf Javascript (Google Analytics, Yandex Metrica, Google Adsense, Facebook Pixel vb.) dosyalarının çalışması ertelenmelidir (defer).
(örneğin, ekranın alt kısmındaki reklamları, görüntü alanına daha yakın bir yere kaydırılıncaya kadar yüklemeyin).
(Ayrıca Bakınız: Üçüncü Taraf Kod Nedir? Etkisi Nasıl Azalır?)

✅ HTML’de satır içerisinde çok fazla özellik belirtilmemelidir. Satır içerisinde çok fazla özellik belirtilmesi hem yüklenme süresini hem de tepki süresini uzatır. Ayrıca kullanıcının cihazında ne kadar verinin gecikmeli olarak işleneceği belirlenmelidir.

✅ Tarayıcının etkileşime hazır hale gelmesi için önemli olan istekler HTML’in “preload”, “prefetch” ve “preconnect” özellikleri kullanılarak en başta çağırılmalıdır. Bu sayede basamaklı olarak veri getirmeye olan bağımlılık en aza indirmeye çalışılmalıdır.

✅ JavaScript kodlarının ve özelliklerinin aşamalı olarak yüklenmesi sayfanın etkileşime hazır hale gelmesine yardımcı olabilir.
✅ Sayfalarda (özellikle ilk görünen kısımlarında) olabildiğince statik ve JavaScript kullanılmayan bileşenler kullanılmaya çalışılmalıdır.

✅ JavaScript yürütme süresi kısaltılmalıdır. Bunun yöntemleri şunlardır:
• Kullanılmayan JavaScript’i ertelemek ve mümkünse kaldırmak.
• Kullanılmayan çoklu dolguların (polyfill) sayısını en aza indirmek.
• Kritik olmayan JavaScript’i async veya defer ile ertelemek.
• JavaScript dosyalarının kod boyutunu küçültmek.
(Ayrıca Bakınız: Programların Kod Boyutu Nasıl Küçültülür?)

✅ JavaScript komutlarının uzun sürmesinden kaynaklanan sorunları çözmeye yarayan web worker’ler kullanabilirsiniz. Web worker’ler arka planda çalışarak komutların performansa olumsuz etkisini azaltırlar.

3.1 – Kümülatif Düzen Kayması Nedir? (CLS)

Kümülatif Düzen Kayması (Cumulative Layout Shift) Nedir: Sayfada görünür olan bileşenlerde çeşitli sebeplerle meydana gelen beklenmeyen düzen kaymalarının toplamıdır. Bu metrik sayfanın görsel stabilasyon değerini ifade eder. Bu metrik hız değil, kullanıcı deneyimi ile alakalı bir faktördür.
(Ayrıca Bakınız: Kullanıcı Deneyimi (UX) Nedir? Nasıl Geliştirilir?)

Arama motoru Google CLS ölçümünde şu kritik değerleri baz almaktadır:
Başarılı Düzey: 0.1’den Az (İdeal Olarak Nitelendirilen Düzey)
Geliştirilmeli: 0.1 ve 0.25 Arası (CLS Sorunu: 0.1 Eşiğinden Fazla)
Kötü Düzey: 0.25’ten Fazla (CLS Sorunu: 0.25 Eşiğinden Fazla)

3.2 – CLS Sorununun Sebepleri Nelerdir?

Kümülatif düzen kayması değerinin yüksek olmasının yaygın sebepleri şunlardır:
• Boyutları olmayan görüntüler
• Boyutları olmayan reklamlar, yerleştirmeler ve iç çerçeveler
• Dinamik olarak enjekte edilen içerik
• FOIT / FOUT’a neden olan web yazı tipleri
• DOM’u güncellemeden önce bir ağ yanıtı bekleyen işlemler

3.3 – Kümülatif Düzen Kayması (CLS) Sorunu Nasıl Çözülür?

3.3.1 – Boyutları Olmayan Görseller

✅ HTML içerisinde boyut özellikleri belirtilmemiş olan görsellerin ve videoların “width (uzunluk)” ve özellikle “height (yükseklik)” etiketleriyle boyut özellikleri belirtilmelidir. Wordpress gibi içerik yönetim sistemlerini kullananlar; resimleri ve videoları ortam kütüphanesinden yüklediği taktirde onlara otomatik olarak uzunluk ve yükseklik etiketler eklenmektedir. Bu konuda hatalı ve doğru kullanım örnekleri şu şekildedir:

<!-- CLS'ye Sebep Olan Kullanım: -->
<img src="önemli_web_verileri.jpg" alt="Google Önemli Web Verileri">
<!-- CLS'ye Sebep Olmayan Kullanım: -->
<img src="önemli_web_verileri.jpg" width="640" height="360" alt="Google Önemli Web Verileri">

Örnek: Yukarıdaki görseldeki örnekte logo yüklendikten sonra sayfanın üst bölümünde bir genişlemeye, bu genişleme de tüm sayfa nezdinde bir kaymaya sebep olmaktadır. Bunu önlemek için de CSS kodları ile üst bölümün (header) yüksekliğinin otomatik değil, sabit olmasını sağladık.

✅ Resimlerin sitenin açılış performansına olumsuz etkisini azaltmak için tembel yükleme (lazy load) özelliği kullanılıyorsa, resimler, videolar vb. için yer tutucular kullanılmalıdır. Aksi taktirde resimler tıpkı aşağıdaki görseldeki gibi düzen kaymaları yapacaktır:

3.3.2 – Reklamlar, Yerleştirmeler ve İç Çerçeveler

HTML içerisinde boyut özellikleri (yükseklik ve genişlik özellikleri) belirtilmemiş olan reklamlar, yerleştirmeler ve iç çerçeveler gibi bileşenler de istenmeyen kaymalara yani CLS sorununa sebep olabilirler. Özellikle açılış ekranında bulunan reklam gibi bileşenlerin yüklenmesi daha uzun zaman aldığı için, yüklendiklerinde tıpkı şu görseldeki gibi ani bir kaymaya sebep olabilirler:

İşte bu sebeple reklamlara, yerleştirmelere ve iç çerçevelere de boyut özellikleri eklenmelidir. Eğer reklamlara doğrudan boyut özelliği ekleyemiyorsanız veya düşük performans gösterdiği için sabit boyutlu reklamlar kullanmak istemiyorsanız, reklam kodlarını aşağıdaki örnekteki gibi minimum yüksekliği belirtilmiş <div> etiketi içerisine alarak kaymaları önemli ölçüde azaltabilirsiniz.
(Ayrıca Bakınız: Adsense Reklam Yerleşimi Nasıl Yapılır?)

<!-- Yüksek CLS'ye Sebep Olan Kullanım: -->
[Reklam Kodu]
<!-- Düşük CLS'ye Sebep Olmayan Kullanım: -->
<div style="min-height:200px"> [Reklam Kodu] </div>
<img src="önemli_web_verileri.jpg" width="640" height="360" alt="Google Önemli Web Verileri">
<!-- CLS'ye Sebep Olmayan Kullanım: -->
<div style="height:250px"> [250px Yüksekliğindeki Sabit Reklam Kodu] </div>

3.3.3 – Dinamik Olarak Enjekte Edilen İçerik

Sitenin yüklenmesi tamamlandıktan sonraki süre zarfında mevcut içeriğe dinamik olarak eklenen içerikler de düzen kaymasına sebep olmaktadır. Ayrıca dinamik olarak eklenen içeriklerin çok iyi bir kullanıcı deneyimi sunduğu da söylenemez.

Örnek: Reklamlar, çerez bildirim çubuğu, benzer içerikler kutusu, mesaj kutuları, abonelik ve teklif kutuları dinamik olarak enjekte edilen içeriğe örnek olarak verilebilir. Örneğin aşağıdaki görseldeki reklam standart reklamların aksine içeriğe dinamik olarak eklenmektedir:

Örneğin yukarıdaki görsel mobil cihazlarda ekran kaydırılmaya başlanınca dinamik olarak eklenen bir reklamı ve bu reklamın site tasarımında sebep olduğu kayma miktarını göstermektedir. Reklam enjekte edilince en üstten 124px kaymaya yani ciddi bir CLS sorununa sebep olmaktadır.

3.3.4 – FOIT / FOUT’a Neden Olan Web Yazı Tipleri

Kullanıcıların internet sitesinin kullandığı özel yazı tipini indirene kadar cihazlarındaki varsayılan yazı tipinin gösterilmesi (FOUT) veya hiçbir yazı tipinin gösterilmemesi (FOIT) fakat özel yazı tipi yüklendikten sonra aniden özel yazı tipine geçiş yapılması sonucunda da CSS ayar farklılıklarından dolayı düzen kaymaları oluşabilmektedir. Bu durumları şu görsel güzel bir şekilde özetlemektedir:

Peki fontlardan kaynaklanan CLS sorunu nasıl çözülür? Aslında çözüm çok basittir. Yazı tiplerinin HTML’in <link rel=preload> özelliği ve CSS’in “font-display: optional” parametresi ile birlikte yüklenmesini sağlamaktır. Ayrıca fazla sayıda yazı tipi (font) kullanımından kaçılmalı, yazı tipleri ve özellikleri olabildiğince sınırlandırılmalıdır.

3.3.5 – DOM’u Güncellemeden Önce Bir Ağ Yanıtı Bekleyen İşlemler

✅ Masaüstü cihazlardaki ve tabletlerdeki yapışkan üst menü (sticky header) ve yapışkan kenar çubuğu (sticky sidebar) gibi ekran kaydırmaya bağlı olarak dinamik bir şekilde değişim gösteren unsurlar da CLS sorununa sebep olabilmektedir.

Eğer bu tarz yapışkan bileşenler bir JavaScript ile kontrol edilerek CSS özellikleri arasında “position:static” ile “position:fixed” gibi dinamik olarak özellik değişimi yapılıyorsa bu değişim de CLS’ye sebep olmaktadır.

Yapışkan bileşenlerden kaynaklanan CLS sorununu çözmenin iki farklı yöntemi bulunmaktadır:
➽ Yapışkan bileşenleri kapatmak, devre dışı bırakmak.
➽ Yapışkan bileşenleri “position:sticky” CSS özelliği ile yapmak.

✅ Animasyonlar da bazı durumlarda istenmeyen bir takım düzen kaymalarına sebep olabilir. Örneğin CSS “transition” özelliğini kullanan animasyonların genellikle CLS sorununa sebep olduğu görülür. Bu sebeple, olası düzen kaymalarını en aza indirmek amacıyla animasyonların olabildiğince CSS “transform” özelliği ile yapılması veya bu tarz animasyonların kullanılmaması önerilmektedir. Örneğin:

Örneğin yukarıdaki görselin 2. ve 3. kısımlarında internet sitemizin güncel içeriklerinin gösterildiği bölüm için kullanabileceğimiz iki farklı animasyon gösterilmiştir. Burada ilk animasyon düzen kaymasına sebep olmazken, ikinci animasyonda dinamik içerik eklemesi yapıldığı için (her ne kadar gözle görünmese de) yatay olarak düzen kaymasına sebep olmaktadır.

Önemli Web Verileri Optimizasyonu

İlgili düzenlemeleri ve iyileştirmeleri yaptıktan sonra Google arama konsolundan ilgili sorunlarla ilgili doğrulama talebinde bulunabilirsiniz. Fakat bu doğrulama talebinden sonra genellikle 28 gün beklemeniz gerekir. Çünkü arama konsolundaki veriler 28 günlük ortalama verilerdir ve eğer sorunları doğru bir şekilde çözmüşseniz aşağıdaki örnekteki gibi verilere tamamen yansıması 28 gün sürecektir:

Bunlara ek olarak sitenizin genel olarak veya sitenizdeki her bir sayfaya ait önemli web verileri durumunu Google Pagespeed aracındaki alan verileri ile kontrol edebilirsiniz. Ayrıca bu aracı kullanarak sitenizdeki hız, kullanıcı deneyimi ve diğer teknik konulardaki sorunları çözmek için şu yazımıza da göz atabilirsiniz:
(Ayrıca Bakınız: Google Pagespeed İle Site Hızlandırma Rehberi)