Core Web Vitals'ı Optimize Edin: Sayfa Hızı SEO'su için Adım Adım Kılavuz

Özet

Core Web Vitals, arama sıralamalarınızı doğrudan etkileyen Google kullanıcı deneyimi metrikleridir. Birçok site sahibi, düşük LCP, INP ve CLS puanlarıyla mücadele eder ve bu da SEO'larına zarar verir. Bu makale, görüntü sıkıştırmadan kod bölmeye kadar her bir metriği optimize etmek için somut, adım adım bir plan sunar. Mevcut performansınızı nasıl ölçeceğinizi, düzeltmeleri nasıl önceliklendireceğinizi ve aşırı optimizasyon gibi yaygın hatalardan nasıl kaçınacağınızı öğreneceksiniz. Gerçek örnekler, öncesi ve sonrası iyileştirmeleri gösterir. Core Web Vitals'ınızı yükseltmek ve arama sonuçlarında yükselmek için bu adımları izleyin.

Core Web Vitals Sorunu

Google'ın Core Web Vitals'ı doğrudan bir sıralama faktörü haline geldi; yani yavaş veya takılmalı web siteleri arama sonuçlarında gömülüyor. Ancak birçok site sahibi takılıp kalıyor: Kötü puanlar görüyorlar ancak bunları sistematik olarak nasıl düzelteceklerini bilmiyorlar. Bu kılavuz, En Büyük İçerikli Boya (LCP), Sonraki Boyaya Etkileşim (INP) ve Kümülatif Düzen Kayması'nı (CLS) optimize etmek için tekrarlanabilir bir süreçte size yol gösterir. Sonunda, sitenizin performansını ve SEO'sunu iyileştirmek için net bir eylem planınız olacak.

Üç Metriği Anlamak

Düzeltmelere dalmadan önce, her bir metriğin neyi ölçtüğünü ve neden önemli olduklarını anlamak kritiktir:

• LCP (En Büyük İçerikli Boya) – Yükleme performansını ölçer. İdeal olarak 2,5 saniyenin altında. Sayfanın ana içeriğinin görünür olma zamanını temsil eder.
• INP (Sonraki Boyaya Etkileşim) – Yanıt verme hızını ölçer. İdeal olarak 200 milisaniyenin altında. Bir kullanıcı etkileşimi (tıklama, dokunma) ile görsel yanıt arasındaki gecikmeyi yakalar.
• CLS (Kümülatif Düzen Kayması) – Görsel kararlılığı ölçer. İdeal olarak 0,1'in altında. Görünür içeriğin beklenmedik şekilde ne kadar kaydığını ölçer.

Google bunları sıralama sinyali olarak kullanır, ancak aynı zamanda kullanıcı etkileşimini de doğrudan etkiler. Hızlı yüklenen, anında yanıt veren ve sıçramayan bir site, ziyaretçileri mutlu eder ve dönüşüm sağlar.

Optimize Etmeden Önce Ölçün

Ölçmediğiniz şeyi düzeltemezsiniz. Birden çok kaynaktan temel veri toplayarak başlayın:

1. PageSpeed Insights – Herhangi bir URL için laboratuvar ve alan verileri sağlar. En önemli sayfalarınızda çalıştırın.
2. Chrome Kullanıcı Deneyimi Raporu (CrUX) – PageSpeed Insights veya BigQuery aracılığıyla toplanan gerçek kullanıcı verileri.
3. Chrome DevTools'ta Lighthouse – Uygulanabilir öneriler ve puanlar sunar.
4. Web Vitals uzantısı – Kendi sitenizde gezinirken gerçek zamanlı metrikleri görün.

Yalnızca laboratuvar verilerine değil, alan verilerine (gerçek kullanıcılar) odaklanın. Amacınız gerçek kullanıcı deneyimlerini düzeltmek. Metrik değerlerini not alın ve sayfalarınız arasındaki en kötü durumdakileri belirleyin.

Adım 1: LCP'yi Optimize Edin – Kahraman Görseli ve Sunucu TTFB'si

En yaygın LCP öğesi bir kahraman görseli veya büyük metin bloğudur. LCP'yi nasıl küçülteceğiniz:

a. Görselleri Sıkıştırın ve Modernleştirin

• WebP veya AVIF gibi modern biçimler kullanın – JPEG/PNG'den %25-50 daha küçük dosya boyutları sunarlar.
• Görselleri maksimum görüntüleme boyutuna yeniden boyutlandırın. 1200px'lik bir kapsayıcıda 4000px'lik bir görsel sunmayın.
• Doğru boyutlandırılmış sürümler sunmak için otomatik görsel optimizasyonu olan bir CDN (ör. Cloudflare, Imgix) kullanın.

Örnek: Bir kahraman görseli, görünür kalite kaybı olmadan 500KB JPEG'den 50KB WebP'ye düştü ve LCP'yi 4,2s'den 2,1s'ye indirdi.

b. Sunucu Yanıt Süresini (TTFB) İyileştirin

• İyi önbelleğe alma özelliğine sahip hızlı bir barındırma sağlayıcısı kullanın (ör. Vercel, Netlify veya CDN destekli bir sunucu).
• Dinamik sayfalar için sunucu tarafında önbelleğe alma uygulayın.
• Sunucu işlemesini en aza indirmek için hafif bir CMS veya statik site oluşturucu düşünün.

c. Kritik Kaynakları Önceliklendirin

• Kahraman görselini erken almak için <link rel="preload"> kullanın.
• Oluşturmayı engellemeyi önlemek için ekran üstü içerik için kritik CSS'i satır içi yapın.

