So laden Sie Schlüsselanfragen in WordPress vor

Die Verwendung von Web-Schriftarten, CSS und JavaScript kann Ihre Website einzigartiger und interaktiver machen. Das Warten auf das Laden dieser Dateitypen kann für die Besucher Ihrer Website jedoch frustrierend sein.

Hier kann das Vorabladen von Schlüsselanfragen in WordPress hilfreich sein. Indem Browser angewiesen werden, diese Dateitypen früher in der Anforderungskette herunterzuladen, sind sie verfügbar, wenn der Browser zum Rendern des Inhalts bereit ist. Dies kann wiederum die wahrgenommene Ladezeit Ihrer Seite beschleunigen und insgesamt für ein besseres Web-Erlebnis sorgen.

Im heutigen Leitfaden besprechen wir, was das Vorabladen wichtiger Anfragen bedeutet und welche potenziellen Leistungsvorteile Sie für Ihre Website haben. Anschließend erklären wir Ihnen, wie Sie dies auf Ihrer WordPress-Site mit Google Fonts, Font Awesome, CSS und JavaScript tun.

Was bedeutet „Schlüsselanfragen vorab laden“ in WordPress?

Wenn jemand Ihre Website besucht, sendet sein Browser mehrere HTTP-Anfragen an den Server Ihrer Website und fragt ihn nach den Dateien, aus denen Ihr Inhalt besteht. Der Server benötigt eine gewisse Zeit, um auf diese Anfragen zu antworten und Informationen an den Browser zu senden. Diese Zeit wird als Time to First Byte (TTFB) bezeichnet.

Als Nächstes beginnt der Browser damit, Inhalte (PHP, JavaScript und CSS) aus Ihren Site-Dateien herunterzuladen und sie zu rendern, um sichtbare Seiten (HTML) im Frontend anzuzeigen. Sobald dieser Vorgang abgeschlossen ist, kann der Besucher Ihre vollständig geladene Webseite sehen.

Ein Browser verwendet eine „Anforderungskette“, um Inhalte in einer Sequenz anzufordern und darzustellen. Das bedeutet, dass es innerhalb der größeren mehrere Schritte kleinerer Anfragen gibt, mit dem Endergebnis, dass ein Besucher den Inhalt Ihrer Website sehen kann.

Im Wesentlichen bedeutet „Vorabladen“, dass der Browser eines Benutzers angewiesen wird, zuerst wichtige Dateien herunterzuladen, anstatt bis zum Ende des Ladevorgangs zu warten. Dies sind typischerweise Schriftarten (insbesondere Web-Schriftarten), CSS, JavaScript und manchmal Bilder.

Schlüsselanfragen sind einzigartig, da Ihr Browser diese Dateien normalerweise erst später im Ladevorgang anfordert. Es kommt also zu einer Verzögerung, wenn der Browser diesen Punkt erreicht und feststellt, dass er die Dateien anfordern muss. Indem Sie den Browser anweisen, diese Dateien zuerst zu laden, hat er sie zur Hand, wenn er sie rendern muss.

Welche Vorteile bietet das Vorabladen von Schlüsselanfragen?

Der Hauptvorteil des Vorabladens von Schlüsselanfragen besteht darin, dass die wahrgenommene Leistung Ihrer Website verbessert wird. Das bedeutet, dass der Browser eines Benutzers Ihre Inhalte schneller darstellen kann und die Besucher das Gefühl haben, dass Ihre Website schneller ist. Aber Ihre Website lädt eigentlich nur wichtige Inhalte vorab, damit sie so aussehen .

Darüber hinaus ist das Vorabladen von Anfragen für Ihre Core Web Vitals-Ergebnisse von entscheidender Bedeutung. Diese Google-Metriken messen die Ladeleistung, Interaktivität und visuelle Stabilität Ihrer Website und geben Ihnen einen Wert, der die allgemeine Benutzerfreundlichkeit Ihrer Website angibt.

Dies sind die drei Core Web Vitals:

• Largest Contentful Paint (LCP): Wie lange es dauert, bis das größte Element auf Ihrer Seite geladen ist.
• First Input Delay (FID): Wie lange es dauert, bis der Browser auf die Benutzerinteraktion mit Ihren Inhalten reagiert.
• Cumulative Layout Shift (CLS) : Wie stark sich die Elemente bewegen, während die Seite geladen wird.

Insbesondere das Vorabladen von Schlüsselanforderungen kann einen erheblichen Einfluss auf Ihren LCP-Score haben. Durch das Vorabladen von Bildern, Schriftarten und anderen großen Dateien können Sie die zum Rendern benötigte Zeit verkürzen.

Darüber hinaus kann sich das Vorladen auf Ihren First Contentful Paint (FCP)-Score auswirken. Diese Metrik misst, wie lange es dauert, bis das erste HTML-Element auf Ihrer Seite angezeigt wird. Wenn Sie dieses Element vorab laden können, kann der Browser die ersten Teile Ihres Inhalts schneller anzeigen.

Darüber hinaus bevorzugen Suchmaschinen wie Google schnell ladende und interaktive Inhalte. Daher kann die Verbesserung dieser Leistungskennzahlen nicht nur ein besseres Benutzererlebnis bieten, sondern auch die Suchmaschinenoptimierung (SEO) Ihrer Website steigern.

Im Wesentlichen können Leistungsverbesserungen dazu beitragen, die Seiten Ihrer Website im Ranking nach oben zu bringen und Ihre Inhalte mehr Nutzern zugänglich zu machen. Außerdem ist das Vorabladen von Schlüsselanfragen relativ einfach. Später in diesem Beitrag zeigen wir Ihnen genau, wie es geht!

Gibt es Nachteile beim Vorabladen von Schlüsselanforderungen?

Das Vorladen von Anfragen mag aus Leistungssicht nach einer großartigen Idee klingen. Allerdings kann sich der Versuch, zu viele Elemente vorab zu laden, nachteilig auswirken.

Ein Browser kann nur eine begrenzte Anzahl von Anfragen gleichzeitig verarbeiten. Wenn Sie es also anweisen, mehrere Elemente vorab zu laden, kann es zu einem „Engpass“ kommen, der sich negativ auf die Seitenladezeit Ihrer Website auswirkt.

Daher lohnt es sich, sorgfältig auszuwählen, welche Elemente vorgespannt werden sollen, um die größte Wirkung zu erzielen. In den meisten Fällen handelt es sich dabei um Web-Schriftarten, CSS und JavaScript, da es sich hierbei in der Regel um die schwersten Dateien handelt.

So überprüfen Sie, ob Ihre Website Schlüsselanfragen vorab lädt

Verschiedene Tools können erkennen, ob Ihre Website Anfragen vorab lädt, und Elemente vorschlagen, die von dieser Optimierungstechnik profitieren könnten. PageSpeed ​​Insights ist beispielsweise eine der beliebtesten Möglichkeiten, Performance-Probleme auf Ihrer Website zu erkennen.

Um dieses kostenlose Tool zu verwenden, geben Sie einfach die URL Ihrer Website ein und klicken Sie auf Analysieren . Dadurch wird ein detaillierter Leistungsbericht erstellt.

Scrollen Sie nach unten, um die Leistungschancen, Diagnosen und bestandenen Audits anzuzeigen. In einem dieser Abschnitte sollten Sie den Vorschlag für die Anforderung von Preload-Schlüsseln finden.

Wenn Sie nicht zwischen Ihrer Website und PageSpeed ​​Insights hin und her navigieren möchten, sollten Sie die Installation der Google Lighthouse Chrome-Erweiterung in Betracht ziehen. Es ermöglicht Ihnen, Berichte im Browser zu erstellen und die Leistungsmetriken einer Seite anzuzeigen.

Ebenso kann GTMetrix detaillierte Leistungsberichte für jede Site erstellen. Damit können Sie Seiten von mehreren Standorten aus analysieren und ihre Leistung im Zeitverlauf verfolgen.

Auf der Registerkarte „Struktur“ von GTMetrix können Sie sehen, ob das Vorabladen von Schlüsselanforderungen die Leistung Ihrer Website verbessern könnte.

So laden Sie Schlüsselanfragen in WordPress vorab

Bevor Sie wesentliche Änderungen an Ihrer WordPress-Site vornehmen, wie zum Beispiel das Hinzufügen von benutzerdefiniertem Code, lohnt es sich immer, ein vollständiges Backup zu erstellen. Diese Sicherheitsvorkehrung bedeutet, dass Sie eine funktionsfähige Version Ihrer Website zur Hand haben, falls Ihnen Fehler unterlaufen.

