Критический путь рендеринга: что это такое и как его оптимизировать

Когда мы говорим о предоставлении пользователям сверхбыстрой работы в Интернете, мы часто сосредотачиваемся исключительно на том, что мы, как владельцы веб-сайтов и веб-разработчики, должны делать.

Но правда в том, что:

Обеспечение быстрой работы в Интернете также требует большой работы со стороны браузера.

Он получает наши файлы HTML, CSS и JavaScript и выполняет определенные действия для преобразования их в пиксели на экране.

Секрет повышения производительности заключается в понимании того, что происходит между получением ресурсов и их обработкой, чтобы превратить их в визуализированные пиксели.

Этот процесс также известен как критический путь рендеринга (CRP) .

И в этой статье вы узнаете все, что вам нужно знать о CRP, и как его оптимизировать для более быстрого рендеринга.

• Что такое критический путь рендеринга?
• Объяснение последовательности критического пути рендеринга
• Как оптимизировать критический путь рендеринга вашего сайта
• 3 плагина WordPress для оптимизации вашего CRP
• Контрольный список оптимизации CRP

Давай начнем!

Что такое критический путь рендеринга?

Критический путь рендеринга относится к последовательности шагов, которые веб-браузер выполняет для преобразования кода HTML, CSS и JavaScript в визуальное представление на экране пользователя.

Он включает в себя ряд процессов, таких как построение объектной модели документа (DOM), создание объектной модели CSS (CSSOM) и их объединение для создания дерева рендеринга. Затем дерево рендеринга используется для расчета макета и рисования пикселей на экране пользователя.

Оптимизация критического пути рендеринга, с другой стороны, относится к сокращению времени, затрачиваемого веб-браузером на выполнение каждого шага последовательности, при этом отдавая приоритет контенту, относящемуся к текущему действию пользователя.

Чтобы убедиться, что ваши усилия по оптимизации достигли цели, вам необходимо иметь глубокое понимание каждого шага последовательности. Поэтому следующие пару абзацев очень важны, и мы настоятельно рекомендуем прочитать их, прежде чем предпринимать какие-либо действия.

Объяснение последовательности критического пути рендеринга

Вот краткий обзор шагов, выполняемых браузером при отображении страницы:

1. Браузер загружает и анализирует разметку HTML и создает модель DOM.
2. Затем он загружает и обрабатывает разметку CSS и создает объектную модель CSS (CSSOM).
3. Затем он объединяет необходимые узлы из DOM и CSSOM для создания дерева рендеринга — древовидной структуры всех видимых узлов, необходимых для рендеринга страницы.
4. Он вычисляет размеры и положение каждого элемента на странице в процессе макета.
5. Наконец, браузер рисует пиксели на экране.

Теперь давайте остановимся на каждом шаге.

Дом

Объектная модель документа (DOM) — это внутреннее представление HTML-документа в браузере.

Когда веб-страница загружается, браузер анализирует HTML и создает древовидную структуру узлов, представляющих элементы в документе. Каждый узел соответствует элементу HTML и имеет свойства, описывающие его атрибуты, содержимое и позицию в дереве.

Важно: Браузер строит DOM постепенно, что позволяет нам оптимизировать отрисовку страницы, создавая эффективную структуру и избегая чрезмерных размеров DOM.

CSSOM

В то время как DOM содержит все содержимое страницы, CSSOM включает всю информацию о том, как стилизовать DOM.

Другое различие между DOM и CSSOM заключается в том, что:

Создание DOM происходит постепенно, а CSSOM — нет.

Когда веб-сайт загружается, браузер должен обрабатывать CSS для применения стилей. В отличие от HTML, который можно обрабатывать по частям, CSS нужно обрабатывать сразу. Это связано с тем, что некоторые стили могут быть позже перезаписаны другими в файле CSS, поэтому браузеру необходимо подождать, пока он не прочитает весь файл CSS, прежде чем решить, какие стили применить.

Это сделано для того, чтобы не показывать стили, которые впоследствии будут перезаписаны и тратить ресурсы.

Проще говоря:

Браузер блокирует процесс рендеринга до тех пор, пока не получит и не проанализирует весь CSS.

Вот почему CSS считается ресурсом, блокирующим рендеринг.

Дерево визуализации

Дерево рендеринга — это комбинация DOM и CSSOM, которую браузер использует для создания визуального представления веб-страницы.

Браузер использует дерево рендеринга для расчета размеров и положения узлов в качестве входных данных для процесса рисования.

Важно: В дереве рендеринга фиксируется только видимое содержимое. Как правило, головной раздел не содержит видимой информации и поэтому исключается. Кроме того, если у элемента есть свойство display: none , ни сам элемент, ни его потомки не включаются в дерево рендеринга.

Макет

После построения дерева рендеринга следующим шагом является компоновка. Макет устанавливает размещение и ориентацию каждого элемента на странице, определяя его размеры, положение и взаимосвязи.

Но вот в чем дело:

На производительность макета влияет DOM.

Другими словами:

Чем больше количество узлов DOM, тем дольше процесс компоновки.

Краска

Заключительный этап — рисование пикселей на экране, за которым следует создание дерева рендеринга и макета.

Изначально в процессе загрузки рисуется весь экран. Впоследствии перекрашиваются только затронутые части экрана, так как браузеры устроены так, что перекрашивают только необходимую область.

Имейте в виду, что продолжительность этапа рисования зависит от характера обновлений, реализуемых в дереве рендеринга.

Теперь давайте посмотрим, какие оптимизации можно применить, чтобы помочь браузеру и ускорить некоторые процессы.

Как оптимизировать критический путь рендеринга вашего сайта

Время, необходимое браузеру для выполнения всего процесса, может варьироваться. Есть много движущихся частей, которые влияют на длину критического пути:

• Размер документа
• Количество запросов
• Пользовательское устройство
• Прикладные стили

Тем не менее, есть три метода, которые считаются наиболее подходящими, когда дело доходит до оптимизации CRP:

1. Минимизируйте количество критически важных ресурсов, отложив некритические или полностью исключив их.
2. Оптимизируйте количество необходимых запросов вместе с размером файла каждого запроса.
3. Установите приоритет загрузки критически важных ресурсов, тем самым сократив длину критического пути

Давайте углубимся в то, как реализовать каждую из рекомендуемых стратегий оптимизации:

Оптимизация ресурсов CSS и JS, блокирующих рендеринг

Вы уже знаете, что когда браузер сталкивается с ресурсами CSS и JS, блокирующими рендеринг, он должен загрузить, проанализировать и выполнить их, прежде чем делать что-либо еще, включая рендеринг.

Когда дело доходит до оптимизации CSS, вы можете реализовать следующие методы:

• Критический CSS. Он определяет минимальный набор правил CSS, необходимых для отображения видимой части веб-страницы, и доставляет их в браузер как встроенный CSS, а не загружает полную таблицу стилей. Загружая только необходимый CSS для содержимого верхней части страницы, браузер может быстрее отображать страницу и улучшать взаимодействие с пользователем . Это связано с тем, что браузеру не нужно ждать загрузки всей таблицы стилей перед отображением страницы.
  
• Объедините файлы CSS. Конкатенация CSS — это процесс объединения нескольких файлов CSS в один файл. Этот метод повышает производительность за счет уменьшения количества HTTP-запросов, необходимых для загрузки веб-страницы , поскольку браузеру нужно загрузить и проанализировать только один файл CSS вместо нескольких.

Что касается ваших файлов JavaScript, вот что вы можете сделать:

• Задержка загрузки JS. Отложенная загрузка JS — это метод, который ускоряет работу вашего сайта, откладывая загрузку файлов JavaScript до тех пор, пока HTML-документ не будет загружен и проанализирован . Вы можете использовать атрибут defer в теге script , который ссылается на файл JS. Важно отметить, что атрибут defer следует использовать только для файлов JS, которые не нужно выполнять сразу после загрузки (например, файлы, которые используются только на определенных страницах), поскольку порядок выполнения может быть непредсказуемым, если несколько отложенных сценариев используются.
  
• Загружайте JS асинхронно. Для некоторых файлов JS может потребоваться использование атрибута async, который позволяет загружать и выполнять файл асинхронно с анализом HTML-документа.

Есть несколько оптимизаций, которые вы можете применить как к CSS, так и к JavaScript:

• Минификация. Минификация включает удаление ненужных символов, таких как пробелы, комментарии и разрывы строк, из файлов CSS и JavaScript. Этот процесс может значительно уменьшить размер файлов, не влияя на их функциональность или внешний вид .
  
• Удалите неиспользуемые CSS и JS. Неиспользуемые CSS и JS относятся к определенным правилам, которые не используются на конкретной странице, но все еще загружаются. Удаление этих частей ваших файлов напрямую повлияет на скорость построения браузером дерева рендеринга .

Оптимизируйте ресурсы, блокирующие рендеринг, на автопилоте. Установить НитроПак →

Уменьшите размер ваших файлов

Чтобы уменьшить объем данных, которые браузер должен загрузить, мы можем использовать такие методы, как минимизация, сжатие и кэширование ресурсов HTML, CSS и JavaScript.

Вы уже знаете, что означает минификация, поэтому давайте сосредоточимся на двух других:

• Сжатие. Сжатие — это метод, применяющий алгоритмы для перезаписи двоичного кода файлов с использованием меньшего количества битов, чем исходный. В результате ваши файлы имеют гораздо меньший размер, что сокращает время загрузки страницы и использование полосы пропускания.
  
