Bir siteyi ne kadar güzel tasarlarsanız tasarlayın, açılması üç saniyeyi geçiyorsa ziyaretçinin önemli bir kısmı o güzelliği hiç görmez. Hız; lüks değil, tasarımın ta kendisidir. Hem tasarlayan hem kodlayan bir web tasarım uzmanı olarak siteleri gerçekte neyin yavaşlattığını ve reçetesini yazıyorum.

3 saniye kuralı gerçek mi?

Gerçek — hatta iyimser. Mobil kullanıcı beklemeye reklam izlemekten daha az tahammüllüdür; yüklenme uzadıkça hemen çıkma oranı katlanır. Üstelik Google, sayfa deneyimini sıralama sinyali olarak kullanır: yavaş site hem geleni kaçırır hem gelecek olanı — çifte kayıp.

Siteyi gerçekte ne yavaşlatır?

  • Dev görseller: Telefon fotoğrafı 5 MB'tır; sitede 150 KB'lık WebP olarak durmalıdır. Vakaların yarısında tek suçlu budur.
  • Eklenti/tema şişkinliği: Kullanılmayan kaydırıcılar, üç ayrı ikon seti, her sayfaya yüklenen devasa scriptler.
  • Ucuz paylaşımlı sunucu: Kod ne kadar iyi olursa olsun, aşırı dolu sunucuda ilk bayt geç gelir.
  • Önbelleksiz dinamik sayfalar: Değişmeyen içeriği her ziyaretçi için yeniden hesaplamak israftır.

PHP tarafında hız

Uygulama tarafında en büyük kazanç önbelleklemeden gelir. Basit bir örnek:

// Nadiren değişen veriyi her istekte DB'den çekme
$menu = $cache->remember('menu', 3600, function () {
    return Menu::aktifler();   // saatte 1 kez çalışır
});

Buna sorgu optimizasyonu, OPcache ve HTTP önbellek başlıkları eklenince PHP siteleri milisaniyelerle konuşur — PHP'nin hızı hakkındaki önyargı, çoğu zaman kötü yapılandırma hikâyesidir.

Görselleri ehlileştirin

Reçetenin en ucuz kalemi: tüm görselleri WebP'ye çevirin, gerçek gösterim boyutunda sunun, ekran dışındakileri lazy-load ile erteleyin. Bu üçü çoğu sitede sayfa boyutunu yarıdan fazla küçültür.

Hız bütçesi: pratik hedefler

  1. Sayfa toplamı ≤ 1 MB
  2. LCP (ana içerik) ≤ 2,5 sn
  3. İstek sayısı ≤ 50
  4. Görsel başına ≤ 200 KB

Bu hedefler benim teslim ettiğim her sitede standarttır. Kendi sitenizin nerede durduğunu merak ediyorsanız bir bağlantı gönderin; teknik SEO taramasıyla birlikte hız karnesini de çıkaralım. Devamı için: teknik SEO kontrol listesi.