Bir sitenin hızı soyut bir ölçü değil; kullanıcının sayfayı görüp tıklamasına kadar geçen süredir. Bu yazıda Core Web Vitals metriklerini (LCP, INP, CLS) temel alarak, uygulanabilir hızlandırma adımlarını sıralı biçimde anlatıyoruz.
Üç metrik ne anlatıyor?
- LCP (Largest Contentful Paint): Ana içeriğin (genellikle büyük görsel veya başlık bloğu) ne zaman göründüğü. Kullanıcı "sayfa açıldı" algısını bu anda oluşturur.
- INP (Interaction to Next Paint): Kullanıcı tıkladığında arayüzün ne kadar hızlı tepki verdiği. Ağır JavaScript bu metriği bozar.
- CLS (Cumulative Layout Shift): Sayfa yüklenirken içeriğin yerinden kayması. Genellikle ölçüsüz görseller ve sonradan yüklenen banner'lardan kaynaklanır.
1) Görselleri doğru sunmak
Görsel optimizasyonu en yüksek etkili adımdır. Uygulanacaklar:
- Görselleri gerçekten gösterilecek genişlikte kaydetmek (2000 px'lik görselin 400 px alanda gösterilmesi gereksiz yüktür).
- WebP veya AVIF formatına dönüştürmek; JPEG/PNG ise sıkıştırmak.
widthveheightniteliklerini yazmak veya CSS ile oran tanımlamak (CLS için zorunlu).- İlk ekrandaki ana görseli öncelikli (
fetchpriority="high"), ekran dışındakileriloading="lazy"ile yüklemek. - Arka plan görsellerinde CSS yerine gerçek
<img>etiketi tercih etmek; böylece önceliklendirme kontrol edilebilir.
2) CSS'i kritik ve kritik olmayan olarak ayırmak
İlk ekranda görünen bölümün stilleri küçük bir kritik CSS bloğu olarak sayfanın içine gömülür; kalan stil dosyası ertelenir veya normal şekilde yüklenir. Böylece içerik ilk saniyede doğru düzende görünür, kullanıcı boş bir ekranla karşılaşmaz.
3) JavaScript'i azaltmak ve ertelemek
Kullanılmayan kütüphaneleri kaldırmak, tek iş için onlarca kilobayt indirmekten daha etkilidir. Kalan kodlar için:
- Script etiketlerinde
deferkullanmak, - Üçüncü taraf araçları (harita, video, sohbet) tıklama sonrası yüklemek,
- Olay dinleyicilerini doğru kapsamda tanımlamak (her kaydırmada çalışan işlevlerden kaçınmak),
- Animasyonları CSS ile yapmak yerine gereksiz DOM değişimlerinden kaçınmak.
Bu maddeler doğrudan INP metriğini iyileştirir.
4) Yazı tipleri ve üçüncü taraf istekler
Her harici font ve script yeni bir bağlantı kurulumu demektir. Sistem yazı tipi ailesi kullanmak, görsel kimliği bozmadan en hızlı çözümdür. Özel font zorunluysa: font-display: swap, yalnızca kullanılan ağırlıkların yüklenmesi ve gerekirse preload uygulanmalı.
5) Sunucu ve önbellek ayarları
- GZIP/Brotli sıkıştırma açık olmalı.
- Stil, script ve görseller için uzun süreli önbellek (
max-age+ immutable) tanımlanmalı; dosya içeriği değiştiğinde adres versiyonlanmalı (style.css?v=...). - HTML için önbellek kapatılmalı veya çok kısa tutulmalı.
- Veritabanı sorgularında indeksler kullanılmalı; listeleme sayfalarında sayfalama uygulanmalı.
- Sunucu PHP sürümü güncel tutulmalı; eski sürümler hem yavaş hem güvenlik riskidir.
6) Ölçüm ve doğrulama
İyileştirme yapmadan önce mevcut durumu ölçün, sonra değişiklikleri tek tek uygulayın. Alan verisi (gerçek kullanıcı ölçümleri) ile laboratuvar ölçümü farklı sonuç verebilir; ikisini birlikte değerlendirmek gerekir. Ölçüm için tarayıcı geliştirici araçları, Lighthouse ve alan verisi raporları yeterlidir. Mobil ölçümleri masaüstü sonuçlarından ayrı değerlendirin; mobilde ağ gecikmesi ve işlemci gücü sonucu belirgin biçimde değiştirir.
Sık yapılan hatalar
- Önbellek eklentisi kurup görselleri optimize etmemek: en büyük yük görsellerdir.
- Tek seferde tüm sayfaları "optimize etmek" ve hangi değişikliğin işe yaradığını bilmemek.
- Hız puanını hedefleyip kullanıcı deneyimini bozmak (örneğin kritik içeriği gizlemek).
- Görselleri CSS ile küçültüp dosya boyutunu düşürmemek.
Projede nasıl uyguluyoruz?
Kurduğumuz sitelerde harici kütüphane kullanılmaması, ikonların satır içi SVG olması, görsellerin lazy loading ve ölçü nitelikleriyle sunulması, kritik CSS'in sayfaya gömülmesi ve varlıkların sürümle önbelleklenmesi standarttır. Bu yaklaşımın performans ve SEO tarafını SEOSEO hizmeti, tasarım tarafını web tasarım sayfamızda anlattık. Sitenizin mevcut hızını ölçmek ve iyileştirme listesi çıkarmak için iletişim formundan yazabilirsiniz.