Kriittinen renderöintipolku (critical rendering path) on vaiheiden sarja, jonka selain ajaa muuttaakseen HTML:n, CSS:n ja JS:n pikseleiksi ruudulla. Kaikki, minkä on valmistuttava ennen ensimmäistä maalausta, on render-blocking.
Kriittinen renderöintipolku (critical rendering path) on vaiheiden sarja, jonka selain ajaa muuttaakseen HTML:n, CSS:n ja JS:n pikseleiksi ruudulla. Kaikki, minkä on valmistuttava ennen ensimmäistä maalausta, on render-blocking.
<script> pysäyttää HTML:n jäsennyksen, kun se latautuu ja ajetaan.<!-- Tukkii jäsennyksen: selain odottaa tässä ennen jatkamista -->
<script src="/app.js"></script>
<!-- defer: lataa rinnakkain, aja HTML:n jäsennyksen jälkeen, järjestyksessä -->
<script src="/app.js" defer></script>
<!-- async: lataa rinnakkain, aja heti kun valmis (järjestystä ei taata) -->
<script src="/analytics.js" async></script>
Käytä deferiä sovelluskoodille, joka koskettaa DOM:ia, ja asyncia itsenäisille skripteille kuten analytiikalle. Sisällytä kriittinen CSS inline ja lataa loput tukkimatta.
Tämä on ajatusmalli lähes jokaisen latausaikakorjauksen takana: render-blocking CSS/JS on hitaan ensimaalauksen ja huonon LCP:n suurin syy. Sen tietäminen, miksi defer/async ovat olemassa, osoittaa, että ymmärrät selaimen, et vain syntaksia.
Kirjasto IT-haastattelukysymyksiä yksityiskohtaisine vastauksineen — Juniorista Senioriin.
Lahjoita