Preload und Preconnect für Fonts und Assets in WordPress nutzen

Resource Hints sind kleine <link>-Anweisungen im <head> einer Seite, mit denen Sie dem Browser mitteilen, welche Ressourcen er früh anfassen soll. Die drei wichtigsten sind rel="preconnect" (baut die Verbindung – DNS, TCP, TLS – zu einer fremden Domain vorab auf), rel="dns-prefetch" (löst nur den DNS-Namen vorab auf, günstiger Fallback für ältere Browser) und rel="preload" (lädt eine konkrete Datei mit hoher Priorität herunter, bevor der Browser sie im Dokument entdeckt). Richtig eingesetzt verkürzen sie den Largest Contentful Paint (LCP) um oft 100 bis 400 ms, weil das wichtigste Bild und die Schriftarten nicht mehr am Ende der Ladekette hängen. Falsch oder zu großzügig eingesetzt schaden sie jedoch: Jeder Preload konkurriert um Bandbreite, und zu viele Hints verzögern genau die Ressourcen, die schnell sein sollen. Diese Anleitung zeigt, wann und wie Sie die Hints in WordPress gezielt setzen.

Die drei Hints im Überblick

Hint	Was er tut	Wofür
`preconnect`	DNS + TCP + TLS zur fremden Domain vorab aufbauen	Font-Host, CDN, Analytics – Domains, von denen früh geladen wird
`dns-prefetch`	nur DNS-Auflösung vorab	günstiger Fallback und für Domains, die etwas später gebraucht werden
`preload`	konkrete Datei mit hoher Priorität sofort laden	LCP-Bild, kritische Web-Fonts, kritisches CSS

Schritt 1: Kritische Ressourcen identifizieren

Öffnen Sie die Chrome DevTools, Reiter Network, laden Sie die Seite neu und schauen Sie sich das Wasserfall-Diagramm an. Bestimmen Sie:

Das LCP-Element: meist das große Hero-Bild oben. Im Reiter Performance oder in Lighthouse wird es als "Largest Contentful Paint element" markiert.
Schriftarten, die für sichtbaren Text nötig sind (spät geladene Fonts verursachen den "Flash of Unstyled Text").
Fremd-Domains, von denen früh geladen wird (Google Fonts, ein Bild-CDN, ein Icon-Host).

Nur diese wenigen Ressourcen bekommen einen Hint – nicht jede Datei.

Schritt 2: Preconnect für Fremd-Domains

Bindet Ihre Seite Ressourcen von einer anderen Domain ein, sparen Sie mit preconnect den Verbindungsaufbau. Beispiel für einen Font- oder CDN-Host:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

Das crossorigin-Attribut ist bei Schriftarten und anderen anonym geladenen Ressourcen zwingend, sonst wird die vorab aufgebaute Verbindung nicht wiederverwendet. Der dns-prefetch darunter dient als Fallback für Browser ohne preconnect-Unterstützung.

Hinweis zu Google Fonts: Am schnellsten ist es, Google Fonts lokal einzubinden und ganz auf die Fremd-Domain zu verzichten. Ist das nicht möglich, hilft preconnect zu fonts.gstatic.com.

Schritt 3: Preload für LCP-Bild und Schriftarten

LCP-Bild vorladen

<link rel="preload" as="image"
      href="/wp-content/uploads/2026/07/hero.avif"
      type="image/avif"
      fetchpriority="high">

Alternativ – und oft eleganter – setzen Sie am <img>-Tag des Hero-Bildes direkt fetchpriority="high" und entfernen bei diesem Bild das Lazy Loading, statt einen separaten Preload zu nutzen.

Schriftart vorladen

<link rel="preload" as="font" type="font/woff2"
      href="/wp-content/themes/mein-theme/fonts/inter.woff2"
      crossorigin>

Bei Fonts ist crossorigin auch bei gleicher Domain nötig, weil Schriftarten grundsätzlich anonym geladen werden.

Umsetzung in WordPress

Variante A: per functions.php

Hängen Sie die Hints über den Hook wp_head ein (in der functions.php des Child-Themes):

add_action( 'wp_head', function () {
    ?>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="font" type="font/woff2"
          href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
          crossorigin>
    <?php
}, 1 ); // Priorität 1 = möglichst früh im head

Variante B: über den resource_hints-Filter

Für preconnect und dns-prefetch bietet WordPress den offiziellen Filter wp_resource_hints:

add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = array(
            'href'        => 'https://fonts.gstatic.com',
            'crossorigin' => 'anonymous',
        );
    }
    return $hints;
}, 10, 2 );

Variante C: per Plugin

Optimierungs-Plugins wie WP Rocket, Perfmatters oder FlyingPress bieten Felder, in die Sie Preload- und Preconnect-URLs eintragen können – ohne Code.

Wie messe ich die Wirkung?

Lighthouse (Chrome DevTools, Reiter Lighthouse) vor und nach der Änderung laufen lassen und den LCP-Wert vergleichen.
Im Network-Tab prüfen, dass das LCP-Bild und die Fonts nun früher in der Kette starten (Priorität "High").
PageSpeed Insights sollte die Diagnose "Largest Contentful Paint image was lazily loaded" oder "Preconnect to required origins" nicht mehr anzeigen.

Häufige Fehler

Zu viele Preloads: Wird alles vorgeladen, ist nichts mehr priorisiert. Beschränken Sie sich auf 1–2 Bilder und 1–2 Fonts.
Preload ohne Nutzung: Ein per Preload geladenes, aber nicht innerhalb weniger Sekunden verwendetes Asset erzeugt in der Konsole die Warnung "was preloaded but not used" und verschwendet Bandbreite.
crossorigin vergessen: Fehlt es bei Fonts, lädt der Browser die Datei zweimal (einmal per Preload anonym, einmal regulär).
Preconnect zu vielen Domains: Jede offene Verbindung kostet Ressourcen. Mehr als 4–6 preconnects sind selten sinnvoll.
Falscher as-Wert: as="image", as="font", as="style" müssen zum Ressourcentyp passen, sonst wird der Preload ignoriert.

Häufige Fragen (FAQ)

Was ist der Unterschied zwischen preload und preconnect?

preconnect baut die Verbindung (DNS, TCP, TLS) zu einer fremden Domain vorab auf, lädt aber noch keine Datei. preload lädt eine konkrete Datei mit hoher Priorität herunter, bevor der Browser sie im Dokument entdeckt. preconnect nutzt man für Font-Hosts oder CDNs, preload für das LCP-Bild und kritische Schriftarten.

Warum brauchen Fonts beim Preload das crossorigin-Attribut?

Schriftarten werden vom Browser grundsätzlich anonym (im CORS-Modus) geladen, auch von der eigenen Domain. Fehlt beim Preload das crossorigin-Attribut, passt der vorgeladene Request nicht zum späteren Font-Request und der Browser lädt die Datei zweimal. Deshalb ist crossorigin bei preload as="font" immer nötig.

Wie viele Ressourcen sollte ich vorladen?

So wenige wie möglich. Wird alles vorgeladen, ist nichts mehr priorisiert und die Hints verlangsamen genau die Ressourcen, die schnell sein sollen. Beschränken Sie sich auf 1 bis 2 Bilder und 1 bis 2 Schriftarten sowie maximal 4 bis 6 preconnects.

Was bedeutet die Konsolenwarnung "preloaded but not used"?

Diese Warnung erscheint, wenn eine per preload geladene Ressource nicht innerhalb weniger Sekunden auf der Seite verwendet wird. Der Preload verschwendet dann Bandbreite. Prüfen Sie, ob der as-Wert (image, font, style) korrekt ist und ob die vorgeladene URL exakt mit der später genutzten URL übereinstimmt.

Wie hilft InspectWP bei Resource Hints?

InspectWP erfasst die im <head> vorhandenen <link>-Ressourcen sowie die eingebundenen Fremd-Domains und Schriftarten. Der Report zeigt, welche externen Hosts früh kontaktiert werden und wo Schriftarten von Drittanbietern geladen werden – gute Ansatzpunkte, um gezielt preconnect oder ein lokales Hosting einzusetzen.