Как настроить Resource Hints
Сначала найдите позднее обнаружение или дорогой connection setup в Network. Затем добавьте точную подсказку, совпадающую с будущим запросом, и удалите её, если повторный trace не показывает пользу.
Самый безопасный путь
Сообщение разработчику
«Запишите uncached mobile/desktop waterfall, определите поздно обнаруженный критический ресурс или ранний cross-origin connection. Добавьте только нужный preconnect/preload/modulepreload/dns-prefetch с точными href, as, type, crossorigin/media. Проверьте reuse, duplicate downloads, unused preload warnings, priority и LCP до/после; hints без пользы удалите».
Сохраните исходный head/Link header и trace, отметьте LCP element/resource и его initiator. Изменяйте по одной подсказке, чтобы видеть конкуренцию и результат.
Как выбрать подсказку
| Задача | Hint | Ограничение |
|---|---|---|
| Ранний критический запрос к другому origin | preconnect | Только несколько наиболее важных origin |
| Менее важный вероятный cross-origin запрос | dns-prefetch | Только DNS, без TCP/TLS |
| Критический файл текущей страницы найден поздно | preload | Точный as/CORS и обязательное использование |
| Критический ES module | modulepreload | Не заменять обычным script preload вслепую |
| Вероятный ресурс следующей same-site навигации | prefetch | Низкий приоритет, cache/browser ограничения |
Пошаговая настройка
- В Network включите Disable cache, покажите Priority/Initiator и запишите mobile загрузку.
- Найдите LCP resource и файлы, которые CSS/JS обнаруживает поздно; для origin разложите DNS, Initial connection и SSL.
- Убедитесь, что обычная разметка не может сделать ресурс ранним сама: LCP image лучше виден в исходном HTML.
- Добавьте hint как можно раньше в
head. Не preconnect к same-origin и не preload уже ранний stylesheet/script без причины. - Сопоставьте preload с потребителем по URL, destination, CORS credentials и media; иначе браузер может скачать дважды.
- Перезагрузите, дождитесь Console warning об unused preload, проверьте start time, priority и reuse.
- Повторите несколько раз на mobile/desktop; оставьте только подсказки с устойчивым улучшением без ухудшения LCP/других критических запросов.
Технические примеры
<link rel="preconnect" href="https://fonts.example" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example">
<link rel="preload" href="fonts/main.woff2"
as="font" type="font/woff2" crossorigin>
<link rel="preload" href="images/hero.webp"
as="image" type="image/webp" fetchpriority="high">
<link rel="modulepreload" href="assets/app.js">Не копируйте список целиком. Font preload нужен только используемому early font; responsive image может требовать imagesrcset/imagesizes; cross-origin режим должен совпасть с реальным запросом.
Не preload всё важное
Preload повышает сетевую конкуренцию и может задержать CSS, LCP или другие ресурсы. Для уже обнаружимого LCP image иногда достаточно обычного img с fetchpriority="high".
Откат и границы
При двойной загрузке, unused warning или ухудшении waterfall удалите последнюю подсказку, очистите HTML/CDN-кеш и повторите trace. Затем выполните независимую проверку.
Speculation Rules/prerender, оптимизация шрифтов/изображений, CDN/TTFB и архитектура bundle относятся к отдельным работам.
