🌍 Привет мир! 👋
🌍 Привет мир! 👋
Cегодня поговорим про Web Performance: Critical Rendering Path. Не каждое приложение может дорасти до такого состояния, когда возникает проблема с производительстью. Однако понимание того, чего следует избегать при разработке, может помочь еще больше обезопасить ваше приложение от проблем с "перфом".
🚀 Мотивация
Понимание SRP может помочь улучшить веб-производительность, гарантируя, что вы не будете блокировать отрисовку начальной страницы больше, чем это необходимо, и кстати: Вопросы на эту тему это часто задаваемый вопрос на собеседованиях!
⁉️ Что такое Critical Rendering Path
Это последовательность шагов, которые необходимо выполнить браузеру для отображения веб-страницы на экране, начиная с загрузки ресурсов до первого "рендеринга" контента.
🛠️ Этапы CRP
1️⃣ Получение HTML
Браузер делает HTTP-запрос к серверу и получает HTML-код страницы. Этот код анализируется и браузер ищет связанные ресурсы: CSS, JavaScript, шрифты, изображения и т.д.
2️⃣ Парсинг HTML и создание DOM
HTML преобразуется в DOM (Document Object Model) — дерево элементов, которое отражает структуру документа.
3️⃣ Загрузка и обработка CSS
CSS-файлы загружаются, анализируются и превращаются в CSSOM (CSS Object Model) — дерево стилей.
4️⃣ Выполнение JS
Применение любого JavaScript, который изменяет DOM или CSSOM.
5️⃣ Создание Render Tree
Объединяя DOM и CSSOM, браузер создает Render Tree — визуальное представление элементов, которые нужно отобразить на экране.
6️⃣ Layout (расчет позиций)
На этом этапе браузер рассчитывает размеры и позиции всех элементов на странице, учитывая медиазапросы, шрифты и зависимости.
7️⃣ Painting (отрисовка)
Наконец - Render Tree, преобразуется в пиксели и браузер отрисовывает элементы на экране.
‼️ Важно знать:
Браузеру необходимо дождаться загрузки некоторых критически важных ресурсов, перед завершением первого рендера:
✔️ Начального HTML (особенно находящегося в
✔️ CSS, который используется в
✔️ JavaScript в
❗ Render Tree не включает скрытые элементы (
❗ Чем больше количество узлов DOM, тем дольше длится шаг layout.
❗ Динамическое добавление или изменение DOM может запустить процесс layout и painting заново, и это сказывается на производительности.
⚙️ Оптимизация CRP
💡 Lazy Loading: Используйте loading="lazy" для изображений и <iframe>.
💡 Оптимизируйте изображения: Используйте современные форматы, такие как WebP или AVIF.
💡 Старайтесь избегать использования дорогостоящих CSS стилей (
💡 Веб-шрифты могут быть большими и блокировать render. Попробуйте использовать
💡 CDN может обслуживать файлы JavaScript с сервера, ближайшего к пользователю, сокращая время, необходимое для их загрузки.
💡 Установите соответствующие заголовки кэширования HTTP, и кэшируйте файлы JavaScript.
💡 Убедитесь, что выполняется Tree Shaking, это процесс удаления неиспользуемого кода JavaScript во время сборки.
📎 Используйте prefetch и preload:
➖
➖
💡 Используйте медиазапросы для уменьшения нагрузки на мобильных устройствах.
❓ Как определить блокирующие ресурсы
➖ Используйте WebPageTest: ресурсы, блокирующие рендеринг, отмечены оранжевым значком.
➖ Используйте Lighthouse в Chrome DevTools для анализа производительности.
➖ В DevTools вкладка Network: ищите ресурсы с пометкой "blocking".
💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍
#PERFORMANCE
Cегодня поговорим про Web Performance: Critical Rendering Path. Не каждое приложение может дорасти до такого состояния, когда возникает проблема с производительстью. Однако понимание того, чего следует избегать при разработке, может помочь еще больше обезопасить ваше приложение от проблем с "перфом".
🚀 Мотивация
Понимание SRP может помочь улучшить веб-производительность, гарантируя, что вы не будете блокировать отрисовку начальной страницы больше, чем это необходимо, и кстати: Вопросы на эту тему это часто задаваемый вопрос на собеседованиях!
⁉️ Что такое Critical Rendering Path
Это последовательность шагов, которые необходимо выполнить браузеру для отображения веб-страницы на экране, начиная с загрузки ресурсов до первого "рендеринга" контента.
🛠️ Этапы CRP
1️⃣ Получение HTML
Браузер делает HTTP-запрос к серверу и получает HTML-код страницы. Этот код анализируется и браузер ищет связанные ресурсы: CSS, JavaScript, шрифты, изображения и т.д.
2️⃣ Парсинг HTML и создание DOM
HTML преобразуется в DOM (Document Object Model) — дерево элементов, которое отражает структуру документа.
3️⃣ Загрузка и обработка CSS
CSS-файлы загружаются, анализируются и превращаются в CSSOM (CSS Object Model) — дерево стилей.
4️⃣ Выполнение JS
Применение любого JavaScript, который изменяет DOM или CSSOM.
5️⃣ Создание Render Tree
Объединяя DOM и CSSOM, браузер создает Render Tree — визуальное представление элементов, которые нужно отобразить на экране.
6️⃣ Layout (расчет позиций)
На этом этапе браузер рассчитывает размеры и позиции всех элементов на странице, учитывая медиазапросы, шрифты и зависимости.
7️⃣ Painting (отрисовка)
Наконец - Render Tree, преобразуется в пиксели и браузер отрисовывает элементы на экране.
‼️ Важно знать:
Браузеру необходимо дождаться загрузки некоторых критически важных ресурсов, перед завершением первого рендера:
✔️ Начального HTML (особенно находящегося в
<head>).✔️ CSS, который используется в
<head> и не помечен как media="print".✔️ JavaScript в
<head>, если он не помечен атрибутами async или defer.❗ Render Tree не включает скрытые элементы (
display: none) или внешние ресурсы, которые ещё не загружены.❗ Чем больше количество узлов DOM, тем дольше длится шаг layout.
❗ Динамическое добавление или изменение DOM может запустить процесс layout и painting заново, и это сказывается на производительности.
⚙️ Оптимизация CRP
💡 Lazy Loading: Используйте loading="lazy" для изображений и <iframe>.
💡 Оптимизируйте изображения: Используйте современные форматы, такие как WebP или AVIF.
💡 Старайтесь избегать использования дорогостоящих CSS стилей (
box-shadow, blur..).💡 Веб-шрифты могут быть большими и блокировать render. Попробуйте использовать
font-display: swap для возврата к системному шрифту во время загрузки веб-шрифта.💡 CDN может обслуживать файлы JavaScript с сервера, ближайшего к пользователю, сокращая время, необходимое для их загрузки.
💡 Установите соответствующие заголовки кэширования HTTP, и кэшируйте файлы JavaScript.
💡 Убедитесь, что выполняется Tree Shaking, это процесс удаления неиспользуемого кода JavaScript во время сборки.
📎 Используйте prefetch и preload:
➖
preload для текущей страницы (шрифты, критические стили).➖
prefetch для ресурсов будущих страниц.💡 Используйте медиазапросы для уменьшения нагрузки на мобильных устройствах.
❓ Как определить блокирующие ресурсы
➖ Используйте WebPageTest: ресурсы, блокирующие рендеринг, отмечены оранжевым значком.
➖ Используйте Lighthouse в Chrome DevTools для анализа производительности.
➖ В DevTools вкладка Network: ищите ресурсы с пометкой "blocking".
💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍
#PERFORMANCE
Хотите больше таких постов?
Подпишитесь на канал и читайте продолжение в Telegram.