Générez une balise preload pour polices, CSS, scripts et images
Générez un lien de préchargement prêt à coller sans mémoriser les règles entre fichier, destination HTML et accès interorigine.
Lancer gratuitement
Indiquez une URL absolue ou relative, puis choisissez police, style, script ou image. Le résultat fournit le bon attribut as, protège l’URL dans l’attribut HTML et ajoute le mode anonyme requis pour les polices. Tout type inconnu déclenche une erreur explicite.
Choisissez une ressource qui mérite une requête anticipée
Preload est une indication de performance ciblée, pas une consigne pour télécharger tous les fichiers à l’avance. Utilisez-la pour une ressource bientôt nécessaire mais découverte tardivement : police principale déclarée en CSS, image majeure, feuille critique ou script initial. Saisissez l’URL exacte avec chemin, paramètres ou empreinte. Les formes absolues, relatives au protocole, à la racine ou au document sont admises. Le générateur conserve cette valeur et protège les caractères spéciaux HTML. Choisissez le type selon l’usage réel : font, style, script ou image. Vous obtenez un élément link complet pour l’en-tête du document.
Comprenez les attributs as et crossorigin
L’attribut as précise au navigateur la destination de la réponse préchargée. Il influence la priorité, la sécurité et la réutilisation. Chaque type est associé directement à sa destination normalisée. Les polices reçoivent crossorigin="anonymous", car leurs requêtes emploient CORS, même souvent sur la même origine. Sans cet attribut, un second téléchargement peut survenir. Les autres types ne le reçoivent pas automatiquement : leur mode dépend de la future requête. Aucun attribut type, media, imagesrcset, integrity ou fetchpriority n’est deviné, puisque les deux données fournies ne permettent pas de les déterminer sûrement.
Placez la balise et vérifiez sa réutilisation
Placez le lien assez tôt dans l’en-tête, avant le CSS ou le script qui révélerait normalement la ressource. Gardez un href identique à la requête suivante : hôte, chemin, paramètres, redirection ou mode CORS différents peuvent empêcher la réutilisation. Contrôlez ensuite une nouvelle visite dans les outils du navigateur. La ressource doit être demandée une fois et consommée rapidement. Examinez tout avertissement de preload inutilisé : il signale souvent une URL incohérente ou un fichier non critique. Trop d’indications concurrencent les téléchargements essentiels. Considérez chaque balise comme une hypothèse à mesurer.
Cas d’usage
Précharger une police principale
Créez le preload avec le mode anonyme nécessaire à la réutilisation de la police.
Prioriser une image majeure
Générez le preload d’une URL stable indispensable au premier écran.
Préparer le HTML de déploiement
Produisez un balisage déterministe pour CSS ou scripts versionnés dans votre chaîne de livraison.
Questions fréquentes
Quels types sont acceptés ?
Les valeurs admises sont font, style, script et image ; toute autre valeur produit une erreur.
Pourquoi les polices ont-elles crossorigin ?
Les requêtes de polices utilisent CORS ; un mode identique permet de réutiliser le preload.
L’URL peut-elle être relative ?
Oui. Les URL absolues et relatives au protocole, à la racine ou au document sont admises.
Le générateur vérifie-t-il l’existence du fichier ?
Non. Il n’utilise pas le réseau ; il valide et protège le texte, puis crée un balisage déterministe.
Preload garantit-il un rendu plus rapide ?
Non. Il modifie découverte et priorité ; mesurez la page, car un preload inutile peut la ralentir.
Quel est le coût d’une requête API ?
Le prix de base est de $0.002 par élément généré. Le navigateur peut exécuter la même logique localement.
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre 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)Exemple de requête
{
"url": "/assets/site.woff2",
"type": "font"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.preload_link_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |