Генератор подсказок веб-ресурсов

Генерируйте правильные теги подсказок ресурсов <link rel> (preload, prefetch, preconnect, dns-prefetch, modulepreload) и эквивалентный HTTP header Link из простого списка ресурсов с автоматическим руководством as= и crossorigin.

Ввод

Ресурсы

Один ресурс на строку: url | hint type | resource type (as=) | crossorigin | media. Требуются только url и hint type — остальные поля можно опустить. Hint types: preload, prefetch, preconnect, dns-prefetch, modulepreload. Строки, начинающиеся с #, игнорируются.

Вывод

HTML теги <link>

HTTP header Link

Рекомендации и предупреждения

Исправления, применяемые автоматически (например, добавление crossorigin для шрифтов) и все, что стоит проверить.

Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/web-resource-hints-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "resources": "https://fonts.gstatic.com | preconnect | | anony…"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `web-resource-hints-generator` tool (Web Resource Hints Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/web-resource-hints-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор подсказок веб-ресурсов — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCP	От 5 кредитов
Нужно больше кредитов?	Посмотреть тарифы

Также доступно через

Интеграции Расширение для браузера Расширение для VS Code

Руководства

Генератор подсказок веб-ресурсов преобразует простой список ресурсов в правильно отформатированные теги HTML <link rel> и эквивалентный HTTP header Link: для preload, prefetch, preconnect, dns-prefetch и modulepreload. Он автоматически применяет правила атрибутов, которые браузеры действительно используют — as= для preload, crossorigin для шрифтов — и сообщает вам, что было изменено.

Как использовать инструмент

Введите один ресурс на строку в формате:

url | hint type | resource type | crossorigin | media

Требуются только URL и hint type — остальные поля можно опустить. Например:

https://fonts.gstatic.com | preconnect | | anonymous
/styles/critical.css | preload | style
/fonts/inter.woff2 | preload | font

Инструмент генерирует как теги HTML <link> (для вашего <head>), так и эквивалентные строки HTTP header Link: (для конфигурации на уровне сервера, так как подсказка в header применяется еще до того, как браузер начнет парсить HTML). Скопируйте тот формат, который использует ваша настройка.

Типы подсказок

preload — загрузите ресурс, который этой странице определенно понадобится, с высоким приоритетом, без блокировки рендеринга. Требует as=.
prefetch — загрузите ресурс, который будущая навигация, вероятно, понадобится, с низким приоритетом, во время простоя.
preconnect — откройте соединение (DNS + TCP + TLS) с кроссдоменным хостом заранее, без загрузки чего-либо.
dns-prefetch — разрешите DNS для хоста заранее; более дешевая альтернатива для браузеров, которые не поддерживают preconnect.
modulepreload — предварительно загрузите JavaScript модуль и его граф зависимостей.

Почему `as=` и `crossorigin` важны

preload без соответствующего значения as= (script, style, image, font, fetch, document, audio, video, track, worker, embed, object, manifest) загружается с неправильным приоритетом или полностью игнорируется, поскольку браузер не может определить, как его соотнести с окончательным запросом. Шрифты в частности должны загружаться в режиме CORS даже при одной и той же источнике — инструмент автоматически добавляет crossorigin для любой строки as=font и объясняет почему в панели рекомендаций.

Почему инструмент иногда добавляет `crossorigin` без значения?

Простой атрибут crossorigin (без ="anonymous") — это стандартное сокращение для анонимного режима CORS — форма, которую сами браузеры используют в своих собственных примерах preload. Используйте crossorigin="use-credentials" явно только если ресурс требует cookies или HTTP аутентификации.

HTML тег или HTTP header — какой использовать?

HTTP header Link: обнаруживается еще до того, как браузер начинает парсить HTML, поэтому он может подсказывать немного раньше, чем тот же тег <link>, размещенный в <head> — полезно для CDN или обратного прокси-сервера, который может внедрить header, или для подсказок preconnect/dns-prefetch, которые вы хотите применить на уровне сайта. В противном случае HTML тег проще поддерживать, так как он находится рядом с разметкой, которую он поддерживает.

Чтобы проверить, какие headers уже отправляет живой сайт, используйте Анализатор HTTP Headers. Для связанного заголовка безопасности HSTS см. Генератор Header Preload HSTS. Чтобы перенаправить старые URL вместо подсказки новых, см. Генератор правил перенаправления.

preloadprefetchpreconnectdns-prefetchmodulepreloadlink headercritical cssgoogle fontspage speedcore web vitals

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу