\n\n\n```\n\n**Когда использовать preload:**\n\n1. **Шрифты**, которые определяют макет:\n\n```html\n\n\n\n\n\n```\n\n2. **Критические изображения (hero):**\n\n```html\n\n\n```\n\n3. **Скрипты которые блокируют рендер:**\n\n```html\n\n\n```\n\n**Реальный пример с шрифтом:**\n\n```html\n\n \n \n \n \n\n\n

Текст появляется быстрее, потому что шрифт уже загружается

\n\n```\n\n### prefetch: загрузить ПОЗЖЕ\n\nprefetch используется для ресурсов, которые могут пригодиться на **следующих страницах**:\n\n```html\n\nProduct 1\n\n\nProduct 2\n\n```\n\n**Когда использовать prefetch:**\n\n1. **Следующие страницы в приложении:**\n\n```html\n\nGo to Contact\n\n```\n\n2. **API данные для следующей страницы:**\n\n```html\n\n
\n Product 1\n Product 2\n
\n\n\n\n\n```\n\n3. **Модули для следующей страницы:**\n\n```html\n\n\n```\n\n### Сравнение в таблице\n\n| Аспект | preload | prefetch |\n|--------|---------|----------|\n| **Когда загружать** | Сейчас | Позже |\n| **Приоритет** | Высокий | Низкий |\n| **Где использовать** | Текущая страница | Следующие страницы |\n| **Пример** | Шрифт, критический JS | Данные следующей страницы |\n| **Если не загружен** | Страница медленнее | Ничего страшного |\n\n### Реальный пример: многошаговая форма\n\n```html\n\n
\n \n \n
\n\n\n\n\n\n\n\n\n\n```\n\nКогда пользователь нажимает \"Next\":\n- Шрифты уже загружены (preload)\n- Данные уже в кеше (prefetch)\n- Переход на следующий шаг моментально\n\n### Практический пример: React + Next.js\n\n```typescript\n// pages/products/[id].tsx\nimport Head from next/head;\nimport { useEffect, useState } from react;\n\ninterface Product {\n id: string;\n title: string;\n relatedIds: string[];\n}\n\ninterface ProductPageProps {\n product: Product;\n}\n\nexport default function ProductPage({ product }: ProductPageProps) {\n return (\n <>\n \n {/* preload: критическое изображение товара */}\n \n \n {/* prefetch: детали связанных товаров */}\n {product.relatedIds.map(id => (\n \n ))}\n \n {/* prefetch: страница следующего товара */}\n {product.nextId && (\n \n )}\n \n \n
\n

{product.title}

\n \"Product\"\n
\n \n );\n}\n```\n\n### HTTP/2 Server Push\n\nПри использовании HTTP/2, можно также использовать Server Push, который похож на preload:\n\n```javascript\n// На сервере (Node.js/Express)\napp.get(/page, (req, res) => {\n // Server Push критических ресурсов\n res.push(/fonts/inter.woff2, { /* options */ });\n res.push(/critical.css, { /* options */ });\n \n res.sendFile(page.html);\n});\n```\n\nServer Push еще более эффективен, чем preload, потому что сервер сам инициирует отправку без ожидания запроса браузера.\n\n### Производительность\n\n**preload улучшает:**\n- Time to First Contentful Paint (FCP)\n- Largest Contentful Paint (LCP) если это изображение\n- Устраняет Flash of Unstyled Text (FOUT) с шрифтами\n\n**prefetch улучшает:**\n- Скорость навигации на следующие страницы\n- Время загрузки данных для следующего клика\n- Воспринимаемую скорость приложения\n\n### Общие ошибки\n\n**Ошибка 1: preload всего подряд**\n\n```html\n\n\n\n\n\n\n\n```\n\n**Ошибка 2: prefetch вместо preload**\n\n```html\n\n\n\n\n\n```\n\n### Вывод\n\n- **preload** = загрузить сейчас для текущей страницы (шрифты, критический JS/CSS)\n- **prefetch** = загрузить позже для следующих страниц (данные, модули)\n- **preload для критических ресурсов**, prefetch для вероятных будущих ресурсов\n- **Правильное использование** может улучшить воспринимаемую скорость на 20-50%","dateCreated":"2026-04-02T22:05:35.854724","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
PrepBro
← Назад к вопросам

В чем разница между preload и prefetch?

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

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

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

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

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

preload и prefetch — это две различные стратегии загрузки ресурсов, которые используются для оптимизации производительности. Они часто путаются, но служат разным целям.

Основное отличие

preload загружает ресурс с высокий приоритет и заранее для текущей страницы:

  • Загружается сразу
  • Используется на текущей странице
  • Высокий приоритет в браузере

prefetch загружает ресурс с низкий приоритет для будущей навигации:

  • Загружается когда браузер свободен
  • Используется на следующей странице
  • Низкий приоритет в браузере

Синтаксис

<!-- preload: загрузить сейчас для этой страницы -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" />
<link rel="preload" href="critical.js" as="script" />
<link rel="preload" href="hero-image.jpg" as="image" />

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

preload: загрузить СЕЙЧАС

preload используется для критических ресурсов, которые нужны прямо сейчас на текущей странице:

<!DOCTYPE html>
<html>
<head>
  <!-- Загрузи шрифт приоритетно, он нужен для текста -->
  <link rel="preload" href="Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
  
  <!-- Загрузи критический CSS -->
  <link rel="preload" href="critical.css" as="style" />
  <link rel="stylesheet" href="critical.css" />
  
  <!-- Загрузи главное изображение -->
  <link rel="preload" href="hero.jpg" as="image" />
</head>
<body>
  <img src="hero.jpg" alt="Hero" />
  <script src="main.js"></script>
