Web Sitesi Hızı: Core Web Vitals’ı Anlamak ve Düzeltmek

Hız, teknik bir merak değil satış konusu. Google sayfa deneyimini üç ölçüyle takip ediyor ve bu ölçüler aynı zamanda ziyaretçinin sabrını tarif ediyor. İyi haber: üçünün de bilinen çözümleri var.

1. 1

   Önce Ölçün, Sonra Değiştirin

   Tahminle hız optimizasyonu yapılmaz. İki kaynağa bakmak yeterli: gerçek kullanıcı verisi ve laboratuvar testi.

   • Search Console’daki Core Web Vitals raporu gerçek ziyaretçileri gösterir.
   • PageSpeed Insights tek sayfayı ayrıntılı test eder.
   • Mobil sonuçları esas alın; trafiğin çoğu telefondan geliyor.
2. 2

   LCP: En Büyük İçerik 2,5 Saniyede Gelsin

   LCP, ekranın en büyük parçasının ne zaman göründüğünü ölçer. Genellikle hero görseli ya da başlıktır.

   • En büyük görseli tembel yükleme dışında tutun, öncelikli yükleyin.
   • Görselleri WebP ya da AVIF olarak, ekran genişliğine uygun boyutlarda sunun.
   • Sunucu yanıt süresini ve yönlendirme zincirlerini kısaltın.
3. 3

   INP: Tıklamaya 200 Milisaniyede Cevap Verin

   INP, kullanıcının tıklamasına sayfanın ne kadar hızlı tepki verdiğini ölçer. Suçlu genellikle ana iş parçacığını meşgul eden JavaScript’tir.

   • Kullanılmayan komut dosyalarını kaldırın.
   • Üçüncü taraf kodlarını geciktirerek yükleyin.
   • Uzun süren işleri parçalara bölün.
4. 4

   CLS: Sayfa Zıplamasın

   CLS, yüklenirken kayan içeriği ölçer. Yanlış tıklamaların ve “nereye gitti bu buton” hissinin sebebi budur.

   • Görsel ve videolara genişlik-yükseklik ya da en-boy oranı verin.
   • Reklam ve gömülü içerik için yer tutucu ayırın.
   • Yazı tiplerini değişimde metni gizlemeyecek şekilde yükleyin.
5. 5

   Görselleri Ciddiye Alın

   Çoğu sitede indirilen baytların en büyük kısmı görsellerdir. En hızlı kazanç burada.

   • Her görseli birkaç genişlikte üretip srcset ile sunun.
   • Kalite ayarını 80 civarında tutun; gözle fark edilmez, boyut yarıya iner.
   • Ekranda görünmeyen görselleri tembel yükleyin.
6. 6

   Yazı Tipi ve Önbellek

   Yazı tipleri ve önbellek ayarları, ikinci ziyareti neredeyse anında açar.

   • Yazı tiplerini önceden bağlanarak (preconnect) çekin, gerekli ağırlıkları yükleyin.
   • Statik dosyalara uzun önbellek süresi ve sürüm adı verin.
   • Ziyaretçiye coğrafi olarak yakın bir dağıtım ağı kullanın.
7. 7

   Üçüncü Taraf Kodlarını Sınırlayın

   Her yeni piksel, sohbet kutusu ve widget hızdan bir parça alır. Karşılığını vermeyeni taşımayın.

   • Hangi kodun ne iş yaptığını listeleyin, sahibini yazın.
   • Ölçüm yapmayan araçları kaldırın.
   • Ödeme sayfalarında üçüncü taraf kod bulundurmayın.