Hafif Kod logosu

Yazılar · 5/7

Kod optimizasyonu ve frontend performansı notları.

  1. INP Nedir? Etkileşim Gecikmesi Nasıl Düşürülür?

    Bir sayfa hızlı açılmış olabilir. Kullanıcı filtreye bastığında, menüyü dokunduğunda ya da sekme değiştirdiğinde kısa bir sessizlik oluşuyorsa hissedilen kalite hemen düşer. INP, bu sessiz boşluğun ne kadar sürdüğünü anlamaya yarar. Ölçtüğü şey yalnızca JavaScript süresi değil; girişten sonra arayüzün görünür tepki verene kadar geçtiği toplam yoldur.

  2. TTFB Nedir? Sunucu Yanıt Süresi Nasıl İyileştirilir?

    Bir sayfa çoğu zaman tarayıcıda değil, daha HTML görünmeden önce ağırlaşır. Kullanıcı isteği gönderir; sunucu uzun süre sessiz kalır; ilk byte geç gelir. O birkaç yüz milisaniye bazen bütün açılış zincirini yavaşlatır. TTFB dediğimiz şey tam olarak bu sessiz beklemenin ne kadar sürdüğünü anlamaya yarar.

  3. Bundle Analizi Nasıl Yapılır? Hangi Paket Şişiriyor?

    Proje bir süre sonra ağırlaşır; ama hangi bağımlılığın gerçekten sorun çıkardığı çoğu ekipte net görünmez. Build büyür, ilk yük yavaşlar, ayrıştırma süresi uzar. Sonra herkes genel laflara döner: paket çok büyümüş, biraz temizlemek lazım. Bundle analizi tam bu belirsizliği dağıtmak için yapılır. Amaç grafik seyretmek değil, hangi kodun neden ilk pakete girdiğini anlamaktır.

  4. Tree Shaking Nedir? Kullanılmayan Kod Nasıl Düşer?

    Aynı projede hem modern bundler kullanıp hem gereksiz kod taşımak sandığınızdan daha yaygındır. Bunun nedeni çoğu zaman araç eksikliği değil, beklenti fazlalığıdır. Tree shaking tek başına tüm yükü temizlemez; yalnızca doğru koşullar oluştuğunda gerçekten kullanılmayan modül parçalarını build çıktısından çıkarır. Koşullar yanlışsa paket büyümeye devam eder ve ekip niye düşmediğini anlamakta zorlanır.

  5. Dynamic Import Nedir? Ne Zaman Kullanılmalı?

    Aynı modülü herkes için ilk pakete koymak çoğu projede alışkanlık haline gelir. Sonra ekip paketin büyüdüğünü fark eder ve çözüm olarak “dinamik import yapalım” der. Bu karar bazen çok işe yarar, bazen de yalnızca beklemeyi başka bir ana taşır. Dynamic import, kodu küçültmekten önce yüklenme zamanını değiştirme kararıdır. Bu fark anlaşılmadan yapılan geçişler performans kazancı kadar yeni gecikme de üretebilir.

  6. Critical CSS Nedir? İlk Boyama Süresi Nasıl Kısalır?

    Bir sayfanın tüm stil dosyası hazır olmadan anlamlı görünmesini istiyorsanız, tarayıcıya önce gerçekten gerekli olan küçük stil çekirdeğini vermeniz gerekir. Critical CSS yaklaşımı tam olarak bunu yapar. Ama bu teknik çoğu projede yanlış anlaşılır: herkes için aynı birkaç kuralı satır içi yazıp ilk boyamayı hızlandıracağını sanmak kolaydır. Oysa kritik olan şey “stil dosyasını küçültmek” değil, ilk ekranın hangi CSS olmadan düzgün görünemeyeceğini doğru ayırmaktır.

  7. Preload ve Prefetch Farkı Nedir?

    İkisi de tarayıcıya “bu kaynağa dikkat et” der. Ama dikkat etme biçimleri aynı değildir. Preload, şu anda lazım olacak kaynağı öne çeker. Prefetch ise biraz sonra lazım olabilecek şeyi boş anı kollayarak hazırlamaya çalışır. Bu ayrım küçük görünür; ama yanlış kurulduğunda ağ önceliklerini bozabilir, doğru kurulduğunda ise ilk görünüm ya da sonraki gezinti hissini ciddi biçimde iyileştirebilir.

  8. Defer ve Async Arasındaki Fark Nedir?

    Aynı script dosyasını iki farklı özellikle çağırabilirsiniz ve sayfanın hissi ciddi biçimde değişebilir. Bunun nedeni dosyanın kendisi değil, tarayıcının o dosyayla kurduğu zamansal ilişkidir. Defer ve async bu zaman çizelgesinde ayrılır. İkisi de “bu scripti HTML akışına biraz daha az zarar verecek şekilde yükle” gibi görünür; ama çalışma anı, sıra davranışı ve diğer dosyalarla ilişkileri aynı değildir.

  9. Font Yükleme Optimizasyonu Nasıl Yapılır?

    Sayfa çoğu zaman görselden değil, metinden okunur. Ama font yükleme tarafı yanlış kurulduğunda tam da o metin ya geç görünür ya da önce başka, sonra başka biçimde çizilir. Kullanıcı bunun adını bilmez; yine de hisseder. Başlık sanki geç oturur, satırlar hafif zıplar, ilk görünüm tamamlanmamış gibi durur. Font optimizasyonu bu yüzden yalnızca dosya boyutu işi değil, görünür metnin ritmini yönetme işidir.

  10. Google Fonts Performansı Nasıl İyileştirilir?

    Google Fonts kullanan birçok sitede asıl sorun font tercihi değil, fontun tarayıcıya ne zaman ve nasıl tanıtıldığıdır. Aynı aile, doğru kurulumda neredeyse görünmeden yüklenebilir; yanlış kurulumda ise ilk başlığı geciktirir, fallback metni zıplatır ve gereksiz varyasyonlarla ağ sırasını doldurur. Bu yüzden konu “Google Fonts yavaş mı” sorusundan çok, “Google Fonts kullanıyorsanız neyi gerçekten düzeltmelisiniz” sorusuyla ele alınmalıdır.

  11. Self-Hosted Font Kullanmak Daha mı Hızlı?

    Self-hosted font kullanmak her durumda CDN'den daha hızlıdır düşüncesi, web performansı konuşmalarının yaygın yanılgılarından biridir. Gerçek biraz daha karmaşık: doğru koşullarda self-hosting belirgin bir avantaj sağlar, ancak yanlış yapılandırılmış bir self-hosting kurulumu Google Fonts'tan bile daha yavaş çalışabilir. Belirleyici olan yaklaşımın kendisi değil, arkasındaki yapılandırmadır.

  12. JavaScript Parse ve Execute Maliyeti Nedir?

    JavaScript dosyasını küçültmek ve sıkıştırarak sunmak performansın tek boyutu değildir. Ağ üzerinden 80 KB olarak gelen bir dosya, tarayıcı belleğinde ayrıştırılıp çalıştırılmaya hazır hale gelirken çok daha uzun süre harcayabilir. İndirme süresi ile işleme maliyetini aynı sorun olarak ele almak, optimizasyon çabalarını yanlış yöne taşır: ağ hızını iyileştirirsiniz ama sayfa yine yavaş hissettirmeye devam eder.

  13. Main Thread Blocking Nedir?

    Butona tıklıyorsunuz, hiçbir şey olmuyor. Yarım saniye sonra — bazen daha uzun — sayfa tepki veriyor. Ekran donmuş gibi görünmüyor, tarayıcı çökmüyor; ama o arada hiçbir şey yapamazsınız. Bu deneyim, main thread blocking'in en yaygın belirtisidir ve çoğu kullanıcı neyin döndüğünü bilmeden hisseder.

  14. Web Worker ile Main Thread'i Boşaltmak

    Main thread tek şeritli bir yol gibi çalışır. Tüm JavaScript yürütme, DOM güncellemeleri, stil hesaplamaları ve kullanıcı etkileşimleri bu tek şeritte sıraya girer. Bir işlem uzadığında arkadaki her şey beklemek zorundadır; kullanıcı tıklar, tarayıcı duyamaz. Bu, tarayıcı mimarisinin temel bir özelliğidir ve devre dışı bırakılamaz.

  15. Lighthouse ile Hangi Sorun Gerçekten Öncelikli?

    Çoğu ekip aynı rutine girer: Lighthouse'u açar, puanı görür, kırmızı olanları düzeltmeye çalışır ve skoru izler. Hedefe dönüşen bu sayı, zamanla gerçek sorunun önüne geçer. Oysa Lighthouse puanı bir performans ölçütü değildir — birkaç metriğin, belirli ağırlıklarla hesaplanmış ortalamasıdır. 74'ten 82'ye çıkmak kullanıcının fark ettiği bir şey olmayabilir; 61'de takılı kalan bir sayfa ise gerçekte son derece hızlı hissettiriyor olabilir. Fark, neyin ağırlıklı olduğunda ve o ağırlıkların hangi koşulda ölçüldüğünde gizlidir.