Preloading bedeutet, dass eine Website den Browser anweist, eine Datei früher zu laden, als er sie von selbst finden würde. Dafür steht im Kopf der Seite ein Link-Element mit dem Wert rel="preload". Laut MDN legt dieser Wert einen Abruf für eine Ressource fest, die die Seite bald braucht. Sie lädt früh, bevor der Browser mit dem eigentlichen Darstellen beginnt, und blockiert das Rendern deshalb seltener [1]. Ausgeführt wird dabei nichts: Der Browser lädt die Datei mit höherer Priorität herunter und legt sie im Cache ab [1].
Wofür Preloading gedacht ist
Am meisten bringt der Hinweis bei Dateien, die der Browser spät entdeckt. Laut web.dev gehören Schriften aus @font-face-Regeln und Hintergrundbilder aus CSS dazu, weil der Browser sie erst sieht, wenn das Stylesheet geladen ist [2]. Auch das große Titelbild einer Seite oder ein Textblock in einer Webschrift kann das Element sein, das die Kennzahl Largest Contentful Paint misst. Diese Dateien vorzuladen kann den LCP laut web.dev deutlich verbessern [2]. Bei JavaScript trennt Preloading das Herunterladen vom Ausführen und eignet sich vor allem für die wichtigsten Teile eines aufgeteilten Skripts [2].
Die Angaben as und crossorigin
Zu jedem Preload gehört das Attribut as, das die Art der Datei nennt, etwa style, script, font oder image [1]. Damit setzt der Browser die richtige Priorität und die passenden Kopfzeilen der Anfrage und erkennt, ob die Datei schon im Cache liegt [1, 2]. Fehlt die Angabe oder ist sie ungültig, behandelt der Browser die Anfrage wie einen XHR-Abruf, und Skripte werden unter Umständen doppelt geladen [2]. Schriften brauchen zusätzlich das Attribut crossorigin, auch wenn sie vom eigenen Server kommen. Ohne das Attribut lädt der Browser die Schrift zweimal [1, 2]. Mit media lässt sich je nach Bildschirmbreite eine andere Datei vorladen, zum Beispiel ein schmales Hintergrundbild für das Smartphone [1].
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Sparsam einsetzen
Browser behandeln einen Preload als verbindlich, anders als bloße Hinweise wie preconnect [2]. Wer viele Dateien vorlädt, nimmt damit jeder einzelnen den Vorrang, und das schadet laut web.dev besonders in langsamen Netzen [2]. Nutzt eine Seite eine vorgeladene Datei gar nicht, meldet Chrome das etwa drei Sekunden nach dem load-Ereignis als Warnung in der Konsole [2]. Für JavaScript-Module empfiehlt MDN den eigenen Wert modulepreload [1]. Das Gegenstück ist Lazy Loading: Dort lädt der Browser Bilder weiter unten auf der Seite erst, wenn sie gebraucht werden.
Wie Ladezeit insgesamt besser wird, beantwortet die Frage Wie verbessere ich die Ladezeit meiner Website. Den Zusammenhang mit den Messwerten von Google erklärt Core Web Vitals. Wer diese Arbeit abgeben möchte, findet bei SEO NW die Leistung Core Web Vitals verbessern.
Für die Frage, welche Datei auf deiner Startseite den Aufbau am meisten bremst, gibt es die gratis Sprechstunde.
- Organisation rel=preload. MDN Web Docs. Stand 20.05.2026. abgerufen am 31.10.2026
- Organisation Preload critical assets to improve loading speed (Houssein Djirdeh, Jeremy Wagner, Milica Mihajlija). web.dev, Google. Stand 05.11.2018. abgerufen am 31.10.2026
Häufige Fragen
Was macht rel="preload"?
Es weist den Browser an, eine Datei früh und mit hoher Priorität herunterzuladen und im Cache abzulegen. Ausgeführt oder angewendet wird die Datei erst, wenn die Seite sie tatsächlich nutzt.
Welche Dateien sollte man vorladen?
Wenige kritische Dateien, die der Browser sonst spät entdeckt. Laut web.dev sind das vor allem Schriften, Hintergrundbilder aus CSS und das Bild oder der Text, der den Largest Contentful Paint bestimmt.
Warum braucht ein Font-Preload crossorigin?
Schriften werden im anonymen CORS-Modus geladen. Fehlt crossorigin, passt der Preload nicht zur späteren Anfrage, und der Browser lädt die Schrift ein zweites Mal.
Kann Preloading schaden?
Ja, wenn zu viele Dateien vorgeladen werden. Dann hat keine mehr Vorrang, und wichtige Dateien kommen in langsamen Netzen später an. Ungenutzte Preloads meldet Chrome als Warnung in der Konsole.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
