ForHosting KIT · Websites auslesen & überwachen

Preload-Tag für Schriften, CSS, Skripte und Bilder erstellen

Erstellen Sie einen sofort einsetzbaren Preload-Link, ohne die Regeln für Datei, HTML-Ziel und ursprungsübergreifendes Laden auswendig zu kennen.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Geben Sie eine absolute oder relative URL ein und wählen Sie Schrift, Stil, Skript oder Bild. Das Ergebnis setzt das passende as-Attribut, schützt die URL im HTML-Attribut und ergänzt bei Schriften den anonymen CORS-Modus. Unbekannte Ressourcentypen führen zu einer eindeutigen Eingabemeldung.

Wählen Sie eine Ressource für den frühen Abruf

Preload ist ein gezielter Leistungshinweis und kein Auftrag, sämtliche Dateien vorab zu laden. Nutzen Sie ihn für bald benötigte Ressourcen, die der Browser sonst spät entdeckt: eine zentrale Webschrift aus CSS, ein wichtiges Titelbild, ein kritisches Stylesheet oder ein Startskript. Geben Sie die genaue URL samt Pfad, Abfrage oder Inhaltsfingerabdruck ein. Absolute, protokollrelative, wurzelrelative und gewöhnliche relative URLs sind zulässig. Der Generator behält den Wert bei und maskiert besondere HTML-Zeichen. Wählen Sie den Typ nach der tatsächlichen Verwendung: font, style, script oder image. Das Ergebnis ist ein vollständiges link-Element für den Dokumentkopf.

Verstehen Sie as und crossorigin

Das as-Attribut nennt dem Browser das Ziel der vorgeladenen Antwort. Davon hängen Priorität, Sicherheitsregeln und Wiederverwendung ab. Jeder Typ wird unmittelbar seinem standardisierten Ziel zugeordnet. Schriften erhalten crossorigin="anonymous", weil Schriftanfragen CORS verwenden, häufig sogar beim gleichen Ursprung. Ohne dieses Attribut kann ein zweiter Download entstehen. Bei den übrigen Typen wird crossorigin nicht automatisch gesetzt, da der richtige Modus von der späteren Anfrage abhängt. type, media, imagesrcset, integrity und fetchpriority werden bewusst nicht geraten; die zwei Eingaben reichen für eine verlässliche Entscheidung nicht aus.

Platzieren und prüfen Sie den Tag

Setzen Sie den erzeugten Link früh in den Dokumentkopf, üblicherweise vor das CSS oder Skript, das die Ressource sonst bekannt macht. href muss mit der späteren Anfrage übereinstimmen; Abweichungen bei Host, Pfad, Parametern, Weiterleitung oder CORS verhindern womöglich die Wiederverwendung. Prüfen Sie einen frischen Seitenaufruf in den Browserwerkzeugen. Die Ressource sollte einmal angefordert und bald genutzt werden. Warnungen über ungenutzte Preloads weisen oft auf eine abweichende URL oder eine anfangs unnötige Datei hin. Zu viele Hinweise konkurrieren mit kritischen Downloads. Behandeln Sie jeden Tag als messbare Hypothese.

Anwendungsfälle

Hauptschrift vorladen

Erzeugen Sie einen Schrift-Preload mit dem für die Wiederverwendung nötigen anonymen Modus.

Titelbild priorisieren

Erstellen Sie den Preload einer stabilen URL für den ersten sichtbaren Bereich.

HTML für die Bereitstellung vorbereiten

Erzeugen Sie deterministisches Markup für versioniertes CSS oder Skripte in der Release-Pipeline.

Häufige Fragen

Welche Ressourcentypen werden unterstützt?

Zulässig sind font, style, script und image; jeder andere Wert ergibt einen Eingabefehler.

Warum enthalten Schriften crossorigin?

Schriftanfragen verwenden CORS; mit demselben Modus kann der Browser den Preload wiederverwenden.

Darf die URL relativ sein?

Ja. Absolute sowie protokoll-, wurzel- und dokumentrelative URLs sind zulässig.

Prüft der Generator, ob die Ressource existiert?

Nein. Er nutzt kein Netzwerk, sondern prüft und maskiert den Text und erzeugt deterministisches Markup.

Garantiert Preload schnelleres Rendern?

Nein. Es ändert Erkennung und Priorität; messen Sie die Seite, da unnötige Preloads schaden können.

Was kostet eine API-Anfrage?

Der Grundpreis beträgt $0.002 pro erzeugtem Element. Dieselbe Logik kann lokal im Browser laufen.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/web/preload-link-generate

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem 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)

Beispiel-Anfrage

{
  "url": "/assets/site.woff2",
  "type": "font"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.preload_link_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →