Hafif Kod logosu

Hafif Kod

Hafif kod yaklaşımıyla performans odaklı teknik blog

Temiz kod, hafif dosyalar, hızlı siteler.

  1. Micro-Frontend Mimarisinde Performans Bedeli Nedir?

    Micro-frontend mimarisi ekip bağımsızlığı sunar; ama ortak chunk stratejisi olmadan her uygulama React'i ayrı yükler ve tarayıcı aynı kütüphaneyi defalarca parse eder.

  2. Storybook Projesinde Bundle Boyutu Neden Şişer ve Nasıl Kontrol Edilir?

    Storybook geliştirme ortamında kalması gereken bağımlılıklar, yanlış import zincirleri veya paylaşılan konfigürasyon nedeniyle production bundle'a sızabilir. Builder seçimi, devDependencies sınıflandırması ve derleme izolasyonu bir arada kurulduğunda şişme kendiliğinden durur.

  3. Intersection Observer API Yanlış Kullanılınca Ne Olur?

    rootMargin yanlış birim, threshold sessiz sessiz yanlış eleman, disconnect unutulmuş observer: Intersection Observer API'nin üç yaygın hatası ve her birinin layout ile bellek üzerindeki etkisi.

  4. Frontend Performans Disiplini: 50 Yazıdan Çıkan 10 Temel Kural

    50 yazının ortak çıktısı: ölçmeden hareket etme, render maliyetini anlama, bundle denetimini sürdürme. Frontend performans disiplinin on temel kuralı.

  5. Import Maps ile Bağımlılık Yönetimi: Tarayıcı Native Modüller

    Import map, modül isimlerini CDN URL'lerine eşleştiren bir tarayıcı özelliği. Node.js çözümleme algoritması, npm install ve bundler olmadan, tek bir JSON bloğuyla CDN'den ESM modülleri yükleyebiliyorsunuz. Hangi proje için mantıklı, nerede yetersiz kalıyor?

  6. Streaming SSR ile İlk Byte'ı Öne Çekmek

    React 18'in renderToPipeableStream API'si HTML'yi tek seferde değil parça parça gönderir. Suspense sınırları hangi parçanın ne zaman akacağını belirler; shell tasarımı ise TTFB'yi doğrudan etkiler.

  7. Turbopack Webpack'e Kıyasla Gerçekte Ne Kadar Hızlı?

    Turbopack'in webpack'ten 700x hızlı olduğu iddiası teknik dünyada ses getirdi. Dev server başlama süresi ve HMR hızında gerçek kazanımlar var; ancak bu kazanımlar proje büyüklüğüne, Next.js ekosistemiyle sınırlı kullanıma ve henüz production build'i kapsamayan bir tabloya bağlı.

  8. React Server Components Gerçekte Bundle'ı Nasıl Etkiler?

    React Server Components, client bundle'a hiç girmeyen bileşenler ve bağımlılıklar sayesinde paket boyutunu doğrudan etkiler. Hangi bileşenin sunucuda kalacağını, use client sınırının nereye çizileceğini ve veri çekme maliyetinin nasıl taşındığını inceleyin.

  9. Performance Budget Nedir? Takım İçinde Nasıl Uygulanır?

    Performance budget, LCP ve TBT için üst sınır, bundle için kilobayt eşiği belirleyip bu sayıları CI pipeline'ına gömer; sınır aşıldığında build durur ve tartışma aşma anında gerçekleşir.

  10. Web Vitals Verilerini GA4'te Nasıl İzlersiniz?

    web-vitals kütüphanesiyle LCP, CLS ve INP verilerini gerçek kullanıcı oturumlarından toplayın ve GA4'e custom event olarak gönderin; doğru yapılandırma, örnekleme ve rapor okuma adımlarıyla sahadan anlamlı performans verisi elde edin.

  11. Chrome DevTools Performance Paneli Nasıl Okunur?

    Chrome DevTools Performance panelinde flame chart okuma, long task tespit etme, main thread aktivitelerini renk kodlarıyla gruplama ve layout ile paint maliyetini izole etme.

  12. Lighthouse CI Nedir? Her Deploy'da Performans Testi Nasıl Otomatikleştirilir?

    Lighthouse CI, her deploy'da performans regresyonunu otomatik yakalar. GitHub Actions entegrasyonu, budget.json eşikleri ve assert bloğuyla PR merge edilmeden önce sorun tespit edilir.

  13. Performance Observer API ile Custom Metrik Toplamak

    PerformanceObserver API, tarayıcının kendi ölçüm katmanını gerçek zamanlı dinlemenizi sağlar. Long task, LCP ve CLS yakalamayı, özel zaman damgaları eklemeyi ve bu veriyi kendi altyapınıza göndermeyi adım adım ele alır.

  14. Edge Functions ile TTFB Nasıl Düşürülür?

    Edge functions, kodu merkezi sunucu yerine kullanıcıya coğrafi olarak yakın ağ düğümlerinde çalıştırarak TTFB'yi düşürür. Hangi içerik edge'e taşınabilir, hangi senaryoda bu geçiş gereksiz ya da zararlıdır: cache yapılandırması, kısmi kişiselleştirme ve ölçüm pratikleriyle açıklıyor.

  15. Web Components Performans Açısından Ne Zaman Tercih Edilmeli?

    Web Components'ın Shadow DOM maliyeti, framework bağımsızlık avantajı ve micro-frontend mimarisindeki rolü: hangi durumda tercih edilmeli, ne zaman gereksizdir.