Search Console: LCP, FCP, FID, CLS Sorunları (Önemli Web Verileri Optimizasyonu)

Google’in Önemli Web Verileri raporunu duyurmasının üzerinden birkaç ay geçti. Google Search Console, Önemli Web Verileri ilk duyurulduğunda bu bölümde oluşan sorunları nasıl düzelteceğimize dair çok fazla bilgi yoktu ancak aradan aylar geçti ve şimdi bu bölümleri nasıl optimize etmemiz gerektiğini biliyoruz.

Google Search Console’daki yeni hız raporu gösterge tablosu, URL’leri derecelendirmek için FCP ve FID ölçümlerini de kullanır. Hala deneysel bir özellik olarak lanse edilse de SEO için önemli bir yeri olduğu bilinen bir gerçektir. Bu yazıda, sitenizin sayfa içeriklerinin yüklenmesi için gereken süreyi nasıl azaltacağınıza odaklanacağız, böylece First Contentful Paint ve First Contentful Paint’e kadar geçen süreyi kısaltabilir ve Google PageSpeed’inizi iyileştirebilirsiniz.

Hazırsanız hadi başlayalım!

Önemli Web Verileri Raporu

Hepimiz web site sayfa hızının hem SEO hem de kullanıcı deneyimi açısından önemli bir faktör olduğunu biliyoruz ve web sitelerimizi daha hızlı hale getirmek ve sonuç olarak ziyaretçilerimize daha iyi bir deneyim sunmak ve sitemizi optimize etmek için çeşitli araçlar kullanıyoruz. 

Google Search Console’in “Geliştirmeler” sekmesinin altında bulunan önemli web verileri raporu, web masterlara sitelerinin mobil ve masaüstü sürümlerinde sayfalarının yavaş, orta ve hızlı URL’lerinin genel bakışını göstermektedir. 

Mobil veya masaüstü türü raporuna girdiğinizde, kapsam raporu gibi, bazı URL’lerinizin sahip olduğu sorunları göstermektedir.

Yukarıdaki raporda mobil sürüm için CLS ve LCP olarak 2 sorun görünüyor. Bu hatalar Google Pagespeed analizlerinde karşımıza çıkan Largest Contentful Paint (LCP), First Input Delay (FID), First Contentful Paint (FCP), Cumulative Layout Shift (CLS) olarak raporlanan değerlerin kötü skorları sebebiyle karşımıza çıkıyor. Makalemizin devamında bu skorları iyileştirerek sitemizin SEO’sunu nasıl geliştirebileceğimizi inceleyeceğiz.

Önemli web verilerini anlamaya başladığımıza göre artık bu bölümde çıkan sorunları nasıl düzelteceğimizi ve doğrulama işlemi yapabileceğimize geçebiliriz.

Kümülatif Düzen Kayması (Cumulative Layout Shift) CLS Sorunu

Google Search Console ile raporlarınızı düzenli olarak kontrol ediyorsanız, Mayıs 2020 tarihinden itibaren “Geliştirmeler” menüsü altındaki Önemli Web Verileri bölümünde aşağıdaki sorunları siz de görmüş olmalısınız.

• CLS sorunu: 0,1 (mobil) eşiğinden fazla
• CLS sorunu: 0,1 (masaüstü) eşiğinden fazla
• CLS sorunu: 0,25 (masaüstü) eşiğinden fazla

Kümülatif Düzen Kayması (CLS), bir kullanıcı deneyimi olayını ölçen bir Google metriğidir. 2020 yılı itibariyle CLS bir sıralama faktörü olarak görülüyor. CLS sorununu optimize edebilmek için önce CLS’nin ne anlama geldiğini bilmek gerekir.

CLS, sayfa yüklenirken web sayfası öğelerinin beklenmedik şekilde titremesi, kayması veya değişmesidir. Kaymaya neden olan öğe türleri yazı tipleri, resimler, videolar, formlar, butonlar ve diğer içerik türleridir. CLS süresini en aza indirme kullanıcı deneyimi açısından önemlidir. Çünkü kimse kötü bir kullanıcı deneyimi sunan sitede vakit geçirmek istemeyecektir.

CLS Hatalarını Tespit Etme:

Web sitenizdeki CLS sorununa neden olan bölümleri tespit etmek için Google Pagespeed Insights aracını kullanabilirsiniz.

İlgili siteyi veya sayfayı analiz ettikten sonra “Büyük düzen kaymalarından kaçının” bölümüne gelin ve buradaki CLS skorunu arttıran alanları optimize edin.

CLS Sorunu Neden Olur?

Google’a göre, kümülatif düzen kaymasının (CLS) birkaç temel nedeni vardır;