• Кэширование. Кэширование использует кэш HTTP, реализованный в каждом браузере. Чтобы обеспечить эффективное кэширование, мы должны гарантировать, что каждый ответ сервера предоставляет правильные заголовки HTTP, указывая браузеру, когда и как долго он должен кэшировать запрошенные ресурсы.

Положитесь на самый передовой механизм кэширования. Получить NitroPack сегодня →

Установите приоритет загрузки критически важных ресурсов

В общем, браузеры довольно хорошо расставляют приоритеты для самых важных ресурсов и загружают их в первую очередь. Однако в некоторых случаях вы можете помочь им загрузить ваш сайт еще быстрее, вручную расставив приоритеты для наиболее важных ресурсов.

Вы можете использовать подсказки ресурсов , чтобы сообщить браузеру, как обрабатывать определенные ресурсы или веб-страницы.

Вот три основных:

• Ссылка rel=prefetch. Prefetch — это подсказка ресурса с низким приоритетом, которая позволяет браузеру извлекать ресурсы, которые могут понадобиться позже, и сохранять их в кэше браузера.

• Ссылка rel=preconnect. Директива preconnect помогает браузеру устанавливать ранние соединения перед отправкой начального запроса на сервер.

• Ссылка rel=preload. Предварительная загрузка используется для того, чтобы заставить браузер загрузить ресурс раньше, чем он его обнаружит, потому что это имеет решающее значение для страницы.

Важно: Prefetch и preconnect — это подсказки ресурсов, и они выполняются так, как считает нужным браузер. Директива preload является обязательной для браузеров. Узнайте больше о том, как реализовать подсказки ресурсов.

Теперь, когда вы знаете, как выполнять оптимизацию критического пути рендеринга, давайте рассмотрим некоторые плагины WordPress, которые могут автоматизировать этот процесс.

3 плагина WordPress для оптимизации критического пути рендеринга

Все вышеперечисленные оптимизации можно выполнить вручную. Однако некоторые из них требуют технических знаний, чтобы гарантировать, что вы не сломаете свой сайт во время процесса.

К счастью для всех пользователей WordPress, есть плагины, которые могут помочь с оптимизацией CRP. Давайте проверим топ-3 кандидатов, на наш взгляд:

NitroPack — комплексное решение

NitroPack — это ведущее универсальное решение для оптимизации скорости сайта, которое сочетает в себе более 35+ функций веб-производительности. Когда дело доходит до оптимизации вашего критического пути рендеринга, NitroPack автоматически выполняет такие оптимизации, как:

• Критический CSS
• CSS и JS минификация
• Сжатие CSS и JS
• Кэширование
• Отложить загрузку JS
• Удалите неиспользуемые CSS и JS

Но возможности оптимизации на этом не заканчиваются. Вы также получите полный набор инструментов для повышения производительности:

• Встроенный CDN
• Полный стек оптимизации изображений
• Оптимизация шрифтов
• Кэширование корзины электронной коммерции
• Круглосуточная поддержка

Ускорьте свой сайт автоматически. Получить NitroPack сегодня →

WP Super Cache — плагин только для кэширования

WP Super Cache — это плагин для кэширования, который в основном предлагает функции кэширования и HTTP-сжатие, но ему не хватает минимизации ресурсов и оптимизации JavaScript с помощью атрибутов async и defer.

Наиболее примечательные особенности включают в себя:

• Включить кеширование для всех посетителей
• Отключить кеширование для авторизованных посетителей
• Сжимайте страницы, чтобы они быстрее обслуживались посетителями
• Восстановление кеша

Быстрая производительность

Swift Performance — еще один плагин, который может оказаться полезным для оптимизации CRP. Некоторые из его особенностей включают в себя:

• Минификация файлов CSS и JavaScript
• Критический CSS
• Кэширование
• Оптимизация изображения

Оптимизация критического пути рендеринга [Контрольный список]

В этой статье мы рассмотрели много вопросов, поэтому вот удобный контрольный список всех оптимизаций, которые мы упомянули:

• Создание критического CSS
• Объединение файлов CSS
• Задержка загрузки JavaScript
• Загружать JavaScript асинхронно
• Минимизируйте CSS и JavaScript
• Сжимайте CSS и JavaScript
• Удалите неиспользуемые CSS и JavaScript
• Применить минификацию
• Применить сжатие
• Использовать кеширование
• Реализовать ссылку rel=preload
• Реализовать ссылку rel=prefetch
• Реализовать ссылку rel=preconnect

Скачать контрольный список оптимизации CRP →

И последнее, но не менее важное: не забывайте тестировать до и после каждой оптимизации!