WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

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

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

Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.
Компания Boosta.

Пять тегов <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" />

Докуметация на w3.org:

dns-prefetch

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

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

Обратите внимание preconnect уже включает в себя dns-prefetch. Использовать их вместе для одного домена не имеет смысла. Разве что добавить поддержку для браузеров, которые понимают dns-prefetch и не понимают preconnect.

меню

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

<link rel="dns-prefetch" href="https://api.my-app.com" />
href
Указывает на домен, для которого нужно узнать IP-адрес. Можно указать без протокола - //domain.com.

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

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

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

Примеры:

  • Например, в 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 мс.

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

Не рекомендуется использовать более чем с 4−6 доменами, так как установка и поддержание соединения — дорогостоящая операция.

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

<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 можете посмотреть полную таблицу приоритетов.

  • Не злоупотребляйте предзагрузкой. Если загружать всё подряд, сайт не ускорится волшебным образом, скорее наоборот, это помешает браузеру грамотно планировать работу.

  • Не путайте с prefetch. Не используйте preload, если вам не нужен ресурс сразу после загрузки страницы. Если он понадобится позже, например, для следующей страницы, то используйте prefetch.

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

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-адрес и обработать его в фоновом режиме. Когда пользователь нажимает на ссылку, страница должна отобразиться моментально.

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

  • Несмотря на исключительную эффективность этого тега (или из-за неё), в 2021 году prerender плохо поддерживается основными браузерах.

  • Не злоупотребляйте. Предварительный рендеринг чрезвычайно дорого обходится с точки зрения трафика и памяти. Не используйте prerender более чем для одной странице.

  • Firefox и Safari не поддерживают этот тег. Это не нарушает спецификацию, так как браузеры не обязаны выполнять данную инструкцию.
  • Ради экономии памяти Chrome не выполняет полный рендеринг, а только предзагрузку NoState. Это означает, что Chrome загружает страницу и все её ресурсы, но не делает рендеринг и не выполняет JavaScript.

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

<link rel="prerender" href="//example.com/next-page.html">
href(обязательный)
URL. Может быть относительный или указан без протокола.

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

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

меню

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

--

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

1 коммент
    Войти