Как избежать цепочки критических запросов
Опубликовано: 2023-08-03Получаете ли вы предупреждение «Избегайте объединения критических запросов в цепочку» каждый раз, когда запускаете тест PageSpeed Insights?
Ну, это заканчивается сегодня.
Прочитав это руководство, вы будете знать все о критических запросах, о том, как их объединение в цепочки влияет на вашу производительность и, самое главное, как исправить предупреждение «Избегайте объединения критических запросов в цепочки».
- Какой запрос считается критическим?
- Что означает «Избегайте объединения критических запросов»
- Как объединение критических запросов влияет на вашу производительность
- Как избежать цепочки критических запросов в WordPress
- Бонус: другие рекомендации по исправлению «Избегайте объединения критических запросов».
Читай дальше.
Какой запрос считается критическим?
Критический запрос — это ресурс, необходимый для рендеринга начального вида веб-страницы. Другими словами - все, что загружено выше сгиба.
Например, вот что я вижу на своем ноутбуке, когда загружаю домашнюю страницу NitroPack:
Все вышеперечисленные элементы считаются критически важными, потому что в зависимости от того, насколько быстро они загружаются, пользователь может получить отличный опыт или сразу же отказаться.
Что означает «Избегайте объединения критических запросов»?
Проще говоря, предупреждение «Избегайте объединения критических запросов» означает, что критические ресурсы, необходимые для отображения вашей страницы, слишком велики.
С точки зрения цепочки, критическая цепочка запросов — это последовательность запросов, которые зависят друг от друга и необходимы для отображения страницы. Порядок анализа и выполнения запросов определяется критическим путем рендеринга (CRP).
Критический путь рендеринга относится к последовательности шагов, которые веб-браузер выполняет для преобразования кода HTML, CSS и JavaScript в визуальное представление на экране пользователя.
Когда браузер начинает анализировать код, он обрабатывает критические запросы в соответствии с назначенным приоритетом:
Теперь, когда вы знаете, что такое CRP и как браузеры назначают приоритеты, давайте вернемся к определению «критической цепочки запросов».
Поскольку это последовательность запросов, которыезависят друг от друга , загрузка больших неоптимизированных критических запросов неизбежно приведет к более длинным критическим цепочкам, что замедлит загрузку страницы.
Чтобы проиллюстрировать это утверждение, давайте рассмотрим следующий пример:
Представьте себе простую веб-страницу, которая включает следующие ресурсы:
- index.html — основной HTML-файл, определяющий структуру страницы.
- styles.css — определяет внешний вид и макет страницы.
- main.js — содержит скрипты, добавляющие интерактивность и функциональность веб-странице.
- logo.png (файл изображения)
Рассмотрим ситуацию, когда каждый ресурс является частью длинной цепочки критически важных запросов. Например, представьте, что файл HTML ссылается на несколько файлов CSS и JavaScript, и каждый из этих файлов, в свою очередь, ссылается на другие ресурсы, что приводит к цепочке зависимостей.
В таком сценарии задержка загрузки любого из ресурсов в цепочке будет иметь каскадный эффект на задержку критического пути и общую производительность вашей страницы.
И, говоря о веб-производительности, давайте посмотрим, какие показатели больше всего пострадают от цепочки критических запросов…
Как объединение критических запросов влияет на вашу производительность
Чем длиннее цепочка, тем больше времени требуется браузеру для отображения ресурсов, необходимых для отображения вашего контента.
С точки зрения показателей веб-производительности это означает плохую первую отрисовку контента (FCP) и самую большую отрисовку контента (LCP).
Ошибка первой отрисовки контента (FCP)
FCP измеряет, сколько времени требуется браузеру для визуализации первой части содержимого DOM (например, изображения, SVG, непустого элемента холста) на странице.
Эти элементы могут показаться незначительными, но они имеют решающее значение для пользовательского опыта вашего сайта. Они сообщают вашим посетителям, что их ввод обрабатывается и сайт загружается. Если страница остается пустой в течение нескольких секунд перед загрузкой, пользователи не знают, происходит что-то или нет.
Чтобы гарантировать, что браузер сможет отобразить этот первый фрагмент содержимого DOM как можно скорее, критические цепочки запросов должны быть короткими и легкими. В противном случае вероятность того, что ваши посетители уйдут из-за пустого экрана и сбоя FCP, намногоВЫШЕ.
Сбой при наибольшей отрисовке содержимого (LCP)
LCP измеряет, сколько времени требуется для загрузки на странице самого большого элемента в верхней части страницы.
Это один из трех показателей Core Web Vitals (CWV), которые представляют собой набор ориентированных на пользователя показателей, измеряющих время загрузки вашего сайта, визуальную стабильность и интерактивность. Они также являются фактором ранжирования Google .
Таким образом, низкий балл LCP из-за загрузки длинных критических цепочек запросов не только означает, что вы не соответствуете некоторымпоказателям производительности, но и:
- Снижение ваших шансов пройти CWV
- Ухудшение рейтинга вашего сайта
- Обеспечение плохого пользовательского опыта
Верный способ избежать всего этого — сократить критический путь, оптимизировав количество и размер ваших ресурсов.
А вот как это сделать…
Как избежать цепочки критических запросов (на WordPress)
Если бы существовала единственная стратегия для исправления «Избегайте объединения критических запросов в цепочку», это было бы устранение ресурсов, блокирующих рендеринг.
Ресурсы, блокирующие рендеринг, — это файлы, которые, когда браузер сталкивается с ними, он должен загрузить, проанализировать и выполнить, прежде чем делать что-либо еще, включая рендеринг.
Основными виновниками, чаще всего помечаемыми как «блокировка рендеринга», являются неоптимизированные файлы CSS и JavaScript.
Следующие методы помогут вам успешно справиться с обоими из них:
Удалить неиспользуемый CSS
Термин «Неиспользуемый CSS» относится к правилам CSS, которые не используются на текущей странице.
Эти правила делают файлы больше, чем необходимо, раздувая код и создавая длинные критические цепочки запросов. В результате ваши файлы и страница загружаются вечно.
Если вам удобно настраивать свой код, вы можете использовать онлайн-инструмент, такой как PurifyCSS.
Введите URL-адрес своей страницы, и инструмент автоматически удалит ненужный код. Затем вы можете скачать «очищенный» CSS и загрузить его на свой сайт:
Важно : изменение кода скрывает риск нарушения дизайна и функциональности вашего сайта.Если у вас нет предыдущего технического опыта, обратитесь к веб-разработчику или установите плагин, который автоматически сделает это за вас.
Удалите неиспользуемый CSS одним нажатием кнопки. Установите NitroPack и автоматически оптимизируйте свой сайт →
Отложить JavaScript
Отложенные файлы JavaScript позволяют загружать их только при необходимости, поэтому браузер может в первую очередь сосредоточиться на обслуживании наиболее важного содержимого (в верхней части страницы).
Вы можете лениво загружать файлы JS, используяасинхронный и отложить атрибуты.
- асинхронный
Асинхронная загрузка означает, что скрипт будет загружаться в фоновом режиме, пока продолжается синтаксический анализ HTML и отрисовка страницы.
Когда скрипт загружается, он приостанавливает синтаксический анализ HTML, немедленно выполняет скрипт, а затем возобновляет синтаксический анализ. В результате порядок выполнения сценариев с атрибутом async может быть непредсказуемым, поскольку они могут завершать загрузку в разное время.
Атрибут asyncидеально подходит для сторонних скриптов, которым вы не хотите блокировать загрузку и рендеринг вашей страницы.
- отложить
Атрибут defer , как и async, также загружает скрипт асинхронно, но отличается способом выполнения.
Скрипты с атрибутом defer будут загружаться в фоновом режиме, пока продолжается синтаксический анализ HTML, но выполнение скрипта будет отложено до завершения синтаксического анализа HTML. Порядок выполнения скриптов с отсрочкой сохраняется в том порядке, в котором они появляются в HTML.
Используйте атрибутdefer, если вы хотите сохранить порядок выполнения скриптов в том виде, в котором они отображаются в HTML.
Сжатие и минификация кода
Еще один уровень оптимизации критической цепочки запросов заключается в уменьшении общего размера ваших ресурсов, поскольку это поможет браузеру быстрее загружать, анализировать и отображать их.
И способ сделать это — сжать и минимизировать ваши файлы.
Применениесжатия перепишет двоичный код ваших файлов и закодирует информацию, используя меньшее количество битов, чем оригинал.
Наиболее популярным инструментом сжатия является gzip. Gzip работает, находя повторяющиеся строки и заменяя их указателями на первый экземпляр строки. Преимущество заключается в том, что указатели занимают меньше места, чем текст.
Minification , с другой стороны, удаляет ненужные элементы кода, такие как комментарии, разрывы строк или пробелы:
Источник:KeyCDN
Сокращая свой код, вы можете сократить критические запросы, что приведет к повышению скорости вашего веб-сайта.
В Интернете есть множество бесплатных инструментов, которые могут помочь вам оптимизировать размер кода. Для их использования вам потребуется ввести свой код, затем скопировать уменьшенную/сжатую версию и вставить ее обратно на свой сайт. Вот несколько предложений:
- CSSNano
- Лучший минификатор JavaScript
- код украсить
Другие рекомендации по исправлению «Избегайте объединения критических запросов»
Подмножество шрифтов
После того, как вы позаботились о ресурсах CSS и JavaScript вашего сайта, следующим лучшим кандидатом на оптимизацию являются ваши веб-шрифты.
Веб-шрифты, о которых часто забывают, часто представляют собой большие файлы, загрузка которых занимает некоторое время и даже может блокировать отображение текста.
Чтобы избежать этого, вам нужно уменьшить их размер, чтобы браузер мог их сразу загрузить.
Введите поднабор шрифта.
Подмножество шрифта — это метод оптимизации, который удаляет неиспользуемые глифы (символы) из шрифта, чтобы значительно уменьшить его размер.
Например, подумайте, сколько уникальных глифов использует ваша домашняя страница. Готовы поспорить, что их не больше 100.
Для сравнения: Font Awesome, второй наиболее часто используемый шрифт (его используют 7% всех веб-сайтов),имеет 26 107 символов .
Источник:Веб-альманах
Представьте, сколько времени вы могли бы сэкономить браузеру и вашим посетителям, загружая только то, что абсолютно необходимо для конкретной страницы.
Есть несколько онлайн-инструментов, которые могут помочь вам применить поднастройки шрифтов. Вам нужно будет загрузить файл шрифта и выбрать глифы, которые вы хотите удалить. Затем вернитесь на свой сайт и загрузите файл подмножества.
Кроме того, вам нужно убедиться, что вы проходите этот процесс каждый раз, когда обновляете свой контент.
Важно : Подстановка файлов шрифтов с помощью онлайн-инструментов скрывает риск отсутствия символов на странице после оптимизации. Если вы раньше не работали со шрифтами, настоятельно рекомендуем обратиться к специалисту по веб-производительности или установить плагин, который сделает это за вас автоматически.
Подмножьте свои шрифты без риска. Уменьшите их размер до 70%, установив NitroPack →
Предварительная загрузка ключевых запросов
Использование атрибута ссылки rel=preload для предварительной загрузки критических запросов — еще одна стратегия оптимизации, которая улучшит FCP и LCP и сократит критический путь.
Чтобы определить наиболее важный запрос, запустите свой сайт через PageSpeed Insights и проверьте предупреждение «Запрос ключа предварительной загрузки»:
Затем перейдите к своему коду и добавьте тег ссылки rel=preload к конкретному ресурсу:
Не забудьте включить атрибут as , чтобы браузер мог установить приоритет предварительно загруженного ресурса в соответствии с его типом и определить, существует ли он уже в кеше.
Дополнительные ресурсы: проверьте полный список as значений.
Как избежать цепочки критических запросов с помощью NitroPack
Оптимизация ваших критически важных цепочек запросов может оказаться утомительной задачей, если вы не вооружены нужными инструментами.
Как вы уже знаете, в некоторых случаях точная настройка вашего кода может иметь неприятные последствия и нарушить функциональность и дизайн вашего сайта.
Но исправление одного предупреждения PSI не должно быть такой головной болью.
Или, по крайней мере, это не с NitroPack.
NitroPack — это универсальный инструмент для оптимизации скорости, который повысит производительность вашего сайта, применяя:
- Удалить неиспользуемый CSS
- Отложить JavaScript
- Подмножество шрифтов
И 32+ других проверенных метода оптимизации для вас.
С NitroPack для повышения производительности вашего сайта не требуется никакого программирования или предыдущего технического опыта.
Звучит слишком хорошо, чтобы быть правдой?
Давайте взглянем на сайт одного из наших клиентов с NitroPack и без него.
Вот их результаты без NitroPack:
41 показатель производительности на мобильных устройствах, 47 цепей и задержка критического пути 3781 мс.
Без НитроПака
А вот результаты с NitroPack:
95 баллов производительности, 1 цепочка, более чем в 2 раза более короткая задержка критического пути:
С нитропаком
Вы можете испытать это и множество других улучшений производительности. Установите NitroPack сегодня, и мы позаботимся о молниеносной скорости вашего сайта.