Wenn es darum geht, die Leistung einer Website zu verbessern, kommt es auf jede Millisekunde an. Eine der effektivsten Möglichkeiten, die Ladezeiten für kritische Ressourcen zu verkürzen, ist die Verwendung des HTML-Link-Attributs rel="preload". In diesem Beitrag gehen wir näher darauf ein, wie das Vorladen funktioniert, wann man es verwendet und wie es das Benutzererlebnis auf Ihrer Website drastisch verbessern kann.

Was ist rel="preload"?

Mit dem Attribut rel="preload" können Sie den Browser anweisen, mit dem Herunterladen bestimmter Ressourcen zu beginnen, bevor diese beim Rendern der Seite benötigt werden. Auf diese Weise können Sie sicherstellen, dass wichtige Assets wie Schriftarten, Stylesheets oder Skripte früher abgerufen werden, wodurch die Zeit verkürzt wird, die zum vollständigen Rendern der Seite benötigt wird.

Einfacher ausgedrückt: Sie informieren den Browser darüber, welche Dateien für ein reibungsloses Erlebnis wichtig sind.

Warum sollten Sie Preload verwenden?

Die meisten Web-Performance-Optimierungen konzentrieren sich auf die Reduzierung der Zeit, die zum Laden von Ressourcen benötigt wird. Das Vorladen ist besonders nützlich, wenn wichtige Elemente wie Schriftarten, CSS- oder JavaScript-Dateien vorhanden sind, die sich direkt darauf auswirken, wie schnell Ihre Seite angezeigt wird und funktioniert.

So kann das Vorladen helfen:

• Render-Blockierung reduzieren: Durch das Vorabladen von kritischem CSS oder Schriftarten vermeiden Sie Render-Blockierung-Probleme, bei denen die Seite darauf wartet, diese Ressourcen zu laden, bevor Inhalte angezeigt werden.
• First Contentful Paint (FCP) verbessern: Durch das Vorladen wird sichergestellt, dass wichtige Ressourcen schneller heruntergeladen werden, wodurch die Geschwindigkeit verbessert wird, mit der der erste visuelle Inhalt den Benutzern angezeigt wird.
• Bessere Benutzererfahrung: Eine schneller ladende Seite fühlt sich reaktionsschneller an und verbessert die allgemeine Benutzererfahrung, insbesondere bei ressourcenintensiven Assets wie Schriftarten oder Heldenbildern.

Syntax und Verwendung

Beginnen wir mit einem einfachen Beispiel für die Verwendung von rel="preload". Nachfolgend finden Sie einen einfachen HTML-Ausschnitt, der das Vorabladen einer benutzerdefinierten Schriftart veranschaulicht:

In diesem Beispiel:

• hrefgibt die URL der Ressource an.
• as gibt den Typ der Ressource an (z. B. Schriftart, Bild, Skript).
• type hilft dem Browser, das genaue Format der Datei zu verstehen (nützlich für Schriftarten).
• crossorigin ist erforderlich, wenn Ressourcen aus einer anderen Domäne geladen werden. Der Browser sieht dieses Tag und weiß, dass er die Schriftart frühzeitig herunterladen muss, auch wenn das CSS, das die Schriftart verwendet, noch nicht angewendet wurde.

Verschiedene Arten von Ressourcen vorab laden
Sie können verschiedene Arten von Ressourcen vorab laden, die für die Darstellung Ihrer Seite wichtig sind. Werfen wir einen Blick auf einige gängige Beispiele:

1. Schriftarten vorab laden
Schriftarten sind oft eine Hauptursache für langsame Seitenladevorgänge. Durch das Vorladen wird sichergestellt, dass der Text beim Rendern des Inhalts korrekt formatiert wird, wodurch Flash of Unstyled Text (FOUT) oder Flash of Invisible Text (FOIT) verhindert wird.

