Alsancak SEO

Günümüzün dijital pazarında, kullanıcı sabrı hiç olmadığı kadar düşük. Tüketiciler, bir web sitesinin 2 saniyeden uzun sürede yüklenmesi durumunda siteyi terk etme eğilimindedir. Google, bu gerçeğin farkında olarak 2021 yılından itibaren Core Web Vitals (CWV) metriklerini resmi bir sıralama faktörü haline getirdi.

Ancak CWV başarısı, sadece Google’ı memnun etmekten ibaret değildir. Araştırmalar, CWV skorları iyileşen sitelerin dönüşüm oranlarında (Satın alma, üyelik, form doldurma) önemli artışlar yaşadığını göstermektedir. Hız, doğrudan gelire çevrilen somut bir iş avantajıdır.

Birçok işletme, Core Web Vitals optimizasyonunu karmaşık bir “geliştirici işi” olarak görse de, bu süreç disiplinli bir planlama ve doğru teknik adımlarla yönetilebilir.

Bu kapsamlı rehberde, CWV skorlarınızı optimize etmeniz ve sitenizin hızını rakiplerinizin önüne geçirecek şekilde artırmanız için uygulamanız gereken 10 kritik ve teknik adımı, 2700 kelimenin üzerinde derinlikle adım adım ele alacağız. Bu rehberi tamamladığınızda, sitenizin hız sorunlarını teşhis etme ve kalıcı olarak çözme yeteneğine sahip olacaksınız.

Core Web Vitals Metriklerini Derinlemesine Anlamak

Optimizasyona başlamadan önce, Google’ın tam olarak neyi ölçtüğünü anlamak zorunludur. CWV, üç ana metrikten oluşur: LCP, INP ve CLS.

Largest Contentful Paint (LCP): Yükleme Hızı Kralı

LCP, bir sayfanın yüklenmeye başladığı andan itibaren, sayfadaki en büyük içerik öğesinin (genellikle bir görsel, video veya büyük metin bloğu) ekranda görünür hale gelme süresini ölçer. Kullanıcının, sayfanın ana içeriğinin nihayet yüklendiği hissini ne zaman aldığını gösterir.

• İdeal Hedef: 2.5 saniye veya daha az.
• Kötü Skor: 4.0 saniye ve üzeri.

LCP’yi Oluşturan 4 Ana Süreç:

1. TTFB (Time to First Byte): Tarayıcının sunucudan ilk baytı alana kadar geçen süre. (Barındırma ve sunucu yanıt hızıyla ilgilidir.)
2. Resource Load Delay: Tarayıcının LCP öğesini yüklemeye başlamadan önce bekleme süresi (Genellikle CSS ve JavaScript engellemelerinden kaynaklanır).
3. Resource Load Time: LCP öğesinin kendi yüklenme süresi (Örn: Görsel boyutu ve sıkıştırması).
4. Render Time: LCP öğesinin ekranda çizilme süresi.

Interaction to Next Paint (INP): Etkileşim ve Yanıt Verme Hızı

INP, kullanıcıların sayfanızla etkileşimde bulunduğu (tıklama, dokunma, klavye girişi) sürenin ne kadar hızlı yanıt verdiğini ölçer. Bu, 2024 itibarıyla FID’nin (First Input Delay) yerini alan modern bir metriktir. Kullanıcının bir butona tıkladıktan sonra, tarayıcının sonraki kareyi çizmesine kadar geçen süreyi temsil eder.

• İdeal Hedef: 200 milisaniye (ms) veya daha az.
• Kötü Skor: 500 ms ve üzeri.

INP’yi Etkileyen Faktörler: INP’nin ana düşmanı, ana iş parçacığının (Main Thread) uzun süren görevlerle meşgul olmasıdır. JavaScript’in yoğun işlenmesi ve yürütülmesi (parsing, compilation, execution) sırasında, kullanıcı etkileşimi engellenir ve INP yükselir.

Cumulative Layout Shift (CLS): Görsel İstikrar

