Как предварительно загрузить ключевые запросы для улучшения основных веб-показателей

Не все ресурсы вашего сайта одинаково важны.

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

В противном случае вы рискуете получить медленно загружаемые страницы и длинный список предупреждений в отчете PageSpeed ​​Insights (PSI).

Один из них —предварительная загрузка ключевых запросов.

В следующих строках вы узнаете, что такое запросы ключей, почему важно исправить предупреждение «Предварительно загрузить запросы ключей» и, что не менее важно, — как это сделать.

• Что означает предварительная загрузка ключевых запросов
• Как предварительная загрузка критически важных ресурсов улучшит скорость вашего сайта
• Как определить ключевые запросы, которые вы должны предварительно загрузить
• Как исправить предупреждение о запросах ключа предварительной загрузки
• Автоматическая предварительная загрузка ключевых запросов

Читай дальше.

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

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

Но тут возникает вопрос:

Что делает запрос критическим?

Критический запрос – это ресурс, отображаемый в начальном окне просмотра страницы (или в верхней части страницы, как это принято называть на рынке).

Например, вот что я вижу, когда загружаю домашнюю страницу NitroPack на своем ноутбуке:

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

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

• Наибольший
• Высокий
• Середина
• Низкий
• Самый низкий

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

Вот как…

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

Правда в том:

Исправлять предупреждение «Предварительная загрузка ключей» только для того, чтобы переместить еще одно предупреждение в категорию «пройдено», не стоит.

Однако предварительная загрузка наиболее важных ресурсов вашей веб-страницы окажет значительное влияние на ваш сайт:

• Основные веб-жизненные показатели
• Оценка производительности
• Воспринимаемая производительность

Давайте посмотрим, как это возможно.

Предварительная загрузка и отрисовка самого большого содержимого (LCP)

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

Типы ресурсов, которые чаще всего считаются элементом LCP, включают:

• Изображений;
• теги изображения;
• миниатюры видео;
• Фоновые изображения с помощью CSS;
• Текстовые элементы.

Все они являются отличными кандидатами на предварительную загрузку.

А их более быстрая доставка поможет вам улучшить метрику Core Web Vitals, с которой веб-сайты борются больше всего.

Более того, на LCP приходится 25% вашей общей оценки производительности. Таким образом, его повышение неизбежно приведет к перемещению вашего счета с красного на зеленый.

Измените свой балл LCP с красного на зеленый одним нажатием кнопки. Установите NitroPack сегодня →

Предварительная загрузка и первая отрисовка содержимого (FCP)

First Contentful Paint (FCP) измеряет время, которое требуется браузеру для визуализации первой части содержимого DOM (например, изображения, SVG, непустого элемента холста) на странице.

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

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

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

Подпрыгивать!

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

Кроме того, на FCP приходится 10% вашей оценки производительности, так что вы также получите повышение в этом аспекте.

Предварительная загрузка и воспринимаемая производительность

Мы несколько раз упоминали воспринимаемую производительность. Если вам интересно, что это значит, вот определение:

«Воспринимаемая производительность — это субъективная мера производительности, отзывчивости и надежности веб-сайта. Другими словами, насколько быстрым сайт кажется пользователю. Его труднее определить и измерить, чем фактическую скорость работы, но, возможно, это даже важнее».

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

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

Это улучшение воспринимаемой производительности может привести к

• более высокая вовлеченность пользователей
• сниженный показатель отказов
• общая удовлетворенность сайтом

Как определить наиболее важные запросы, которые следует предварительно загрузить

Google PageSpeed ​​Insights — это самый простой и эффективный способ определить ключевые запросы для предварительной загрузки.

Когда вы проверяете эффективность своего URL-адреса, обязательно ознакомьтесь с рекомендациями в разделе «Возможности». В частности, обратите внимание на предложение с пометкой «Запрос ключа предварительной загрузки», аналогичное показанному примеру:

Кроме того, вы можете запустить некоторые тесты с помощью Chrome DevTools. Чтобы начать процесс, загрузите страницу, которую хотите протестировать, и нажмите Inspect > Lighthouse.

Затем выберите, хотите ли вы протестировать мобильную или настольную версию своей страницы, и нажмите «Анализ» загрузки страницы:

После завершения теста прокрутите вниз и найдите предупреждение «Предварительная загрузка ключей».

Примечание. Поскольку Google PageSpeed ​​Insights использует Lighthouse, тестирование вашей страницы с помощью PSI или Chrome DevTools даст те же результаты. Это зависит от вас, какой способ вы предпочитаете.

Чтобы понять, как именно Lighthouse определяет, какие ресурсы подходят для предзагрузки, рассмотрим следующий пример.

Цепочка критических запросов вашей страницы выглядит следующим образом:

> index.html

>> app.js

>>> styles_custom.css

>>>> ui_custom.js

В файле index.html вы включаете тег скрипта src="app.js" . Когда файл app.js выполняется, он запускает вызов fetch() для загрузки styles_custom.css и ui_custom.js . Страница не будет отображаться полностью, пока эти два ресурса не будут загружены, проанализированы и выполнены. Такие файлы считаются ресурсами, блокирующими рендеринг.

Следовательно, Styles_custom.css и ui_custom.js будут идентифицированы Lighthouse как релевантные ресурсы.

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

Чтобы дать им более высокий приоритет, вы можете использовать ссылку rel="preload" .

Как исправить предупреждение «Запрос на предварительную загрузку ключа»

Чтобы исправить предупреждение, примените атрибут ссылки rel=preload к критическим ресурсам, помеченным PSI.

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

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

Вы можете предварительно загрузить ресурсы, добавив тег ссылки rel=preload в заголовок вашего HTML-документа.

Например, вот как выглядит фрагмент кода для предварительно загруженного логотипа:

Вы могли заметить, что помимо preload и resource есть еще третий атрибут — as .

Атрибут as указывает тип содержимого ресурса. Не добавляя действительный « как » при указании того, что нужно предварительно загрузить, вы рискуете получить актив дважды.

Кроме того, включение атрибута as помогает браузеру установить приоритет предварительно загруженного ресурса в соответствии с его типом и определить, существует ли он уже в кэше.

Вот полный список as значений, которые вы можете указать:

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

Автоматическая предварительная загрузка ключевых запросов с помощью NitroPack

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

Одной из основных причин, по которой NitroPack является лидером в результатах Core Web Vitals для более чем 180 000 веб-сайтов, является наш собственный механизм загрузки ресурсов.

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

Кроме того, наш сервис автоматически оптимизирует доставку CSS вашего сайта, создавая критический CSS для каждой страницы каждого макета. Это приводит к лучшему восприятию и фактической производительности.

Но самое приятное то, что использование NitroPack безопасно.

Как же так?

Во-первых, вы можете протестировать NitroPack, не тратя ни копейки на бесплатный план.

Во-вторых, NitroPack работает с копиями файлов вашего сайта, обеспечивая 100% безопасность оригиналов.

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

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

Это звучит как очень хорошая сделка для меня!