Tarayıcı sayfayı nasıl çizer?

Kavramı anlayalım

Tarayıcı HTML’i yukarıdan aşağı okuyarak DOM ağacını kurar. CSS dosyalarından CSSOM oluşur. İkisi birleşince render ağacı çıkar; tarayıcı her öğenin konumunu ve boyutunu hesaplar (layout) ve pikselleri boyar (paint). Son adımda katmanlar birleştirilir (composite).

CSS ‘render’ı engeller: stiller gelmeden tarayıcı içeriği çizmez, çünkü yanlış görünümü gösterip sonra düzeltmek kötü bir deneyimdir. Normal bir script etiketi ise HTML ayrıştırmasını durdurur; defer veya async işaretli script’ler indirme sırasında ayrıştırmanın devam etmesine izin verir. Next.js kendi script’lerini bu şekilde yükler.

Kullanıcının hissettiği hız bu adımlara bağlıdır. Ana içeriğin ne zaman göründüğü (LCP), sayfanın etkileşime ne kadar hızlı tepki verdiği (INP) ve öğelerin yüklenirken kayıp kaymadığı (CLS) Core Web Vitals metrikleridir. Boyutu bilinmeyen bir görsel geç yüklendiğinde altındaki metni iter; genişlik ve yükseklik vermek bunu önler.