CLS, bir sayfa yüklenirken veya kullanıcı sayfada gezinirken meydana gelen beklenmedik görsel kaymaların toplam miktarını ölçer. Örneğin, sayfa yüklenirken aniden yüklenen bir reklamın veya görselin, altındaki metni aşağı itmesi (layout shift). Bu, kullanıcı deneyimini ciddi şekilde bozar ve yanlış tıklamalara yol açar.

• İdeal Hedef: 0.1 veya daha az.
• Kötü Skor: 0.25 ve üzeri.

CLS Hesaplaması: CLS, Kayma Etkisi (Impact Fraction) ile Mesafe Etkisinin (Distance Fraction) çarpımıyla hesaplanır.

CLS’yi düşürmek, tüm görsel öğelerin yer tutuculara (placeholder) veya boyut tanımlarına sahip olmasını sağlamaktan geçer.

CWV Skorlarını İyileştirmenin 10 Kritik Adımı

Aşağıdaki adımlar, LCP, INP ve CLS skorlarınızı garantili bir şekilde iyileştirmek için tasarlanmış teknik stratejilerdir.

Kritik Adım 1: Sunucu Yanıt Süresini (TTFB) Roketleme

LCP’nin ilk ve en temel bileşeni TTFB’dir. Sunucunuz yavaşsa, hiçbir optimizasyon işe yaramaz.

Eylemler:

• Yüksek Performanslı Barındırma: Paylaşımlı hosting yerine, trafiğinizin büyüklüğüne uygun optimize edilmiş bir VPS (Sanal Özel Sunucu), Yönetilen WordPress Hosting veya bulut tabanlı bir çözüm (AWS, Google Cloud) kullanın.
• CDN (İçerik Dağıtım Ağı) Entegrasyonu: CSS, JS ve görsellerinizi, kullanıcının coğrafi konumuna en yakın sunucudan dağıtmak için Cloudflare veya Akamai gibi bir CDN kullanın. Bu, TTFB’yi ve genel yükleme süresini dramatik şekilde azaltır.
• Önbellekleme Katmanları: Sunucu tarafında (Varnish, Redis) ve CMS tarafında (WP Rocket, LiteSpeed Cache gibi eklentiler) agresif önbellekleme uygulayın. Statik içeriklerin her istekte yeniden işlenmesini önleyin.

Kritik Adım 2: LCP Öğesini Önceliklendirme ve Hazırlama

LCP öğesinin yüklenmesini geciktiren her şeyi ortadan kaldırın.

Eylemler (LCP Hızlandırma):

• Ön Yükleme (Preload): LCP öğesi bir görsel veya font ise, tarayıcıya bu kaynağın acil olduğunu bildirmek için HTML <head> etiketine <link rel="preload" href="lcp-gorsel.webp" as="image"> ekleyin.
• Kritik CSS (Critical CSS): Sayfanın ilk görünümünü (above-the-fold) çizen minimum CSS kodunu alın ve bunu HTML içine <style> etiketiyle satır içi (inline) olarak yerleştirin. Bu, tarayıcının harici CSS dosyasını beklemeden LCP’yi çizmesini sağlar. Harici CSS dosyasını ise async olarak yükleyin (Bkz. Adım 6).
• Lazy Load Engelleme: LCP öğesi hariç, ilk görünümde olmayan tüm görseller için Lazy Load (Tembel Yükleme) uygulayın. Ancak LCP öğesi asla Lazy Load edilmemelidir!

Kritik Adım 3: Cumulative Layout Shift (CLS) Giderme

CLS, öncelikle görsel öğelerin boyutlandırılması ve dinamik içeriklerden kaynaklanır.

Eylemler (Görsel İstikrar):

• Görsel Boyutlarını Belirleme: Tüm <img> etiketlerine mutlaka width ve height özelliklerini ekleyin. Bu, tarayıcının görsel yüklenmeden önce yerini ayırmasını sağlar.
  • Kötü: <img src="gorsel.jpg">
  • İyi: <img src="gorsel.jpg" width="800" height="600">
