Генератор preload, preconnect и dns-prefetch

Генератор preload, preconnect и dns-prefetch: для чего нужен

Resource hints — это теги в <head>, которые предупреждают браузер о том, что понадобится странице, чтобы он заранее установил соединения и начал загрузки. В меру они сокращают время до появления основного содержимого; в избытке — мешают.

Вставьте адреса или HTML страницы, и инструмент выберет: preconnect (с crossorigin для шрифтов) максимум для трёх важных доменов, dns-prefetch для остальных и для скриптов аналитики, preload только для одного-двух шрифтов и для главного изображения с fetchpriority=high и prefetch для вероятной следующей страницы. К каждому тегу прилагается причина.

Как пользоваться

1. Вставьте адреса или HTML.
2. Проверьте домен, главное изображение и следующую страницу.
3. Скопируйте теги в <head>.

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

• Сайты с Google Fonts.
• Страницы с крупным изображением вверху.
• Улучшение LCP в Core Web Vitals.

Частые вопросы

В чём разница между preconnect и dns-prefetch?

Preconnect устанавливает полное соединение с другим доменом (DNS, TCP и TLS) до того, как оно понадобится браузеру. Dns-prefetch только разрешает DNS, он дешевле и подходит для менее важных доменов. Используйте preconnect для нескольких доменов — двух-трёх, а dns-prefetch для остальных.

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

Только для критичных ресурсов, которые браузер обнаруживает поздно, например шрифт заголовка (спрятанный внутри CSS) или главное изображение, заданное в CSS как фон. Слишком много preload отнимает пропускную способность у важного и замедляет сайт.

Почему шрифту нужен crossorigin?

Шрифты всегда запрашиваются в режиме CORS. Без атрибута crossorigin в preload или preconnect браузер не использует уже загруженное и в итоге запрашивает шрифт дважды.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты