Bu Yazıdan Öne Çıkanlar
Above-the-fold içeriğin anında yüklenmesini sağlayan Kritik CSS teknikleri. Kullanıcılarınıza milisaniyeler içinde görünür içerik sunun.
Kritik CSS (Critical CSS) Nedir?
Kritik CSS, bir web sayfasının above-the-fold olarak adlandırılan, kullanıcının sayfayı açtığında ilk gördüğü alan için gereken CSS kurallarının belirlenmesi ve inline olarak HTML içinde sunulmasıdır. Bu teknik, tarayıcının harici CSS dosyalarını beklemeden sayfayı boyamasına olanak tanır.
Render Blocking Sorununu Çözmek
Tarayıcılar varsayılan olarak tüm CSS dosyaları inene kadar sayfa boyamasını bekletir. Bu durum, özellikle büyük CSS dosyaları olan projelerde ciddi gecikmelere yol açar. Kritik CSS tekniği ile bu beklemeyi ortadan kaldırırız:
- Sayfa üstü için gereken CSS kurallarını belirleyin.
- Bu kuralları HTML'in
<head>kısmına inline olarak ekleyin. - Ana CSS dosyasını
media="print" onload="this.media='all'"ile asenkron yükleyin.
Araçlar
Critical (npm paketi), Penthouse ve PurgeCSS gibi araçlar bu süreci otomatikleştirmenize yardımcı olur. Laravel Mix veya Vite pipeline'ınıza entegre edebilirsiniz.
Kazançlar
- First Contentful Paint (FCP) süresinde %40-60 düşüş.
- Kullanıcının sitenin yüklendiğini anında hissetmesi.
- Lighthouse performans puanlarında 10-20 puanlık artış.
