Блокиране на рендирането
Блокиране на рендирането възниква, когато CSS или JavaScript файлове пречат на уеб страницата да покаже съдържание, докато не бъдат напълно изтеглени и обработени от браузъра.
Когато браузърът зареди уеб страница, той трябва да анализира HTML и да изгради дърво за рендиране, преди да покаже нещо. Определени ресурси могат да блокират този процес. CSS блокира рендирането по подразбиране, защото браузърът трябва да знае как да стилизира съдържанието, преди да го покаже, показването на нестилизирано съдържание би причинило рязко премигване.
Ресурсите, блокиращи рендирането, са основната причина за бавен First Contentful Paint (FCP) и Largest Contentful Paint (LCP). Колкото повече блокиращи рендирането ресурси има една страница, толкова по-дълго потребителите гледат празен или частично зареден екран. Стратегиите за намаляване на блокирането на рендирането включват: вграждане на критичния CSS (стиловете, нужни за съдържанието над сгъвката) директно в HTML, отлагане на некритичния CSS чрез медийни заявки или зареждане с JavaScript, използване на атрибутите async или defer в таговете за скриптове, преместване на скриптовете в края на body и разделяне на CSS на файлове за отделните маршрути, така че всяка страница да зарежда само стиловете, които ѝ трябват.
На практика
- WordPress сайт имаше 12 стилови файла и 8 скрипта, блокиращи рендирането, обединяването и отлагането им намали FCP от 4,2 секунди на 1,1 секунди
- Онлайн магазин вгради критичния CSS над сгъвката (3KB) и отложи останалите 200KB, позволявайки на страницата да се появи веднага, докато останалото се зареждаше на заден план
- Корпоративен сайт премести всички аналитични и маркетингови скриптове да се зареждат с defer/async и подобри резултата си в Lighthouse от 42 на 78
- Едностранично приложение добави атрибут async към основния си скрипт и индикаторът за зареждане се появи 2 секунди по-рано, драстично подобрявайки възприеманата скорост
Не сте сигурни как се отнася за Вас?
Старши инженер разглежда сайта Ви, присъствието Ви в търсачките и начина, по който стигат запитванията до Вас, след което записва трите неща, които си струва да се поправят първо. Документът остава за Вас във всеки случай.