Genere una etiqueta preload para fuentes, CSS, scripts e imágenes
Genere un enlace de precarga listo para pegar sin memorizar la relación entre un archivo, su destino preload y el comportamiento entre orígenes.
Ejecutar — gratis
Indique una URL absoluta o relativa y clasifíquela como fuente, estilo, script o imagen. El resultado utiliza el atributo as adecuado, escapa la URL con seguridad y añade la carga anónima entre orígenes para fuentes. Los tipos desconocidos producen un error claro.
Elija un recurso que merezca solicitarse antes
Preload es una indicación de rendimiento específica, no una orden para adelantar todos los recursos. Úselo cuando la página necesite pronto un archivo que el navegador descubriría tarde: una fuente principal declarada en CSS, una imagen destacada, una hoja crítica o un script inicial. Introduzca la URL exacta, con ruta, consulta o huella de contenido. Se admiten URL absolutas, relativas al protocolo, a la raíz y al documento. El generador conserva el valor y escapa los caracteres especiales de HTML. Clasifique el recurso según su consumo: font, style, script o image. Recibirá un elemento link completo para la cabecera.
Comprenda los atributos as y crossorigin
El atributo as informa al navegador del destino de la respuesta precargada. Esto afecta a la prioridad, la política de seguridad y la posibilidad de reutilizarla. Cada tipo se asigna directamente a su destino normalizado. Las fuentes incluyen crossorigin="anonymous" porque sus solicitudes utilizan CORS, incluso en casos habituales del mismo origen. Sin ese atributo, el navegador podría descargar el archivo otra vez. Los demás tipos no reciben crossorigin automáticamente, pues el modo correcto depende de su solicitud posterior. Tampoco se inventan type, media, imagesrcset, integrity ni fetchpriority: dos datos de entrada no bastan para decidirlos con fiabilidad.
Coloque la etiqueta y compruebe su reutilización
Sitúe el enlace generado al principio de la cabecera, normalmente antes del CSS o script que revelaría el recurso. Mantenga href idéntico a la solicitud posterior; un host, ruta, consulta, redirección o modo CORS distinto puede impedir la reutilización. Revise después las herramientas del navegador con una carga limpia. El recurso debe solicitarse una sola vez y consumirse poco después. Investigue los avisos de precarga sin uso: suelen señalar una URL incorrecta o un archivo innecesario al inicio. Demasiadas indicaciones compiten con descargas críticas. Considere cada etiqueta una hipótesis que debe medir, no código permanente.
Qué puede hacer con ella
Precargar una fuente web principal
Cree una precarga de fuente con el atributo anónimo entre orígenes necesario para reutilizarla.
Priorizar una imagen destacada
Genere la precarga de una URL estable y esencial para la vista inicial.
Preparar HTML para el despliegue
Construya marcado determinista para CSS o scripts con huella durante una canalización de publicación.
Preguntas frecuentes
¿Qué tipos de recurso se admiten?
Se aceptan font, style, script e image. Cualquier otro valor devuelve un error de entrada.
¿Por qué las fuentes incluyen crossorigin?
Las solicitudes de fuentes usan CORS; el mismo modo permite reutilizar la precarga sin otra descarga.
¿La URL puede ser relativa?
Sí. Se admiten URL absolutas, relativas al protocolo, a la raíz y al documento.
¿El generador comprueba si existe el recurso?
No. No usa la red; valida y escapa el texto, y genera marcado determinista.
¿Preload garantiza una renderización más rápida?
No. Cambia el descubrimiento y la prioridad; mida la página porque una precarga innecesaria puede perjudicarla.
¿Cuánto cuesta la solicitud API?
El precio base es $0.002 por elemento generado. El navegador puede ejecutar localmente la misma lógica.
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/web/preload-link-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"/assets/site.woff2","type":"font"}'const res = await fetch("https://api.kit.forhosting.com/web/preload-link-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"url": "/assets/site.woff2",
"type": "font"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/preload-link-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"url": "/assets/site.woff2",
"type": "font"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/preload-link-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"url":"/assets/site.woff2","type":"font"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"url":"/assets/site.woff2","type":"font"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/preload-link-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"url": "/assets/site.woff2",
"type": "font"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.preload_link_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |