Hafif Kod logosu

Hafif Kod

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

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

  1. Performans İçin Kod mu Bölünmeli, Sayfa mı Sadeleşmeli?

    Code splitting ile sayfa mimarisini sadeleştirmenin birbirini tamamladığını açıklar; hangi senaryoda code splitting yeterlidir, hangi senaryoda sayfa yapısını yeniden düşünmek gerekir.

  2. Teknik Borç Performansı Nasıl Yavaş Yavaş Bozar?

    Kütüphane güncellemelerinin ertelenmesi, büyüyen CSS ve JS dosyaları, geçici çözümlerin birikmesi ve performans bütçesi yokluğunun zaman içinde frontend performansını nasıl aşındırdığını inceler.

  3. Frontend Performans Checklist: Yayına Çıkmadan Son Kontrol

    Yayına çıkmadan önce kontrol edilmesi gereken performans kalemlerini ağ, görsel, JavaScript, CSS ve Core Web Vitals kategorilerinde toplar; her kalem için pratik bir doğrulama yöntemi gösterir.

  4. Çok Bileşenli Uygulamalarda Render Maliyeti Nasıl Düşürülür?

    React.memo, useMemo ve useCallback ile gereksiz re-render tespiti, bileşen ağacı optimizasyonu, list virtualization ve lazy initialization stratejileriyle render maliyetini düşürmeyi açıklar.

  5. Tasarım Sistemleri Performansı Nasıl Etkiler?

    Tasarım tokenlarının CSS değişkeni ve JS-in-CSS maliyeti, paylaşılan bileşen kütüphanelerinin bundle etkisi, icon sistemi seçimi ve tree shaking uyumluluğu açısından tasarım sisteminin frontend performansına etkisini inceler.

  6. Monorepo Projelerde Frontend Performans Disiplini Nasıl Korunur?

    Turborepo ve Nx gibi monorepo yapılarında ortak bağımlılık yönetimi, shared bundle maliyeti, workspace bazlı build cache ve CI'da cross-package bundle regresyonunu yakalamayı açıklar.

  7. CSS Modules, Tailwind ve Vanilla CSS Performansı Karşılaştırması

    CSS Modules, Tailwind ve Vanilla CSS yaklaşımlarının parse maliyeti, critical path boyutu, build çıktısı ve tarayıcı önbellekleme açısından performans farklarını açıklar.

  8. Vite mi Webpack mi? Build Çıktısı ve Performans Açısından Farklar

    Vite ve Webpack'in HMR hızı, ESM tabanlı dev server, chunk stratejisi ve production build çıktısı açısından gerçek farklarını ve mevcut projelerde geçiş maliyetini açıklar.

  9. Next.js Performans Optimizasyonu Nereden Başlamalı?

    Next.js uygulamalarında Image ve font optimizasyonu, Server Components ile client bundle azaltımı, App Router veri çekme stratejileri ve Core Web Vitals ölçümünü açıklar.

  10. React Uygulamalarında Bundle Boyutu Nasıl Kontrol Edilir?

    React uygulamalarında JS bundle nasıl şişer, hangi araçlarla analiz edilir ve code splitting ile tree shaking yöntemleriyle nasıl küçültülür.

  11. Cookie Banner ve Analitik Scriptleri Ne Kadar Yavaşlatır?

    Cookie onay banner'ının yükleme zamanlaması, CLS etkisi ve Consent Mode gecikmesinin analitik scriptlerin koşullu yüklenmesini nasıl etkilediğini açıklar.

  12. Üçüncü Parti Scriptler Performansı Nasıl Bozar?

    GTM, analytics, sohbet widget'ı ve reklam scriptlerinin main thread üzerindeki maliyetini, render blocking etkisini ve bu etkiyi azaltmanın pratik yollarını açıklar.

  13. DOM Boyutu Fazla Olursa Ne Olur?

    Büyük DOM ağaçlarının style hesabı, layout ve paint maliyetini nasıl artırdığını, Lighthouse eşik değerlerini ve DOM boyutunu azaltmanın pratik yollarını açıklar.

  14. Reflow ve Repaint Nedir? Tarayıcıda Maliyet Nerede Oluşur?

    Hangi CSS özelliklerinin reflow tetiklediğini, hangilerinin yalnızca repaint gerektirdiğini, layout thrashing'in nasıl oluştuğunu ve GPU'ya devredilen composite işlemlerini açıklar.

  15. `contain` Özelliği Performansı Nasıl Etkiler?

    CSS contain özelliğinin layout, style, paint ve size değerlerinin tarayıcı rendering pipeline'ını nasıl kısalttığını ve hangi bağlamda hangi değerin uygun olduğunu açıklar.

  16. `content-visibility` Nedir? Büyük Sayfalarda Ne İşe Yarar?

    content-visibility: auto direktifinin uzun sayfalarda layout ve paint maliyetini nasıl ertelediğini, contain-intrinsic-size ile CLS riskini ve hangi içerik bloklarının bu optimizasyona uygun olduğunu açıklar.

  17. Resource Hint Türleri: dns-prefetch, preconnect, preload, prefetch

    dns-prefetch, preconnect, preload ve prefetch arasındaki farkları, hangi kaynak türü için hangi hint'in uygun olduğunu ve yanlış kullanımın maliyetini açıklar.

  18. Service Worker Performansı Artırır mı Yoksa Karmaşıklaştırır mı?

    Service Worker önbellekleme stratejilerinin hangi koşullarda gerçek performans kazanımı, hangi koşullarda bakım yükü ürettiğini inceler.

  19. CDN Kullanmak Ne Zaman Gerçekten Fayda Sağlar?

    CDN'nin gerçek performans kazanımını, edge önbellekleme stratejisini, TLS sonlandırmayı ve hangi koşullarda anlamlı hız farkı ürettiğini açıklar.

  20. HTTP/2 ve HTTP/3 Performansı Gerçekte Ne Kadar Etkiler?

    HTTP/2 multiplexing ve HTTP/3 QUIC protokolünün gerçek dünya performans etkisini, hangi koşullarda anlamlı kazanım sağladığını ve sunucu yapılandırmasını açıklar.

  21. Brotli mi Gzip mi? Sıkıştırmada Hangisi Daha İyi?

    Brotli ve Gzip'i sıkıştırma oranı, CPU maliyeti ve CDN desteği açısından karşılaştırır; hangi durumda hangisinin tercih edilmesi gerektiğini açıklar.

  22. Versioned Asset Nedir? CSS ve JS Cache Busting Rehberi

    Query string ve content hash versiyonlama yöntemlerinin farkını, CDN'lerde neden query string'in güvenilmez olduğunu ve doğru cache busting stratejisini açıklar.

  23. Immutable Cache Nedir? Ne Zaman Kullanılır?

    immutable Cache-Control direktifinin ne anlama geldiğini, content hash stratejisiyle nasıl birleştiğini ve hangi varlık türleri için güvenli olduğunu açıklar.

  24. Cache-Control ve ETag Nasıl Birlikte Çalışır?

    Cache-Control direktifleri ile ETag doğrulama mekanizmasının birlikte nasıl çalıştığını, 304 yanıtının maliyetini ve hangi direktifin hangi durumda seçilmesi gerektiğini açıklar.

  25. Web Vitals RUM ve Lab Data Farkı Nedir?

    Gerçek kullanıcı ölçümü ile lab verisi arasındaki yapısal farkı, CrUX ve Lighthouse'un neden farklı sonuçlar ürettiğini açıklar.

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

    Lighthouse puanının nasıl yanıltıcı bir hedef haline geldiğini ve hangi metriklerin gerçek kullanıcı deneyimini yansıttığını açıklar.

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

    Web Worker'ın main thread'den bağımsız nasıl çalıştığını, postMessage ile veri aktarımını ve DOM koordinasyonunu açıklar.

  28. Main Thread Blocking Nedir?

    Long task'ların main thread'i nasıl bloke ettiğini, TBT metriğini ve görevleri bölmenin pratik yollarını açıklar.

  29. JavaScript Parse ve Execute Maliyeti Nedir?

    JavaScript dosyalarının parse ve execute aşamalarında main thread'e bindirdiği maliyeti, ölçüm yöntemlerini ve azaltma stratejilerini açıklar.

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

    Google Fonts ve self-hosted yaklaşımının gerçek hız farkını, cache stratejisini ve WOFF2 kurulumunu karşılaştırır.

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

    İstek zinciri, varyasyon yükü ve `display` tercihleri üzerinden Google Fonts kurulumunu nasıl sadeleştireceğinizi açıklar.

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

    Görünür metni bekletmeden font seçimlerini, varyasyon yükünü ve fallback davranışını nasıl yöneteceğinizi anlatır.

  33. Defer ve Async Arasındaki Fark Nedir?

    Scriptlerin ne zaman çalıştırıldığını, sıranın neden bozulduğunu ve hangi durumda hangisinin daha güvenli olduğunu açıklar.

  34. Preload ve Prefetch Farkı Nedir?

    Kaynak önceliğinde “şimdi gerekli” ile “yakında gerekebilir” ayrımını ve yanlış hint kullanımının riskini açıklar.

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

    İlk ekran için gerçekten gerekli stilleri ayırıp fazla kritik CSS'in neden ters etki üretebildiğini anlatır.

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

    Ağır modüllerin ne zaman ertelenebileceğini ve yanlış zamanlamanın ilk etkileşimde nasıl yeni bekleme ürettiğini açıklar.

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

    Kullanılmayan export'ların neden bazen düşmediğini ve hangi import alışkanlıklarının paketi gereksiz büyüttüğünü ayırır.

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

    Build çıktısında hangi modülün gerçekten ilk paketi büyüttüğünü ve tekrar eden yükleri nasıl ayıracağınızı gösterir.

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

    İlk byte gecikmesini oluşturan uygulama, veritabanı, yönlendirme ve cache katmanlarını ayırır.

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

    Tıklama ve dokunma anlarında arayüzü ağırlaştıran JavaScript, uzun görev ve boyama yükünü ayırır.

  41. PageSpeed Insights Nedir? Puan Nasıl Yükseltilir?

    Raporu doğru okumak, puan yerine gerçek darboğazlara odaklanmak ve iyileştirme sırasını kurmak.

  42. Core Web Vitals Nedir? LCP, CLS ve INP Rehberi

    Google'ın izlediği üç temel deneyim metriğini sade dille okuyup hangi sorunun neyi bozduğunu ayırma.

  43. LCP Nedir? En Büyük İçerik Nasıl Hızlanır?

    Kahraman görsel, başlık bloğu ve sunucu gecikmesi yüzünden uzayan ilk güçlü görünümü toparlama yolları.

  44. CLS Nedir? Sayfa Kaymaları Nasıl Önlenir?

    Geç yüklenen görseller, reklam alanları ve sonradan açılan bileşenlerin düzeni neden bozduğunu örneklerle anlatır.

  45. Lazy Loading Nedir? Neyi Ertelemek Mantıklı?

    Ekran dışı görselleri ve iframe'leri erteleyip hero alanını neden buna dahil etmemek gerektiğini açıklar.

  46. Render Engelleyen Kaynaklar Nasıl Azaltılır?

    İlk boyamayı tutan CSS ve senkron JavaScript yüklerini nasıl ayıklayıp daha akıcı başlangıç elde edebileceğinizi özetler.

  47. CSS ve JavaScript Dosyaları Küçültme: Minification Rehberi

    CSS ve JavaScript dosyalarını minify ederek aktarım boyutunu nasıl düşüreceğinizi ve hangi araçların bu süreci otomatikleştirdiğini açıklar.

  48. Kullanılmayan CSS ve JS Temizleme Nasıl Yapılır?

    Kod tabanında biriken gereksiz CSS ve JavaScript satırlarını nasıl bulup temizleyeceğinizi ve bu süreci otomatikleştirmenin yollarını gösterir.

  49. Tarayıcı Önbellekleme Nasıl Yapılır?

    Cache-Control başlıklarıyla tarayıcı önbelleklemesinin nasıl kurulacağını ve hangi dosya türlerine hangi sürenin uygun olduğunu açıklar.

  50. Code Splitting Nedir? İlk Yüklemeyi Nasıl Hızlandırır?

    Büyük JavaScript paketini daha küçük parçalara bölerek ilk yükleme süresini nasıl kısaltabileceğinizi ve hangi stratejilerin işe yaradığını açıklar.