Web Performansı ve Optimizasyon nedir?

Bu konuda neler öğreneceksin?

• Ağ şelalesi ve kritik istek zinciri analizini yaparak gecikmenin kaynağını belirler.
• En Büyük İçerik Boyaması, Kümelenmiş Düzen Kayması ve Etkileşim Sonrası Gecikme ölçümlerini yorumlar.
• Önbellek başlıkları ve doğrulama mekanizmalarını kullanarak tekrar indirmeleri önler.
• Sıkıştırma, küçültme, kod parçalama ve gecikmeli yükleme tekniklerini uygular.
• Görsel, yazı tipi ve betik varlıklarını boyut ve öncelik açısından optimize eder.

Anahtar fikirler

• Performans çalışması daima ölçümle başlar, tahminle değil.
• Ağ şelalesindeki en uzun çubuk, gecikmenin en büyük bölümünü gösterir.
• Doğrulayıcı bilgilerle yapılan koşullu istek, gövdeyi yeniden indirtmeden tazelik denetler.
• Parfme adıyla sürümlenen varlıklar uzun süreli önbellekten sunulabilir.
• Görsel ve yazı tipi dosyaları genellikle bir sayfanın toplam ağırlığının büyük bölümünü oluşturur.
• Gecikmeli yükleme, ilk ekrandaki görseller için kullanılmaz; ekrana gelene kadar bekletir.

Konunun özeti

İndirme boyutu önbellek ve doğrulama yönergeleriyle, oran ise sıkıştırma ve küçültme ile azaltılır. Örneğin 4 MB'lık bir görsel yüzde 72 sıkıştırma ile 4000 × 0,28 = 1120 KB olur; 40 kaynaklı bir sayfada 32 kaynak önbellekten geliyorsa isabet oranı 32 ÷ 40 = 0,8 yani yüzde 80 bulunur. Üç kaynak sırayla ve her biri 80 ms gecikmeyle isteniyorsa toplam gecikme 3 × 80 = 240 ms olur. Kritik olmayan stiller ertelenir, betikler ayrıştırmayı bloklamayacak biçimde planlanır, görseller gecikmeli yüklenir; böylece ilk boya süresi kısalır ve düzen kayması azalır.

Sık yapılan hatalar

• Ölçmeden optimize etmek: Hangi kaynağın gecikmeye yol açtığı bilinmeden yapılan değişiklikler çoğu zaman işe yaramaz veya başka bir kaynağa zarar verir.
• Küçültmeyi sıkıştırmayla aynı saymak: Küçültme kaynak kodu temizler, sıkıştırma ise aktarım sırasında gövdeyi küçültür; ikisi farklı katmanlarda çalışır.
• Gecikmeli yüklemeyi her yere koymak: İlk ekranda görünen görseller geciktirildiğinde ilk boya gecikir, bu yüzden yalnızca ekran dışı içerik için kullanılmalıdır.

İlgili konular

• HTML Yapısı
• CSS ile Biçimlendirme
• Bulut Bilişim ve Sanallaştırma
• Yapay Zekâ Temelleri
• JS Temelleri