\n```\n\n#### 4. Видео хостинги\n```html\n\n\n```\n\n### Почему это важно\n\n#### Проблема: латентность DNS\n\nПредставьте сценарий без dns-prefetch:\n- Пользователь заходит на сайт (0мс)\n- HTML загружается (200мс)\n- Парсится и рендерится (300мс)\n- Браузер встречает `` (500мс)\n- **Начинается DNS резолюция** (500-800мс) ← потеря времени!\n- Загрузка изображения (800-1200мс)\n\nС dns-prefetch:\n- HTML загружается (200мс)\n- **Параллельно начинается DNS для cdn.example.com** (200мс)\n- К моменту, когда браузер готов загружать изображение (500мс), DNS уже готов\n- Загрузка изображения начинается сразу (500-700мс) ← экономия 150-300мс!\n\n### Разница между dns-prefetch, preconnect и prefetch\n\n**dns-prefetch** — только DNS резолюция\n```html\n\n```\nСимволизирует: \"Мне понадобится ресурс с этого домена, заранее разреши DNS\"\n\n**preconnect** — DNS + TCP + TLS handshake\n```html\n\n\n```\nСимволизирует: \"Мне понадобится этот ресурс, подготовь всё\"\n\n**prefetch** — загрузка для будущего использования\n```html\n\n```\nСимволизирует: \"Когда браузер будет свободен, загрузи этот ресурс\"\n\n### Когда использовать dns-prefetch\n\n**Используй, если:**\n- Загружаешь ресурсы с 3+ внешних доменов\n- API находится на отдельном домене\n- Используешь много сервисов аналитики/метрик\n- Сайт медленный по сети (мобильные пользователи)\n\n**Используй preconnect вместо dns-prefetch, если:**\n- Домен критичен для первого рендера\n- Домен содержит HTTPS (extra TLS handshake)\n- Пропускная способность не критична\n\n### Реализация в Next.js\n\n```typescript\n// app/layout.tsx\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n {/* DNS prefetch для API */}\n \n {/* Preconnect для критичных ресурсов */}\n \n \n {/* Метрики */}\n \n \n {children}\n \n );\n}\n```\n\n### Измерение эффекта\n\nВы можете проверить улучшение в DevTools:\n\n```javascript\n// В Console\nperformance.getEntriesByType(navigation)[0].timing\n// Найти connectStart и fetchStart — разница это DNS + TCP время\n```\n\nОсновное правило: **dns-prefetch экономит 50-150мс на мобильных сетях для каждого внешнего домена**. Для сайта с 5 внешними сервисами это может означать выигрыш 250-750мс в общей загрузке.","dateCreated":"2026-04-02T22:18:35.927727","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
PrepBro
← Назад к вопросам

Зачем нужен dns-prefetch?

2.2 Middle🔥 121 комментариев
#HTML и CSS#Оптимизация и производительность

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

dns-prefetch: Оптимизация DNS резолюции

dns-prefetch — это браузерная оптимизация, которая предварительно разрешает DNS-имена в IP-адреса до того, как браузер начнёт загружать ресурсы с этих доменов. Это позволяет значительно снизить время загрузки, особенно для сторонних сервисов и CDN.

Как работает DNS резолюция

Когда браузер встречает URL вида https://api.example.com/data, происходит несколько шагов:

  1. Браузер проверяет локальный кеш DNS
  2. Если не найдено, обращается к системному resolver
  3. Resolver запрашивает корневой nameserver
  4. Корневой направляет к nameserver домена
  5. Nameserver домена возвращает IP-адрес
  6. Браузер может подключиться к IP-адресу

Этот процесс занимает 50-300мс, в зависимости от сети и удаленности DNS серверов. dns-prefetch начинает этот процесс заранее.

Синтаксис

<link rel="dns-prefetch" href="//api.example.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<link rel="dns-prefetch" href="//fonts.googleapis.com">

Обратите внимание на // в начале — это протокол-релятивный URL, который работает как с HTTP, так и с HTTPS.

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

1. Внешние API

<!-- Если приложение загружает данные с API -->
<link rel="dns-prefetch" href="//api.prepbro.ru">
<link rel="dns-prefetch" href="//analytics.example.com">

2. CDN для шрифтов

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">

3. Сторонние скрипты

<link rel="dns-prefetch" href="//cdn.segment.com">
<link rel="dns-prefetch" href="//js.intercom.io">

<script src="https://cdn.segment.com/analytics.js"></script>

4. Видео хостинги

<link rel="dns-prefetch" href="//www.youtube.com">
<link rel="dns-prefetch" href="//vimeo.com">

Почему это важно

Проблема: латентность DNS

Представьте сценарий без dns-prefetch:

  • Пользователь заходит на сайт (0мс)
  • HTML загружается (200мс)
  • Парсится и рендерится (300мс)
  • Браузер встречает <img src="//cdn.example.com/image.jpg"> (500мс)
  • Начинается DNS резолюция (500-800мс) ← потеря времени!
  • Загрузка изображения (800-1200мс)

С dns-prefetch:

  • HTML загружается (200мс)
  • Параллельно начинается DNS для cdn.example.com (200мс)
  • К моменту, когда браузер готов загружать изображение (500мс), DNS уже готов
  • Загрузка изображения начинается сразу (500-700мс) ← экономия 150-300мс!

Разница между dns-prefetch, preconnect и prefetch

dns-prefetch — только DNS резолюция

<link rel="dns-prefetch" href="//api.example.com">

Символизирует: "Мне понадобится ресурс с этого домена, заранее разреши DNS"

preconnect — DNS + TCP + TLS handshake

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

Символизирует: "Мне понадобится этот ресурс, подготовь всё"

prefetch — загрузка для будущего использования

<link rel="prefetch" href="/next-page.html">

Символизирует: "Когда браузер будет свободен, загрузи этот ресурс"

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

Используй, если:

  • Загружаешь ресурсы с 3+ внешних доменов
  • API находится на отдельном домене
  • Используешь много сервисов аналитики/метрик
  • Сайт медленный по сети (мобильные пользователи)

Используй preconnect вместо dns-prefetch, если:

  • Домен критичен для первого рендера
  • Домен содержит HTTPS (extra TLS handshake)
  • Пропускная способность не критична

Реализация в Next.js

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        {/* DNS prefetch для API */}
        <link rel="dns-prefetch" href="//api.prepbro.ru" />
        {/* Preconnect для критичных ресурсов */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        {/* Метрики */}
        <link rel="dns-prefetch" href="//www.google-analytics.com" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Измерение эффекта

Вы можете проверить улучшение в DevTools:

// В Console
performance.getEntriesByType(navigation)[0].timing
// Найти connectStart и fetchStart — разница это DNS + TCP время

Основное правило: dns-prefetch экономит 50-150мс на мобильных сетях для каждого внешнего домена. Для сайта с 5 внешними сервисами это может означать выигрыш 250-750мс в общей загрузке.