Web Sitesi Hız Optimizasyonu: Core Web Vitals ve Testler

Site Hızı Neden SEO'yu ve Satışı Etkiler?

Yavaş bir web sitesi, ziyaretçiye içerik göstermeden önce sabrını tüketir. Kullanıcı sayfanın açılmasını beklerken geri tuşuna basar ve arama sonuçlarındaki bir sonraki siteye geçer. Bu kayıp çoğu zaman görünmez; analitik raporlarında yalnızca yüksek hemen çıkma oranı ve beklenenden düşük dönüşüm olarak belirir.

Hızın etkisi üç alanda hissedilir:

• Kullanıcı deneyimi ve dönüşüm: Form dolduran, ürün inceleyen veya teklif isteyen kullanıcı her beklemede bir engelle karşılaşır. E-ticarette ödeme adımındaki yavaşlık doğrudan terk edilen sepet demektir.
• Arama görünürlüğü: Google, sayfa deneyimini değerlendirirken Core Web Vitals metriklerini de kullanır. Hız tek başına sıralamayı belirlemez; ancak benzer kalitedeki içerikler arasında fark yaratabilir.
• Tarama verimliliği: Hızlı yanıt veren sunucular, arama motoru botlarının aynı sürede daha fazla sayfayı taramasını sağlar.

Hız optimizasyonu bir eklenti kurup unutulacak bir iş değildir. Ölçüm, doğru teşhis ve kalıcı mimari kararların birlikte yürütüldüğü bir süreçtir.

Core Web Vitals: LCP, INP ve CLS Nedir?

Core Web Vitals, Google'ın gerçek kullanıcı deneyimini temsil etmek için tanımladığı üç metrikten oluşur:

• LCP (Largest Contentful Paint): Sayfadaki en büyük içerik öğesinin, genellikle ana görselin veya başlık bloğunun, ekranda görünme süresidir. Google iyi eşiği 2,5 saniye olarak tanımlar.
• INP (Interaction to Next Paint): Tıklama, dokunma veya tuş basma gibi etkileşimlere sayfanın ne kadar hızlı görsel yanıt verdiğini ölçer. Daha önce kullanılan FID metriğinin yerini almıştır; iyi eşik 200 milisaniyedir.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken içeriğin beklenmedik biçimde kaymasını ölçer. Okurken metnin aşağı kayması veya tıklamak üzereyken butonun yer değiştirmesi bu metriğe yansır; iyi eşik 0,1'dir.

Google bu değerleri, sayfayı ziyaret eden gerçek kullanıcıların deneyimine göre ve 75. yüzdelik dilim üzerinden değerlendirir. Yani yalnızca hızlı cihazlardaki sonuç değil, yavaş telefonlar ve zayıf mobil bağlantılar da hesaba girer. Ofisteki güçlü bilgisayarda akıcı görünen bir site, sahadaki kullanıcılar için yavaş olabilir.

Bu üç metriğe ek olarak, teşhis için iki yardımcı metrik önemlidir: Sunucunun ilk baytı gönderme süresi (TTFB) ve ilk içeriğin ekrana gelme süresi (FCP). TTFB yüksekse sorun büyük olasılıkla sunucu veya barındırma tarafındadır; TTFB iyi ama LCP kötüyse sorun genellikle ön yüzdeki görsel, font veya script yüklemesindedir.

Performans Testi: PageSpeed, Lighthouse ve Gerçek Kullanıcı Verisi

Performans ölçümünde iki tür veri vardır ve bunları karıştırmak en sık yapılan hatalardan biridir.

Laboratuvar verisi, kontrollü koşullarda tek bir test çalıştırılarak elde edilir. Lighthouse ve tarayıcı geliştirici araçları bu kategoridedir. Sorunun nedenini bulmak ve bir değişikliğin etkisini hemen görmek için idealdir; ancak sonuç test cihazına ve ağ simülasyonuna göre değişir.

Saha verisi, sitenizi ziyaret eden gerçek kullanıcıların tarayıcılarından toplanır. Google'ın Chrome Kullanıcı Deneyimi Raporu (CrUX) bu verinin kaynağıdır ve Google'ın değerlendirmesinde esas alınan veri budur. Yeterli trafiği olmayan sayfalarda saha verisi bulunmayabilir; bu durumda kendi gerçek kullanıcı izleme (RUM) çözümünüzü kurmak faydalıdır.

PageSpeed Insights iki veriyi aynı ekranda gösterir: üst bölümde gerçek kullanıcı verisi, alt bölümde Lighthouse laboratuvar testi. Search Console'daki Core Web Vitals raporu ise sorunlu sayfaları benzer URL grupları halinde listeler. GTmetrix, Pingdom ve WebPageTest gibi araçlar farklı lokasyon ve bağlantı profilleriyle test ederek yükleme şelalesini (waterfall) ayrıntılı gösterir ve hangi dosyanın ne zaman yüklendiğini görmenizi sağlar.

Doğru test pratiği için:

1. Aynı sayfayı günün farklı saatlerinde birkaç kez test edin ve tek bir sonuca göre karar vermeyin.
2. Mobil sonuçları öncelikli izleyin; kullanıcılarınızın önemli bir bölümü mobildeyse asıl deneyim orada yaşanır.
3. Yalnızca ana sayfayı değil; hizmet, ürün, kategori ve ödeme gibi kritik şablonları da test edin.
4. Puanın kendisine değil, metriklere ve önerilerin arkasındaki nedene odaklanın.
5. Her değişiklikten sonra ölçümü tekrarlayın ve sonuçları kayıt altına alın.

Görsel, Font, JavaScript ve Önbellek Optimizasyonu

Görseller

Görseller çoğu sitede sayfa ağırlığının en büyük kalemidir. WebP veya AVIF gibi modern formatlar, benzer görsel kalitede daha küçük dosyalar sağlar. Görseller gösterilecekleri boyutta sunulmalı; mobil cihaza masaüstü boyutunda görsel göndermek yerine cihaza göre farklı boyutlar (responsive images) kullanılmalıdır. Ekranın altında kalan görseller tembel yükleme (lazy loading) ile ertelenebilir; ancak LCP öğesi olan ana görsel asla ertelenmemeli, aksine yüksek öncelikle yüklenmelidir. Tüm görsellere genişlik ve yükseklik tanımlamak, yüklenirken yer ayrılmasını sağlayarak CLS sorununu önler.

Fontlar

Özel yazı tipleri hem ek dosya isteği hem de metnin geç görünmesi anlamına gelir. Kullanılan font ağırlıklarını ve karakter setlerini sınırlamak, fontları mümkünse kendi sunucunuzdan sunmak, kritik fontu önceden yüklemek (preload) ve font yüklenene kadar metni sistem fontuyla göstermek (font-display: swap) temel adımlardır. Yedek font ile asıl font arasındaki boyut farkı da kaymaya yol açabileceğinden ölçüleri birbirine yakın seçilmelidir.

JavaScript ve üçüncü taraf script'ler

INP sorunlarının ana kaynağı, tarayıcının ana iş parçacığını meşgul eden JavaScript'tir. Kullanılmayan kodun kaldırılması, script'lerin ertelenmesi (defer veya async), kodun sayfalara bölünmesi ve uzun görevlerin parçalanması etkileşim hızını iyileştirir. Canlı destek pencereleri, sosyal medya eklentileri, reklam ve takip kodları gibi üçüncü taraf script'ler çoğu zaman fark edilmeden birikir. Her biri için gerçekten gerekli olup olmadığı, ne zaman yüklendiği ve performansa etkisi gözden geçirilmelidir.

CSS ve önbellek

