Kritik render yolu, tarayıcının HTML, CSS ve JS'yi ekrandaki piksellere dönüştürmek için çalıştırdığı adım dizisidir. İlk boyamadan (paint) önce bitmesi gereken her şey render-blocking (render'ı bloklayan) sayılır.
Kritik render yolu, tarayıcının HTML, CSS ve JS'yi ekrandaki piksellere dönüştürmek için çalıştırdığı adım dizisidir. İlk boyamadan (paint) önce bitmesi gereken her şey render-blocking (render'ı bloklayan) sayılır.
<script>, indirilip çalışırken HTML ayrıştırmasını durdurur.<!-- Ayrıştırmayı bloklar: tarayıcı devam etmeden önce burada bekler -->
<script src="/app.js"></script>
<!-- defer: paralel indir, HTML ayrıştırıldıktan sonra sırayla çalıştır -->
<script src="/app.js" defer></script>
<!-- async: paralel indir, hazır olur olmaz çalıştır (sıra garanti değil) -->
<script src="/analytics.js" async></script>
DOM'a dokunan uygulama kodu için defer, analytics gibi bağımsız script'ler için async kullanın. Kritik CSS'yi satır içine alın ve geri kalanını bloklamadan yükleyin.
Bu, neredeyse her yükleme süresi düzeltmesinin arkasındaki zihinsel modeldir: render'ı bloklayan CSS/JS, yavaş ilk boyamanın ve zayıf LCP'nin en önde gelen nedenidir. defer/async'in neden var olduğunu bilmek, yalnızca sözdizimini değil tarayıcıyı anladığınızı gösterir.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap