Renderēšanas bloķēšana
Renderēšanas bloķēšana rodas, kad CSS vai JavaScript faili neļauj tīmekļa lapai parādīt saturu, līdz tie ir pilnībā lejupielādēti un apstrādāti pārlūkprogrammā.
Kad pārlūkprogramma ielādē tīmekļa lapu, tai ir jāparsē HTML un jāizveido renderēšanas koks pirms jebkāda satura parādīšanas. noteikti resursi var bloķēt šo procesu. CSS pēc noklusējuma ir renderēšanas bloķējošs, jo pārlūkprogrammai ir jāzina, kā stilizēt saturu, pirms to rādīt, nesatilistīta satura parādīšana izraisītu satricinājumu.
Renderēšanas bloķējošie resursi ir galvenā lēnā First Contentful Paint (FCP) un Largest Contentful Paint (LCP) cēlonis. Jo vairāk renderēšanas bloķējošo resursu ir lapā, jo ilgāk lietotāji skatās tukšu vai daļēji ielādētu ekrānu.
Praksē
- WordPress vietnei bija 12 renderēšanas bloķējoši stilu faili un 8 bloķējoši skripti, to konsolidācija un atlikšana samazināja FCP no 4,2 sekundēm līdz 1,1 sekundei
- E-komercijas vietne iekļāva savu kritisko augšējās daļas CSS (3KB) un atlika atlikušos 200KB, ļaujot lapai parādīties nekavējoties, kamēr pārējais ielādējās fonā
- Korporatīvā vietne pārvietoja visus analītikas un mārketinga skriptus uz defer/async un uzlaboja savu Lighthouse veiktspējas vērtību no 42 līdz 78
- Vienas lapas lietotne pievienoja async atribūtu savam galvenajam bundle skriptam, un ielādes rādītājs parādījās 2 sekundes agrāk, dramatiski uzlabojot uztverto ātrumu
Nezināt, kā tas attiecas uz jums?
Senior inženieris apstaigā jūsu objektu, jūsu meklēšanas klātbūtni un veidu, kādā nonāk pieprasījumi, un tad rakstiski norāda trīs lietas, ko vispirms vērts labot. Dokuments paliek jums neatkarīgi no rezultāta.