Мета теги: dns-prefetch, preconnect, prefetch, prerender, preload

Коротко о метатегах для браузера preconnect, dns-prefetch, prefetch, preload, prerender.

Пять тегов <link rel> дают браузеру команду на предварительные действия:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />

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

<link rel="prerender" href="https://example.com/about.html" />

dns-prefetch

Просит браузер в фоновом режиме получить информацию об указанном домене (узнать его IP), чтобы затем использовать её при реальных запросах к указанному домену.

Для каждого нового домена резолвинг DNS обычно занимает около 10−120 мс. Это влияет только на загрузку первого ресурса с данного домена, тем не менее если осуществить днс-префетч заранее, то мы немного сэкономим время.

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

Использование

<link rel="dns-prefetch" href="https://api.my-app.com" />

href

Указывает на домен, для которого нужно узнать IP-адрес. Можно указать без протокола - //domain.com.

Когда использовать

Когда указанный домен будет использован дальше на странице, но пока браузер об этом не знает.

Примеры:

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

• Ваше приложение размещается на my-app.com и делает AJAX-запросы к api.my-app.com: вы не знаете заранее конкретные запросы, потому что они делаются динамически из JS. Здесь вполне уместно использовать .

• Ваше приложение размещается на my-app.com, и использует шрифты Google Fonts. Они загружаются в два этапа: сначала загружается файл CSS с домена fonts.googleapis.com, затем этот файл запрашивает шрифты с fonts.gstatic.com. Вы не можете знать, какие конкретные файлы шрифтов из fonts.gstatic.com вам понадобится, пока не загрузите файл CSS, поэтому заранее мы можем только установить предварительное соединение.

Поддержка браузерами

preconnect

Преконнект просит браузер в фоновом режиме создать соединение (рукопожатие, коннект) с указанным доменом.

Процесс подключения включает в себя:

1. Резолвинг DNS. Найти IP-адрес сервера (216.58.215.78) для указанного доменного имени (google.com).
2. Рукопожатие TCP. Обмен пакетами (клиент → сервер → клиент), чтобы инициировать TCP-соединение с сервером.
3. Рукопожатие TLS (только для сайтов HTTPS). Два раунда обмена пакетами (клиент → сервер → клиент → сервер → клиент), чтобы инициировать безопасный сеанс TLS.

Все эти операции примерно занимают 300 мс.

Необязательная инструкция — браузер может проигнорировать её, например, если уже установлено много соединений или в каком-то другом случае.

Использование

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

href(обязательный)

Домен, с которым нужно установить соединение. Можно указать без протокола.

crossorigin

Атрибут, который указывает на политику CORS указанного домена. CORS Атрибут.

Когда использовать

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

• Ваше приложение размещается на my-app.com и делает AJAX-запросы к api.my-app.com: вы не знаете заранее конкретные запросы, потому что они делатся динамически из JS. Здесь вполне уместно использование тега для предварительного подключения к домену.

• Ваше приложение размещается на my-app.com и использует шрифты Google Fonts. Они загружаются в два этапа: сначала загружается файл CSS с домена fonts.googleapis.com, затем этот файл запрашивает шрифты с fonts.gstatic.com. Вы не можете знать, какие конкретные файлы шрифтов из fonts.gstatic.com вам понадобятся, пока не загрузите файл CSS, поэтому заранее мы можем только установить предварительное соединение.

Поддержка браузерами

prefetch

Префетч просит браузер в фоновом режиме загрузить и положить ресурс в кэш.

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

Необязательная инструкция — браузер может проигнорировать её, например, при медленном интернете. Выполняется с низким приоритетом, т.е. после загрузки всего важного. См. таблицу приоритетов.

Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и предоставляется по требованию.

Использование

<link rel="prefetch" href="https://example.com/next-page.html" as="document" crossorigin>
<link rel="prefetch" href="//example.com/next-page.css" as="style" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

href(обязательный)

URL. Может быть относительный или указан без протокола.

as

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

