Что такое rel=dns-prefetch?

  • Это способ ускорить загрузку веб-страницы, с помощью предварительного разрешения доменных записей.
  • Использование rel=dns-prefetch предполагает, что браузер сначала сделает вызов DNS необходимого домена, до фактической загрузки.
предварительный вызов DNS и отправка на веб-сервер

Пример использования

<link rel="dns-prefetch" href="https://cdn.varvy.com">

Приведенный выше код означает:

  • Я хочу получить доменное имя, перед загрузкой
  • Имя домена "cdn.varvy.com"

Цель

Основная цель использования rel=dns-prefetch – это ускорение загрузки веб-страниц, когда для страниц используются разные домены.

Процесс запроса и загрузки страницы оптимизируется, благодаря эффективному контролю.

Процесс часто называют "DNS prefetching".

Определение W3C

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

Где используется rel="dns-prefetch" used?

В тэге head документа.

Важность применения DNS предзагрузки

В жизни можно быть уверенным в двух вещах — в смерти и налогах.

При загрузке страницы, можно быть уверенным в одном запросе DNS на один домен.

Это значит, если ваша страница найдена на трех доменах, будет сделано соответственно минимум три запроса. Если вы используете ресурсы с 10 доменов, вы получите минимум 10 запросов.

Поэтому используйте возможность минимизировать dns запросы.

Где полезно применять DNS предзагрузку?

Например, у вас на сайте целая пачка js файлов, которые используются при загрузке страницы. У вас также могут использоваться другие сторонние инструменты (adsense, seo инструменты, инструменты маркетинга и т.д.).

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

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

Предзапрос DNS фактически дает вам возможность контролировать то, как страница будет загружаться, «намекая» браузеру, с чего начать.

Где НЕ полезен DNS предзапрос?

Если все ресурсы и файлы страницы лежат на одном домене с html.

Если все файлы js, css, картинки и т. д. лежат на одном домене вместе с самим сайтом, тогда нет необходимости указывать предзапрос, это может только навредить.

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

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

  1. Есть ли на странице ресурсы с разных доменов?
  2. Данные ресурсы вызываются одинаково?
  3. Могу ли я уменьшить кол-во доменов?

1. Есть ли на странице ресурсы с разных доменов?

Если HTML файл лежит на домене example.com, а CSS на cdn.example.com, а картинки подгружаются с 1234bucket.cdn.com, значит вы делаете загрузку с трех разных доменов, а могли бы перенести все эти ресурсы на один.

2. Данные ресурсы вызываются одинаково?

Если один CSS файл грузится c "www.example.com", а другой с "example.com", нужно это исправить. Убедитесь, что оба ресурса вызываются либо с версии www либо без "www".

То же самое касается https vs http, довольно распространенная практика.

3. Могу ли я уменьшить кол-во доменов?

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

Узнайте, как загружаются ваши страницы, с помощью сервиса page resource tool, так вы узнаете какие домены вызываются при загрузке.