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

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

Вот некоторые из способов добиться этого:



Предварительная выборка DNS

Предварительная выборка DNS позволяет браузеру выполнять Разрешение DNS (определение IP-адреса для контакта) в фоновом режиме, не прерывая работу пользователя с текущей веб-страницей. Обычно он используется для сокращения времени, необходимого для установления соединения, поскольку браузер заранее позаботится о процессе поиска DNS. В результате пользователю не придется ждать завершения поиска DNS, когда он нажимает на внешние ссылки или другие ресурсы, которые позже понадобятся странице, что снижает задержку.

Разрешение DNS — это процесс преобразования имени хоста/доменного имени в соответствующий IP-адрес, который компьютер понимает для связи.
Для меня: google.com к 216.58.215.78

Браузер отвечает за выполнение процедуры поиска DNS и обнаруживает все ресурсы на веб-странице, которым требуется поиск DNS, и должен дождаться завершения поиска, прежде чем загружать/получать доступ к чему-либо. Поиск DNS обычно занимает от 20 а также 120 миллисекунд для завершения.

Требуется разрешить поиск домена только один раз для доменного имени, а затем остальную часть запроса для этого домена можно выполнить через это соединение, но все же мы можем попытаться сохранить это в первый раз. Кроме того, после 3–4 попыток, DNS может кэшироваться (в зависимости от браузера/системы). Однако для мобильных пользователей продолжительность первоначального поиска DNS имеет решающее значение.


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

  • Когда мы зависим от множества доменов для разных типов ресурсов.
  • Когда мы знаем, что нам понадобятся ресурсы домена, но еще не знаем конкретный URL-адрес.


Пример:

Amazon разрешает DNS-поиск для своего домена с множеством ресурсов на своей домашней странице с помощью DNS-Prefetch, который он может загружать.

Домашняя страница Amazon — Использование предварительной выборки DNS
Домашняя страница Amazon — Использование предварительной выборки DNS
  • Для загрузки внешнего CSS, шрифтов, js и т. д. из стороннего домена.

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

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="
Войти в полноэкранный режим

Выйти из полноэкранного режима

куда,
X-DNS-Prefetch-Control: вкл./выкл.: указывает браузеру, следует ли выполнять предварительную выборку DNS. Даже если он включен, он будет работать только в браузерах, которые его поддерживают.
ссылка: относится к доменному имени, которое необходимо разрешить, и оно будет работать и без схемы, поэтому а также оба будут работать.

Чтобы проверить, где поддерживается DNS-prefetch:



Предварительное подключение

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

  1. DNS-поиск
  2. TCP-рукопожатие (Первоначальное подключение)
  3. согласование TLS (на защищенных веб-сайтах, т.е. HTTPS)
Время, затраченное на этапы разрешения доменных имен
Время, затраченное на этапы разрешения доменных имен

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

Установка соединения Preconnect и слишком долгое его открытие увеличивает сетевую конкуренцию и затраты как для клиента, так и для сервера. Поэтому рекомендуется подключать не более 4–6 соединения.

Вы можете предварительно подключить веб-страницу, используя следующий код
<link rel="preconnect" href="


Пример:

Google использует preconnect для предварительного разрешения доменов, откуда он должен загружать скрипты, CSS, js и шрифты.
<link rel="preconnect" href="https://www.gstatic.com">
<link rel="preconnect" href="


Где можно использовать DNS-Prefetch через Preconnect?

  • Для поддержки некоторых старых браузеров, где поддерживается только DNS-Prefetch, его можно использовать в качестве запасного варианта для Preconnect.
  • Так как через Preconnect рекомендуется подключать только 4-6 доменов, но если мы хотим подключить больше ресурсов, то можем использовать DNS-Prefetch для ускорения сторонних доменов.


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

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

Предварительная загрузка полезна для загрузки ресурсов, на которые ссылаются другие ресурсы, такие как:

  • Шрифты, на которые есть ссылки в файле CSS
  • Критические ресурсы, которые JavaScript загружает динамически
  • Изображения или содержимое, которые появляются только после вызова API.


Пример:

Meesho, веб-сайт электронной коммерции, использует предварительную загрузку для проактивной загрузки шрифтов и изображений, о которых браузер узнал бы только после загрузки и анализа содержимого style.css и HTML.

<link rel="preload" as="style" href="
<link rel="preload" as="image" fetchpriority="high" href="
Войти в полноэкранный режим

Выйти из полноэкранного режима



Использованная литература: