Где объявляется Preload?

1.7 Middle🔥 181 комментариев

#Браузер и сетевые технологии#Оптимизация и производительность

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

🐱

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

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

Где объявляется Preload?

Preload — это техника в HTML для предварительной загрузки ресурсов (шрифты, стили, скрипты, изображения), которые понадобятся странице. Это объявляется в теге <head> HTML документа с помощью тега <link rel="preload">.

Основное объявление

Preload объявляется в <head> секции HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Мой сайт</title>

  <!-- Preload шрифта -->
  <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
  
  <!-- Preload CSS -->
  <link rel="preload" href="/styles/main.css" as="style" />
  
  <!-- Preload изображения -->
  <link rel="preload" href="/images/hero.jpg" as="image" />
  
  <!-- Preload скрипта -->
  <link rel="preload" href="/js/app.js" as="script" />

  <!-- После preload подключаем основной стиль -->
  <link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
  <h1>Контент</h1>
  <script src="/js/app.js"></script>
</body>
</html>

Атрибуты preload

Обязательные:

rel="preload" — говорит, что это preload
href="/path/to/resource" — путь к ресурсу
as="type" — тип ресурса

<!-- as="font" для шрифтов -->
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin />

<!-- as="style" для CSS -->
<link rel="preload" href="/styles/main.css" as="style" />

<!-- as="script" для JavaScript -->
<link rel="preload" href="/app.js" as="script" />

<!-- as="image" для картинок -->
<link rel="preload" href="/hero.jpg" as="image" />

<!-- as="fetch" для API запросов -->
<link rel="preload" href="/api/data.json" as="fetch" crossorigin />

<!-- as="video" для видео -->
<link rel="preload" href="/video.mp4" as="video" />

<!-- as="audio" для аудио -->
<link rel="preload" href="/song.mp3" as="audio" />

Опциональные:

type="mime-type" — MIME тип ресурса
crossorigin — для кросс-доменных ресурсов (важно для шрифтов)
media="(условие)" — загрузка в зависимости от медиа-запроса

<!-- Загрузить только для мобильных -->
<link rel="preload" href="/styles/mobile.css" as="style" media="(max-width: 768px)" />

<!-- Загрузить только для больших экранов -->
<link rel="preload" href="/styles/desktop.css" as="style" media="(min-width: 1024px)" />

Практические примеры

1. Preload критических шрифтов:

<head>
  <!-- Загрузить шрифт до использования в CSS -->
  <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
  <link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin />
  
  <link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
  <!-- CSS будет использовать эти шрифты -->
</body>

2. Preload критического CSS:

<head>
  <!-- Preload критических стилей выше the fold -->
  <link rel="preload" href="/styles/critical.css" as="style" />
  <link rel="stylesheet" href="/styles/critical.css" />
  
  <!-- Остальной CSS загружается без preload -->
  <link rel="stylesheet" href="/styles/main.css" />
</head>

3. Preload изображений для быстрого отображения:

<head>
  <!-- Hero изображение для выше the fold -->
  <link rel="preload" href="/images/hero.jpg" as="image" />
  
  <!-- Изображение для определённого экрана -->
  <link rel="preload" href="/images/hero-mobile.jpg" as="image" media="(max-width: 768px)" />
  <link rel="preload" href="/images/hero-desktop.jpg" as="image" media="(min-width: 1024px)" />
</head>
<body>
  <img src="/images/hero.jpg" alt="Hero" />
</body>

4. Preload скриптов с отложенной загрузкой:

<head>
  <!-- Preload скрипт (будет загружен, но не выполнен) -->
  <link rel="preload" href="/js/analytics.js" as="script" />
  
  <!-- Preload Module script -->
  <link rel="preload" href="/js/module.js" as="script" />
</head>
<body>
  <!-- Использовать скрипт позже -->
  <script defer src="/js/analytics.js"></script>
  <script type="module" src="/js/module.js"></script>
</body>

Preload vs Prefetch vs DNS Prefetch

<!-- PRELOAD — загрузить СЕЙЧАС, очень скоро понадобится -->
<link rel="preload" href="/fonts/Inter.woff2" as="font" crossorigin />

<!-- PREFETCH — загрузить позже, может понадобиться на следующей странице -->
<link rel="prefetch" href="/js/next-page.js" />

<!-- DNS PREFETCH — предварительно разрешить DNS для домена -->
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- PRECONNECT — установить соединение (DNS + TCP + TLS) заранее -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin />

Сравнение приоритетов:

Тип	Приоритет	Использование
preload	Высокий	Критические ресурсы текущей страницы
prefetch	Низкий	Ресурсы будущих страниц/пользовательских действий
dns-prefetch	Низкий	Предварительное разрешение DNS
preconnect	Средний	Соединение с CDN или внешними сервисами

В Next.js / React

В Next.js используй встроенные оптимизации:

// pages/_document.tsx или app/layout.tsx
import Head from 'next/head';

export default function Document() {
  return (
    <>
      <Head>
        {/* Preload шрифта в Next.js */}
        <link 
          rel="preload" 
          href="/fonts/Inter-Regular.woff2" 
          as="font" 
          type="font/woff2" 
          crossorigin 
        />
        
        {/* Preload изображения */}
        <link 
          rel="preload" 
          href="/hero.jpg" 
          as="image" 
        />
      </Head>
      <body>{/* ... */}</body>
    </>
  );
}

Или используй Image компонент Next.js:

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // Автоматически preload
    />
  );
}

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

ДА — preload нужен для:

Критических шрифтов (выше the fold)
Критических CSS стилей
Hero изображений (главная картинка страницы)
Критических скриптов
Ресурсов, которые нужны в первые 2-3 секунды

<head>
  <!-- Шрифты для основного контента -->
  <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
  
  <!-- CSS для выше the fold -->
  <link rel="preload" href="/styles/critical.css" as="style" />
  
  <!-- Главное изображение страницы -->
  <link rel="preload" href="/hero.jpg" as="image" />
</head>

НЕТ — не используй preload для:

Всех изображений подряд (перегружает)
Ресурсов, которые нужны только позже
Ресурсов, которые не критичны

<!-- ПЛОХО — preload всех изображений -->
<link rel="preload" href="/image1.jpg" as="image" />
<link rel="preload" href="/image2.jpg" as="image" />
<link rel="preload" href="/image3.jpg" as="image" />
<!-- ... ещё 100 изображений -->

<!-- ХОРОШО — preload только критичного изображения -->
<link rel="preload" href="/hero.jpg" as="image" />
<!-- Остальное загружается естественным образом -->

Отладка preload

// Chrome DevTools -> Network tab
// Смотри столбец Type: preload
// Смотри Priority: High

// Проверить в консоли
const links = document.querySelectorAll('link[rel="preload"]');
console.log('Preload ресурсы:', links);

// Проверить, был ли ресурс загружен
const fontLink = document.querySelector('link[rel="preload"][as="font"]');
console.log('Статус шрифта:', fontLink.href);

Резюме

Preload объявляется в <head> секции HTML с помощью <link rel="preload">. Это используется для предварительной загрузки критических ресурсов, которые нужны для быстрого отображения страницы. Основные ресурсы для preload: критические шрифты, CSS стили (выше the fold), и hero изображения. Важно использовать preload только для действительно критических ресурсов, чтобы не замедлить загрузку других важных ресурсов.