Beschleunigen Sie Ihre Website mit rel=\'preload\'

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 rel="preload"-Attribut 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:

• Rendering-Blockierung reduzieren: Durch das Vorabladen von kritischem CSS oder Schriftarten vermeiden Sie Probleme mit der Rendering-Blockierung, bei denen die Seite darauf wartet, diese Ressourcen zu laden, bevor Inhalte angezeigt werden.
• Verbesserung des First Contentful Paint (FCP): 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". Unten finden Sie einen einfachen HTML-Ausschnitt, der das Vorladen einer benutzerdefinierten Schriftart zeigt:

<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

In diesem Beispiel:

• hrefgibt die URL der Ressource an.
• as gibt den Typ der Ressource an (z. B. Schriftart, Bild, Skript).
• Typ 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. Schauen wir uns einige gängige Beispiele an:

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

<link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">

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.

<link rel="preload" href="/css/main.css" as="style">

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

<link rel="preload" href="/scripts/main.js" as="script">

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.

<link rel="preload" href="/images/hero.jpg" as="image">

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. Sorgen Sie für eine ordnungsgemäße Cache-Verwaltung: 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 vorab laden: Ü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.

Example of Using rel="preload" on Your Website
Here’s a full example of how you can integrate rel="preload" in a typical web page:

    
    
    

    
    <link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="/css/main.css" as="style">
    <link rel="preload" href="/scripts/main.js" as="script">
    <link rel="preload" href="/images/hero.jpg" as="image">

    
    


    

        
Preload Example
        
    

    

In this example, we’ve preloaded the essential assets that will immediately impact how fast the page renders, like fonts, stylesheets, and images.

When Not to Use rel="preload"

While preload is powerful, it’s not a magic solution for all resources. Here are a few cases where you might want to avoid using it:

Non-Critical Resources: Don’t preload assets that aren’t essential for the initial rendering of your page.

Unpredictable Resources: If certain assets are conditional or depend on user interaction (like below-the-fold images or deferred JavaScript), it’s best to let the browser fetch them when needed.

Conclusion
Using rel="preload" is a simple yet effective way to speed up your website by telling the browser to fetch critical resources as soon as possible. By focusing on preloading essential assets like fonts, stylesheets, and images, you can reduce load times and enhance user experience.

The key takeaway: preload only what’s critical, and your website’s performance will significantly improve. Give it a try on your next project and see the difference it makes!

Das obige ist der detaillierte Inhalt vonBeschleunigen Sie Ihre Website mit rel=\'preload\'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!