İlk ekranın çizilmesi için gereken kritik CSS öncelikli yüklenmeli, kalan stil dosyaları sonra gelmelidir. HTML, CSS ve JavaScript dosyaları yayına alınmadan önce küçültülmeli (minification), yani boşluk, yorum ve gereksiz karakterlerden arındırılmalıdır; modern derleme araçları bu işlemi otomatik yapar. Görsel, CSS, JavaScript ve font gibi statik dosyalar için uzun süreli tarayıcı önbelleği tanımlanmalı; dosya adına sürüm bilgisi eklenerek güncellemelerde önbelleğin tazelenmesi sağlanmalıdır. İçerik yönetim sistemi kullanan sitelerde sayfa önbelleği, her ziyarette veritabanı sorgusu yapılmasını engelleyerek sunucu yanıt süresini belirgin şekilde kısaltır.

Sunucu, CDN ve Barındırma Seçimi

Ön yüzde yapılan tüm optimizasyonlar, geç yanıt veren bir sunucu karşısında sınırlı kalır. TTFB yüksekse LCP de kaçınılmaz olarak gecikir. Barındırma seçerken değerlendirilecek kriterler şunlardır:

• Kaynak izolasyonu: Kaynakların çok sayıda siteyle paylaşıldığı ucuz paylaşımlı barındırmada, komşu sitelerin yükü sizin hızınızı etkiler. Trafiği ve iş kritikliği yüksek siteler için VPS, yönetilen barındırma veya bulut altyapısı daha öngörülebilir performans sunar.
• Konum: Kullanıcılarınız ağırlıklı olarak Türkiye'deyse sunucunun veya CDN uç noktalarının kullanıcıya yakın olması gecikmeyi azaltır.
• Güncel yazılım yığını: Güncel PHP veya Node.js sürümleri, HTTP/2 ya da HTTP/3 desteği, Brotli veya gzip sıkıştırma.
• Veritabanı ve önbellek: Nesne önbelleği ve optimize edilmiş veritabanı sorguları, dinamik sitelerde en büyük kazancı sağlar.
• İzleme ve destek: Performans sorunlarında sunucu loglarına erişim ve teknik desteğin yanıt hızı.

CDN (içerik dağıtım ağı), statik dosyaları kullanıcıya en yakın noktadan sunarak ana sunucunun yükünü azaltır. Farklı bölgelerden trafik alan siteler için belirgin fayda sağlar; iyi yapılandırılmış bir CDN ayrıca ek bir güvenlik ve DDoS koruma katmanı işlevi görebilir. Yüksek trafikli e-ticaret altyapılarında sunucu ve CDN mimarisi, kampanya dönemlerindeki ani yükleri karşılamak için özellikle önemlidir.

Modern Altyapı: Next.js ve Statik Üretimin Avantajları

Geleneksel içerik yönetim sistemleri her ziyarette sayfayı sunucuda baştan oluşturur. Modern web çatıları (framework) ise sayfaları önceden üreterek veya akıllıca önbelleğe alarak bu yükü büyük ölçüde ortadan kaldırır. React tabanlı Next.js bu yaklaşımın yaygın örneklerindendir:

• Statik üretim (SSG): Sayfalar derleme sırasında HTML olarak üretilir ve CDN üzerinden anında sunulur. Kurumsal siteler, blog ve hizmet sayfaları için idealdir.
• Artımlı yeniden üretim (ISR): Statik sayfalar belirli aralıklarla veya içerik değiştiğinde arka planda yenilenir; hız ile güncellik birlikte sağlanır.
• Sunucu tarafı işleme (SSR): Kişiye özel veya sürekli değişen içerik gerektiren sayfalarda HTML sunucuda üretilir; arama motorları içeriği JavaScript çalıştırmadan görebilir.
• Yerleşik optimizasyonlar: Otomatik kod bölme, görsellerin cihaza göre boyutlandırılıp modern formatta sunulması ve fontların kayma yaratmadan yüklenmesi gibi özellikler çatının içinde gelir.
• Meta veri yönetimi: Sayfa başlıkları, açıklamalar ve sosyal paylaşım etiketleri sayfa bazında kod içinden yönetilir; bu da SEO gereksinimlerinin her sayfada tutarlı uygulanmasını kolaylaştırır.