1. Width ve height etiketleri ile boyutlandırılmamış görseller.
2. Boyutları belirlenmeyen reklamlar, iç yerleştirmeler ve tablolar.
3. Dinamik olarak eklenen içerikler.
4. Web tabanlı yazı tipleri sorunu (FOIT / FOUT)

Doğru boyutlara sahip olmayan görseller:

Görsellerin ve videoların, yükseklik ve genişlik boyutlarına sahip olması gerekir. Responsive görüntülerle ilgili olarak, farklı görünüm alanları için farklı görüntü boyutlarının aynı en boy oranını kullandığından emin olun.

Örneğin: 300×200 olarak ayarlanan alan için, 300×200 boyutlarında bir görsel eklemeli ve yükseklik-genişlik etiketlerini bu boyutlarda belirtmelisiniz. Görsel alanı hali hazırda 300×200 olduğundan ve görselinizde responsive etiketi bulunduğunda, fotoğraf boyutları alana göre otomatik ölçeklenecek diye düşünmemeli, yine görselinizi 300×200 olarak kırparak witdh ve heigh etiketlerini eklemelisiniz.

---

Boyutları belirlenmeyen reklamlar:

Web sitenizdeki doğru boyutlandırılmamış reklamlarda CLS sorunu yaratabilir. Reklam alanı için de yukarıdaki aynı etiketleme geçerlidir. Reklam alanında div stilini belirli yüksekliklere ve genişliğe sahip olacak şekilde biçimlendirdiğinizde, reklam bu alanla sınırlı olacaktır. Daha sonra reklam bannerlarınızı reklam alanı boyutlarında tasarlayın ve görselinize witdh ve height etiketleri etiketleyin.

---

Dinamik olarak eklenen içerikler:

Web sitenize dış bir kaynaktan import edilen içeriklerdir. Örneğin embed kodu ile eklenmiş bir YouTube videosu ya da tweetlerinizin bulunduğu bir Twitter tweet akışı, kümülatif düzen kayması (CLS) sorununa neden olabilir.

---

Web tabanlı yazı tipleri sorunu:

Font-face özelliğini kullanarak çağırılan özel fontların yüklenene kadar yedek bir font ile görüntülenmesi (FOIT) ve (FOUT) olarak bilinen bu sorun CLS süresinin artımasına neden olabilir. Bunu önlemenin bir yolu, o web yazı tipini indirmek için bağlantıda rel= “preload” kullanmaktır. Örnek kullanımı aşağıdaki gibidir;

<link rel=”preload” href=”fonts/kukumavnet-webfont.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>

En Büyük Zengin İçerikli Boya (Largest Contentful Paint) LCP Sorunu

En büyük içerikli boya, yeni bir Google kullanıcı deneyimi metriğidir ve SEO açısından sıralama faktörüdür. LCP, bir sayfanın ana içeriğinin indirilmesi ve etkileşime girmeye hazır olmasının ne kadar sürdüğünün bir ölçüsüdür. Ölçülen, kullanıcı görüş alanı içindeki en büyük görüntü veya bağlam bloğudur. Fotoğraflar, videolar, arka plan görselleri ve paragraf etiketleri gibi blok düzeyinde metin öğeleridir. Görünür ekranın ötesine geçen hiçbir öge sayılmaz.

LCP Sorunu Neden Olur?

Google’a göre LCP süresinin yüksek çıkmasının bir kaç nedeni şunlardır.

• Yavaş sunucu yanıt süreleri
• Oluşturmayı engelleyen JavaScript ve CSS
• Yavaş kaynak yükleme süreleri
• İstemci tarafı oluşturma

Yavaş sunucu (paylaşımlı veya paylaşımsız), bilgisayarda DDOS hackleme ve ilgili bir sorun olabilir. Büyük bir saldırı yaşayıp yaşamadığınızı öğrenmek için hosting firmanızla iletişime geçebilirsiniz. Diğer sorunlar, özel bir sunucunun veya VPS’nin yanlış yapılandırılması olabilir. Tipik bir sorun, PHP’ye ayrılan bellek miktarı olabilir. Ayrıca eski bir PHP sürümü veya CMS yazılımı gibi güncel olmayan yazılımlar olabilir.

---

Paylaşımlı hostingler web sitenizin yavaş çalışmasına sebep olabilir çünkü bu tür sunucular sitenizi yavaşlatan birden çok kullanıcının bulunduğu başka kullanıcılarla paylaşılan bir sunucudur. Bu durumda daha iyi bir hosting firmasına geçmek ya da paylaşımsız dedicated ip kullanmak iyi bir seçenek olacaktır.

---