• Web Fontları: Font yüklenmelerinde kaymayı önlemek için CSS’te font-display: swap kullanın. Bu, özel font yüklenene kadar sistem fontunun kullanılmasını sağlar, böylece metin görünmez kalmaz.
• Reklam ve Yerleştirme Alanları: Dinamik olarak yüklenen reklam birimleri veya üçüncü taraf yerleştirmeleri (embeds) için, alanın yüklenmeden önceki boyutunu (width ve height) CSS ile mutlaka rezerve edin. Boyutsuz reklam alanları, CLS’nin bir numaralı nedenidir.
• Kullanıcı Etkileşimi Kaynaklı Kaymalar: Kullanıcının tıklaması sonucu değişen bir içerik kayması (Örn: açılır menü) CLS’yi etkilemez, ancak sayfanın yüklenmesi tamamlanmadan kayan öğeler CLS’yi etkiler.

Kritik Adım 4: Interaction to Next Paint (INP) İyileştirme

INP, site hızının en zorlu alanıdır ve çoğunlukla JavaScript yürütmesiyle ilgilidir.

Eylemler (Yanıt Verme Hızı):

• Ana İş Parçacığını Serbest Bırakın (Main Thread): JavaScript’i, 50 milisaniyeden (ms) uzun süren tek bir görev halinde çalıştırmaktan kaçının. Uzun süren görevleri daha küçük, 10-20 ms’lik parçalara ayırın.
• Gereksiz JavaScript’i Kaldırma: Kullanılmayan veya nadiren kullanılan JavaScript kodunu (unused JS) tespit edin (PageSpeed Insights veya Lighthouse ile) ve bu kodu ya tamamen kaldırın ya da sadece gerektiğinde yüklenmesini sağlayın.
• Debounce ve Throttle Kullanımı: Yoğun tetiklenen olay dinleyicilerinde (Örn: Kaydırma, yeniden boyutlandırma) olayların gereğinden fazla çalışmasını önlemek için Debounce ve Throttle tekniklerini kullanın. Bu, Main Thread üzerindeki baskıyı azaltır.

Kritik Adım 5: Görsel Optimizasyonu ve Yeni Nesil Formatlar

Görseller genellikle sayfa ağırlığının %50’sinden fazlasını oluşturur ve LCP’yi doğrudan etkiler.

Eylemler:

• Yeni Nesil Formatlar (WebP/AVIF): JPEG ve PNG yerine, %25-50 daha küçük dosya boyutları sunan WebP veya AVIF formatlarını kullanın. Tarayıcı desteği için bir yedek (fallback) stratejisi uygulayın.
• Doğru Boyutlandırma (Responsive Images): Tarayıcının, kullanıcının cihazına ve ekran boyutuna göre en uygun görsel boyutunu yüklemesini sağlamak için <picture> etiketi veya srcset özelliklerini kullanın. Mobil kullanıcılara, masaüstü görselleri yükletmeyin.
• Görsel Sıkıştırma: Görsel kalitesini kaybetmeden boyutunu düşürmek için Image CDN’leri veya optimize edici araçları (ShortPixel, Imagify) kullanın.

Kritik Adım 6: CSS Teslimatını Optimize Etme

CSS, tarayıcının sayfayı oluşturmasını (Render Blocking) engeller. CWV başarısı için CSS’in önceliği netleştirilmelidir.

Eylemler:

• Kritik CSS (Detaylı Uygulama): Yalnızca ilk ekranın (viewport) stilini tanımlayan kritik CSS’i HTML’e satır içi gömün (Bkz. Kritik Adım 2).
• Kullanılmayan CSS’i Kaldırma: Sitenizdeki temaların veya eklentilerin oluşturduğu ve sayfanızda kullanılmayan tüm gereksiz CSS kodlarını tespit edin ve kaldırın. Bu, dosya boyutunu küçültür ve tarayıcının daha hızlı çalışmasını sağlar.
• CSS’i Küçültme (Minification): CSS dosyalarından boşlukları, yorumları ve gereksiz karakterleri kaldırarak dosya boyutunu daha da küçültün.

Kritik Adım 7: JavaScript Yürütmesini Erteleme ve Asenkronleştirme