2. Stylesheets vorab laden
Wichtige Stylesheets, die das Layout Ihrer Seite steuern, sollten vorinstalliert sein, um sicherzustellen, dass der Browser die Seite so schnell wie möglich rendert.

3. Skripte vorab laden
Wenn Sie über JavaScript verfügen, das sofort für die Benutzerinteraktion erforderlich ist, kann das Vorladen von JavaScript dazu beitragen, die Verzögerung bei der Skriptausführung zu reduzieren.

4. Bilder vorab laden
Große Bilder, insbesondere solche, die über dem Falz verwendet werden, sollten vorab geladen werden, um sicherzustellen, dass Benutzer beim Abrufen des Bildes keine Leerzeichen oder Bildplatzhalter sehen.

Best Practices für die Verwendung von rel="preload"

Obwohl Preload ein leistungsstarkes Tool ist, sollten Sie es mit Bedacht einsetzen. Hier sind ein paar Best Practices:

1. Nur kritische Ressourcen vorab laden: Das Vorabladen aller Ressourcen kann Ihre Website tatsächlich verlangsamen. Beschränken Sie sich auf die Ressourcen, die für die erste Seitendarstellung unerlässlich sind.

2. Crossorigin für externe Ressourcen verwenden: Achten Sie beim Vorabladen von Ressourcen aus einer anderen Domäne darauf, das Crossorigin-Attribut einzubeziehen. Dadurch wird sichergestellt, dass Ihre Ressource ohne CORS-Probleme korrekt abgerufen werden kann.

3. Stellen Sie eine ordnungsgemäße Cache-Verwaltung sicher: Vorinstallierte Ressourcen sollten zwischenspeicherbar sein, um redundante Netzwerkanforderungen zu verhindern. Dies reduziert die Belastung sowohl Ihres Servers als auch des Browsers des Benutzers.

4. Nicht alles vorladen: Übermäßiges Vorladen kann den Browser unnötig belasten und zu Leistungseinbußen führen. Laden Sie nur Assets vor, die für den kritischen Rendering-Pfad unbedingt erforderlich sind.

Beispiel für die Verwendung von rel="preload" auf Ihrer Website
Hier ist ein vollständiges Beispiel dafür, wie Sie rel="preload" in eine typische Webseite integrieren können:

    
Preload Example
        

In diesem Beispiel haben wir die wesentlichen Assets vorab geladen, die sich unmittelbar auf die Geschwindigkeit auswirken, mit der die Seite gerendert wird, wie Schriftarten, Stylesheets und Bilder.

Wann man rel="preload" nicht verwenden sollte

Obwohl das Vorladen leistungsstark ist, ist es keine magische Lösung für alle Ressourcen. Hier sind einige Fälle, in denen Sie die Verwendung möglicherweise vermeiden möchten:

Nicht kritische Ressourcen: Laden Sie keine Assets vor, die für die erste Darstellung Ihrer Seite nicht unbedingt erforderlich sind.

Unvorhersehbare Ressourcen: Wenn bestimmte Assets an Bedingungen geknüpft sind oder von der Benutzerinteraktion abhängen (z. B. „Below-the-Fold“-Bilder oder verzögertes JavaScript), ist es am besten, sie bei Bedarf vom Browser abrufen zu lassen.

Abschluss
Die Verwendung von rel="preload" ist eine einfache, aber effektive Möglichkeit, Ihre Website zu beschleunigen, indem Sie den Browser anweisen, wichtige Ressourcen so schnell wie möglich abzurufen. Indem Sie sich auf das Vorabladen wichtiger Assets wie Schriftarten, Stylesheets und Bilder konzentrieren, können Sie die Ladezeiten verkürzen und das Benutzererlebnis verbessern.

Die wichtigste Erkenntnis: Laden Sie nur das Wesentliche vorab, und die Leistung Ihrer Website wird sich erheblich verbessern. Probieren Sie es bei Ihrem nächsten Projekt aus und sehen Sie, welchen Unterschied es macht!