CSS Optimizasyonu, CSS Silme (Minify, Defer, Extract)

Web sayfalarında HTML elementlerinin görünümüne yardımcı olan CSS dosyalarını daha optimize şekilde kullanmak web sayfasının performansını doğrudan etkiler. Daha iyi optimize edilmiş ve sıkıştırılmış tasarruflu dosya yapıları web tarayıcılarının kodları daha hızlı çözümlemesine ve sayfayı daha hızlı oluşturmasına yardımcı olur. CSS optimizasyonları ile render sürenizi iyileştirin.

CSS Minify

CSS dosyası üzerinde kullanılmayan gereksiz yorumlar, boşluklar ve girintiler olabilir. Bu gereksiz karakterleri kaldırıp web tarayıcılarının daha hızlı bir şekilde CSS dosyalarının çözümlemesini sağlayabilirsiniz. Bu işleme CSS sıkıştırma, küçültme veya minify işlemi denir.

body { 
  margin: 0; 
  padding: 0; 
  font-family: var(--bs-font-sans-serif); 
  font-size: 1rem; 
  font-weight: 400; 
  color: #212529; 
  background-color: #fff; 
  -webkit-text-size-adjust: 100%; 
  -webkit-tap-highlight-color: transparent; 
}

/* Sayfa başlıkları aynı stil özelliklerine sahip olmalı */

h1 {
  font-size: 20px;
  font-weight: 600;
  color: #f7f6f6;
  margin: 1rem 0;
  background-color: #000000;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  color: #f7f6f6;
  margin: 1rem 0;
  background-color: #000000;
}

Minify İşlemi İçin Dikkat Edilmesi Gerekenler

Yukarıdaki kod yapısı rahat okunabiliyor fakat daha fazla yük oluşturuyor;

• Kod yapısındaki boşluklar, yorum satırı ve CSS özelliklerinin altındaki girintiler yük boyutunu artırıyor, bu fazlalık oluşturan karakterler silinebilir.
• Aynı stile sahip olan elementlerin CSS özellikleri ayrı tanımlandığında da yük boyutu artıyor. Bunun yerine elementlere birlikte CSS tanımlanabilir. Örnek olarak h1 {font-size: 20px} h2 {font-size: 20px} yerine h1,h2 {font-size: 20px;} şeklinde kullanılırsa dosyanın yükü hafifletilmiş olur.
• background-color: #000000; şeklinde kullanmak yerine background-color: #000; şeklinde kullanılabilir. (Bu küçük bir fark olarak görülebilir fakat çok fazla CSS kodunun bulunduğu bir stil dosyasında bu optimizasyon fark oluşturur.)
• Longhand CSS kullanımı yerine shorthand CSS kullanımı da dosya boyutunu azaltacaktır. Longhand CSS kullanımı ile daha az parça yazılan kod ile aynı stil özelliği belirlenebilir.

  /* Longhand CSS */ 
  .margin { 
    margin-top: 5px; 
    margin-right: 6px; 
    margin-bottom: 7px; 
    margin-left: 8px; 
  } 
  
  /* Shorthand CSS */ 
  .margin { margin: 5px 6px 7px 8px; }

Sıkıştırılmış CSS Kod Yapısı

Yukarıdaki kod yapısının sıkıştırılmış ve optimize edilmiş hali aşağıdaki gibidir; yorumlar silinmiş, boşluklar ve girintiler temizlenmiş.

body { margin: 0; padding: 0; font-family: var(--bs-font-sans-serif); font-size: 1rem; font-weight: 400; color: #212529; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } h1,h2 {font-size: 20px; font-weight: 600; color: #f7f6f6; margin: 1rem 0; background-color: #000;}

CSS kodlarını yazarken yukarıdaki görünüm şeklinde yazmak geliştiriciler için kolay olmayabilir, düzenle yazılmış CSS kodlarını sıkıştırmak için online bir minify aracı kullanılabilir.

Sıkıştırılmış ve Sıkıştırılmamış CSS Dosyalarının Boyutları

Aynı stil kodlarını içeren CSS dosyalarından sıkıştırılmış olan ve sıkıştırılmamış olanlar arasında dosya boyutu farkı var, dosya boyutu farkından dolayı da tarayıcının kodları sayfaya yükleme süresi uzuyor. Yükleme süresi uzadıkça da tarayıcının sayfayı oluşturma süresi gecikiyor, bu da performansı doğrudan etkiliyor.

Web sayfasındaki CSS dosyalarının boyutu ve yüklenme süresini incelemek için Google Inspect aracı üzerinde Network sekmesinden görülebilir. Bu sayfa üzerinde “Disable cache” seçilerek (sayfa yeniden yüklendiğinde tarayıcı önbelleğinden yüklenmesini önlemek için) ve “CSS” butonuna tıklayarak yalnızca CSS kodlarını filtreleyerek incelenebilir.

PageSpeed Insights Minify CSS Uyarısı

Google’ın PageSpeed Insights performans ölçüm aracı web sitesinde sıkıştırılmamış olan CSS dosyalarını tespit edip uyarı veriyor.

Kritik CSS’leri Satır İçi Yayınlama

Internet tarayıcıları web sayfalarını kullanıcılara göstermeden önce CSS dosyalarını indirmeli ve ayrıştırmalılar. Eğer dosya boyutu fazla ise veya kullanıcının internet bağlantısı zayıf ise tarayıcının render süreci uzar ve kullanıcının ekranı görüntülemesi o kadar gecikir.

Kritik CSS Nedir?

Kritik CSS kullanıcının sayfayı ilk göreceği alanı oluşturan CSS kodlarıdır, bu alanının stilini oluşturan kodları CSS dosyasından ayrıştırıp sayfa içerisinde doğrudan yükleme tekniği ile kullanıcılara daha hızlı bir şekilde sayfa oluşmasına yardımcı olunabilir.

Kritik CSS’leri sayfa kodunda <head> etiketinin içerisine <style> etiketi ile yazın, bu yöntem HTML sayfasının ek bir istekte bulunmasına gerek kalmadan sayfayı boyar, geriye kalan CSS kodları sayfanın görünmeyen yerleri için eşzamansız olarak yüklenebilir.

Sayfa içerisinde yüklenmiş Kritik CSS kod yapısı

PageSpeed Insights Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Uyarısı

Google PageSpeed Insights performans aracı Kritik CSS’lerin sayfa içerisinde yayınlanmasını gerektiğini tespit ettiğinde “Oluşturmayı engelleyen kaynakları ortadan kaldırın” uyarısı veriyor. Eğer First Contentful Paint (FCP) metriği zayıf ise Kritik CSS’leri sayfa içerisinde yayınlayıp diğer CSS’leri geciktirmeyi deneyin. (Bu durum JS dosyaları için de geçerli.)

Kullanılmayan CSS’leri Kaldırma

Web sayfalarında kullanılmayan CSS özelliklerinin yüklenmesi gereksiz yük boyutu oluşturur ve sayfa performansını olumsuz etkiler. Sayfada kullanılmayan kodları kaldırarak gereksiz kaynak tüketiminin önüne geçebilir ve performans kazancı sağlayabilirsiniz.

WordPress Panelinde Kullanılmayan Kodları Kaldırma

WordPress üzerinde sayfayı yavaşlatan gereksiz ve kaldırılması gereken kodları WordPress Kullanılmayan JS ve CSS Kodlarını Silme sayfasından inceleyebilirsiniz.

Kaynak:

https://web.dev/defer-non-critical-css/

https://web.dev/minify-css/

https://web.dev/extract-critical-css/

https://web.dev/optimize-css-background-images-with-media-queries/