Önemli Web Verileri (Core Web Vitals) Nedir? LCP, INP ve CLS

Google Önemli Web Verileri (Core Web Vitals): Web Sitenizi Nasıl Optimize Edersiniz?

Google'ın Önemli Web Verileri (Core Web Vitals) raporunu duyurmasının üzerinden zaman geçti. Başlangıçta, Search Console'da bu metriklerle ilgili sorunları nasıl gidereceğimize dair net bilgiler azdı. Ancak, geçen aylarla birlikte, bu alanları nasıl optimize etmemiz gerektiği konusunda önemli bir bilgi birikimi oluştu.

Google Search Console'daki Önemli Web Verileri raporu, URL'leri sıralamak için LCP (Largest Contentful Paint), INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift) ölçümlerini kullanır. Deneysel Hız raporunun yerini 2020'de alan bu raporun, modern SEO stratejileri için hayati öneme sahip olduğu bir gerçektir. Bu rehberde, sitenizin sayfa içeriklerinin yüklenme süresini nasıl azaltacağınıza, böylece First Contentful Paint süresini kısaltarak ve genel Google PageSpeed skorunuzu iyileştirerek kullanıcı deneyimini zirveye taşımanıza odaklanacağız.

Önemli Web Verileri Raporunu Anlamak

Hepimiz, web sitesi sayfa hızının hem SEO başarısı hem de kullanıcı deneyimi açısından ne kadar kritik olduğunu biliyoruz. Bu nedenle, sitelerimizi hızlandırmak, ziyaretçilere daha iyi bir deneyim sunmak ve genel site performansını maksimize etmek için çeşitli araçları aktif olarak kullanıyoruz.

Google Search Console'un "Deneyim" bölümünde yer alan Önemli Web Verileri raporu, web yöneticilerine sitelerinin mobil ve masaüstü sürümlerinde kötü, iyileştirilmesi gereken ve iyi olarak sınıflandırılan URL'lerin genel bir dökümünü sunar.

Bu raporun mobil veya masaüstü türüne girdiğinizde, tıpkı Sayfa dizine ekleme (eski adıyla Kapsam) raporunda olduğu gibi, hangi URL'lerinizin performans sorunları yaşadığını ayrıntılı olarak görebilirsiniz.

Yukarıdaki örnek raporda, mobil sürüm için CLS ve LCP ile ilgili iki temel sorun gözlemlenmektedir. Bu hatalar, Google Pagespeed analizlerinde de karşılaştığımız Largest Contentful Paint (LCP), Interaction to Next Paint (INP), First Contentful Paint (FCP) ve Cumulative Layout Shift (CLS) gibi değerlerin düşük skorları nedeniyle ortaya çıkmaktadır. Yazımızın devamında, bu kritik skorları nasıl iyileştirebileceğimizi ve sitenizin SEO performansını nasıl artırabileceğimizi inceleyeceğiz.

Önemli Web Verilerini artık daha iyi anladığımıza göre, bu bölümde raporlanan sorunları nasıl düzelteceğimizi ve ardından doğrulama adımlarını nasıl gerçekleştireceğimizi ele alabiliriz.

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

Google Search Console raporlarını düzenli olarak kontrol edenler, Mayıs 2020'den itibaren bugün "Deneyim" menüsü altında yer alan Önemli Web Verileri bölümünde aşağıdaki gibi uyarılar görmüş olabilirler:

• CLS sorunu: 0,1 değerini aşan mobil skorlar

• CLS sorunu: 0,1 değerini aşan masaüstü skorlar

• CLS sorunu: 0,25 değerini aşan masaüstü skorlar

Kümülatif Düzen Kayması (CLS), kullanıcı deneyimini doğrudan etkileyen bir Google metriğidir ve 2020'den itibaren bir sıralama faktörü olarak kabul edilmektedir. CLS sorununu optimize edebilmek için öncelikle bu metriğin ne anlama geldiğini netleştirmemiz gerekir.

CLS, bir sayfa yüklenirken web sitesindeki öğelerin (resimler, reklamlar, videolar, formlar, butonlar ve diğer dinamik içerikler) beklenmedik şekilde titremesi, kayması veya yer değiştirmesidir. CLS değerini minimuma indirmek, kullanıcıların sitede geçirdiği süreyi olumlu yönde etkilemek için hayati öneme sahiptir, çünkü kimse sürekli kayan elementlerle dolu bir arayüzde vakit geçirmek istemez.

CLS Hatalarını Tespit Etme Yöntemleri:

Web sitenizdeki CLS'ye neden olan spesifik bölümleri belirlemek için en güçlü aracınız Google Pagespeed Insights olacaktır.

İlgili siteyi veya URL'yi analiz ettikten sonra, "Büyük düzen kaymalarından kaçının" başlığı altındaki bulgulara odaklanın ve CLS skorunu yükselten alanları detaylıca optimize edin.

