Какво е критичният път на рендиране на уеб страници?

Това е последователност от стъпки, които браузърът изпълнява, за да покаже съдържанието на страницата на екрана, започвайки с получаването на HTML документа. Включва:

1. Изграждане на DOM (Document Object Model): Анализ на HTML кода и създаване на дърво от обекти, които представят структурата на документа.
2. Изграждане на CSSOM (CSS Object Model): Анализ на CSS файлове и inline стилове за създаване на дърво от обекти, които представят стиловете на елементите.
3. Изграждане на дървото за рендиране: Обединяване на DOM и CSSOM. Създава се дърво само с рендерируемите елементи с приложените стилове.
4. Layout (или Reflow): Определяне на геометричните размери и позицията на всеки елемент на страницата.
5. Рисуване (или Repaint): Запълване на пикселите на екрана въз основа на дървото за рендиране и данните за разположение.

Оптимизацията на критичния път за рендиране е насочена към това, браузърът колкото се може по-бързо да покаже първото смислено съдържание (First Meaningful Paint) или интерактивността (Time to Interactive). Това се постига чрез минимизиране на блокиращите ресурси (JS и CSS), оптимизиране на размерите на ресурсите и тяхното зареждане в подходящия момент.