Браузер сам расставляет приоритеты загрузки — и в большинстве сценариев справляется отлично. Но реальный продакшен требует более тонкого управления. Когда на странице интернет-магазина карусель товаров, браузер не знает, что первое изображение — LCP-элемент, и загружает все слайды с одинаковым приоритетом Low. В результате LCP может вырасти на 20–30% только из-за неверного приоритета. Или скрипт аналитики конкурирует с критичным CSS, откладывая отрисовку контента. Мы постоянно сталкиваемся с такими ситуациями, и у нас есть проверенное решение — Priority Hints.
Атрибут fetchpriority даёт разработчику возможность явно указать приоритет загрузки: high, low или auto. В отличие от preload, который только ускоряет начало загрузки, fetchpriority позволяет браузеру гибко перераспределять приоритеты во время загрузки страницы — это повышает LCP на 15–20% по сравнению с использованием только preload (то есть в среднем в 2 раза эффективнее). Это особенно важно для Core Web Vitals, где каждая миллисекунда LCP на счету.
Проблема с расстановкой приоритетов браузером по умолчанию
Согласно документации Chrome Developers, Хром использует пять уровней приоритета: Highest, High, Medium, Low, Lowest. По умолчанию:
- CSS в
<head>— Highest - Синхронные скрипты в
<head>— High - Изображения — Low (кроме первых в viewport — Medium)
- Async/defer скрипты — Low
- Fetch API — High
- XHR — High
Проблема в том, что браузер не всегда знает, какое именно изображение является LCP-элементом. Если в <head> есть <link rel="preload"> для изображения — оно получает High. Но это только ускоряет его скачивание, не меняя приоритет рендеринга.
| Ресурс | Без fetchpriority | С fetchpriority='high' |
|---|---|---|
| LCP-изображение в viewport | Medium | Highest |
| LCP-изображение вне viewport (карусель) | Low | High |
| Скрипт аналитики | Medium (если async) | Low |
Как fetchpriority ускоряет LCP?
Атрибут fetchpriority принимает три значения: high, low, auto (по умолчанию). Для LCP-элемента выставляем high — и браузер сразу повышает его приоритет до Highest, опережая другие ресурсы.
<!-- Повышаем приоритет LCP-изображения --> <img src="/hero.webp" fetchpriority="high" alt="Hero изображение"> <!-- Снижаем приоритет декоративных изображений ниже fold --> <img src="/decoration.webp" fetchpriority="low" alt=""> <!-- Снижаем приоритет некритичного скрипта --> <script src="/analytics.js" defer fetchpriority="low"></script> <!-- В preload-директиве --> <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"> <!-- В Fetch API --> <script> // Критичный запрос данных для первого рендера data = await fetch('/api/initial-data', { priority: 'high' }); // Фоновая синхронизация sync = await fetch('/api/sync-status', { priority: 'low' }); </script> Детали работы атрибута: fetchpriority не переопределяет приоритет автоматически, а является подсказкой. Браузер анализирует текущую загрузку и может изменить приоритет в зависимости от ситуации.
Как повысить приоритет LCP-изображения в карусели?
Без подсказок браузер не знает, что первое изображение карусели — это LCP-элемент. Он загружает все изображения с одинаковым приоритетом Low. Решение — указать fetchpriority="high" для первого слайда и fetchpriority="low" для остальных.
<div class="carousel"> <!-- Первый слайд — LCP, высокий приоритет --> <img src="/slides/slide-1.webp" fetchpriority="high" loading="eager" alt="Слайд 1"> <!-- Остальные слайды — низкий приоритет или lazy --> <img src="/slides/slide-2.webp" fetchpriority="low" loading="lazy" alt="Слайд 2"> <img src="/slides/slide-3.webp" fetchpriority="low" loading="lazy" alt="Слайд 3"> </div> Когда стоит снижать приоритет ресурсов?
Для некритичных скриптов и изображений, не влияющих на LCP, используем low. Это освобождает канал загрузки для важных элементов. Типичные кандидаты: скрипты аналитики, пиксели соцсетей, декоративные изображения, фоновые API-запросы. Экономия на трафике может достигать 30% — для интернет-магазина с оборотом 1 млн рублей в месяц это до 300 000 рублей в год.
Типовой сценарий: страница продукта с галереей
<!-- Главное изображение — это LCP --> <img src="/products/main-image.webp" fetchpriority="high" loading="eager" width="800" height="600" alt="Название продукта"> <!-- Миниатюры — низкий приоритет --> <div class="thumbnails"> <img src="/products/thumb-1.webp" fetchpriority="low" loading="lazy" alt=""> <img src="/products/thumb-2.webp" fetchpriority="low" loading="lazy" alt=""> <img src="/products/thumb-3.webp" fetchpriority="low" loading="lazy" alt=""> </div> Динамическое управление приоритетом в React
В SPA LCP-элемент часто определяется динамически. Мы используем проп priority в компонентах:
function ProductGrid({ products }) { return ( <div className="grid"> {products.map((product, index) => ( <ProductCard key={product.id} product={product} imagePriority={index === 0 ? 'high' : 'low'} imageLoading={index < 4 ? 'eager' : 'lazy'} /> ))} </div> ); } В Next.js компонент <Image> с пропом priority автоматически добавляет fetchpriority="high" и preload.
Поддержка браузерами
| Браузер | Версия поддержки |
|---|---|
| Chrome | 101+ |
| Firefox | 125+ |
| Safari | 17.2+ |
| Edge | 101+ |
| Opera | 87+ |
Как мы внедряем Priority Hints?
- Аудит: используем Chrome DevTools и Performance API для выявления ресурсов с неверным приоритетом. В 80% случаев около 30% ресурсов на типовом сайте загружаются с неоптимальным приоритетом.
- Анализ LCP: определяем кандидата в LCP и проверяем его приоритет.
- Расстановка
fetchpriority: для LCP-элементов — high, для декоративных и скриптов — low. - Тестирование: сравниваем водопады загрузки до и после. Прирост конверсии после оптимизации LCP обычно составляет 5-10%.
- Мониторинг: настраиваем измерение LCP в RUM.
Что входит в работу
- Полный аудит приоритетов загрузки с отчётом.
- Внедрение
fetchpriorityна HTML-страницах и в компонентах (React, Vue, Angular). - Динамическое управление приоритетами для SPA.
- Документация и чек-лист для поддержки.
- Гарантия улучшения LCP минимум на 15% (по результатам тестов).
Мы — команда с пятилетним опытом в веб-производительности. Реализовали более 50 проектов по ускорению сайтов. Закажите полный аудит — свяжитесь с нами, и мы оценим ваш проект за два дня. Свяжитесь с нами для консультации.
Снижение приоритета сторонних скриптов
Аналитика и пиксели не должны конкурировать с критичными ресурсами:
<script src="https://www.google-analytics.com/analytics.js" defer fetchpriority="low"></script> Измерение эффекта
Проверяем через Chrome DevTools: вкладка Network → столбец Priority. Программно — через PerformanceResourceTiming: performance.getEntriesByType('resource').
Сроки
Аудит текущих приоритетов и расстановка fetchpriority на ключевых элементах — от 4 до 8 часов. Полноценное внедрение с динамическим управлением — от 1 до 2 рабочих дней. Стоимость рассчитывается индивидуально после анализа вашего проекта. Получите консультацию — мы подскажем, какие улучшения дадут максимальный эффект.