Hier kommt Jetpack VaultPress Backup zum Einsatz. Dieses benutzerfreundliche Plugin erstellt automatisch umfassende Backups aller Ihrer Daten, einschließlich ihrer Dateien, Datenbanktabellen und WooCommerce-Produktinformationen. Diese Backups werden in Echtzeit gespeichert und sicher in der Cloud gespeichert. Sie können sie mit nur wenigen Klicks wiederherstellen – auch wenn Sie unterwegs sind oder überhaupt keinen Zugriff auf Ihre Website haben.

1. Schriftarten

Manchmal können Schriftarten in anderen Dateien auf Ihrer Website vergraben sein, einschließlich CSS- und JavaScript-Dateien. Leider kann dies den Seitenrenderingprozess verlangsamen.

Um Anfragen mit Schriftarten in WordPress vorab zu laden, kopieren Sie diesen Code und fügen Sie ihn in den Abschnitt <head> Ihrer Seite ein:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

Denken Sie daran, den Namen Ihrer Schriftart durch „Font-Name“ zu ersetzen. Darüber hinaus ist die Angabe von „crossorigin“ unerlässlich, wenn Ihre Schriftart von einer Drittanbieterquelle stammt, da sie dem Browser mitteilt, dass er die Datei von einem externen Server laden muss.

2. Google-Schriftarten

Google Fonts umfasst eine Open-Source-Bibliothek mit fast 1500 Schriftfamilien. Wenn Sie nach benutzerdefinierten Web-Schriftarten suchen, die Sie auf Ihrer Website verwenden können, werden Sie dort wahrscheinlich eine finden.

Die Verwendung von Google Fonts kann dazu beitragen, Ihrer Website ein einzigartiges Design zu verleihen, allerdings muss der Browser beim Rendern des Inhalts auch die Schriftartdateien herunterladen. Abhängig von Ihrer Schriftart kann dies die Ladezeit Ihrer Seite verlängern.

Wenn Sie Google Fonts vorab laden, empfiehlt es sich, diese zunächst „vorzuverbinden“. Dieser Schritt teilt dem Browser im Voraus mit, dass er eine Verbindung zu einer Website eines Drittanbieters (z. B. Google Fonts) herstellen muss, um eine Ressource abzurufen.

Darüber hinaus lohnt es sich, nach dem Hinzufügen Ihres Vorladecodes einen Link zum Stylesheet einzufügen. Auf diese Weise kann der Browser Ihres Benutzers die betreffende Schriftart trotzdem rendern, wenn sie nicht in der Lage ist, sie vorab zu laden.

Fügen Sie einfach den folgenden Code zum Abschnitt <head> Ihrer Seite hinzu:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

In Ihrem Code müssen Sie „$fontURL“ durch einen Link zu Ihrer Google-Schriftart ersetzen. Es könnte zum Beispiel so aussehen:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Stellen Sie dann sicher, dass Sie Ihre Änderungen speichern!

3. Tolle Schriftart

Font Awesome ist eine großartige Ressource für benutzerdefinierte Symbole und Schriftarten und bietet in der Bibliothek sowohl kostenlose als auch Premium-Optionen. Sie können einige dieser Symbole verwenden, um das Design Ihrer Menüs, Kopf- und Fußzeilen sowie Inhaltsbereiche zu verbessern.

Wie bei Google Fonts kann das Vorladen von Font Awesome-Symbolen eine gute Idee sein, um die wahrgenommene Seitenladezeit zu beschleunigen. Fügen Sie einfach diesen Code zum Abschnitt <head> der Seite hinzu:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Sie müssen den Dateipfad für die Schriftart oder das Symbol austauschen, die Sie auf Ihrer Website verwenden. Speichern Sie dann Ihre Änderungen!

4. CSS

Cascading Style Sheets (CSS) ist eine Designsprache, die zusammen mit HTML den Stil und die Präsentation einer Webseite bestimmt. Mit benutzerdefiniertem CSS können Sie das Erscheinungsbild verschiedener Elemente schnell ändern.

