Wie verwende ich Prefetch und DNS-Prefetch in WordPress?

Heutzutage haben Sie viele Mechanismen, um das Laden Ihrer WordPress-Site zu beschleunigen. Es reicht jedoch nicht aus, sich nur darauf zu konzentrieren, den Inhalt Ihrer aktuellen Webseite zu laden. Sie müssen auch die Ressourcen verbessern, die von den verlinkten Seiten benötigt und von Drittanbieter-Sites auf Ihre Site geladen werden. Sie können dies tun, indem Sie Prefetch- und DNS-Prefetch-Attribute mit Link-Meta-Tag im Header-Abschnitt verwenden. Dies weist die Browser darauf hin, die Ressourcen proaktiv zu laden, um die Ladegeschwindigkeit bei Bedarf zu verbessern. In diesem Artikel erklären wir, was Prefetch und DNS-Prefetch sind und wie man sie in WordPress verwendet.

Verwandte: Was ist Preconnect und wie verwendet man PreConnect in WordPress?

Prefetch vs. DNS-Prefetch

Nehmen wir einen einfachen Beispielfall, um dies besser zu verstehen. Sie haben einen WordPress-Beitrag, der die folgenden zwei Dinge enthält:

• Verlinken Sie auf eine wichtige Seite Ihrer Website – die wichtige Seite enthält eine sehr große Infografik. Sie erwarten, dass fast jeder Benutzer, der auf der aktuellen Seite landet, auf den Link klickt und Ihre wichtige Seite besucht. In diesem Fall können Sie das Prefetch-Attribut verwenden, um den Browser anzuweisen, das Herunterladen des Infografik-Bildes zu initiieren, das erforderlich ist, wenn der Benutzer die wichtige Seite besucht. es verbessert die Ladegeschwindigkeit der wichtigen Seite, da das große Bild bereits heruntergeladen und im lokalen Cache des Browsers bereitgehalten wird.
• Link zu externer Website – Ihr aktueller Beitrag verwendet Google Fonts, die in der Regel von den Google-Servern fonts.gstatic.com und fonts.googleapis.com geladen werden. Wenn Benutzer die Seite laden, muss der Browser eine Hostnamenauflösung für die Google-Server durchführen und deren IP-Adressen abrufen. Dies kann das Laden der Schriftarten leicht verzögern, insbesondere wenn Sie eine langsame Internetverbindung haben. Hier können Sie DNS-Prefetch verwenden, um den Domainnamen-Auflösungsprozess der externen Domains zu beschleunigen, die Sie auf Ihrer Site benötigen.

Wir hoffen, dass diese beiden Fälle die Verwendung von Prefetch und DNS-Prefetch klar erklären. Fahren wir mit der Verwendung von Prefetch und DNS-Prefetch auf der WordPress-Site fort.

Verwenden von Prefetch in WordPress

Wie bereits erwähnt, weist die Verwendung von Prefetch den Browser an, Ressourcen abzurufen, von denen Sie glauben, dass sie später als Teil einer nachfolgenden Benutzerinteraktion benötigt werden. Dadurch wird die Leerlaufzeit des Browsers genutzt, um das proaktive Herunterladen von Ressourcen wie CSS, JavaScript und Bildern zu initiieren. Sie können das folgende Link-Tag manuell im Header-Bereich Ihrer Website hinzufügen, um Prefetch zu verwenden.

 <link rel="prefetch" href="my-big-important-image.png">

Alternativ können Sie auch das Attribut „next“ anstelle von „prefetch“ verwenden, um dieselbe Funktion auszuführen.

 <link rel="next" href="my-next-page.html">

Das Problem hierbei ist jedoch, dass Sie ein Plugin wie Insert Code in Header und Footer benötigen, um das Link-Meta-Tag einzufügen. Stattdessen können Sie ein dediziertes Pre* Party Resource Hints-Plugin verwenden, um verschiedene Arten von Browserhinweisen zu erstellen.

• Gehen Sie zum Abschnitt "Plugins > Neu hinzufügen" und suchen Sie das Plugin Pre* Party Resource Hints. Installieren und aktivieren Sie das Plugin auf Ihrer Site.
• Um Prefetch auf Ihrer Site zu implementieren, klicken Sie auf das Menü „Pre* Party“.
• Gehen Sie zur Registerkarte "Hinweise einfügen" und scrollen Sie nach unten zum Abschnitt "Neuen Ressourcenhinweis hinzufügen".
• Geben Sie im Feld "Domäne oder URL" die vollständige URL der Ressourcendatei ein, die Sie vorab abrufen möchten.
• Wählen Sie das Optionsfeld "Prefetch" und das Plugin deaktiviert automatisch die Felder, die nicht für das Prefetching gelten. Beispielsweise werden Cross-Origin- und Medienattribut-Optionen deaktiviert, die für das Vorabrufen nicht anwendbar sind.
• Klicken Sie auf das Dropdown-Menü des Attributs „as“ und wählen Sie den entsprechenden Dateityp aus. Wir wählen beispielsweise ein Bild aus, da wir die Bild-URL im Feld "Domain oder URL" angegeben haben.
• Lassen Sie das Feld MIME-Typ leer.
• Klicken Sie unten auf der Seite auf die Schaltfläche "Ressourcenlinks einfügen", um die Änderungen zu übernehmen.

