Web Sitesi Hızı Optimizasyonu: Core Web Vitals ile Performans Rehberi

Web sitesi hızı, hem kullanıcı deneyimini hem de SEO sıralamanızı doğrudan etkileyen kritik bir faktördür. Google'ın Core Web Vitals metrikleri, 2026 yılında sıralama algoritmasındaki ağırlığını artırmaya devam ediyor. Yavaş yüklenen bir site, ziyaretçilerin yüzde 53'ünü 3 saniye içinde kaybeder. Bu rehberde, web sitenizin performansını LCP, CLS ve INP metrikleri üzerinden nasıl optimize edeceğinizi adım adım anlatıyoruz.

Core Web Vitals Nedir? LCP, CLS ve INP

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimini ölçmek için kullandığı üç temel metriktir. LCP (Largest Contentful Paint), sayfadaki en büyük içerik öğesinin ne kadar sürede yüklendiğini ölçer; ideal değer 2,5 saniyenin altıdır. CLS (Cumulative Layout Shift), sayfa yüklenirken içerik öğelerinin ne kadar kayma (layout shift) yaptığını ölçer; ideal değer 0,1'in altıdır. INP (Interaction to Next Paint), kullanıcı etkileşimlerine (tıklama, dokunma, klavye) sayfanın ne kadar hızlı yanıt verdiğini ölçer; ideal değer 200 milisaniyenin altıdır. Bu metrikleri Google PageSpeed Insights, Chrome DevTools ve Google Search Console üzerinden takip edebilirsiniz. Core Web Vitals skorları, hem laboratuvar (lab) hem de saha (field) verileriyle değerlendirilir; gerçek kullanıcı verilerine dayanan saha verileri, Google sıralamasında daha belirleyicidir.

Görsel Optimizasyonu: WebP, AVIF ve Lazy Loading

Görseller, web sayfalarının toplam boyutunun ortalama yüzde 50'sini oluşturur ve LCP skorunu doğrudan etkiler. WebP formatı, JPEG'e kıyasla yüzde 25-35 daha küçük dosya boyutu sunarken görsel kaliteyi korur. AVIF formatı ise WebP'den bile yüzde 20 daha küçük dosyalar oluşturur, ancak tarayıcı desteği henüz evrensel değildir. Modern yaklaşım, picture elementi ile AVIF, WebP ve JPEG formatlarını kademeli olarak sunmaktır. Lazy loading (tembel yükleme), ekranın görünen alanı dışındaki görsellerin yüklenmesini erteleyerek ilk yükleme süresini iyileştirir. Ancak LCP öğesi olan hero görseli asla lazy load yapılmamalıdır; aksine, priority veya fetchpriority="high" ile öncelikli yüklenmesi sağlanmalıdır. next/image bileşeni, otomatik boyutlandırma, format dönüşümü ve lazy loading ile bu optimizasyonların çoğunu otomatik olarak gerçekleştirir.

JavaScript ve CSS Optimizasyonu

Aşırı JavaScript yükü, hem LCP hem de INP metriklerini olumsuz etkiler. Ana thread'i bloke eden uzun görevler (long tasks), kullanıcı etkileşimlerine gecikmeye neden olur. Code splitting ile yalnızca mevcut sayfa için gerekli JavaScript'i yükleyin. Tree shaking, kullanılmayan kodun paketlenmesini engeller. Üçüncü parti scriptler (analytics, chat widget, reklam scriptleri) performansın en büyük düşmanlarıdır; bunları defer veya async attribute'leriyle yükleyin ya da Partytown gibi araçlarla web worker'lara taşıyın. CSS optimizasyonunda kritik CSS'i (above-the-fold) inline olarak ekleyin, geri kalanını asenkron yükleyin. Kullanılmayan CSS kurallarını PurgeCSS veya Tailwind CSS'in dahili purge mekanizması ile temizleyin. CSS containment ve content-visibility özellikleri, tarayıcının render performansını iyileştiren modern CSS teknikleridir.

CDN ve Sunucu Tarafı Performans

CDN (Content Delivery Network) kullanımı, statik dosyaların (görseller, CSS, JavaScript) kullanıcıya en yakın sunucudan sunulmasını sağlayarak TTFB (Time to First Byte) ve LCP sürelerini iyileştirir. Cloudflare, Vercel Edge Network ve AWS CloudFront en popüler CDN çözümleridir. Sunucu tarafında HTTP/3 ve QUIC protokolleri, bağlantı kurulumunu hızlandırarak sayfa yükleme süresini düşürür. Brotli sıkıştırma, Gzip'e kıyasla yüzde 15-25 daha iyi sıkıştırma oranı sunar. Cache stratejisi de performansın kritik bir bileşenidir; statik dosyalar için uzun süreli cache (1 yıl), dinamik içerikler için stale-while-revalidatestratejisi uygulanmalıdır. Veritabanı sorguları Redis veya Memcached ile önbelleğe alınarak sunucu yanıt süresi düşürülebilir. İstanbul'daki sunucular veya Türkiye'ye yakın edge lokasyonları tercih etmek, yerel kullanıcılar için TTFB değerini önemli ölçüde iyileştirir.

Next.js ile Modern Web Performansı

Next.js, modern web uygulamalarında performans optimizasyonu için en güçlü araçları sunan React framework'üdür. Server Components, istemciye gönderilen JavaScript miktarını drastik şekilde azaltarak INP ve LCP metriklerini iyileştirir. Streaming SSR ile sayfa içeriği parçalar halinde sunularak ilk anlamlı paint (FMP) süresi kısalır. next/image bileşeni otomatik boyutlandırma, format optimizasyonu ve responsive görseller sunar. next/font ile font dosyaları build zamanında optimize edilir ve layout shift önlenir. Route Handlers ve Server Actionsile API katmanı optimize edilebilir. ISR (Incremental Static Regeneration), statik sayfaların arka planda güncellenmasini sağlayarak hem hız hem de güncellik sunar. Markopedya olarak, Next.js'in tüm bu performans özelliklerini projelerimizde aktif olarak kullanıyor ve müşterilerimize hız ile kaliteden ödün vermeyen web deneyimleri sunuyoruz.

Web Performans Hizmetlerimiz

• Core Web Vitals Audit - LCP, CLS ve INP metriklerinin detaylı analizi
• Görsel Optimizasyonu - WebP/AVIF dönüşümü ve lazy loading implementasyonu
• JavaScript Performans Optimizasyonu - Code splitting ve bundle analizi
• CDN ve Cache Konfigürasyonu - Edge network ve cache stratejisi kurulumu
• Next.js Geliştirme - Server Components ve modern performans teknikleri