Critical CSS Nedir?

En yalın haliyle critical css; HTML’in render sürecini aksatmamak ve kullanıcıya içeriği mümkün olduğunda hızlı bir şekilde sunabilmek adına ihtiyaç duyulan (kritik olan) CSS’in head tag’leri içerisine dahil edilmesi olarak tanımlanabilir.

Özellikle FCP’nin (First Contentful Paint) zayıf olduğu durumlarda tercih edilebilir bir teknik olan critical css, aynı anda yüksek boyuta sahip CSS’lerin yüklenmesi ve dolayısıyla DOM’un gecikmesini engeller. Critical CSS’in işlevini tam olarak anlamak için öncelikle bir sayfanın yüklenme sürecini yani Critical Rendering Path’i kavramak gerekir.

Critical Rendering Path Nedir?

Critical rendering path; web sayfasına tarayıcının ilk istek attığı anda son halini alana kadar geçen süreci ifade eder. Bir web sayfasının oluşturulması sürecini temel birkaç adımda aşağıdaki gibi sıralayabiliriz;

• Browser’dan gelen web sayfasını oluşturmak isteği sunucuya gider ve sunucunun döndürdüğü yanıt ile beraber browser kaynak kodu yani HTML’i ayrıştırmaya ve DOM’u (document object model) oluşturmaya başlar.
• Browser HTML’i ayrıştırırken CSS ve JS kaynaklarına denk geldiğinde bu kaynaklar üzerinden devam eder ve bu nedenle CSS’leri render-blocking source’lar olarak nitelendiririz. Bu arada Browser CSSOM’u yani stil hiyerarşisini belirlemeye başlar ve CSSOM tamamlandıktan sonra ise HTML ile merg ederek render tree’yi meydana getirir. (Burada bir not olarak Browser’ın JS’lere yani script tag’lerine denk geldiğinde parse (ayrıştırma) işlemine ara verdiğini ve JS’i çalıştırdığını bu nedenle de JS source’ların parser-blocking olarak nitelendirildiğini eklemeliyiz. Bunun nedeni, JS’lerin DOM’u değiştirme ihtimaline sahip kaynaklar olmasıdır.)
• Render tree’nin oluşması ile beraber son aşamada ekran gösterilecek öğelerin yerleri ve boyutlarını ifade eden layout oluşturulur ve bu layout’da yer alan bileşenler boyanarak (painting) sayfa son şeklini alır. Burada transparency ve çizilme öncelikleri gibi kavramlar devreye girer.

Critical CSS de yukarıda üç temel adımda özetlediğimiz bu süreci optimize etmek adına kullanılabilecek önemli fakat bazı durumlarda riskli ve/veya eforlu tekniklerden biridir.

Critical CSS Nasıl Uygulanır?

Critical CSS ile ilgili altı çizilmesi gereken nokta; teoride her ne kadar kusursuz bir teknik gibi dursa da uygulamada birtakım zorluklar ve zaman zaman yoğun efora ihtiyaç duyulduğudur. Dolayısıyla CSS’in oluşturmada gerçekten belirgin sorun olduğu anlarda tercih edilmesi gerekir.

Kritik olarak belirlenen stillerin içerisine yerleştirilmesi browser’ın bu stiller için ek request yapma gerekliliğini ortadan kaldırır ve CSS’in geri kalanı yani kritik olmayan kısmı eşzamansız olarak yüklenir. Peki kritik olan CSS’ler nasıl belirlenir?

Kritik CSS’ler Nasıl belirlenir?

Web siteniz için kritik CSS’leri belirlerken kullanabileceğiniz birkaç otomasyon vardır. Bu otomasyonları aşağıdaki şekilde detaylandırabiliriz.

• Penthouse: Angular kullanımlarında yaygın olan ve çevrimiçi sürümü de kullanılabilen Penthouse’da kritik CSS oluşturmak için HTML ve CSS dosyalarını belirtmeniz gerekir. https://github.com/pocketjoso/penthouse
• Critical: Webpack eklentisi ve npm modülü olan bu otomasyon, birden fazla ekran çözünürlüğü için kritik CSS’i çıkarabilir ve bunu stil sayfalarınızı belirtmeden yapar.
• Critical CSS: Satır içi hale getirme ve küçültme seçenekler olmayan bu npm modülü, ekranın üst kısmındaki CSS’i çıkartır.

Doğrudan bu işi yapan https://criticalcss.com ya da https://nitropack.io gibi tool’lardan birini satın alarak ve/veya ücretsiz kullanarak da süreci ilerletebilirsiniz.