Web sayfalarının render edilmesinde kritik yol nedir?

Tarayıcının sayfa içeriğini ekranda görüntülemek için gerçekleştirdiği adımlar dizisidir ve HTML belgesinin alınmasıyla başlar. Şunları içerir:

1. DOM (Document Object Model) Oluşumu: HTML kodunun ayrıştırılması ve belgenin yapısını temsil eden nesne ağacının oluşturulması.
2. CSSOM (CSS Object Model) Oluşumu: CSS dosyalarının ve satır içi stillerin ayrıştırılması ve öğelerin stillerini temsil eden nesne ağacının oluşturulması.
3. Render Ağacının Oluşumu: DOM ve CSSOM'un birleşimi. Sadece stil uygulanan ve render edilecek öğelerden oluşan bir ağaç oluşturulur.
4. Layout (veya Reflow): Sayfadaki her öğenin geometrik boyutlarının ve konumunun belirlenmesi.
5. Paint (veya Repaint): Render Ağacı ve Layout verilerine dayanarak ekran üzerindeki piksellerin doldurulması.

Kritik render yolunun optimizasyonu, tarayıcının ilk anlamlı içeriği (First Meaningful Paint) veya etkileşimi (Time to Interactive) mümkün olan en kısa sürede göstermesini sağlamaya yöneliktir. Bu, engelleyici kaynakların (JS ve CSS) en aza indirilmesi, kaynakların boyutunun optimize edilmesi ve uygun zamanda yüklenmesiyle başarılır.