Web Performansı İçin 3 Saniye Kuralı

Üç saniyeniz var.

Ondan sonra kullanıcılarınız gider.

Google araştırmaları, mobil kullanıcıların %53'ünün, bir sitenin yüklenmesi 3 saniyeden uzun sürerse siteyi terk ettiğini gösteriyor.

Yavaş siteler size para kaybettirir. Mobil yükleme sürelerini 0,1 saniye iyileştirmek, perakende dönüşümlerini %8,4 artırır.

Performans sadece teknik bir metrik değildir. Bir iş metriğidir.

Kazanmak için Core Web Vitals kavramlarını anlamalısınız:

• LCP (Largest Contentful Paint): Kullanıcıların ana içeriği ne kadar hızlı gördüğü. 2,5 saniyenin altını hedefleyin. • INP (Interaction to Next Paint): Sayfanın tıklamalara ne kadar hızlı tepki verdiği. 200 ms'nin altını hedefleyin. • CLS (Cumulative Layout Shift): Sayfanın ne kadar kararlı olduğu. 0,1'in altını hedefleyin.

Tahmin etmeyi bırakın ve optimize etmeye başlayın. İşte zamana karşı kazanmanın yolları:

JavaScript Optimizasyonu

• Daha az kod gönderin. Kodu yalnızca gerektiğinde yüklemek için dinamik içe aktarmaları (dynamic imports) kullanın. • Tree-shaking kullanın. Gereksiz yüklerden kurtulmak için CommonJS'den ES modüllerine geçiş yapın. • Ağır işleri Web Worker'lara taşıyın. Ana iş parçacığını (main thread) kullanıcı girdileri için boş tutun. • defer veya async kullanın. Betiklerin (scripts) HTML ayrıştırmanızı (parsing) engellemesine izin vermeyi bırakın.

CSS ve İşleme (Rendering)

• Kritik CSS'i satır içi (inline) olarak ekleyin. Öncelikle yalnızca ekranın üst kısmında (above the fold) görünenleri yükleyin. • Layout thrashing'den kaçının. Sürekli yeniden hesaplamaları önlemek için okuma ve yazma işlemlerinizi gruplandırın (batch). • transform ve opacity ile animasyon yapın. Bunlar GPU kullanır ve düzen kaymalarını (layout shifts) önler. • content-visibility: auto kullanın. Ekran dışında kalan içerikler için işleme (rendering) işlemini atlayın.

Görsel Stratejisi

• Modern formatlar kullanın. WebP ve AVIF, JPEG'den çok daha küçüktür. • Genişlik (width) ve yükseklik (height) özniteliklerini belirleyin. Bu, düzen kaymalarını (CLS) önler. • Ekranın altında kalan görseller için lazy-load kullanın. LCP hero görseliniz için lazy-load kullanmayın. • srcset kullanın. Mobil kullanıcılara daha küçük görseller sunun.

Ağ ve Önbelleğe Alma (Caching)

• Bir CDN kullanın. Gecikmeyi (latency) azaltmak için içeriğinizi kullanıcılarınıza yaklaştırın. • Sıkıştırmayı etkinleştirin. Dosya boyutlarını küçültmek için Brotli veya Zstandard kullanın. • Agresif bir şekilde önbelleğe alın. Hash'lenmiş varlıklar (assets) için değişmez (immutable) önbellek başlıkları kullanın. • bfcache'in çalışır durumda kalmasını sağlayın. Anında geri/ileri navigasyonu sağlamak için unload olayını (event) kullanmaktan kaçının.

Hedef basit: işten kaçının.

En hızlı kod, kullanıcılarınızın asla indirmediği koddur. En hızlı istek, tarayıcının asla yapmak zorunda kalmadığı istektir.

Kaynak: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1