</body>
</html>

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

  1. Шрифты, которые определяют макет:
<!-- Без preload: браузер загружает HTML -> видит <style> -> находит @font-face -> загружает шрифт -->
<!-- Задержка из-за загрузки HTML -> CSS -> шрифта -->

<!-- С preload: браузер сразу начинает загружать шрифт -->
<link rel="preload" href="Roboto.woff2" as="font" type="font/woff2" crossorigin />
  1. Критические изображения (hero):
<!-- Hero изображение нужно сразу -->
<link rel="preload" href="hero.webp" as="image" />
  1. Скрипты которые блокируют рендер:
<!-- Если скрипт нужен для интерактивности страницы -->
<link rel="preload" href="app.js" as="script" />

Реальный пример с шрифтом:

<head>
  <!-- Без этого браузер ждет CSS, чтобы узнать про шрифт -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
  
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <p>Текст появляется быстрее, потому что шрифт уже загружается</p>
</body>

prefetch: загрузить ПОЗЖЕ

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

<!-- На странице товара: prefetch детали товара для следующего клика -->
<a href="product/123">Product 1</a>
<link rel="prefetch" href="/api/product/123" />

<a href="product/456">Product 2</a>
<link rel="prefetch" href="/api/product/456" />

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

  1. Следующие страницы в приложении:
<!-- На странице "О нас" prefetch контакты -->
<a href="/contact">Go to Contact</a>
<link rel="prefetch" href="/contact" />
  1. API данные для следующей страницы:
<!-- На списке товаров: prefetch детали для возможного клика -->
<div class="products">
  <a href="/product/1">Product 1</a>
  <a href="/product/2">Product 2</a>
</div>

<!-- Prefetch данные, которые пользователь может запросить -->
<link rel="prefetch" href="/api/products/1" />
<link rel="prefetch" href="/api/products/2" />
  1. Модули для следующей страницы:
<!-- На главной prefetch JS для страницы товаров -->
<link rel="prefetch" href="/js/product-page.js" />

Сравнение в таблице

Аспектpreloadprefetch
Когда загружатьСейчасПозже
ПриоритетВысокийНизкий
Где использоватьТекущая страницаСледующие страницы
ПримерШрифт, критический JSДанные следующей страницы
Если не загруженСтраница медленнееНичего страшного

Реальный пример: многошаговая форма

<!-- Страница 1: Шаг регистрации -->
<form id="step1">
  <input type="email" placeholder="Email" />
  <button>Next</button>
</form>

<!-- preload: шрифты для этой страницы -->
<link rel="preload" href="fonts.woff2" as="font" />

<!-- prefetch: данные для следующего шага -->
<link rel="prefetch" href="/api/step2-questions" />

<!-- prefetch: JS для следующего шага -->
<link rel="prefetch" href="step2.js" />

Когда пользователь нажимает "Next":

  • Шрифты уже загружены (preload)
  • Данные уже в кеше (prefetch)
  • Переход на следующий шаг моментально

Практический пример: React + Next.js

// pages/products/[id].tsx
import Head from next/head;
import { useEffect, useState } from react;

interface Product {
  id: string;
  title: string;
  relatedIds: string[];
}

interface ProductPageProps {
  product: Product;
}

export default function ProductPage({ product }: ProductPageProps) {
  return (
    <>
      <Head>
        {/* preload: критическое изображение товара */}
        <link rel="preload" href={product.image} as="image" />
        
        {/* prefetch: детали связанных товаров */}
        {product.relatedIds.map(id => (
          <link 
            key={id}
            rel="prefetch" 
            href={`/api/products/${id}`} 
          />
        ))}
        
        {/* prefetch: страница следующего товара */}
        {product.nextId && (
          <link rel="prefetch" href={`/products/${product.nextId}`} />
        )}
      </Head>
      
      <article>
        <h1>{product.title}</h1>
        <img src={product.image} alt="Product" />
      </article>
    </>
  );
}

HTTP/2 Server Push

При использовании HTTP/2, можно также использовать Server Push, который похож на preload:

// На сервере (Node.js/Express)
app.get(/page, (req, res) => {
  // Server Push критических ресурсов
  res.push(/fonts/inter.woff2, { /* options */ });
  res.push(/critical.css, { /* options */ });
  
  res.sendFile(page.html);
});

Server Push еще более эффективен, чем preload, потому что сервер сам инициирует отправку без ожидания запроса браузера.

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

preload улучшает:

  • Time to First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP) если это изображение
  • Устраняет Flash of Unstyled Text (FOUT) с шрифтами

prefetch улучшает:

  • Скорость навигации на следующие страницы
  • Время загрузки данных для следующего клика
  • Воспринимаемую скорость приложения

Общие ошибки

Ошибка 1: preload всего подряд

<!-- Плохо: preload замедляет текущую страницу -->
<link rel="preload" href="page2.js" />
<link rel="preload" href="page3.js" />
<link rel="preload" href="unused.js" />

<!-- Хорошо: preload только критических ресурсов -->
<link rel="preload" href="fonts.woff2" as="font" />

Ошибка 2: prefetch вместо preload

<!-- Плохо: шрифт не будет загружен вовремя -->
<link rel="prefetch" href="fonts.woff2" as="font" />

<!-- Хорошо: preload для критических шрифтов -->
<link rel="preload" href="fonts.woff2" as="font" />

Вывод

  • preload = загрузить сейчас для текущей страницы (шрифты, критический JS/CSS)
  • prefetch = загрузить позже для следующих страниц (данные, модули)
  • preload для критических ресурсов, prefetch для вероятных будущих ресурсов
  • Правильное использование может улучшить воспринимаемую скорость на 20-50%