PrepBro
← Назад к вопросам

Для чего нужен атрибут rel в link?

1.0 Junior🔥 91 комментариев
#Soft Skills и рабочие процессы

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

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

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

Для чего нужен атрибут rel в link?

rel (relationship) - это атрибут элемента <link>, который описывает отношение между текущей страницей и связанным ресурсом. Это одно из самых важных, но часто упускаемых мест оптимизации веб-производительности и SEO.

Атрибут rel указывает браузеру, как обработать ресурс: загружать ли его, кешировать, предварительно подгружать и т.д.

Основной синтаксис

<link rel="value" href="resource.css" />

Самые важные значения rel

1. stylesheet - загрузка CSS

Самое распространённое значение - для подключения таблиц стилей:

<link rel="stylesheet" href="/styles/main.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700" />

Без rel="stylesheet" браузер не поймёт, что это CSS файл.

2. preload - предварительная загрузка

preload говорит браузеру: "Начни загружать этот ресурс сейчас, он понадобится очень скоро":

<!-- Предварительно загрузи шрифт, чтобы он был готов к использованию -->
<link rel="preload" as="font" href="/fonts/Inter-Regular.woff2" crossorigin />

<!-- Предварительно загрузи критическое изображение hero -->
<link rel="preload" as="image" href="/images/hero.jpg" />

<!-- Предварительно загрузи критический скрипт -->
<link rel="preload" as="script" href="/scripts/critical.js" />

Зачем это нужно?

  • Ускоряет загрузку страницы
  • Особенно полезно для шрифтов (избегает "flash of unstyled text" - FOUT)
  • Загрузка начинается раньше, чем ресурс действительно нужен

Практический пример:

<!DOCTYPE html>
<html>
<head>
  <!-- Предварительно загружаем шрифты -->
  <link rel="preload" as="font" href="/fonts/Inter-400.woff2" crossorigin />
  <link rel="preload" as="font" href="/fonts/Inter-700.woff2" crossorigin />
  
  <!-- Подключаем CSS с этими шрифтами -->
  <link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
  <h1>Заголовок</h1>
</body>
</html>

Без preload браузер:

  1. Загружает HTML
  2. Парсит CSS
  3. Видит шрифты в CSS
  4. Начинает загружать шрифты

С preload браузер:

  1. Загружает HTML
  2. Сразу видит preload и начинает загружать шрифты
  3. Параллельно парсит CSS
  4. Шрифты уже готовы!

3. prefetch - предварительная выборка

prefetch говорит браузеру: "Загрузи это, когда будет время, может понадобиться":

<!-- Если пользователь перейдёт на /about, загрузи эти ресурсы заранее -->
<link rel="prefetch" href="/about" />

<!-- Загрузи картинку, которая нужна на следующей странице -->
<link rel="prefetch" as="image" href="/images/next-hero.jpg" />

Разница между preload и prefetch:

preloadprefetch
Загружай СЕЙЧАС, очень скоро понадобитсяЗагружай когда свободно, может понадобиться
Высокий приоритетНизкий приоритет
Текущая страницаСледующая страница
Используй для критических ресурсовИспользуй для некритических

Практический пример:

<!-- На главной странице -->
<link rel="prefetch" as="image" href="/images/blog-preview.jpg" />
<link rel="prefetch" href="/api/posts" />

<!-- Если пользователь нажмёт на пост, картинка уже загружена -->

4. canonical - основной URL

canonical указывает, какой URL - это основная версия страницы:

<!-- Эта страница - дубликат, основная версия на /page -->
<link rel="canonical" href="https://example.com/page" />

Зачем это нужно?

  • Борьба с дублированием контента (SEO)
  • Когда одна страница доступна по разным URL (с параметрами, без www, http vs https)
  • Помогает Google понять, какой URL считать основным

Практический пример:

<!-- На странице https://example.com/products?sort=price&page=1 -->
<link rel="canonical" href="https://example.com/products" />

<!-- Говорим Google: основная версия это /products, игнорируй параметры -->

5. icon (favicon) - значок страницы

icon (или shortcut icon) - это маленькая картинка в вкладке браузера:

<!-- Классический favicon -->
<link rel="icon" href="/favicon.ico" />

<!-- Современный способ (PNG) -->
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192" />

<!-- Apple devices (iPhone, iPad) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

6. dns-prefetch - предварительное разрешение DNS

dns-prefetch ускоряет подключение к внешним доменам:

<!-- Началась разрешать DNS для CDN, прежде чем её использовать -->
<link rel="dns-prefetch" href="//cdn.example.com" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//analytics.google.com" />

Зачем это нужно?

  • Первое обращение к новому домену требует DNS lookup (100-300ms)
  • dns-prefetch выполняет lookup заранее, в фоне
  • Когда браузер действительно нужна ресурс, DNS уже готов

7. preconnect - предварительное соединение

Ещё более агрессивная оптимизация - полное соединение:

<!-- Предварительно соединись с Google Fonts (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Теперь загружай шрифты быстрее -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter" />

8. alternate - альтернативная версия

alternate указывает на другую версию страницы:

<!-- Мобильная версия текущей страницы -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="/mobile/page" />

<!-- RSS подписка (устарело, но всё ещё используется) -->
<link rel="alternate" type="application/rss+xml" href="/rss.xml" />

<!-- Другой язык -->
<link rel="alternate" hreflang="en" href="https://en.example.com/page" />
<link rel="alternate" hreflang="ru" href="https://ru.example.com/page" />

Полный практический пример (Next.js)

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        {/* Favicon */}
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

        {/* Canonical (важно для SEO) */}
        <link rel="canonical" href="https://example.com/page" />

        {/* Предварительно загружаем критические ресурсы */}
        <link rel="preload" as="font" href="/fonts/Inter-400.woff2" crossorigin />
        <link rel="preload" as="image" href="/images/hero.jpg" />

        {/* Предварительно разрешаем DNS для CDN */}
        <link rel="dns-prefetch" href="//cdn.example.com" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />

        {/* Загружаем стили и шрифты */}
        <link rel="stylesheet" href="/styles/main.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter" />

        {/* Prefetch для следующей страницы */}
        <link rel="prefetch" href="/about" />

        {/* Альтернативные версии */}
        <link rel="alternate" hreflang="en" href="https://en.example.com/page" />
      </Head>

      <main>
        <h1>Страница</h1>
        <img src="/images/hero.jpg" alt="Hero" />
      </main>
    </>
  );
}

Проверка производительности

В Chrome DevTools (F12) -> Network tab:

preload - жёлтая полоса (высокий приоритет)
prefetch - серая полоса (низкий приоритет)
другие ресурсы - синяя полоса (обычный приоритет)

Итог

rel атрибут используется для:

  • stylesheet - подключение CSS
  • preload - загрузка критических ресурсов (шрифты, картинки)
  • prefetch - загрузка некритических ресурсов для следующей страницы
  • canonical - SEO, указание основного URL
  • icon - favicon
  • dns-prefetch / preconnect - оптимизация скорости подключения
  • alternate - альтернативные версии (языки, mobile)

Правильное использование rel может улучшить производительность сайта на 20-40%!