Jede gestaltete HTML-Seite auf Ihrer Website verfügt über ein entsprechendes Stylesheet mit Ihrem gesamten CSS. Ein Browser muss diese Datei laden, wenn er eine Webseite rendert. Daher lohnt es sich, dem Browser mitzuteilen, dass er diese Ressource vorab laden soll.

Glücklicherweise gibt es eine einfache Möglichkeit, CSS vorab zu laden. Fügen Sie einfach diesen Code zum Abschnitt <head> Ihrer Seite hinzu:

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

Stellen Sie sicher, dass Sie den Namen des Stylesheets durch „styles.css“ ersetzen. Beachten Sie außerdem, dass dieser Code zwar in Google Chrome funktioniert, aber nicht von allen Browsern unterstützt wird.

5. JavaScript

JavaScript ist eine weitere gängige Skriptsprache, die in WordPress verwendet wird. Sie können damit dynamische Inhalte wie Animationen, sich bewegende Bildkarussells und automatisch aktualisierende Feeds erstellen.

Das Rendern von JavaScript ist in der Regel komplexer, da die Dateien vergleichsweise umfangreich sind und die Anzeige von Inhalten einen längeren Prozess erfordert. Aus diesem Grund kann es hilfreich sein, einem Browser mitzuteilen, dass er umfangreiches JavaScript vorab laden soll, um die Ladezeit der Seite zu beschleunigen.

Wie bei CSS müssen Sie nur diese einfache Codezeile zum Abschnitt <head> der Seite hinzufügen:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

Ersetzen Sie wie zuvor „ui.js“ durch den Namen der JavaScript-Datei und speichern Sie Ihre Änderungen.

Bonus: Installieren Sie ein kostenloses Plugin, um Core Web Vitals zu verbessern

Das Vorabladen von Anfragen ist nur eine Technik, mit der Sie die Core Web Vitals-Scores Ihrer WordPress-Site verbessern können.

Wenn Sie nach einer umfassenderen (und kostenlosen!) Lösung suchen, sollten Sie die Installation von Jetpack Boost in Betracht ziehen. Dieses Tool wurde von Automattic entwickelt, dem gleichen Unternehmen wie WordPress.com.

Dieses benutzerfreundliche Plugin scannt Ihre gesamte Website und gibt Ihnen eine Bewertung auf Desktop- und Mobilgeräten. Darüber hinaus ist Jetpack Boost nicht nur für die drei Core Web Vitals nützlich. Seine Optimierungsmethoden können andere Kennzahlen verbessern, darunter Time to Interactive (TTI) und Total Blocking Time (TBT).

Sie können ein einfaches Umschaltsystem verwenden, um das Laden von CSS zu optimieren, nicht unbedingt erforderliches JavaScript zu verschieben und Bilder verzögert zu laden. Die Premium-Version des Plugins generiert außerdem automatisch kritisches CSS, wenn Sie Änderungen an Ihrer Website vornehmen.

Alternativ kann Jetpack Complete Ihre WordPress-Site auf ein völlig neues Niveau heben. Dieser Plan enthält mehrere Tools für die Leistung, einschließlich Zugriff auf das Content Delivery Network (CDN) von Jetpack für Bilder, wodurch sowohl Bandbreite gespart als auch die Ladezeit Ihrer Seite verbessert werden kann. Darüber hinaus erhalten Sie erweiterte WordPress-Sicherheits- und Wachstumstools.

Häufig gestellte Fragen zum Vorladen von Schlüsselanforderungen

An diesem Punkt sollten Sie ein gutes Verständnis dafür haben, wie Sie Schlüsselanfragen in WordPress vorab laden. Dennoch gehen wir zur Sicherheit einige häufig gestellte Fragen durch!

Verbessert das Vorladen von Anfragen die Benutzererfahrung?

Vorabladeanfragen können das Benutzererlebnis verbessern, indem sie die wahrgenommenen Ladezeiten Ihrer Website verkürzen. Da Besucher nicht so lange auf die Darstellung Ihrer Inhalte warten müssen, ist die Wahrscheinlichkeit geringer, dass sie frustriert sind und möglicherweise Ihre Website verlassen, um zu einer anderen zu wechseln.

Verbessert das Vorladen von Anfragen die Core Web Vitals?

