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 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;
}
Yukarıdaki kod yapısı rahat okunabiliyor fakat daha fazla yük oluşturuyor;
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 */
.margin {
margin-top: 5px;
margin-right: 6px;
margin-bottom: 7px;
margin-left: 8px;
}
/* Shorthand CSS */
.margin { margin: 5px 6px 7px 8px; }
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.
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.
Google’ın PageSpeed Insights performans ölçüm aracı web sitesinde sıkıştırılmamış olan CSS dosyalarını tespit edip uyarı veriyor.
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 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ı
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.)
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 üzerinde sayfayı yavaşlatan gereksiz ve kaldırılması gereken kodları WordPress Kullanılmayan JS ve CSS Kodlarını Silme sayfasından inceleyebilirsiniz.
https://web.dev/defer-non-critical-css/
https://web.dev/extract-critical-css/
https://web.dev/optimize-css-background-images-with-media-queries/