Search Console’da karşılaştığınız LCP sorunu: 2,5 sn. değerinden uzun (mobil) sorununu optimize etmenin en etkili yollarından biri de site kaynaklarıdır. Tipik olarak, önbelleğe alma, görselleri optimize etme, oluşturmayı engelleyen CSS ve JavaScript gibi düzeltmeleri uygulamak ve belirli ögeleri önceden yüklemek yardımcı olabilir. Eğer WordPress kullanıyorsanız aşağıdaki eklenti ile bu kaynakları kolayca optimize edebilirsiniz.

WordPress LiteSpeed Cache Ayarları (En İyi Performans)

WP Rocket Ayarları ve Kurulumu (2021 Kapsamlı Rehber)

Eğer WordPress dışında farklı bir CMS kullanıyorsanız, kaynaklarınızı optimize etmek için .htaccess’i kullanabilirsiniz. Nasıl yapılacağını öğrenmek için aşağıdaki makaleyi incelemenizi öneririz.

.Htaccess ile Tarayıcı Önbellekleme

Ayrıca görünür ekranın dışında kalan görselleri ertelemek için lazy load kullanabilirsiniz. Nasıl yapılacağını bilmiyorsanız aşağıdaki makaleyi inceleyebilirsiniz.

Lazy Load Nedir? Nasıl Kullanılır?

Kaynaklarınızı sıkıştırmak, dosya boyutlarını en aza indirecek, yükleme sürelerini ve dolayısıyla LCP’yi iyileştirecektir.

İlk Zengin İçerikli Boya (First Contentful Paint) FCP Sorunu

First Contentful Paint (FCP), algılanan sayfa yükleme hızını ölçmek için kullanıcı merkezli bir metriktir. FCP, bir hız testi aracının ölçtüğünden çok, kullanıcıların bir web sitesinin performansını nasıl algıladıklarını ölçer.

İlk zengin içerikli boyama, tarayıcıda herhangi bir tür oluşturmanın algılandığı sayfa yükleme zaman çizelgesinde bir nokta olan First Paint’ten farklıdır. Öte yandan, FCP bazı içeriğin işlenmesini gerektirir. Bu içerikler; metinler, fotoğraflar, arka plan görselleri, logolar dahil olabilir.

FCP Sorunu Neden Olur?

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

FCP sürelerinizi düşürmek için iyi bir web barındırma hizmeti kullanmalısınız. Yavaş yanıt veren sunuculardan kurtulmayı düşünebilirsiniz. İdeal olarak, kullanıcılarınızın yakınında bulunan sunuculara sahip bir lokasyondaki sunucuyu seçin.

---

Kaliteli bir CDN, sitenizin resimler, videolar ve komut dosyaları gibi statik kaynaklarını sunmanın hızlandırılmasına yardımcı olabilir. Bu, sunucunuz ve kullanıcılarınız arasındaki ağ gecikmesini önemli ölçüde azaltacaktır. 

---

Önbelleğe alma, sunucu işlem süresini azaltmaya yardımcı olur. En iyi yönetilen WordPress barındırma sağlayıcılarının çoğu, sunucu düzeyinde önbelleğe alma özelliğine sahiptir. Htaccess ve Litespeed önbellekleme işlemleri için aşağıdaki makaleleri inceyebilirsiniz.

WordPress LiteSpeed Cache Ayarları (En İyi Performans)

WP Rocket Ayarları ve Kurulumu (2021 Kapsamlı Rehber)

.Htaccess ile Tarayıcı Önbellekleme

---

Bir web sitesi, HTML, CSS ve JS komut dosyaları gibi birçok öğeyi bir araya getirdikten sonra tarayıcı tarafından oluşturulur. Bu kaynakları sıkıştırarak ve kullanılmayan kaynakları silerek veya farklı sayfada kullanılan kaynakları o sayfaya özel bir dosya ile çağırarak “oluşturmayı engelleyen kaynakları ortadan kaldırın” uyarısından kurtulabilirsiniz. Böyle FCP sürelerine olumlu yönde etki yapar.

Lazy load kullanmak sayfalarınızın alt bölümünde kalan medya içeriklerini ertelemek için harikadır. Ancak lazy load, tarayıcının herhangi bir görüntüyü işleyebilmesi için JS kullanılmasını gerektirdiğinden, FCP sürenizi biraz arttırabilir. Bu sebeple ekranın görünür kısımlarında, üst bölümlerde lazy load kullanmaktan kaçının.

Yazı tipleri genellikle büyük dosyalardır ve yüklenmesi çok zaman alır. Lighthouse’da buna benzer bir hatayla karşılaşmış olabilirsiniz:

