CSS tek bir dosyada toplandığında, tree-shaking işleminden geçse bile, farklı @media koşulları (mobil, tablet, masaüstü, açık/koyu/diğer temalar, vb.) nedeniyle hala çok fazla kullanılmayan CSS kodu barındırır.
Bu, Temel Web Verileri için kötüdür: İlk Giriş Gecikmesi (FID), En Büyük İçerikli Boya (LCP), Kümülatif Yerleşim Kayması (CLS) ve diğer önemli performans ve kullanılabilirlik metrikleri: İlk İçerikli Boya (FCP), Toplam Engelleme Süresi (TBT), Etkileşim Süresi (TTI) ve DOMContentLoaded olayı.
CSS yüklemesini ve görüntülenmesini önemli ölçüde iyileştirmenin bir yolu var: CSS’i farklı dosyalara ayırmak. Bu yöntemde her dosya yalnızca kendi bağlamında ihtiyaç duyulan kodları içerir.
CSS’inizi farklı dosyalara ayırın:
📄main.css - tüm @media koşulları için gerekli CSS kodlarını içerir
📄screen.css - yalnızca ekran @media koşulu için gerekli CSS kodlarını içerir
📄print.css - yalnızca baskı @media koşulu için gerekli CSS kodlarını içerir
📂breakpoints
📄x-small.css - yalnızca X-Small kesme noktası için gerekli CSS kodlarını içerir
📄sm.css - yalnızca Small kesme noktası için gerekli CSS kodlarını içerir
📄md.css - yalnızca Medium kesme noktası için gerekli CSS kodlarını içerir
📄lg.css - yalnızca Large kesme noktası için gerekli CSS kodlarını içerir
📄xl.css - yalnızca Extra large kesme noktası için gerekli CSS kodlarını içerir
📄xxl.css - yalnızca Extra extra large kesme noktası için gerekli CSS kodlarını içerir
📂themes
📄light.css - yalnızca açık tema için gerekli CSS kodlarını içerir
📄dark.css - yalnızca koyu tema için gerekli CSS kodlarını içerirArdından, CSS dosyalarını şu şekilde dahil edin:
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">Bu yaklaşımla modern tarayıcılar, mevcut @media koşulları için CSS yüklemesine öncelik tanır. Böylece sayfa oluşturma süreci çok daha hızlı başlar; çünkü kullanıcıların CSS’in kullanılmayan kısımlarının yüklenmesini beklemesine gerek kalmaz. Şayet tüm CSS tek bir dosyada toplanmışsa ve link etiketlerinin media özelliklerinde herhangi bir koşul belirtilmemişse, tarayıcı sayfa oluşturmaya başlamadan önce tüm CSS’in yüklenmesini bekler. Bu durum da sayfa oluşturma hızını ciddi oranda düşürür.
Bu örnekteki kesme noktaları Bootstrap 5 temel alınarak belirlenmiştir. Bootstrap’in yakın zamanda açık, koyu ve diğer tema desteklerini ekleyeceği düşünüldüğünde, bu yaklaşım Bootstrap için gelecekte daha da kritik bir öneme sahip olacak.
Web’i daha iyi ve daha hızlı hale getirmek istiyorsanız, lütfen:
- bu makaleyi paylaşın,
- bu makaleyi kullandığınız framework’lerin geliştiricilerine gönderin,
- bu CSS ayrımını sitelerinizde uygulayın.
Sosyal medyada paylaşın veya daha sonra için kaydedin:
Bu optimizasyon ve tarayıcının davranışı hakkında daha fazla bilgi edinmek isterseniz, lütfen aşağıdakilere bakın:
- Vadim Makeev tarafından yazılan “Koşullu uyarlanabilir CSS. Performansınızı artırabilecek tarayıcı davranışı” makalesi. Bu makalenin kapak ekran görüntüsü, daha fazla ekran görüntüsü ve deneyin bulunduğu mükemmel makalesinden alınmıştır.
- MDN Web Belgeleri: CSS performans optimizasyonu.