JavaScript, Main Thread’i en çok meşgul eden ve INP’yi yükselten faktördür.

Eylemler (JS Kontrolü):

• Geciktirme (Defer) ve Asenkron (Async): Harici JavaScript dosyaları için defer veya async niteliklerini kullanın.
  • async: Script’i mümkün olan en kısa sürede yükler ve yürütür (Sıralama önemli değilse).
  • defer: Script’i sayfadaki tüm HTML ve CSS yüklendikten sonra, ancak DOMContentLoaded olayından önce çalıştırır (En iyi uygulama).
• Üçüncü Taraf Komut Dosyaları: Google Analytics, reklam kodları, canlı sohbet pencereleri gibi üçüncü taraf JS’lerin yüklenmesini erteleyin veya bunları yerel olarak (self-hosted) barındırarak kontrolünüzü artırın.
• Web Workers (Gelişmiş): Ana iş parçacığını serbest bırakmak için karmaşık, yoğun hesaplama gerektiren görevleri (Örn: büyük veri işleme) Web Workers’a aktarın.

Kritik Adım 8: Web Fontlarını Doğru Yükleme

Web fontları, özellikle harici Google Fontları, LCP ve CLS üzerinde büyük etkiye sahiptir (Fontlar yüklenene kadar metnin görünmemesi).

Eylemler:

• font-display: swap Kullanımı: CSS’te bu özelliği kullanarak, özel font yüklenene kadar metnin hemen sistem fontuyla görünmesini sağlayın. Bu, CLS’yi ve metnin görünürlük süresini iyileştirir (FOIT – Flash of Invisible Text sorununu çözer).
• Kritik Fontları Ön Yükleme: Sadece kritik (ilk ekran için gerekli olan) font dosyalarını preload etiketiyle önceliklendirin.
• Yerel Barındırma (Self-Host): Fontları harici sunuculardan (Örn: Google Fonts CDN) çekmek yerine, kendi sunucunuzda barındırın. Bu, ek bir DNS sorgusunu ortadan kaldırır ve TTFB’yi düşürür.

Kritik Adım 9: İstemci ve Sunucu Önbellekleme Ayarları

Önbellekleme, geri gelen ziyaretçiler için siteyi anında yüklemek anlamına gelir.

Eylemler:

• Tarayıcı Önbellekleme (Browser Caching): Statik varlıklar (görseller, CSS, JS) için sunucu yanıt başlıklarında (Örn: Cache-Control, Expires) uygun uzun süreler belirleyin (Örn: 1 yıl). Bu, tarayıcının bu dosyaları tekrar indirmesini engeller.
• Versiyonlama: Önbellek süresini uzatırken, bir dosyayı güncellediğinizde tarayıcının yenisini indirmesini sağlamak için dosya adlarına veya URL’lere bir sürüm etiketi (style.css?v=2.1) ekleyin.
• Gzip/Brotli Sıkıştırması: Sunucunuzun metin tabanlı dosyaları (HTML, CSS, JS) transfer etmeden önce daha verimli olan Brotli veya yaygın olarak kullanılan Gzip ile sıkıştırdığından emin olun.

Kritik Adım 10: Ağ Optimizasyonu ve Erken Oluşturma

Sayfa oluşturma (rendering) sürecini hızlandırmak için gelişmiş teknikler kullanın.

Eylemler:

• DNS Öncesi Bağlantı (Preconnect): Üçüncü taraf kaynaklardan (Örn: Google Fonts, Analytics, Harici API’ler) veri çekiyorsanız, tarayıcıya bu bağlantıları önceden açması talimatını verin.
  • <link rel="preconnect" href="https://fonts.googleapis.com">
• Sunucu Tarafında Oluşturma (SSR) veya Statik Site Üretimi (SSG): Özellikle dinamik siteler için (React, Vue, Angular), sunucu tarafında oluşturma (SSR) veya tamamen statik HTML çıktısı (SSG) almak, tarayıcının JavaScript’i indirmesini, işlemesini ve yürütmesini beklemeden içeriğin hemen görünmesini sağlar. Bu, LCP ve INP için en köklü çözümdür.