Modern altyapı sihirli bir çözüm değildir. Gereğinden fazla istemci tarafı JavaScript, kontrolsüz üçüncü taraf script'ler veya optimize edilmemiş içerik, Next.js ile geliştirilmiş bir siteyi de yavaşlatır. Ayrıca bu tür bir yapı, içerik yönetimi için başsız (headless) bir CMS ve geliştirme yetkinliği gerektirir. Yayınlama tarafında Vercel gibi bu çatıya odaklanan platformlar, genel amaçlı bulut altyapıları veya kendi sunucunuzda çalışan bir Node.js ya da konteyner kurulumu seçenekleri vardır; seçim trafik profiline, verinin nerede tutulması gerektiğine ve işletme maliyetine göre yapılmalıdır. Buna karşın hızın öncelikli olduğu, içeriği düzenli ama sık olmayan aralıklarla değişen kurumsal projelerde ciddi bir avantaj sağlar.

Sık Yapılan Hatalar ve Hız Optimizasyonu Kontrol Listesi

Hız çalışmalarında sık karşılaştığımız hatalar:

• Yalnızca PageSpeed puanını hedeflemek ve gerçek kullanıcı verisini göz ardı etmek.
• Birden fazla önbellek ve optimizasyon eklentisini aynı anda kurup birbiriyle çakıştırmak.
• Ana görseli tembel yüklemeye dahil ederek LCP'yi kötüleştirmek.
• Kayan görseller ve video arka planlarla ilk ekranı ağırlaştırmak.
• Etiket yöneticisine her pazarlama aracının kodunu ekleyip düzenli denetlememek.
• Optimizasyonu bir kez yapıp yeni içerik ve eklentilerle hızın zamanla bozulmasını izlememek.

Kontrol listesi:

1. PageSpeed Insights ve Search Console'da mobil Core Web Vitals durumunu kontrol edin.
2. LCP öğesini belirleyin; görselse modern formatta, doğru boyutta ve yüksek öncelikle yükleyin.
3. Tüm görsellere ve gömülü alanlara boyut tanımlayarak CLS'yi önleyin.
4. Kullanılmayan JavaScript ve CSS'i kaldırın, kalanları küçültüp erteleyin.
5. Üçüncü taraf script envanteri çıkarın ve gereksizleri kaldırın.
6. Font sayısını ve ağırlıklarını sınırlayın, font-display ayarını yapın.
7. Tarayıcı önbelleği, sayfa önbelleği ve sıkıştırmayı etkinleştirin.
8. TTFB yüksekse barındırma altyapısını ve veritabanı sorgularını inceleyin.
9. Statik dosyalar için CDN kullanımını değerlendirin.
10. Aylık bir ölçüm rutini oluşturun ve her büyük değişiklikten sonra testi tekrarlayın.

Hız, genel site kalitesinin bir parçasıdır; teknik SEO temelleri ve kurumsal web sitesi tasarımı rehberlerimiz de bu çalışmayı tamamlar.

Sonuç

Hızlı bir web sitesi; doğru ölçüm, görsel ve script disiplini, kaliteli barındırma ve uygun mimarinin birleşimidir. Core Web Vitals metriklerini gerçek kullanıcı verisiyle takip eden ve her değişikliği ölçen bir süreç, hem kullanıcılarınıza hem arama görünürlüğünüze kalıcı katkı sağlar. Sitenizin neden yavaş olduğunu birlikte analiz etmek ve önceliklendirilmiş bir iyileştirme planı çıkarmak için ücretsiz ön görüşme talep edebilirsiniz; web tasarım ve geliştirme ekibimiz mevcut sitenizi optimize edebilir veya modern bir altyapıya taşıyabilir.