Einstellen von Preloading und Prefetching in einer Website

Preloading und Prefetching sind Techniken, die Sie einsetzen, um eine Website schneller und reibungsloser zu machen. Indem Sie bestimmte Ressourcen vorladen (noch bevor der Benutzer sie benötigt), verkürzen Sie die Ladezeit wichtiger Komponenten. In diesem Artikel erkläre ich, was der Unterschied ist, wann Sie sie einsetzen und wie Sie sie technisch einrichten.

Worin besteht der Unterschied?

Vorspannung

Sie sagen dem Browser: „Bitte laden Sie diese Datei so schnell wie möglich, sie ist wichtig.“

Häufig verwendet für: Schriftarten, wichtige Bilder, CSS oder JS, die sofort benötigt werden.

Prefetch

Sie sagen zu Ihrem Browser: „Diese Ressource könnte später nützlich sein, laden Sie sie bereits im Hintergrund.“

Häufig verwendet für: nächste Seiten, externe Skripte, API-Aufrufe.

1. Einstellung der Vorspannung

Preload fügen Sie in der Ihres HTML ein. Sie geben an, was Sie laden und um welche Art von Datei es sich handelt.

Beispiel: Schriftarten vorladen

Beispiel: Kritischer CSS

Vergewissern Sie sich, dass Sie as richtig eingestellt haben, sonst ignoriert der Browser das Vorladen.

2. Prefetch einstellen

Prefetch funktioniert besonders gut für Ressourcen, die wahrscheinlich benötigt werden, aber nicht sofort. Denken Sie an einen Link zu einer nächsten Seite oder ein Skript, das erst später geladen wird.

Beispiel: ein Page Prefetch

Oder mit Frameworks wie Next.js:

Viele Frameworks unterstützen das automatische Prefetching von internen Routen (clientseitiges Routing). Aber auch für externe APIs oder Skripte von Drittanbietern kann ein manuelles Prefetching nützlich sein.

3. Auch nützlich: dns-prefetch und preconnect

Für externe Quellen (wie CDNs oder externe Skripte) ist es klug, die DNS-Auflösung und Verbindungen im Voraus einzurichten.

Beispiel: Google Schriftarten

Erläuterung:

• dns-prefetch: löst die Domain auf, bevor sie verwendet wird
• preconnect: stellt bereits Verbindungen her (TCP Handshake, TLS), schneller als dns-prefetch

Verwenden Sie dies nur für Domains, die Sie tatsächlich nutzen – andernfalls verlieren Sie an Leistung.

4. Prüfung und Validierung

Stellen Sie sicher, dass Sie Preloading und Prefetching richtig einstellen. Eine falsche Implementierung kann tatsächlich zu Verzögerungen führen.

Werkzeuge:

• WebPageTest: Prüfen Sie, ob das Vorladen wie vorgesehen funktioniert
• Lighthouse: liefert Empfehlungen zur Vorbelastung
• Browser devtools (Registerkarte Netzwerk): Sehen Sie nach, ob eine Datei schon einmal geladen wurde?

Bewährte Praktiken

• Verwenden Sie den Preload nur für kritische Ressourcen – andernfalls verlangsamen Sie andere Ressourcen.
• Kombinieren Sie Preload mit einem Fallback (z.B.
• Schalten Sie nur das vor, was Sie wirklich brauchen
• Testen Sie die Ladezeit vor und nach der Implementierung

Zusammenfassend

Preloading und Prefetching sind relativ einfache Techniken, um eine Website schneller und reibungsloser zu machen. Insbesondere bei Websites mit vielen Medien, Schriftarten oder JS-Komponenten können Sie damit spürbare Verbesserungen erzielen – wenn Sie sie richtig anwenden.