CSS Optimizasyonu: Performans, Boyut ve Yükleme Hızı

CSS Performansı Neden Önemlidir?

CSS, render-blocking bir kaynaktır. Tarayıcı, CSS yüklenmeden sayfayı render edemez. Büyük CSS dosyaları, First Contentful Paint (FCP) süresini artırır.

Kullanılmayan CSS, sayfa boyutunu artırır ve yükleme süresini uzatır. Tipik bir web sitesinde CSS'in %60-80'i kullanılmamaktadır.

CSS optimizasyonu, Core Web Vitals metriklerini (özellikle LCP ve CLS) iyileştirir. Optimize edilmiş CSS, daha hızlı ve daha akıcı bir kullanıcı deneyimi sağlar.

CSS Küçültme (Minification)

Minification, CSS'den boşluklar, yorumlar ve gereksiz karakterler kaldırarak dosya boyutunu %20-40 oranında azaltır.

Araçlar: cssnano, clean-css, Terser (CSS desteği). Build pipeline'ınızda (Webpack, Vite, Rollup) minification plugin'i kullanın.

Gzip/Brotli sıkıştırma ile birlikte minification, CSS dosya boyutunu %70-80 oranında azaltabilir.

Production build'de her zaman minified CSS kullanın. Development'ta okunabilir CSS kullanın.

Kritik CSS (Critical CSS)

Kritik CSS, above-the-fold (ilk görünüm) içeriği için gerekli olan CSS'dir. Bu CSS'i <head> içinde inline olarak ekleyin.

Kritik olmayan CSS'i async yükleyin: <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">.

Araçlar: Critical (npm paketi), Penthouse, Critters (Webpack plugin). Bu araçlar kritik CSS'i otomatik olarak çıkarır.

Kritik CSS boyutu: 14KB'ın altında tutun (TCP slow start window). Daha büyük kritik CSS, ilk paketi şişirir.

Kullanılmayan CSS'i Kaldırma

PurgeCSS, kullanılmayan CSS seçicilerini kaldırır. Tailwind CSS, Bootstrap gibi framework'lerle birlikte kullanılır.

PurgeCSS yapılandırması: content (taranacak HTML/JS dosyaları) ve safelist (korunacak seçiciler) tanımlayın.

Chrome DevTools Coverage tab: Kullanılmayan CSS'i tespit edin. Coverage raporu, her dosyanın ne kadarının kullanıldığını gösterir.

CSS-in-JS: Styled Components, Emotion gibi kütüphaneler, sadece kullanılan stilleri render eder. Kullanılmayan CSS otomatik olarak kaldırılır.

CSS Yükleme Stratejileri

Code splitting: Her sayfa için ayrı CSS dosyası oluşturun. Webpack CSS code splitting veya Vite'ın otomatik splitting'i kullanın.

Lazy loading: Belirli bileşenler (modal, tooltip) için CSS'i lazy load edin. Dynamic import() ile CSS dosyasını ihtiyaç anında yükleyin.

Font loading: @font-face ile font-display: swap kullanın. FOIT (Flash of Invisible Text) ve FOUT (Flash of Unstyled Text) sorunlarını minimize edin.

Media queries: Print ve dark mode gibi koşullu CSS'i ayrı dosyalara bölün: <link rel="stylesheet" href="print.css" media="print">.

Preconnect: Harici CSS kaynakları (Google Fonts) için <link rel="preconnect" href="https://fonts.googleapis.com"> kullanın.

CSS Best Practices

CSS specificity'i düşük tutun. Derin selector zincirleri (div > ul > li > a) performansı düşürür. Flat selector'lar kullanın.

Flexbox ve Grid kullanın. Float-based layout'lar daha fazla CSS gerektirir ve daha yavaş render edilir.

CSS containment: contain: layout paint style ile elementin render kapsamını sınırlayın. Bu, tarayıcının render alanını optimize etmesini sağlar.

Will-change: Animasyonlu elementlerde will-change: transform kullanın. Ancak aşırı kullanım performansı düşürür.

CSS custom properties (değişkenler) kullanın. Tekrarlanan değerleri (renk, boyut) değişkenlerle yönetin.