Başarıyı Ölçme ve Raporlama (Saha Verileri)

CWV skorlarının gerçek başarısı, laboratuvar verilerinde (PageSpeed Insights, Lighthouse) değil, saha verilerinde (Field Data – CrUX) görülür.

Laboratuvar vs. Saha Verileri Ayrımı

• Laboratuvar Verileri (Lab Data): Lighthouse veya PageSpeed Insights’ın anlık, tek bir testi sonucu oluşturduğu verilerdir. Hızlı hata ayıklama için iyidir ancak gerçek kullanıcı deneyimini yansıtmaz.
• Saha Verileri (Field Data / CrUX): Google Chrome Kullanıcı Deneyimi Raporu’ndan (CrUX) gelen, gerçek kullanıcıların (farklı cihazlar, farklı ağ hızları) siteyi deneyimlediği verilerin 28 günlük ortalamasıdır. Google’ın sıralama için kullandığı veriler BUNLARDIR.

CWV optimizasyonu yaparken daima saha verilerini iyileştirmeye odaklanılmalıdır.

Google Search Console (GSC) ile İzleme

GSC, CWV performansınızı saha verilerine göre gösteren tek resmi kaynaktır.

1. CWV Raporu: Hangi URL gruplarınızın “Kötü”, “İyileştirilmesi Gereken” ve “İyi” performans gösterdiğini izleyin. Sorunları genellikle URL şablonlarına (Örn: tüm ürün sayfaları) göre gruplandıracaktır.
2. Hata Takibi: Optimizasyon sonrası CWV raporundaki URL gruplarını “Doğrulamayı Başlat” butonu ile Google’a tekrar denetlemesi için bildirin. İyileşme, 28 gün sonraki raporlarda görünecektir.

Sürekli İzleme ve Gerileme Önleme

CWV, statik bir skor değildir. Yeni bir reklam yerleşimi, yeni bir eklenti veya bir görsel değişikliği bile skorunuzu anında düşürebilir.

• Performans Bütçesi (Performance Budget): Geliştirme sürecine “performans bütçesi” kavramını entegre edin. Yeni bir kod veya varlık (CSS, JS, görsel) eklenmeden önce, bunun sayfa ağırlığına veya Main Thread süresine getireceği maliyeti hesaplayın.
• Otomatik Testler: Geliştirme (Deployment) süreçlerinize Lighthouse testlerini entegre edin. Yeni bir kod yayına alınmadan önce CWV skorları belirli bir eşiğin altına düşerse, yayını otomatik olarak durdurun.

Core Web Vitals = Rekabet Avantajı ve Gelir

Sitenizin Hızı Roket Hızına Çıksın: Core Web Vitals Skorlarınızı İyileştirmenin 10 Kritik Adımı

Core Web Vitals optimizasyonu, 2025 ve sonrasında SEO stratejinizin olmazsa olmazıdır. Bu, sadece bir teknik düzeltme değil, kullanıcılarınıza ne kadar değer verdiğinizin ve ne kadar rekabetçi olduğunuzun bir göstergesidir. Yavaş bir site, potansiyel müşterileri kapıda kaybetmek anlamına gelir.

Bu rehberde özetlenen 10 kritik adımı (TTFB’den INP optimizasyonuna, görsel sıkıştırmadan CSS önceliklendirmeye kadar) disiplinli bir şekilde uygulayarak, CWV skorlarınızı “İyi” seviyeye taşıyabilir ve Google’ın bu sinyali sıralama algoritmasında güçlü bir rekabet avantajı olarak kullanmasını sağlayabilirsiniz.

Eğer siz de bu karmaşık optimizasyon sürecini uzman bir elden yönetmek, TTFB ve INP sorunlarını kalıcı olarak çözmek ve CWV iyileştirmelerini somut gelir artışına dönüştürmek istiyorsanız, detaylı bir CWV Denetimi ve Uygulama Planı için hemen benimle iletişime geçin. Sitenizin hızını yarın değil, bugün iyileştirmeye başlayalım.