Web Sitesi Hızı ve Core Web Vitals: Neden Önemli, Nasıl İyileştirilir?

Bir kullanıcı sitenize tıkladığında saniyeler içinde bir karar veriyor: kal ya da git. Sayfa geç açılıyorsa, içerik yüklenirken zıplayıp duruyorsa ya da tıkladığı buton yanıt vermiyorsa, çoğu insan beklemeden geri dönüyor. Google bu deneyimi ölçmek için Core Web Vitals adında üç metrik kullanıyor ve bunları sıralama sinyalleri arasında değerlendiriyor. Yani hız artık sadece bir konfor meselesi değil; hem dönüşümü hem de görünürlüğü doğrudan etkiliyor.

Bu yazıda üç metriği sade bir dille açıklayıp, sahada gerçekten fark yaratan iyileştirmeleri sıralıyoruz. Amacımız teorik bir tanım listesi değil; masaya oturup uygulayabileceğiniz somut adımlar. Bir de baştan söyleyelim: hız iyileştirmesi çoğu zaman büyük bir yeniden yazım değil, doğru yerlere yapılan küçük ve hedefli dokunuşların toplamıdır. En büyük kazançlar genellikle en görünür olmayan ayarlardan gelir.

Core Web Vitals Nedir?

Üç metrik, kullanıcının hissettiği üç farklı sorunu ölçer: sayfa ne kadar hızlı görünür hâle geliyor, tıklamalara ne kadar çabuk yanıt veriyor ve yüklenirken görsel olarak ne kadar oynuyor.

Metrik	Ölçtüğü şey	İyi kabul edilen eşik
LCP (Largest Contentful Paint)	En büyük içeriğin yüklenme süresi	2,5 saniyenin altı
INP (Interaction to Next Paint)	Etkileşime verilen yanıt hızı	200 ms'nin altı
CLS (Cumulative Layout Shift)	Yüklenirken oluşan görsel kayma	0,1'in altı

Not: INP, 2024'te FID metriğinin yerini aldı ve artık asıl etkileşim ölçütü bu. Hâlâ FID'e göre optimize edilmiş eski tavsiyelerle karşılaşabilirsiniz; güncel hedef INP.

LCP: İlk izlenimin hızı

LCP, kullanıcının "sayfa açıldı" diye hissettiği anı ölçer; genellikle en büyük görsel ya da başlık bloğunun ekrana gelmesi. LCP'yi bozan en yaygın sebep, ağır bir hero görseli veya render'ı geciktiren dosyalardır.

INP: Tıklayınca ne oluyor?

Kullanıcı bir butona bastığında sayfanın yanıt verme süresi. Sitede çok fazla ve ağır JavaScript çalışıyorsa, tarayıcı meşgul olur ve tıklamalar geç işlenir. INP'yi iyileştirmenin yolu genelde JavaScript'i azaltmaktan ve işi küçük parçalara bölmekten geçer.

CLS: Zıplayan sayfa sorunu

Metni okumaya başladığınızda üstten bir reklam yüklenip her şeyi aşağı ittiğinde ve yanlış yere tıkladığınızda yaşadığınız o sinir bozucu durum, CLS'tir. En sık sebebi, boyutu belirtilmemiş görseller ve sonradan yüklenen içeriktir.

1. Görsel Optimizasyonu: En Hızlı Kazanç

Çoğu sitede sayfa ağırlığının büyük bölümünü görseller oluşturuyor; dolayısıyla en hızlı iyileşme de burada. Uyguladığımız projelerde tek başına görsel düzenlemesi çoğu zaman LCP'yi gözle görülür şekilde aşağı çekiyor.

• Görselleri WebP veya AVIF formatına çevirin; aynı kalitede çok daha küçük dosya elde edersiniz.
• Görseli göründüğü boyutta sunun. 300 piksellik alana 3000 piksellik fotoğraf yüklemek boşa bant genişliği demek.
• Ekranın altındaki görselleri lazy loading ile geciktirin, ama ilk ekrandaki hero görseline lazy loading uygulamayın; tersine döner.
• Her görsele width ve height verin; böylece tarayıcı yeri baştan ayırır ve CLS oluşmaz.

2. Önbellek: Aynı İşi İki Kez Yapmayın

Önbellek (cache), tekrar eden ziyaretlerde ve sunucu tarafında büyük fark yaratır. İki katmanı da düzgün kurmak gerekir.

Tarayıcı önbelleği: Logo, CSS ve JavaScript gibi seyrek değişen dosyalara uzun ömürlü önbellek başlıkları verin. Böylece kullanıcı ikinci ziyaretinde bu dosyaları yeniden indirmez. Dosya güncellendiğinde ismine sürüm eklemek (versiyonlama), eski sürümün takılıp kalmasını önler.

Sunucu önbelleği: Dinamik sayfalarda her istekte veritabanına gitmek yerine hazır çıktıyı saklamak, sunucu yanıt süresini ciddi biçimde kısaltır. LCP büyük ölçüde sunucunun ilk yanıt hızına bağlı olduğu için bu adım doğrudan skora yansır.

Yenileme projelerinde en çok karşılaştığımız durum şu: site aslında iyi tasarlanmış ama önbellek hiç yapılandırılmamış. Sadece bunu düzelterek belirgin bir hızlanma elde ediyoruz.

3. CDN: İçeriği Kullanıcıya Yaklaştırın