Das ist alles und das Plugin fügt das erforderliche Header-Link-Tag automatisch auf Ihrer Site ein. Sie können alle Ressourcenhinweise, die direkt über dem Abschnitt „Neuen Ressourcenhinweis hinzufügen“ erstellt wurden, anzeigen und sie später jederzeit ändern oder löschen.

Wie Sie in der Erfolgsmeldung sehen können, leeren Sie Ihren Cache, wenn Sie ein serverseitiges oder Caching-Plugin auf Ihrer Site verwenden. Öffnen Sie eine beliebige Seite im Browser und sehen Sie sich den Quellcode der Seite an. Es sollte den Prefetch-Link im Header-Abschnitt mit der von Ihnen bereitgestellten Ressource anzeigen. Sie können feststellen, dass das Plugin, obwohl Sie MIME-Typ leer gelassen haben, automatisch type=image/png basierend auf den angegebenen Eingaben hinzugefügt hat.

Überlegungen zur Verwendung von Prefetching

• Sie können Prefetch für externe Domains verwenden, um ein Bild oder CSS/JS zu verbinden, das auf allen Ihren Seiten erforderlich ist. Ein anderer Fall ist die Verwendung Ihrer eigenen Subdomänen wie CDN-Subdomäne oder Medien-Subdomäne, wenn Sie Mediendateien separat hosten.
• Da das Header-Tag auf allen Seiten geladen wird, wird auch der Prefetch-Link in die Seitenheader eingefügt. Wenn Sie Prefetch nur auf bestimmten Seiten verwenden möchten, verwenden Sie ein beliebiges Plugin oder Theme, das einen Hook bietet, um Code mit Filtern in den Header einzufügen. Sie können beispielsweise das GeneratePress Premium- oder Astra Pro-Design verwenden, um Code nur auf den erforderlichen Seiten Ihrer Site einzufügen.
• Wenn Sie anständigen Datenverkehr erhalten und auf Shared-Hosting-Unternehmen wie Bluehost gehostet werden, vermeiden Sie die Verwendung der Prefetch-Funktion. Es kann Ihren Server verlangsamen, wenn mehrere Prefetch-Anfragen initiiert werden, die den Live-Datenverkehr beeinträchtigen. Außerdem können Browser das Vorabrufen in langsamen Netzwerken verzögern. Das Laden des Inhalts der aktuellen Seite hat höchste Priorität als das Vorabrufen von erwarteten Ressourcen, die möglicherweise überhaupt nicht verwendet werden.

Verwandte: Wie lade ich Schriftarten in WordPress vor?

Verwendung von DNS-Prefetch in WordPress

DNS-Prefetch weist den Browser an, einen externen Domänennamen im Hintergrund in IP aufzulösen, bevor der Benutzer auf einen Link klickt. Wenn der Benutzer auf einen Link klickt, verkürzt dies die Zeit, die der Browser braucht, um Domänen aufzulösen, wodurch die Ladegeschwindigkeit verbessert wird. Dies ist ideal für die proaktive Verbindung mit Google Fonts, AdSense und vielen anderen Ressourcen von Drittanbietern. Ähnlich wie beim Prefetch können Sie den folgenden Code in Ihrem Header-Abschnitt manuell hinzufügen, um DNS-Prefetch zu verwenden.

 <link rel="dns-prefetch" href="https://fonts.gstatic.com/" >

Sie können zu diesem Zweck auch das gleiche Plugin für Pre* Party Resource Hints verwenden.

Um DNS-Prefetch auf Ihrer Site zu implementieren;

• Wenn Sie sich im Abschnitt „Neuen Ressourcenhinweis hinzufügen“ des Plugins befinden, geben Sie die externe Domänen-URL in das Feld „Domäne oder URL“ ein.
• Wählen Sie das Optionsfeld DNS-Prefetch aus.
• Wählen Sie das Attribut „as“ aus der Dropdown-Liste aus. Sie können beispielsweise eine Schriftart für Google Fonts auswählen.
• Klicken Sie auf die Schaltfläche „Ressourcenlinks einfügen“, um die Änderungen zu übernehmen.

Sie können die Einträge jederzeit bearbeiten oder löschen. Überprüfen Sie den Quellcode der Seite, um sicherzustellen, dass Ihr DNS-Prefetch-Eintrag als Link-Tag im Header-Bereich vorhanden ist.

Letzte Worte

Prefetch und DNS-Prefetch sind zwei Hinweise für Browser, um das Laden externer Ressourcen zu verbessern. Wir haben beide in diesem Artikel zum besseren Verständnis erklärt, obwohl sie für unterschiedliche Zwecke gedacht sind. Während DNS-Prefetch nur die Auflösung des Hostnamens durchführt, löst Prefetch die Domäne auf und lädt die Ressource proaktiv herunter.