Помогите браузеру с помощью подсказок по ресурсам

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

Подсказки по ресурсам могут помочь разработчикам еще больше оптимизировать время загрузки страницы, информируя браузер о том, как загружать и приоритизировать ресурсы. Первоначальный набор подсказок по ресурсам, таких как preconnect и dns-prefetch был представлен первым. Однако со временем preload и Fetch Priority API последовали за ними, чтобы предоставить дополнительные возможности.

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

Подсказки ресурсов могут быть указаны в HTML — чаще всего в начале элемента <head> — или установлены как заголовок HTTP . В рамках этого модуля рассматриваются preconnect , dns-prefetch и preload , а также спекулятивное поведение выборки, которое обеспечивает prefetch .

preconnect

Подсказка preconnect используется для установления соединения с другим источником, из которого вы извлекаете критические ресурсы. Например, вы можете размещать свои изображения или активы на CDN или другом перекрестном источнике:

<link rel="preconnect" href="https://example.com">

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

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

Скриншот времени подключения для ресурса в сетевой панели Chrome DevTools. Настройка подключения включает время простоя, согласование прокси, поиск DNS, настройку подключения и согласование TLS.
Визуализация времени подключения, как показано на сетевой панели Chrome DevTools. Время в красном поле — это время, которое задействовано в настройке соединения с кросс-источниковым сервером, которое preconnect может облегчить, устанавливая соединения раньше, а не во время обнаружения кросс-источникового ресурса.

Распространенным вариантом использования preconnect является Google Fonts . Google Fonts рекомендует preconnect к домену https://fonts.googleapis.com , который обслуживает объявления @font-face и к домену https://fonts.gstatic.com , который обслуживает файлы шрифтов.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Атрибут crossorigin используется для указания того, должен ли ресурс быть извлечен с помощью Cross-Origin Resource Sharing (CORS) . При использовании подсказки preconnect , если ресурс, загружаемый из источника, использует CORS, например файлы шрифтов, то вам необходимо добавить атрибут crossorigin к подсказке preconnect .

dns-prefetch

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

Согласно своему названию, dns-prefetch не устанавливает соединение с кросс-сервером, а просто выполняет DNS-поиск для него заранее. DNS-поиск происходит, когда доменное имя разрешается в его базовый IP-адрес. Хотя слои DNS-кэшей на уровне устройства и сети помогают сделать этот процесс в целом быстрым, он все равно занимает некоторое время.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

DNS-запросы довольно недороги, и из-за их относительно небольшой стоимости они могут быть более подходящим инструментом в некоторых случаях, чем preconnect . В частности, это может быть желательной подсказкой ресурса для использования в случаях ссылок, ведущих на другие веб-сайты, по которым, как вы думаете, пользователь, скорее всего, будет следовать. dnstradamus — один из таких инструментов, который делает это автоматически с помощью JavaScript и использует API Intersection Observer для внедрения подсказок dns-prefetch в HTML текущей страницы, когда ссылки на другие веб-сайты прокручиваются в области просмотра пользователя.

preload

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

<link rel="preload" href="/lcp-image.jpg" as="image">

Директивы preload должны быть ограничены поздно обнаруженными критическими ресурсами. Наиболее распространенными вариантами использования являются файлы шрифтов, файлы CSS, извлеченные через объявления @import , или ресурсы background-image CSS, которые, скорее всего, будут кандидатами на отрисовку самого большого содержимого (LCP) . В таких случаях эти файлы не будут обнаружены сканером предварительной загрузки, поскольку на ресурс есть ссылка во внешних ресурсах.

Аналогично preconnect , директива preload требует атрибут crossorigin , если вы предварительно загружаете ресурс CORS, например шрифты. Если вы не добавляете атрибут crossorigin или добавляете его для не-CORS-запросов, то ресурс загружается браузером дважды , тратя пропускную способность, которую можно было бы лучше потратить на другие ресурсы.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

В предыдущем фрагменте HTML браузеру предписывается предварительно загрузить /font.woff2 с помощью запроса CORS, даже если /font.woff2 находится в том же домене.

prefetch

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

<link rel="prefetch" href="/next-page.css" as="style">

Эта директива в основном следует тому же формату, что и директива preload , только атрибут rel элемента <link> использует вместо этого значение "prefetch" . Однако, в отличие от директивы preload , prefetch в значительной степени спекулятивен, поскольку вы инициируете выборку ресурса для будущей навигации, которая может произойти, а может и нет.

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

API приоритета выборки

Вы можете использовать Fetch Priority API через его атрибут fetchpriority для повышения приоритета ресурса. Вы можете использовать атрибут с элементами <link> , <img> и <script> .

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

По умолчанию изображения загружаются с более низким приоритетом. Если после компоновки изображение оказывается в пределах исходного окна просмотра, приоритет увеличивается до высокого . В предыдущем фрагменте HTML fetchpriority немедленно сообщает браузеру о необходимости загрузки большего изображения LCP с высоким приоритетом, в то время как менее важные миниатюрные изображения загружаются с более низким приоритетом.

Современные браузеры загружают ресурсы в два этапа. Первый этап зарезервирован для критических ресурсов и заканчивается после загрузки и выполнения всех блокирующих скриптов. Во время этого этапа загрузка ресурсов с низким приоритетом может быть отложена. Используя fetchpriority="high" вы можете повысить приоритет ресурса, что позволит браузеру загрузить его во время первого этапа.

Ресурсные подсказки демо

Проверьте свои знания

Что делает подсказка ресурса preconnect ?

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

Что позволяет делать API Fetch Priority?

Укажите относительный приоритет для элементов <link> , <img> и <script> .
Укажите приоритет загрузки HTML-кода текущей страницы.

Когда следует использовать подсказку prefetch ?

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

Далее: производительность изображения

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