Adım 2: INP'yi Optimize Edin – Ağır JavaScript'i Ehilleştirin

INP genellikle ana iş parçacığını bloke eden uzun JavaScript görevleri tarafından bozulur. İyileştirmek için:

a. Kod Bölme ve Yavaş Yükleme

• JavaScript paketinizi, yalnızca gerekli kod başlangıçta yüklenecek şekilde bölün. Rotalar/bileşenler için import() kullanın.
• Kritik olmayan komut dosyalarını defer veya async ile erteleyin.

b. Uzun Görevleri Parçalayın

• İşi daha küçük parçalara bölmek için requestIdleCallback() veya setTimeout() kullanın.
• Mümkünse pahalı hesaplamaları Web Workers'a taşıyın.

c. Olay İşleyicilerini Optimize Edin

• Kaydırma ve yeniden boyutlandırma işleyicilerini debounce veya throttle yapın.
• Karmaşık satır içi olay dinleyicilerinden kaçının. Uygun olduğunda olay temsilciliği kullanın.

Örnek: Erken yüklenen ağır bir analiz komut dosyasına sahip bir site, INP'yi 350ms'ye çıkardı. Komut dosyasını requestIdleCallback ile yükleme sonrasına taşımak INP'yi 180ms'ye iyileştirdi.

Adım 3: CLS'yi Optimize Edin – Düzen Kaymalarını Önleyin

CLS genellikle düzeltilmesi en kolay olanıdır çünkü genellikle eksik boyutlar veya geç yüklenen içerikten kaynaklanır.

a. Açık Boyutlar Belirleyin

• Görsellere ve videolara her zaman width ve height nitelikleri ekleyin. Modern CSS, aspect-ratio ile duyarlı boyutlandırmayı yönetebilir.
• Dinamik reklamlar için, sabit yükseklikte bir kapsayıcı ayırın (veya tipik reklam değişimini hesaba katan bir yer tutucu kullanın).

b. Web Yazı Tiplerini Kontrol Edin

• Metnin, özel yazı tipi yüklenirken bir yedek yazı tipiyle hemen oluşturulması için font-display: swap kullanın.
• Kritik olmayan yazı tipleri için font-display: optional tercih edin.

c. Mevcut İçeriğin Üzerine Dinamik Enjeksiyonlardan Kaçının

• Üçüncü taraf eklemeleri (reklamlar, widget'lar) yalnızca çevredeki düzen kararlı olduktan sonra ekleyin veya önceden yer ayırın.

Örnek: Bir kahraman görseline açık width ve height eklemek (ve yanlış hesaplanmış satır içi boyutları kaldırmak) CLS'yi 0,32'den 0,05'e düşürdü – büyük bir iyileştirme.

Düzeltmelerinizi Önceliklendirme

Tüm düzeltmeler çaba ve etki açısından eşit değildir. Bu öncelik listesini kullanın:

1. Önce CLS – Genellikle en kolay ve en hızlı düzeltilebilir. Tek bir boyut değişikliği sizi 0,1'in altına getirebilir.
2. Sonra LCP – Görsel sıkıştırma ve önbelleğe alma hızlı kazançlar sağlayabilir.
3. En son INP – Genellikle kod bölme gibi daha fazla mimari değişiklik gerektirir.

Her düzeltmeden sonra ilerlemeyi ölçmek için PageSpeed Insights'ı çalıştırın. LCP iyileşir ancak INP kötüleşirse, değişiklikleriniz JavaScript'i artırmış olabilir. Her zaman mobilde test edin – kullanıcıların düşük performansı en çok hissettiği yer burasıdır.

Kaçınılması Gereken Yaygın Hatalar

• Aşırı optimize etme: Tüm animasyonları kaldırmayın veya gereksiz yere çerçeveleri terk etmeyin. İyi olanı hedefleyin, mükemmeli değil.
• Mobil deneyimi görmezden gelme: Önce en küçük ekran için optimize edin.
• Üçüncü taraf komut dosyalarını unutma: Yavaş bir reklam sunucusu metriklerinizi mahvedebilir. Yavaş yükleme ve asenkron yükleme kullanın.
• Yalnızca laboratuvar verilerine bakma: Google'ın kullandığı alan verileridir (CrUX). Alan verileri kötüyse, laboratuvar verileri gerçek koşulları yansıtmayabilir.

Sonuç

Core Web Vitals optimizasyonu tek seferlik bir görev değil, sürekli bir iyileştirme döngüsüdür. Ölçün, CLS'yi ele alın, LCP varlıklarını sıkıştırın ve kod bölme ile INP'yi ehilleştirin adımlarını izleyerek puanlarınızı ve SEO'nuzu sistematik olarak iyileştirebilirsiniz. Bugün anahtar bir sayfayı denetleyerek ve üç Kolay Kazancı uygulayarak başlayın: görsel boyutlarını ayarlayın, kahraman görsellerini sıkıştırın ve kritik olmayan JavaScript'i erteleyin. Kullanıcılarınız (ve arama sıralamalarınız) teşekkür edecek.

Bir performans temeline sahip olduğunuzda, yeni sayfaları baştan performans dahil olacak şekilde oluşturmayı da düşünebilirsiniz. Pagenza gibi araçlar, düz metin açıklamasından eksiksiz bir açılış sayfası oluşturmanıza ve manuel optimizasyon gerektirmeden temiz, hızlı HTML üretmenize olanak tanır. Bu, bir sonraki sayfanızın Core Web Vitals eşiklerini kutudan çıkar çıkmaz karşılamasını sağlamanın bir yoludur.