Sunucunuz tek bir yerde duruyorsa, uzaktaki ziyaretçiye veri fiziksel olarak daha geç ulaşır. CDN (İçerik Dağıtım Ağı), dosyalarınızın kopyasını dünyanın farklı noktalarındaki sunucularda tutar ve ziyaretçiye en yakın olandan servis eder. Statik dosyalar (görsel, CSS, JavaScript) için bu, hem gecikmeyi azaltır hem de ana sunucunuzun yükünü hafifletir. Kurulumu çoğu durumda birkaç saatlik bir iş ama etkisi kalıcı.

4. Kodun Kendisi: Az ve Öz

Görsel, önbellek ve CDN'i hallettikten sonra sıra kodun sadeleştirilmesine gelir. Kullanılmayan CSS ve JavaScript'i temizlemek, dosyaları küçültmek (minify), render'ı engelleyen kaynakları ertelemek INP ve LCP'ye iyi gelir. Özellikle sayfada gerçekten gerekmeyen üçüncü parti scriptleri (fazladan analitik, sohbet widget'ları, sosyal medya gömüleri) INP'yi sessizce bozan başlıca suçlulardır. Her birinin sağladığı faydayı, getirdiği yavaşlamayla tartın.

5. Yazı Tipleri: Görünmez Bir Gecikme Kaynağı

Web fontları güzel görünür ama dikkatsiz kullanıldığında hem yavaşlatır hem de metnin geç görünmesine yol açar. Font yüklenene kadar metin boş kalıyorsa, kullanıcı sayfayı boş görür; font sonradan gelip metni kaydırıyorsa CLS oluşur. İkisi de kötü.

Çözüm nispeten basit: yalnızca gerçekten kullandığınız font ağırlıklarını yükleyin (her kalınlığı çekmek gereksiz yük), font-display: swap ile metnin önce sistem fontuyla görünmesini sağlayın ve mümkünse fontları kendi sunucunuzdan servis edin. Üç ayrı font ailesini birden yüklemek, çoğu sitede tasarıma kattığından fazlasını performanstan götürür.

6. Üçüncü Parti Scriptler: En Sık Görülen Suçlu

Sitenize eklediğiniz her dış araç, kendi yükünü de getirir: analitik, canlı sohbet, sosyal medya gömüleri, reklam etiketleri, ısı haritası araçları. Tek tek zararsız görünürler ama toplandıklarında INP'yi ve LCP'yi ciddi biçimde bozarlar; üstelik bu scriptler çoğu zaman sizin kontrolünüzde olmayan sunuculardan geldiği için performansları da elinizde değildir.

Yapılacak iş, düzenli bir temizlik: sitedeki tüm üçüncü parti scriptleri listeleyin ve her birine "bu gerçekten gerekli mi" diye sorun. Kalması gerekenleri de mümkünse geciktirerek (kullanıcı etkileşime geçtikten sonra) yükleyin. Bir müşterinin sitesinde, artık kullanılmayan üç eski pazarlama etiketini kaldırmanın bile yükleme süresini hissedilir ölçüde kısalttığını gördük.

Nasıl Ölçmeli?

İyileştirmeye başlamadan önce mevcut durumu ölçün, yoksa neyin işe yaradığını bilemezsiniz. İki tür veri var: laboratuvar verisi (test aracının kontrollü ortamda ürettiği) ve saha verisi (gerçek kullanıcılardan toplanan). Karar verirken saha verisine ağırlık verin; çünkü kullanıcılarınızın gerçek cihaz ve bağlantılarını yansıtır. Google'ın ücretsiz PageSpeed Insights aracı her iki veriyi de gösterir ve iyi bir başlangıç noktasıdır.

Ölçümü orta sınıf bir telefonda ve ortalama bir mobil bağlantıda yapmak, gerçeğe en yakın resmi verir. Kendi yeni model telefonunuzda ve ofisin hızlı internetinde site pırıl pırıl açılıyor olabilir; oysa kullanıcılarınızın çoğu daha mütevazı koşullarda geziniyor. Bir de değişiklikten önce ve sonra ölçüp aradaki farkı kaydetmeyi alışkanlık haline getirin. Böylece hangi müdahalenin gerçekten işe yaradığını görür, bir dahaki sefere doğrudan oraya odaklanırsınız.

Sık Yapılan Hatalar

Hız çalışmalarında en çok karşılaştığımız yanılgı, laboratuvar skoruna takılıp gerçek kullanıcı deneyimini gözden kaçırmak. Test aracında 100 puan almak güzeldir ama saha verisi kötüyse, gerçek ziyaretçileriniz hâlâ bekliyor demektir. Bir diğer sık hata, tek seferlik bir optimizasyon yapıp konuyu kapatmak. Siteye yeni bir görsel, yeni bir eklenti ya da yeni bir kampanya bölümü eklendikçe skorlar zamanla yeniden bozulur; bu yüzden hızın periyodik olarak izlenmesi gerekir.

Üçüncü bir tuzak da anasayfayı optimize edip diğer sayfaları unutmak. Oysa ziyaretçilerin çoğu arama motorundan doğrudan bir ürün ya da içerik sayfasına girer, anasayfayı hiç görmeden. Ölçümü ve iyileştirmeyi en çok trafik alan sayfalardan başlatmak, emeğin karşılığını en hızlı almanın yolu.

Core Web Vitals, teknik bir hedef gibi görünse de aslında tek bir şeye hizmet ediyor: kullanıcıyı bekletmemek. Hızlı bir site daha çok satar, daha iyi sıralanır ve markanıza güven katar. Sitenizin skorlarını ölçüp önceliklendirilmiş bir hızlandırma planı çıkarmamızı isterseniz, web tasarım ekibimiz performans denetimini de sürecin bir parçası olarak yürütüyor. Sitenizin nerede yavaşladığını birlikte görmek için bize ulaşın.