Web Sitesi Hız Optimizasyonu Nasıl Yapılır?

Web sitesi hız optimizasyonu, yalnızca bir test aracında yüksek puan almak için yapılmaz. Kullanıcı ana içeriği ne kadar sürede görüyor, butona bastığında arayüz ne kadar hızlı tepki veriyor ve sayfa açılırken öğeler yer değiştiriyor mu? Core Web Vitals bu üç deneyimi LCP, INP ve CLS metrikleriyle ölçer.

İyi kabul edilen güncel hedefler çoğu gerçek kullanıcı ziyareti için LCP değerinin 2,5 saniye veya altında, INP değerinin 200 milisaniye veya altında ve CLS değerinin 0,1 veya altında olmasıdır. Bu eşikler tek bir laboratuvar testine değil, mobil ve masaüstünde ziyaretlerin yüzde 75’lik dilimine göre değerlendirilir.

Önce doğru veriyi ayırın

PageSpeed Insights laboratuvar verisi belirli cihaz ve ağ koşulunda yapılan anlık testi, Search Console ise yeterli trafik varsa gerçek Chrome kullanıcılarının son dönem deneyimini gösterir. Laboratuvar verisi hata bulmak; saha verisi gerçek kullanıcı etkisini izlemek için kullanılır. Trafiği düşük sitelerde Search Console önemli web verileri raporunda veri bulunmaması teknik sorun olduğu anlamına gelmez.

LCP: ana içeriğin görünme süresini kısaltın

LCP öğesi çoğu kurumsal sitede ilk ekrandaki büyük görsel veya ana başlıktır. Ana görsel gereğinden büyükse, CSS geç yükleniyorsa ya da sunucu HTML yanıtını yavaş veriyorsa LCP uzar.

• İlk ekran görselini gerçek görüntüleme ölçüsüne yakın boyutta üretin.
• WebP veya AVIF gibi modern formatları kullanın.
• LCP görselini lazy load yapmayın; gerekirse yüksek öncelikle yükleyin.
• Kritik olmayan slider ve galeri görsellerini gecikmeli yükleyin.
• Sunucu yanıt süresi, önbellek ve veritabanı sorgularını ölçün.

INP: etkileşim gecikmesini azaltın

INP, kullanıcının tıklama veya dokunma işleminden sonraki görsel tepkiyi değerlendirir. Büyük JavaScript paketleri, aynı anda çalışan animasyonlar ve uzun görevler ana iş parçacığını meşgul eder. Menü, form ve slider kodu yalnızca gerektiği sayfalarda çalışmalı; olay dinleyicilerinde pahalı DOM işlemleri tekrar edilmemelidir.

Bir buton tıklandığında yoğun işlem gerekiyorsa kullanıcıya anında yükleniyor durumu gösterin ve işi küçük parçalara bölün. Eski eklentileri yalnızca dosya boyutuna bakarak değil, çalışma sırasında oluşturdukları görevler üzerinden değerlendirin.

CLS: sayfa kaymalarını önleyin

Görsel, video ve iframe öğelerine genişlik ve yükseklik verilmediğinde tarayıcı içerik için önceden alan ayıramaz. Font değişimi, sonradan eklenen çerez veya kampanya şeridi ve yüksekliği bilinmeyen dinamik alanlar da kaymaya neden olabilir.

• Görsellere doğal width ve height değerlerini ekleyin.
• Harita ve video alanları için sabit en-boy oranı kullanın.
• Üst alana sonradan içerik itmek yerine ayrılmış yer kullanın.
• Font dosyalarını sınırlayın ve uygun font-display davranışı seçin.

CSS, JavaScript ve font bütçesi oluşturun

Kullanılmayan büyük stil dosyaları ve her sayfada yüklenen eklentiler toplam aktarımı artırır. Önce gerçekten yüklenen dosyaları belirleyin; eski fakat HTML tarafından çağrılmayan dosyaları silmek performansı değiştirmez. Kritik dosyalarda sıkıştırma, uzun süreli tarayıcı önbelleği ve sürüm parametresi birlikte kullanılmalıdır.

Yayın öncesi test sırası

1. Ana sayfa, hizmet, blog ve iletişim şablonlarından birer örnek seçin.
2. Mobil görünümde yavaş ağ ve orta seviye cihaz koşulunu test edin.
3. LCP öğesini ve en uzun JavaScript görevlerini belirleyin.
4. Görsel ölçülerini, önceliklerini ve lazy load kullanımını doğrulayın.
5. Form, menü, slider ve WhatsApp aksiyonlarının çalıştığını kontrol edin.
6. Değişiklikten sonra aynı koşullarda yeniden ölçün.

Hız tek seferlik temizlik değildir. Yeni görsel, izleme kodu ve eklenti eklendikçe bütçe yeniden kontrol edilmelidir. Performansın tasarım ve teknik SEO ile birlikte ele alındığı projeler için kurumsal web tasarım hizmetini inceleyebilirsiniz.