Das Vorabladen wichtiger Anfragen in WordPress kann Ihre Core Web Vitals-Werte verbessern, insbesondere wenn es um Largest Contentful Paint (LCP) geht. Wenn Sie entscheiden, welche Elemente Sie vorab laden möchten, wäre es sogar ratsam, Ihren „größten“ oder „Hauptinhalt“ einzubeziehen, da dieser wahrscheinlich am meisten davon profitieren würde.

Schlüsselanfragen vorab laden statt kritische Assets vorab laden

Es ist erwähnenswert, dass das Vorabladen von Schlüsselanforderungen dasselbe bedeutet wie das Vorabladen kritischer Assets. Beide Begriffe beziehen sich darauf, einen Browser anzuweisen, bestimmte Ressourcen im Voraus zu laden, um den Inhalt einer Seite schneller darzustellen.

Preload vs. Preconnect vs. Prefetch

Preloading, Preconnecting und Prefetching mögen wie ähnliche Konzepte erscheinen, tatsächlich bedeuten sie jedoch leicht unterschiedliche Dinge. Dabei handelt es sich allesamt um Tags, die einem Browser mitteilen, in welcher Reihenfolge Inhalte geladen werden sollen, sie erfüllen jedoch unterschiedliche Funktionen.

Erstens umfasst das Vorladen das Laden von Inhalten, die zum Rendern der Seite im Browser eines Benutzers erforderlich sind. Es handelt sich um ein Tag mit hoher Priorität, das eine Ressource innerhalb weniger Sekunden bereitstellt.

Im Gegensatz dazu betrifft das Vorabrufen die nachfolgenden Elemente, die möglicherweise geladen werden müssen. Der Browser sucht im Voraus nach Ressourcen und speichert sie in seinem Cache. Da es sich um ein Tag mit sehr niedriger Priorität handelt, sollten Sie es nicht für dringende Ressourcen verwenden.

Schließlich wird die Vorverbindung verwendet, wenn Sie einem Browser mitteilen möchten, dass er eine Verbindung zu einer bestimmten Domäne herstellen soll. Wenn Ihre Website eine Ressource von einer bestimmten Drittanbieter-Website (z. B. Google Fonts) verwendet, teilt die Vorverbindung dem Browser mit, dass er irgendwann während des Ladevorgangs eine Verbindung zu dieser Domain herstellen muss.

Was kann ich sonst noch tun, um die Leistung meiner Website zu verbessern?

Verschiedene Aufgaben können dabei helfen, die Leistung Ihrer WordPress-Site zu verbessern, darunter:

• Verwenden Sie ein CDN, um Ihre Inhalte Besuchern weltweit bereitzustellen
• Nicht verwendetes CSS zurückstellen (oder löschen).
• Eliminierung von Rendering-blockierenden Ressourcen
• CSS und andere Ressourcen minimieren
• Weniger HTTP-Anfragen stellen

Es lohnt sich auch, einen hochwertigen WordPress-Host zu wählen, der Ihnen Leistungsoptimierungsfunktionen wie dediziertes Caching, eine Verfügbarkeitsgarantie und ein riesiges Netzwerk von Rechenzentren weltweit bietet.

Verbessern Sie die Leistung Ihrer WordPress-Site, indem Sie wichtige Anforderungen vorab laden

Seitenladezeiten können die Benutzererfahrung und das Suchmaschinenranking Ihrer Website erheblich beeinflussen. Sie sollten also alles in Ihrer Macht Stehende tun, um die Zeit zu verkürzen, die ein Browser benötigt, um den Inhalt Ihrer Website anzuzeigen.

Wenn Sie Schlüsselanforderungen auf Ihren Seiten vorab laden, stehen dem Browser eines Besuchers Ressourcen (wie Schriftarten, CSS und JavaScript) zur Verfügung. Dann kommt es beim Laden Ihrer Inhalte und deren Zugänglichkeit für Benutzer zu keiner Verzögerung.

Das Vorabladen wichtiger Anfragen ist nur ein Schritt zur Verbesserung der Leistung Ihrer Website. Mit Jetpack Boost können Sie Ihre Website ganz einfach so konfigurieren, dass Bilder verzögert geladen werden, nicht unbedingt erforderliches JavaScript zurückgestellt wird und vieles mehr. Besser noch: Die Nutzung des Plugins ist kostenlos. Schauen Sie sich Jetpack Boost noch heute an!