Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке критичний шлях рендерингу (critical rendering path)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Критичний шлях рендерингу (Critical Rendering Path)** - це послідовність кроків, які браузер проходить, щоб перетворити HTML, CSS і JS на пікселі на екрані. **Ключове:** чим коротший і простіший цей ланцюжок, тим швидше сайт «оживає».Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Критичний шлях рендерингу (Critical Rendering Path)** - це послідовність кроків, які браузер проходить, щоб перетворити HTML, CSS і JS на пікселі на екрані. Він включає все, що **потрібно для першого відображення сторінки**, і саме від нього залежить, як швидко користувач побачить хоч щось. --- ## Порядок кроків 1. **Завантаження HTML** Браузер починає завантажувати HTML-документ. 2. **Побудова DOM** HTML парситься у дерево об'єктів (Document Object Model). 3. **Завантаження і парсинг CSS** Усі CSS-файли теж завантажуються і перетворюються на CSSOM (CSS Object Model). Поки не завантажений CSS, рендер зупиняється. 4. **Створення рендер-дерева** DOM + CSSOM об'єднуються в дерево візуальних об'єктів. 5. **Layout (або Reflow)** Обчислюються розміри і позиції всіх елементів. 6. **Paint** Кожному вузлу призначається візуальне представлення: колір, шрифт, фон тощо. 7. **Composite** Все збирається у кадр і надсилається на екран. --- ## Чому це важливо - Все, що блокує ці кроки (великі CSS, синхронний JS, шрифти), уповільнює перший рендер. - Оптимізація критичного шляху означає мінімізувати час до першого корисного контенту (FCP, LCP). --- ## Висновок Критичний шлях рендерингу - це ланцюжок від отримання HTML до першого видимого пікселя. Чим коротший і простіший цей ланцюг, тим швидше сайт «оживає».Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.