Sayfa hızı: Core Web Vitals metriklerini doğru okumak

Sayfa hızı tartışmaları çoğu zaman bir test aracının verdiği puan etrafında dönüyor. Oysa arama motorlarının kullandığı veri, gerçek kullanıcıların tarayıcılarından toplanan alan verisidir. Bu ayrımı anlamak, doğru yere müdahale etmenin ilk şartıdır.

Üç metrik, üç farklı sorun

LCP — En büyük içerikli boyama

Sayfanın görünür alanındaki en büyük öğenin ne zaman çizildiğini ölçer. Genellikle bu öğe hero görseli veya büyük bir başlıktır. LCP'yi bozan tipik sebepler: optimize edilmemiş büyük görseller, sunucunun ilk baytı geç göndermesi (TTFB) ve görselin geç keşfedilmesi.

Etkili müdahaleler: hero görselini uygun boyutta ve modern formatta (WebP/AVIF) sunmak, bu görsele tembel yükleme uygulamamak, fetchpriority="high" ile öncelik vermek ve sunucu tarafı önbelleği devreye almak.

INP — Etkileşimden sonraki boyama

Kullanıcı bir butona tıkladığında arayüzün ne kadar sürede tepki verdiğini ölçer. Yavaşlığın kaynağı neredeyse her zaman ana iş parçacığını meşgul eden JavaScript'tir. Ağır bir slider kütüphanesi, gereksiz bir animasyon çatısı veya her tuş vuruşunda çalışan bir arama kodu INP'yi bozar.

Etkili müdahaleler: kullanılmayan kütüphaneleri kaldırmak, uzun işleri parçalara bölmek, arama alanlarında geciktirme (debounce) uygulamak ve üçüncü taraf betiklerini ertelemek.

CLS — Kümülatif düzen kayması

Sayfa yüklenirken içeriğin zıplamasını ölçer. En yaygın sebebi, boyutu belirtilmemiş görseller ve sonradan yüklenen reklam/bildirim alanlarıdır.

Etkili müdahaleler: her görsele width ve height vermek, reklam alanlarına sabit yükseklik ayırmak, yazı tiplerini font-display: swap ile yüklerken yedek font ölçülerini yakın tutmak.

Puanı değil, dağılımı okuyun

Tek bir test sonucu, tek bir cihaz ve tek bir bağlantı hızını temsil eder. Gerçek kullanıcı verisinde önemli olan, kullanıcıların yüzde kaçının "iyi" eşiğin altında kaldığıdır. Ortalama değer, birkaç çok yavaş oturumu gizleyebilir. Bu nedenle 75. yüzdelik dilime bakmak standarttır.

Öncelik sırası

1. Sunucu yanıt süresi: Önbellek yoksa diğer tüm iyileştirmeler sınırlı kalır. Sayfa önbelleği ve veritabanı sorgu optimizasyonu ilk adımdır.
2. Görseller: Çoğu sitede toplam ağırlığın yarısından fazlası görsellerdir. Boyut ve format düzeltmesi en hızlı kazanımdır.
3. JavaScript: Kullanılmayan kod kaldırılır, kalan kod ertelenir.
4. Yazı tipleri: Sistem fontu kullanmak mümkün değilse, alt küme (subset) oluşturup önceden yükleyin.
5. Üçüncü taraf betikler: Analitik, sohbet ve reklam kodları en sona bırakılır; gerçekten gerekli olanlar tutulur.

Sık yapılan iki hata

Her şeyi tembel yüklemek: Görünür alandaki hero görselini tembel yüklerseniz LCP'yi kötüleştirirsiniz. Tembel yükleme yalnızca ekranın altındaki içerikler içindir.

Minify'a gereğinden fazla anlam yüklemek: 20 KB'lık bir CSS'i sıkıştırmak, 2 MB'lık bir görseli düzeltmenin yanında önemsiz kalır. Önce büyük olanı düzeltin.

Ölçmeden başlamayın

İyileştirmeye başlamadan önce mevcut değerleri kaydedin. Her müdahaleden sonra aynı koşullarda ölçün. Aksi hâlde neyin işe yaradığını değil, neyin yapıldığını konuşursunuz.