• audio — Аудиофайл, обычно используемый в <audio>.
• document — HTML-документ, предназначенный для встраивания в <frame> или <iframe>.
• embed — Ресурс, встраиваемый в элемент <embed>.
• fetch — Ресурс, доступ к которому осуществляется с помощью запроса fetch или XHR, например, ArrayBuffer или JSON-файл.
• font — Файл шрифта.
• image — Файл изображения.
• object — Ресурс, встраиваемый в элемент <object>.
• script — Файл JavaScript.
• style — Таблица стилей CSS.
• track — Файл WebVTT.
• worker — JavaScript web worker или shared worker.
• video — Видеофайл, обычно используемый в <video>.

crossorigin

Атрибут, который указывает на политику CORS указанного ресурса. CORS Атрибут.

Когда использовать

• Для загрузки ресурсов с других страниц. Т.е. Когда ресурс понадобится на другой странице, а вы хотите заранее добавить его в кэш. Например:

  • У вас интернет-магазин, и 40% пользователей уходят с главной страницы на страницу товара. Используйте prefetch, загружая файлы CSS и JS для рендеринга страниц с продуктом.

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

Поддержка браузерами

preload

Прелоад говорит браузеру загрузить и положить ресурс в preload кэш.

Это обязательная инструкция — браузер обязан её выполнить, в отличии от prefetch или других подобных инструкций (они могут быть проигнорированы, например, при плохом интернете).

Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто предоставляется из preload кэша по запросу.

Приоритеты. Разным ресурсам (стили, скрипты, шрифты и т.д.), браузеры обычно назначают разные приоритеты, чтобы в первую очередь загружать самые важные ресурсы. Здесь приоритет отпределяется по атрибуту as. Для браузера Chrome можете посмотреть полную таблицу приоритетов.

Использование

html:

<link rel="preload" href="/styles/other.css" as="style">

JavaScript:

var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);

HTTP Header:

Link: <https://example.com/other/styles.css>; rel=preload; as=style
Link: </theme/styles.css>; rel=preload; as=style

href(обязательный)

URL. Может быть относительный или указан без протокола.

as

Важно указать атрибут as — это помогает браузеру правильно расставлять приоритеты и планировать загрузку. as может быть:

• audio — Аудиофайл, обычно используемый в <audio>.
• document — HTML-документ, предназначенный для встраивания в <frame> или <iframe>.
• embed — Ресурс, встраиваемый в элемент <embed>.
• fetch — Ресурс, доступ к которому осуществляется с помощью запроса fetch или XHR, например, ArrayBuffer или JSON-файл.
• font — Файл шрифта.
• image — Файл изображения.
• object — Ресурс, встраиваемый в элемент <object>.
• script — Файл JavaScript.
• style — Таблица стилей CSS.
• track — Файл WebVTT.
• worker — JavaScript web worker или shared worker.
• video — Видеофайл, обычно используемый в <video>.

crossorigin

Атрибут, который указывает на политику CORS указанного ресурса. CORS Атрибут.

Когда использовать

Когда ресурс обязательно будет использован и его нужно загружать сразу (чтобы не блокировать рендеринг HTML).

Поддержка браузерами

prerender

Просит браузер загрузить URL-адрес и обработать его в фоновом режиме. Когда пользователь нажимает на ссылку, страница должна отобразиться моментально.

Необязательная инструкция — браузер может проигнорировать её, например, на медленном соединении или при недостаточном объёме свободной памяти.

Использование

<link rel="prerender" href="//example.com/next-page.html">

href(обязательный)

URL. Может быть относительный или указан без протокола.

Когда использовать

Когда вы действительно уверены, что пользователь перейдёт на определённую страницу. Если у вас «туннель», по которому 70% посетителей страницы A переходят на страницу Б, то prerender на странице А поможет очень быстро отобразить страницу Б.

Поддержка браузерами

Как добавлять это в WP

Смотрите примеры функции wp_resource_hints().
Смотрите хук wp_preload_resources.

--

Использовал при написании:

• https://habr.com/ru/post/445264/
• https://www.w3.org
• https://caniuse.com