Для достижения отличных показателей скорости, таких как низкий TTFB и быстрый LCP, недостаточно просто сжать изображения и минифицировать CSS. Браузер должен знать, какие ресурсы ему понадобятся сейчас для текущей страницы, и какие — позже для следующей страницы.
В этом нам помогают директивы resource hints (<link rel="...">) — preload и prefetch.
1. Preload: Загрузка “здесь и сейчас” (Приоритетный ресурс)
Директива preload сообщает браузеру, что ресурс (например, шрифт, критический CSS, изображение) срочно необходим для текущей страницы. Браузер должен начать его загрузку с высоким приоритетом как можно раньше, не дожидаясь, пока он будет обнаружен в HTML или CSS.
Когда использовать preload:
- Критические шрифты: Если вы используете собственный шрифт, который важен для отображения текста на первом экране.
- LCP-изображения: Изображение, являющееся самым крупным элементом контента на первом экране (например, баннер или главное фото товара).
- Критический CSS: Если вы загружаете важный CSS-файл асинхронно, но хотите, чтобы его загрузка началась немедленно.
Синтаксис preload:
Директива всегда размещается в <head> и требует обязательного указания атрибута as (тип ресурса), чтобы браузер мог установить правильный приоритет и политику безопасности.
<!-- Предзагрузка ключевого шрифта с высоким приоритетом -->
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
<!-- Предзагрузка главного изображения, которое будет LCP-элементом -->
<link rel="preload" href="/images/main-banner.webp" as="image">
<!-- Предзагрузка важного JS-файла -->
<link rel="preload" href="/js/critical-lib.js" as="script">
Внимание: Используйте
preloadразумно. Предзагрузка слишком большого количества ресурсов приведет к обратному эффекту: конкуренция за пропускную способность замедлит действительно критически важные элементы, увеличив LCP.
2. Prefetch: Подготовка к следующей странице (Низкий приоритет)
Директива prefetch сообщает браузеру, что ресурс может понадобиться для следующей страницы, на которую, скорее всего, перейдет пользователь.
Браузер загружает этот ресурс с самым низким приоритетом и только после того, как все ресурсы текущей страницы уже обработаны. Это кэшируется в браузере, и при переходе на следующую страницу ресурс моментально доступен.
Когда использовать prefetch:
- Навигация по каталогу: На странице категории, где есть 20 товаров, можно
prefetch’ить CSS и JS для страницы оформления заказа (checkout) или корзины, так как это наиболее вероятные следующие шаги. - Ссылки на блог/статьи: На главной странице можно
prefetch’ить статью или страницу, на которую пользователь, скорее всего, кликнет (например, “Самые популярные товары”). - Поиск: После того как пользователь ввел поисковый запрос, но еще не нажал “Enter”, можно
prefetch’ить страницу результатов поиска.
Синтаксис prefetch:
<!-- Предварительная загрузка страницы оформления заказа -->
<link rel="prefetch" href="/checkout/cart" as="document">
<!-- Предварительная загрузка CSS-файла, специфичного для следующего раздела сайта -->
<link rel="prefetch" href="/css/user-profile.css" as="style">
Ключевое отличие:
preloadускоряет текущую загрузку,prefetchускоряет следующую загрузку.
3. Разница и правильное применение
| Критерий | preload | prefetch |
|---|---|---|
| Цель | Ускорить загрузку текущей страницы (LCP). | Ускорить загрузку следующей страницы. |
| Приоритет | Высокий (критический ресурс). | Низкий (ресурс “для свободного времени” браузера). |
Атрибут as | Обязателен, чтобы браузер знал тип ресурса. | Не обязателен (хотя можно указать as="document"). |
| Когда используется | Для шрифтов, CSS, LCP-изображений. | Для CSS/JS других страниц, иконок для следующих шагов. |
Сценарий эффективной оптимизации
Предположим, вы работаете над страницей продукта, и для нее критически важны:
- Кастомный шрифт Inter.
- Главное фото товара (LCP).
- Модуль оформления заказа, который понадобится на следующей странице.
Ваши директивы в <head> будут выглядеть так:
<!-- 1. PRELOAD: Критический шрифт для текущей страницы (высокий приоритет) -->
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
<!-- 2. PRELOAD: LCP-изображение для текущей страницы (высокий приоритет) -->
<link rel="preload" href="/images/product-main.webp" as="image">
<!-- 3. PREFETCH: Документ оформления заказа (низкий приоритет, для следующего шага) -->
<link rel="prefetch" href="/checkout/confirm" as="document">
4. Практические советы и риски
Риск №1: Двойная загрузка
Если вы используете preload для ресурса, который также загружается в HTML или CSS, браузер может загрузить его дважды, если URL-адреса не совпадают абсолютно точно (например, разные протоколы HTTP vs HTTPS или относительные vs абсолютные пути).
- Проверка: Используйте вкладку Network в DevTools. Если в списке два одинаковых ресурса, значит, есть проблема.
Риск №2: Игнорирование crossorigin
При предварительной загрузке шрифтов (as="font"), которые загружаются с того же домена, что и страница, вы обязаны использовать атрибут crossorigin. Если его пропустить, браузер отклонит предварительно загруженный шрифт и запросит его снова, как только он будет обнаружен в CSS, что приведет к двойной загрузке и ухудшению LCP.
Риск №3: Бесполезная загрузка с prefetch
Если вы предзагружаете страницу, на которую пользователь, в итоге, не переходит, вы зря потратили его трафик и ресурсы. prefetch лучше всего работает на страницах с высоким коэффициентом конверсии и высокой предсказуемостью действий (например, страница регистрации, корзина).
Использование с JavaScript
Вы можете динамически добавлять prefetch или preload с помощью JavaScript, основываясь на поведении пользователя:
onmouseover: Добавьтеprefetchдля ссылки, когда пользователь наводит на нее курсор мыши (за 50-100 мс).- Оценка поведения: Добавляйте
prefetchдля ссылок, которые находятся в поле видимости и на которые пользователь часто кликает.
// Пример динамического prefetch при наведении
const link = document.getElementById('next-step-link');
link.addEventListener('mouseover', () => {
const prefetchLink = document.createElement('link');
prefetchLink.rel = 'prefetch';
prefetchLink.href = link.href; // URL следующей страницы
document.head.appendChild(prefetchLink);
});
Правильное использование preload и prefetch является признаком профессиональной оптимизации, позволяющей использовать пропускную способность пользователя максимально эффективно, сокращая LCP и обеспечивая мгновенную навигацию.
