Web tasarım ve SEO artık birbirinden ayrı düşünülemez. Google'ın 2021'de sıralama faktörü olarak benimsediği Core Web Vitals, sitenizin sadece içerik kalitesine değil, kullanıcı deneyimine ve teknik performansına da baktığını resmi olarak ortaya koydu. Bu yazıda web tasarım sürecinde SEO'yu nasıl entegre edeceğinizi, Core Web Vitals metriklerini nasıl optimize edeceğinizi ve sayfa hızının sıralamalarınız üzerindeki etkisini kapsamlı biçimde ele alıyoruz.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metriktir:

Metrik	Ölçtüğü Şey	İyi Değer
LCP (Largest Contentful Paint)	En büyük içeriğin yüklenme süresi	2.5 sn veya altı
INP (Interaction to Next Paint)	Kullanıcı etkileşimine tepki hızı	200 ms veya altı
CLS (Cumulative Layout Shift)	Görsel kararlılık / içerik kayması	0.1 veya altı

Google Search Console'un "Temel Web Verileri" raporunda sitenizin bu metriklerdeki durumunu ücretsiz olarak görebilirsiniz. Kırmızı (Kötü) veya sarı (Geliştirilmesi Gerekiyor) puanlar, sıralama kaybına neden olur.

LCP'yi Nasıl İyileştirirsiniz?

LCP genellikle hero bölümündeki büyük görsel veya başlık metninin yüklenme süresiyle ölçülür. Optimize etmek için:

• Görsel formatlarını modernize edin: JPEG/PNG yerine WebP veya AVIF formatı kullanın; dosya boyutu %30-50 küçülür.
• Görsel lazy loading: Ekranın dışındaki görselleri erteleyerek ilk yükleme süresini azaltın.
• Öncelikli yükleme (preload): Hero görseli için link rel="preload" etiketi ekleyin.
• Sunucu yanıt süresini (TTFB) kısaltın: CDN kullanın, hosting kalitesini artırın.
• Kritik CSS'i inline edin: İlk görünüm için gerekli CSS'i harici dosya yerine HTML içine gömün.

CLS'yi Nasıl Sıfıra Yaklaştırırsınız?

İçerik kayması, kullanıcı bir şeye tıklamak üzereyken sayfanın kayması ve yanlış yere tıklaması gibi sinir bozucu deneyimlere yol açar. CLS'nin en yaygın nedenleri ve çözümleri:

• Boyutsuz görseller: Her img etiketine width ve height özniteliği ekleyin.
• Web fontları: font-display: swap veya optional kullanın; sistem fontunu geri dönüş olarak tanımlayın.
• Dinamik içerik (reklamlar, banner): Yer tutucu alan rezerve edin, içerik yüklenince kayma olmaz.
• Animasyonlar: Yalnızca transform ve opacity özelliklerini animate edin; layout'u etkileyen animasyonlardan kaçının.

Sayfa Hızı ve SEO Bağlantısı

Sayfa hızı hem doğrudan sıralama faktörü hem de dolaylı SEO sinyalidir. Yavaş yüklenen sayfalar:

• Daha yüksek hemen çıkma oranına (bounce rate) neden olur — bu Google'a olumsuz sinyal gönderir.
• Crawl bütçesini tüketir — Googlebot yavaş sayfaları daha az sıklıkla tarar.
• Dönüşüm oranını düşürür — araştırmalara göre 100ms gecikme %1 satış kaybına yol açabilir.

Google PageSpeed Insights'ta 90 üzeri puan almak artık lüks değil, rekabetçi pazarlarda minimum gereklilik haline geldi.

Tarayıcı Önbelleği ve CDN

Statik varlıklar (CSS, JS, görseller) için uzun önbellek süreleri ayarlayın. CDN (Content Delivery Network) ile statik dosyalarınızı kullanıcıya coğrafi olarak yakın sunuculardan sunun. Türkiye için Cloudflare'nin ücretsiz planı harika bir başlangıç noktasıdır.

Mobil Öncelikli Tasarım ve SEO

Google artık "mobile-first indexing" kullanıyor: sitenizin masaüstü versiyonunu değil, mobil versiyonunu indeksliyor. Bu şu anlama geliyor: mobil deneyiminiz mükemmel olmalı. Kontrol listesi:

• Dokunma hedefleri (buton, link) minimum 48x48 piksel olmalı.
• Fontlar mobilde 16px altına düşmemeli.
• Yatay kaydırma olmamalı.
• Interstitial popup'lar (giriş engeli) mobilde SEO cezasına yol açar.
• İyi optimize edilmiş responsive tasarım tercih edilmeli.

Yapısal Veri (Schema Markup) ve Zengin Sonuçlar

Schema markup, Google'ın sayfanızın içeriğini daha iyi anlamasını sağlar ve arama sonuçlarında zengin snippet (yıldız, SSS, ekmek kırıntısı vb.) gösterilmesine imkan tanır. Zengin sonuçlar tıklama oranını %20-30 artırabilir. Önerilen schema türleri: LocalBusiness, Article, FAQPage, BreadcrumbList, Product ve AggregateRating.