Hafif Kod logosu

Yazılar · 2/7

Kod optimizasyonu ve frontend performansı notları.

  1. SvelteKit ve Next.js Bundle Boyutu: Gerçek Fark Nedir?

    SvelteKit derleme zamanında runtime bırakmaz, Next.js ise React runtime'ını her zaman taşır. Bu fark küçük projelerde önemsiz kalırken içerik ağırlıklı sitelerde 70-100 kB gzip farkına dönüşebilir. Hydration süresi, cache davranışı ve proje karmaşıklığı bu denklemi birlikte şekillendiriyor.

  2. Astro ile İçerik Sitelerinde Bundle Boyutunu Sıfıra Yaklaştırmak

    Astro, içerik sitelerinde varsayılan olarak sıfır JavaScript gönderir. Island mimarisi ve client: direktifleri sayesinde React, Vue veya Svelte bileşenleri yalnızca gerçekten gerektiğinde tarayıcıda çalışır; sayfanın geri kalanı saf HTML olarak kalır.

  3. SSR, SSG ve ISR: Hangisi Hangi Durumda Tercih Edilmeli?

    SSR, SSG ve ISR arasındaki seçim içerik güncelleme sıklığına, kişiselleştirme ihtiyacına ve TTFB önceliğine göre şekillenir. Üç stratejiyi doğru bağlamda kullanmak, hem performansı hem sunucu maliyetini etkiler.

  4. Island Architecture Nedir? Hangi Projelerde Uygulanabilir?

    Island architecture, sayfanın yalnızca etkileşimli bileşenlerini JavaScript ile canlandırır; statik içerik hydration maliyeti taşımaz. Astro ve Fresh'in bu modeli nasıl uyguladığı, hangi projelerde kazanım sağladığı ve ne zaman SPA'nın daha doğru tercih olduğu.

  5. Container Queries ile Responsive Tasarımda Performans

    Container queries, viewport yerine bileşenin bulunduğu alan genişliğini temel alır. JavaScript resize dinleyicisinin getirdiği layout thrashing maliyetini CSS düzeyinde çözer; yeniden kullanılabilir bileşenler için doğal bir performans ve mimari kazanımıdır.

  6. CSS Cascade Layers Gerçekte Ne Kazandırır?

    CSS'de özgüllük çatışması büyüdükçe seçici gücünü artırmak çözüm olmaz. @layer sözdizimi, tasarım sistemi, utility ve bileşen stillerini kaynak sırasından bağımsız biçimde sıraya koyar; hangi stilin neden kazandığını koda yazar.

  7. Bundle Boyutunu Yarı Yarıya Düşürürken Dikkat Edilecekler

    Bundle boyutunu küçültme sürecinde en çok atlanan adımlar; bağımlılık auditi, tree shaking'in neden çalışmadığı, dynamic import için doğru adayları seçmek, dead code tespiti ve polyfill gerekliliğini sorgulamak. Her madde ne zaman işe yarar, ne zaman ters etki yaratır sorusunu da yanıtlıyor.

  8. Her Tuş Vuruşunda Çalışan Form Validation Performansı Nasıl Bozar?

    Her tuş vuruşunda çalışan form validation, synchronous doğrulama ile re-render zincirini birleştirerek main thread'i gereksiz yere meşgul eder. Debounce, schema bazlı doğrulama ve touched state bu yükü farklı katmanlarda azaltır.

  9. Event Delegation Büyük DOM'larda Neden Önemlidir?

    Her öğeye ayrı listener eklemek yerine parent'a tek listener bağlamak, büyük ve dinamik DOM'larda listener sızıntısını önler ve tarayıcının tuttuğu kayıt sayısını kökünden düşürür.

  10. esbuild'i Bağımsız Araç Olarak Kullanmak Ne Zaman Mantıklı?

    esbuild'i Vite veya Rollup plugin'i olarak değil, doğrudan CLI veya JavaScript API'siyle çalıştırmak ne zaman mantıklı? Kütüphane build script'leri, özel pipeline aşamaları ve yan derleme görevleri için senaryo bazlı karar rehberi.

  11. React Suspense ve Lazy Birlikte Kullanmak: Ne Kazandırır, Ne Kaybettirir?

    React.lazy ve Suspense birlikte kullanıldığında başlangıç bundle'ı küçülür; ama yanlış bileşene uygulanan bölme kararı ve ihmal edilen fallback tasarımı kullanıcı deneyimini kötüleştirir. Ne zaman işe yarar, ne zaman ters döner, nasıl ölçülür.

  12. Debounce ve Throttle Ne Zaman Hangi Sorunu Çözer?

    Debounce ve throttle aynı sorunu çözmez. Arama kutusunda hangisi işe yarar, scroll handler'da hangisi ters etki üretir, React bileşenlerinde nasıl doğru uygulanır: senaryo bazlı karar rehberi.

  13. Uzun Listeler İçin Virtualization: Ne Zaman Zorunlu Olur?

    Uzun listelerde virtualization ne zaman zorunlu hale gelir, ne zaman erken optimizasyondur? DOM maliyetini ölçmek, windowing kütüphanelerini karşılaştırmak ve erişilebilirlik dengesini kurmak için karar rehberi.

  14. will-change Özelliği Ne Zaman Yardımcı Olur, Ne Zaman Zararlı?

    will-change özelliği tarayıcıya öğeyi önceden GPU katmanına almasını söyler; ancak her katman bellek tüketir. Hangi özelliklerde gerçek kazanç olduğu, neden animasyondan önce açıp sonra kapatmak gerektiği ve yaygın yanlış kullanımlar bu yazıda ele alınmaktadır.

  15. Pages Router'dan App Router'a Geçişte Performans Regresyonu Nasıl Önlenir?

    Pages Router'dan App Router'a geçişte performans regresyonunun en yaygın nedeni "use client" direktifinin bileşen ağacında yanlış yere yerleştirilmesidir. Sınır bir kez çok yukarı çizildi mi, Server Component avantajı tamamen yok olur ve bundle her geçişle büyümeye devam eder.