Bazı tarayıcılar, tüm yazı tipleri yüklenene kadar metin oluşturmaz. Bu, FOIT olarak bilinen duruma neden olur. Özel yazı tipleri yüklenirken tarayıcıyı geçici olarak bir sistem yazı tipini göstermeye zorlayarak bunu düzeltebilirsiniz. 

İşte bunu nasıl uygulayabileceğinize dair bir örnek:

Yazı tiplerini doğrudan içe aktarıyorsanız, örneğin Google fonts için, URL’nin sonuna &display=swap parametresini ekleyerek yukarıdaki işlemin aynısını sağlayabilirsiniz.

---

Harici bir web sitesinden herhangi bir varlık yüklüyorsanız, dns-prefetch parametresini eklemek, tarayıcıya URL’nin DNS’sini olabildiğince çabuk çözmesini söyleyecektir. Kaynaklara DNS ön yüklemesini şu şekilde eklersiniz:

Üçüncü taraflardan çok sayıda kod kullanıyorsanız, dns-prefetch parametresini eklemek, sayfa yüklemesini hızlandırmak için çok yararlıdır.

İlk Giriş Gecikmesi (First Input Delay) FID Sorunu

Bir web sitesinin performansını ölçmek için kullanabileceğimiz birçok ölçüm vardır. FID, bir kullanıcının sitenin bir bölümüyle etkileşim kurmaya çalışabileceği zaman ile arayüzün bu etkileşime yanıt verebildiği zaman arasındaki gecikmeyi izleyen bir ölçüdür.

FID Sorunu Neden Olur?

FID süresinin yüksek olma durumu, tarayıcının ana iş parçacığı sayfa içeriği zaten yüklendikten sonra önemli miktarda Javascript ayrıştırmak ve yürütmekle meşgul olduğunda ortaya çıkabilir. Buradaki önemli nokta, sayfada kullanıcının etkileşim kurmaya çalışabileceği görünür içerik olması, ancak tarayıcının henüz yanıt verememesidir.

---

FID sürenizi optimize etmek için, en yüksek kaynak süresini azaltmanız gerekir. Genel olarak, JS, CSS ve HTML’inizi optimize etme fırsatlarını arayarak bu ölçümü geliştirebilirsiniz. WordPress kullanıyorsanız, W3 Total Cache, WP Fastest Cache veya LiteSpeed Cache ve WP Rocket eklentileri ile JS, CSS, HTML küçültmeyi aktifleştirebilirsiniz.

Litespeed Cache eklentisi ile gerekli sıkıştırma ve küçültmelerin nasıl yapılacağını öğrenmek için aşağıdaki makaleyi inceleyebilirsiniz.

WordPress LiteSpeed Cache Ayarları (En İyi Performans)

Ayrıca Google Analytics, Yandex Metrica ve Facebook Piksel izleme JS dosyalarını yerel olarak barındırabilir ve bunlara tarayıcı önbelleği uygulayabilirsiniz.

---

Çoğu zaman satın aldığınız temalarda, kullanmadığınız ya da aktif etmediğiniz özelliklerin, JS ve CSS kaynakları gereksiz olarak çağırılır. Sayfada gerekli olmayan tüm CSS ve JavaScript’i kaldırarak JS yürütme süresini azaltmayı deneyebilirsiniz. Eklentilerinizden veya temanızdan belirli JS dosyalarını devre dışı bırakarak bunu yapabilirsiniz. Bunları her zaman dikkatli bir şekilde halletmeyi unutmayın ve nereden başlayacağınızı bilmiyorsanız bir geliştiriciye danışın.

Önemli web verileri hatalarının tümünü (LCP, CLS, FID, FCP) optimize etmenizin yolu hızlı bir web sitesine sahip olmaktır. Eğer WordPress bir web sitesine sahipseniz aşağıdaki WordPress SEO makalemizin “Site Hızını ve Performansını Optimize Edin” bölümünü incelemenizi öneririz.

WordPress SEO Nasıl Yapılır? (En İyi SEO Eklentileri ve Ayarları)

---

Günün sonunda önemli web verileri makalemizin sonuna geldik. Umarız bu rehber sizin için yararlı olmuştur. Önemli web verileri hakkında merak ettiğiniz konular veya optimizasyon ile ilgili sormak istediğiniz bir soru varsa bize yorum yaparak sorabilirsiniz.

Güncelleme: Google’ın Haziran 2021 güncellemesi ile beraber Google Search Console‘a “Sayfa Deneyimi” aracı eklendi ve artık önemli web verileri, sayfa deneyimi puanını etkileyen önemli bir sinyal olarak karşımıza çıkmaktadır.