CLS Sorununun Temel Nedenleri:

Google'a göre, kümülatif düzen kaymasının (CLS) arkasındaki ana nedenler şunlardır:

1. Width (genişlik) ve height (yükseklik) etiketleri ile boyutları belirtilmemiş görseller.

2. Boyutları tanımlanmamış reklam alanları, iframe'ler ve tablolar.

3. Sayfa yüklenirken dinamik olarak sonradan eklenen içerikler.

4. Web yazı tiplerinin yüklenme biçiminden kaynaklanan sorunlar (FOIT / FOUT).

Yanlış Boyutlandırılmış Görseller:

Görsellerin ve videoların HTML etiketlerinde mutlaka yükseklik ve genişlik değerlerine sahip olması gerekir. Responsive görseller kullanırken bile, farklı görünüm alanları için kullanılan tüm görüntü boyutlarının aynı en boy oranını koruduğundan emin olun. Örneğin, bir alan 300x200 olarak belirlendiyse, görseli 300x200 boyutlarında kırpmeli ve bu ölçüleri width ve height etiketleriyle belirtmelisiniz. Responsive yapının görseli alana göre ölçeklendireceğini varsayarak bu etiketleri eklememek CLS'ye yol açar.

Boyutlandırılmamış Reklam Alanları:

Web sitenizdeki boyutları sabitlenmemiş reklam alanları da ciddi CLS sorunu yaratabilir. Reklam alanları için de aynı boyutlandırma kuralı geçerlidir. Reklam alanını tanımlayan div stilini belli bir yükseklik ve genişliğe sahip olacak şekilde biçimlendirdiğinizde, reklam içeriği bu alanla sınırlanır. Ardından, reklam bannerlarınızı bu tanımlanmış alan boyutlarında tasarlayın ve görsel etiketlerine width ve height niteliklerini ekleyin.

Dinamik Olarak Eklenen İçerikler:

Web sitenize harici kaynaklardan çağrılan içerikler (örneğin, gömülü bir YouTube videosu veya X (eski adıyla Twitter) akışı), sayfa yapısı hazırlandıktan sonra eklenerek kümülatif düzen kaymasına neden olabilir.

Web Yazı Tipleri Sorunu (FOIT/FOUT):

font-face özelliği ile çağrılan özel fontlar yüklenene kadar tarayıcının yedek bir font göstermesi (FOUT - Flash of Unstyled Text) veya metni hiç göstermemesi (FOIT - Flash of Invisible Text) CLS süresini artırabilir. Bunu çözmenin etkili bir yolu, web fontunu 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) Optimizasyonu

Largest Contentful Paint (LCP), Google'ın kullanıcı deneyimini ölçmek için kullandığı yeni bir metriktir ve önemli bir sıralama faktörüdür. LCP, bir sayfanın ana içeriğinin (görünür ekrandaki en büyük görsel veya metin bloğu) indirilmesi ve etkileşime hazır hâle gelmesi için geçen süreyi ölçer. Bu ölçüme fotoğraflar, videolar, arka plan görselleri ve paragraf etiketleri gibi blok düzeyindeki metin öğeleri dahildir. Ancak, görünen ekranın dışındaki hiçbir öğe bu ölçüme dahil edilmez.

LCP Sorununun Yaygın Nedenleri:

Google'a göre, LCP süresinin yüksek çıkmasının başlıca nedenleri şunlardır:

• Yavaş sunucu yanıt süreleri (TTFB)

• Oluşturmayı engelleyen JavaScript ve CSS kaynakları

• Yavaş kaynak yükleme süreleri

• Ağır istemci tarafı oluşturma süreçleri

Yavaş sunucu yanıt süresi, paylaşımlı hostingdeki aşırı yüklenmeden kaynaklanabileceği gibi, sunucunuzda yaşanan DDOS saldırısı veya yapılandırma sorunları nedeniyle de ortaya çıkabilir. Barındırma sağlayıcınızla bu tür saldırıları kontrol etmek için iletişime geçebilirsiniz. Diğer sorunlar ise, özel bir sunucu veya VPS'nin yanlış yapılandırılmasıyla veya PHP için ayrılan bellek miktarının yetersizliğiyle ilgili olabilir. Ayrıca, güncel olmayan PHP sürümleri veya CMS yazılımları da performansı düşüren etkenlerdir.

Eğer paylaşımlı hosting kullanıyorsanız, sitenizin yavaş çalışması kaçınılmaz olabilir; zira sunucu kaynakları aynı anda birden fazla kullanıcı tarafından paylaşılmaktadır. Bu durumda, daha kaliteli bir hosting sağlayıcısına geçiş yapmak veya paylaşımsız bir dedicated IP kullanmak iyi bir çözüm yolu sunar.

