Kritik CSS ile İlk Boyama

Kritik CSS (Critical CSS) Nedir?

Kritik CSS, bir web sayfasının 'sayfa üstü' (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.

Render Blocking Sorununu Çözmek

Tarayıcılar varsayılan olarak tüm CSS dosyaları inene kadar sayfa boyamasını bekletir. Kritik CSS tekniği ile bu beklemeyi ortadan kaldırırız. Ana CSS dosyasını asenkron olarak yüklerken, ilk görünüm için gereken stilleri HTML'in head kısmına ekleriz.

Kazançlar

• First Contentful Paint (FCP) süresinde büyük düşüş.
• Kullanıcının sitenin yüklendiğini anında hissetmesi.
• Lighthouse performans puanlarında 10-20 puanlık artış.