Kritik Render Yolu Nedir?

HTML'den piksele beş adım

Tarayıcı sunucudan gelen baytları doğrudan ekrana basamaz. Önce bir dizi dönüşüm yapması gerekir ve ilk görüntü ancak bu dönüşümlerin hepsi tamamlandığında ortaya çıkar:

1. DOM oluşturma: HTML parça parça ayrıştırılır; etiketler düğümlere dönüşür ve DOM ağacı kurulur. Bu iş artımlıdır: belgenin tamamı gelmeden başlayabilir.
2. CSSOM oluşturma: Harici ve satır içi stiller ayrıştırılıp CSS Nesne Modeli'ne (CSSOM) çevrilir. DOM'un aksine CSSOM yarım kullanılamaz; sonraki bir kural öncekini ezebileceği için tarayıcı stil dosyasının tamamını bekler.
3. Render ağacı: DOM ve CSSOM birleştirilir. Yalnızca görünecek düğümler ağaca girer; display: none verilmiş öğeler ve head içeriği dışarıda kalır.
4. Layout (yerleşim): Görüntü alanının genişliğine göre her kutunun boyutu ve konumu hesaplanır.
5. Paint (boyama): Kutular, metinler, kenarlıklar ve görseller piksellere dönüştürülür; modern tarayıcılar bunu katmanlar hâlinde yapıp en sonda birleştirir (composite).

İlk görüntüden sonra da aynı makine çalışmaya devam eder. JavaScript bir öğenin genişliğini değiştirdiğinde layout ve paint yeniden yapılır; bu yüzden kutu modeline dokunan animasyonlar pahalıdır.

Zinciri ne uzatır: CSS ve senkron JavaScript

Kritik yolu uzatan iki temel davranış vardır. Birincisi, CSS varsayılan olarak render'ı engeller: tarayıcı, stilsiz içerik göstermek yerine CSSOM hazır olana kadar boyamayı bekletir. media niteliği eşleşmeyen bir stil dosyası (ör. media="print") yine indirilir ama ilk boyamayı bekletmez.

İkincisi, async ya da defer olmadan eklenen bir script ayrıştırıcıyı durdurur. Tarayıcı scripti indirip çalıştırmadan HTML'in geri kalanını işlemez; script stillere erişebileceği için de önceki CSS'in yüklenmesini bekler. Böylece CSS, JavaScript ve DOM birbirine zincirlenir. Bu davranışa yol açan dosyaların nasıl bulunup ayıklanacağı render engelleyen kaynaklar maddesinde ayrıntılı anlatılıyor.

Kritik yolun üç ölçüsü

• Kritik kaynak sayısı: İlk boyamadan önce mutlaka gelmesi gereken dosyalar. Her biri bir istek, çoğu zaman yeni bir bağlantı demektir.
• Kritik bayt miktarı: Bu dosyaların toplam boyutu. Kullanılmayan kurallarla dolu 300 KB'lık bir CSS paketi, ihtiyaç duyulanı 15 KB olsa bile tamamen indirilip ayrıştırılır.
• Yol uzunluğu: Kaynakların birbirini keşfettiği ardışık gidiş-dönüş sayısı. HTML'in CSS'i, CSS'in @import ile başka bir CSS'i, o dosyanın da bir fontu çağırması üç katmanlı bir zincir oluşturur.

Engelleyen ve engellemeyen bir head

<!-- Uzun zincir: iki CSS dosyası ve senkron script -->
<link rel="stylesheet" href="/css/tum-site.css">
<link rel="stylesheet" href="/css/yazdir.css">
<script src="/js/app.js"></script>

<!-- Kısaltılmış zincir -->
<style>/* ilk ekran için gereken küçük kural seti */</style>
<link rel="stylesheet" href="/css/tum-site.css">
<link rel="stylesheet" href="/css/yazdir.css" media="print">
<script src="/js/app.js" defer></script>

İkinci örnekte yazdırma stili ilk boyamayı bekletmez, script ayrıştırmayı durdurmaz ve ilk ekranın stilleri HTML ile birlikte gelir. Bu satır içi stil yaklaşımı kritik CSS olarak bilinir. Geç keşfedilen ama erken gereken dosyalar (ana görsel, font) için preload tarayıcıya önceden haber verir.

Ölçmek: hangi metrikler etkilenir?

Kritik yolun uzunluğu en doğrudan FCP değerine, yani ilk içeriğin ne zaman boyandığına yansır. Ana görsel veya başlık metni de aynı zincirin sonunda çizildiği için LCP de etkilenir. Chrome geliştirici araçlarının Performance panelinde ağ istekleri, ayrıştırma, stil hesaplama, layout ve paint olayları tek bir zaman çizelgesinde görülür; hangi dosyanın boyamayı beklettiği buradan okunabilir. Lighthouse raporu da render engelleyen istekleri ayrıca listeler. Kavramın kaynak tanımı için MDN'in kritik render yolu rehberi iyi bir başlangıçtır.