Search Console'da karşılaştığınız LCP sorunu: 2,5 saniyeden uzun (mobil) gibi bildirimleri optimize etmenin en etkili yollarından biri site kaynaklarını iyileştirmektir. Genel olarak, önbellekleme mekanizmalarını etkinleştirmek, görselleri optimize etmek, oluşturmayı engelleyen CSS ve JavaScript dosyalarını elemek ve belirli kritik kaynakları önceden yüklemek önemli ölçüde yardımcı olacaktır. Eğer WordPress kullanıyorsanız, aşağıdaki eklentilerle bu kaynakları kolayca optimize edebilirsiniz:

WordPress LiteSpeed Cache Ayarları ve En İyi Performans Rehberi

WP Rocket Ayarları ve Kurulumu (Kapsamlı Rehber)

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

.Htaccess ile Tarayıcı Önbellekleme Optimizasyonu

Ayrıca, görünür ekranın dışındaki görsellerin yüklenmesini ertelemek için lazy load (tembel yükleme) özelliğini kullanabilirsiniz. Nasıl uygulanacağını bilmiyorsanız, ilgili makalemize göz atabilirsiniz:

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

Kaynak dosyalarınızı sıkıştırmak, dosya boyutlarını minimize ederek yükleme sürelerini ve dolayısıyla LCP skorunu etkili bir şekilde iyileştirecektir. Bu kazanç yalnızca organik sıralamayla sınırlı kalmaz; iniş sayfası deneyimi, kalite puanına doğrudan yansıdığı için hızlanan bir sayfa Google Ads reklam yönetimi tarafında tıklama başına maliyetinizi de aşağı çeker.

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

First Contentful Paint (FCP), algılanan sayfa yükleme hızını ölçmek için kullanılan, kullanıcı odaklı bir metriktir. FCP, teknik bir hız test aracının ölçtüğünden ziyade, kullanıcıların bir web sitesinin performansını zihinsel olarak nasıl algıladıklarını yansıtır.

İlk zengin içerikli boya, tarayıcının herhangi bir türde içerik oluşturmaya başladığı an olarak bilinen First Paint'ten farklıdır. FCP, belirli içeriklerin—metinler, görseller, arka planlar veya logolar—işlenmeye başlamasıyla tetiklenir.

FCP Sorununun Olası Nedenleri:

• Yavaş sunucu yanıt süreleri

• Oluşturmayı engelleyen kaynaklar (CSS/JS)

• Ağır istemci tarafı oluşturma yükü

• Web tabanlı yazı tiplerinin yükleme gecikmeleri

FCP sürelerini düşürmek için öncelikle kaliteli bir web barındırma hizmeti kullanmalısınız. Yavaş yanıt veren sunucuları değiştirmeyi düşünün. İdeal olarak, kullanıcılarınızın coğrafi konumuna yakın sunucuları tercih edin.

Kaliteli bir CDN (İçerik Dağıtım Ağı), sitenizin statik kaynaklarının (resimler, videolar, scriptler) yüklenmesini hızlandırarak sunucunuz ile kullanıcı arasındaki ağ gecikmesini önemli ölçüde azaltır.

Önbellekleme, sunucu tarafındaki işlem süresini azaltmada kritik rol oynar. En iyi yönetilen WordPress hosting sağlayıcılarının çoğu sunucu düzeyinde önbellekleme sunar. Htaccess ve LiteSpeed önbellekleme ayarları için aşağıdaki makaleler size yol gösterecektir:

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 dosyaları bir araya getirildikten sonra tarayıcı tarafından oluşturulur. "Oluşturmayı engelleyen kaynakları ortadan kaldırın" uyarısını çözmek için bu kaynakları sıkıştırabilir, kullanılmayanları temizleyebilir veya sayfaya özel dosya çağrıları yaparak kaynakları izole edebilirsiniz. Bu yöntemler FCP sürelerini olumlu yönde etkiler.

Lazy load, ekranın alt kısımlarındaki medya içeriklerini ertelemek için mükemmeldir. Ancak, lazy load, tarayıcının bir görüntüyü işleyebilmesi için JavaScript çalıştırmasını gerektirdiğinden FCP süresini bir miktar artırabilir. Bu nedenle, ekranın üst kısmında ve hemen görünen alanlarda lazy load kullanımından kaçınmak önemlidir.

Yazı tipleri genellikle büyük dosyalardır ve yüklenmeleri zaman alabilir. Lighthouse'da benzer bir hatayla karşılaşmış olabilirsiniz:

Bazı tarayıcılar, tüm font dosyaları yüklenene kadar metni oluşturmaz; bu duruma FOIT denir. Özel fontlar yüklenirken tarayıcıyı geçici olarak bir sistem fontu göstermeye zorlayarak bu gecikmeyi çözebilirsiniz.

Bunu CSS'de font-display: swap; kullanarak uygulayabilirsiniz: