Blocare la randare
Blocarea randării apare atunci când fișierele CSS sau JavaScript împiedică afișarea conținutului unei pagini web până când acestea nu sunt complet descărcate și procesate de browser.
Când un browser încarcă o pagină web, trebuie să analizeze HTML-ul și să construiască un arbore de randare înainte de a afișa ceva. Anumite resurse pot bloca acest proces. CSS blochează randarea în mod implicit, deoarece browserul trebuie să știe cum să stilizeze conținutul înainte de a-l afișa, afișarea conținutului nestilizat ar provoca un flash deranjant.
Resursele care blochează randarea sunt principala cauză a unui First Contentful Paint (FCP) și Largest Contentful Paint (LCP) lent. Cu cât o pagină are mai multe resurse care blochează randarea, cu atât utilizatorii privesc mai mult timp un ecran gol sau parțial încărcat.
În practică
- Un site WordPress avea 12 foi de stil care blocau randarea și 8 scripturi blocante, consolidarea și amânarea lor a redus FCP de la 4,2 secunde la 1,1 secunde
- Un site de e-commerce a inclus inline CSS-ul critic de deasupra pliului (3KB) și a amânat restul de 200KB, lăsând pagina să apară imediat în timp ce restul se încărca în fundal
- Un site corporate a mutat toate scripturile de analiză și marketing pe defer/async și a îmbunătățit scorul de performanță Lighthouse de la 42 la 78
- O aplicație single-page a adăugat un atribut async la scriptul principal și un spinner de încărcare a apărut cu 2 secunde mai devreme, îmbunătățind dramatic viteza percepută
Nu sunteți sigur cum se aplică în cazul dumneavoastră?
Un inginer senior parcurge site-ul dumneavoastră, prezența în căutări și felul în care ajung la dumneavoastră solicitările, apoi notează primele trei lucruri care merită reparate. Păstrați documentul în orice caz.