Загрузка...
Загрузка...
Resource Loading Strategies — это набор техник для оптимизации загрузки ресурсов в браузере. Правильное использование preload, prefetch и других hint'ов может значительно ускорить загрузку страницы.
Назначение: Загрузить критически важный ресурс как можно раньше.
<!-- Критические шрифты -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- Критический CSS -->
<link rel="preload" href="/critical.css" as="style">
<!-- Hero image -->
<link rel="preload" href="/hero.jpg" as="image">
<!-- JavaScript module -->
<link rel="preload" href="/app.js" as="script">
Хорошо:
<!-- Шрифты, используемые в critical CSS -->
<link rel="preload" href="/fonts/heading.woff2" as="font" crossorigin>
<!-- LCP image (Largest Contentful Paint) -->
<link rel="preload" href="/hero-image.jpg" as="image">
<!-- Critical CSS (above the fold) -->
<link rel="preload" href="/above-fold.css" as="style">
Плохо:
<!-- Не 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">
<!-- Это замедляет загрузку! -->
| Type | Пример |
|---|---|
script | JavaScript файлы |
style | CSS файлы |
font | Шрифты (требует crossorigin) |
image | Изображения |
fetch | API запросы, JSON |
video | Видео файлы |
audio | Аудио файлы |
Назначение: Загрузить ресурс для следующей навигации (низкий приоритет).
<!-- Страница, куда пользователь, вероятно, перейдёт -->
<link rel="prefetch" href="/next-page.html">
<!-- JavaScript для следующей страницы -->
<link rel="prefetch" href="/next-page.js">
<!-- Изображения, которые появятся при скролле -->
<link rel="prefetch" href="/below-fold-image.jpg">
Хорошо:
<!-- На странице продукта - prefetch корзины -->
<link rel="prefetch" href="/cart.js">
<!-- На landing page - prefetch signup page -->
<link rel="prefetch" href="/signup">
<!-- В карусели - prefetch следующего изображения -->
<link rel="prefetch" href="/carousel-image-2.jpg">
Плохо:
<!-- Не prefetch критические ресурсы текущей страницы! -->
<link rel="prefetch" href="/hero-image.jpg"> <!-- Должен быть preload! -->
Назначение: Preload для JavaScript модулей + их зависимостей.
<!-- Загрузить модуль и его dependencies -->
<link rel="modulepreload" href="/app.js">
<!-- Это также загрузит импорты внутри app.js: -->
<!-- import { utils } from './utils.js' -->
<!-- import { api } from './api.js' -->
// app.js
import { helper } from './helper.js';
import { api } from './api.js';
// Без modulepreload:
// 1. Загрузить app.js
// 2. Парсить app.js
// 3. Обнаружить импорты
// 4. Загрузить helper.js и api.js Задержка!
// С modulepreload:
// 1. Параллельно загрузить app.js, helper.js, api.js
// 2. Парсить и выполнить
Назначение: Выполнить DNS lookup для внешнего домена.
<!-- Внешние ресурсы -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://analytics.google.com">
Без dns-prefetch:
User action → DNS lookup (20-120ms) → Connect → Request
С dns-prefetch:
DNS уже готов! → Connect → Request
Экономия: 20-120ms
Назначение: DNS + TCP + TLS handshake для внешнего домена.
<!-- Критические внешние ресурсы -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">
1. DNS lookup (20-120ms)
2. TCP handshake (RTT)
3. TLS handshake (RTT)
----------------------------
Total savings: 100-500ms!
| dns-prefetch | preconnect | |
|---|---|---|
| DNS lookup | Да | Да |
| TCP handshake | Нет | Да |
| TLS handshake | Нет | Да |
| Cost | Дешево | Дороже |
| When | Много доменов | Критические домены (2-3) |
Attribute fetchpriority управляет приоритетом загрузки:
<!-- Высокий приоритет для LCP image -->
<img src="/hero.jpg" fetchpriority="high">
<!-- Низкий приоритет для below-fold image -->
<img src="/footer-logo.jpg" fetchpriority="low" loading="lazy">
<!-- Критический CSS -->
<link rel="stylesheet" href="/critical.css" fetchpriority="high">
<!-- Некритический JavaScript -->
<script src="/analytics.js" fetchpriority="low" async></script>
| Ресурс | Приоритет |
|---|---|
| HTML | Highest |
CSS (в <head>) | Highest |
| Fonts | High |
Scripts (в <head>) | High |
| Images (в viewport) | High |
| Scripts (async) | Low |
| Images (below fold) | Low |
Цепочка критических запросов — последовательность блокирующих ресурсов:
<!-- Плохо: глубокая цепочка -->
<html>
<head>
<link rel="stylesheet" href="/style.css">
<!-- В style.css: -->
<!-- @import url('/fonts.css'); -->
<!-- В fonts.css: -->
<!-- @font-face { src: url('/font.woff2'); } -->
</head>
Depth = 3:
Решение:
<!-- Хорошо: параллельная загрузка -->
<head>
<link rel="preload" href="/font.woff2" as="font" crossorigin>
<link rel="stylesheet" href="/style.css">
</head>
<!-- Depth = 1, всё параллельно! -->
<head>
<!-- Critical для LCP -->
<link rel="preload" href="/hero-product.jpg" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<!-- Внешние критические ресурсы -->
<link rel="preconnect" href="https://cdn.shopify.com">
<!-- Некритические внешние -->
<link rel="dns-prefetch" href="https://analytics.google.com">
<!-- Prefetch для вероятного перехода -->
<link rel="prefetch" href="/cart">
<link rel="prefetch" href="/checkout.js">
</head>
<!-- Preload critical chunks -->
<link rel="modulepreload" href="/app.js">
<link rel="modulepreload" href="/router.js">
<!-- Prefetch route chunks -->
<link rel="prefetch" href="/routes/home.js">
<link rel="prefetch" href="/routes/about.js">
Максимум 3-5 preload'ов. Больше = конкуренция за bandwidth.
Анализируйте user journey и prefetch'ите вероятные переходы.
Не больше 2-3 preconnect (дорогая операция).
Помогите браузеру приоритизировать LCP ресурсы.
Используйте Lighthouse, WebPageTest для валидации.
Network tab → Priority column
Высокий = Critical Path
Низкий = Prefetch candidates
- "Preload key requests"
- "Reduce initial server response time"
- "Eliminate render-blocking resources"
Итог:
Правильное использование resource hints (preload, prefetch, preconnect) может сократить время загрузки на 20-50%. Ключ — понимание Critical Path и user journey. Preload для критических ресурсов, prefetch для вероятных переходов, preconnect для внешних API/CDN.