Implementierung von Preload, Prefetch, Preconnect in WordPress

Nutzen Sie die Vorteile moderner Browserfunktionen wie Preloading, Prefetching, Preconnect, um die WordPress-Website schneller zu machen.

Wer möchte als Website-Besitzer nicht alles tun, damit die Webseite schneller lädt?

Es ist eine Herausforderung, dafür zu sorgen, dass die Website weltweit immer schneller lädt. Es gibt einige Dinge, die Sie tun können, um die Ressourcen der Website schneller zu laden, darunter die Aktivierung der folgenden Browser-Hinweise. Sie sind auch als Pre-Browsing-Techniken bekannt.

Hinweis: Die Techniken der Browser-Hinweise helfen nicht viel, wenn Sie die Website zum ersten Mal aufrufen, aber nachfolgende Anfragen sind schneller.

Vorladen

Sie können das Preload-Tag verwenden, um dem Browser mitzuteilen, dass er einige der statischen Ressourcen frühzeitig abrufen soll. Dabei kann es sich um ein Bild, eine Schriftart, JavaScript, CSS, Skripte, ein Video usw. handeln. Dies hilft, das Laden der Ressourcen zu priorisieren und verbessert somit die Leistung.

Preloading ist eine gute Idee, wenn Sie erwarten, dass Ihre Benutzer mehrere Seiten besuchen werden. So wie bei einem E-Commerce-Shop, wo der Benutzer die Produktseite besucht und dann die Informationen prüft, mit anderen Produkten vergleicht, in den Warenkorb legt, bezahlt, usw.

Sie können die folgenden Plugins verwenden, um die Preload-Funktion einzurichten.

Better resource hints – ein kostenloses Plugin zur Konfiguration von CSS- und JS-Dateien.

WP Rocket – ein Premium-Plugin, mit dem Sie die Leistung Ihrer Website mit vielen wichtigen Techniken steigern können, einschließlich Preload-Caching und Sitemap.

Woher wissen Sie, ob Preload aktiviert ist?

Am schnellsten finden Sie das heraus, indem Sie sich den Seitenquelltext ansehen. Sie sollten etwas wie unten sehen.

<link rel="preload" as="style" href="WICHTIG.css">
<link rel="preload" as="script" href="KRITISCH.js">

Nicht alle Browser unterstützen Preload beim Schreiben. Prüfen Sie daher vor der Implementierung die Kompatibilitätsmatrix.

Vorverbinden

Laden Sie Ressourcen von anderen Domains? Vielleicht über ein CDN?

Wenn dies nicht der Fall ist und alle Ressourcen von Ihrer einzigen Domäne geladen werden, dann ist dies möglicherweise nicht hilfreich.

Preconnecting weist den Browser darauf hin, im Hintergrund eine Verbindung zu anderen Domänen aufzubauen, um Zeit für DNS-Suche, Umleitung, TCP-Handshake, TLS-Aushandlung usw. zu sparen. Die Idee dahinter ist, die Latenzzeit zu verringern, um ein schnelles Laden von Ressourcen aus einer anderen Domain zu ermöglichen.

Auch hier können Sie das oben erwähnte Better Resource Hints Plugin oder ein Premium Plugin wie Perfmatters verwenden.

Sobald Sie die erforderlichen Ressourcen konfiguriert haben, sollten Sie sie im Seitenquelltext wie folgt sehen.

<link rel="preconnect" href="https://ANOTHERSITE.com">

Hinweis: Wenn Sie die Ressourcen von einer Domain laden, die CORS erfordert, müssen Sie diese als Crossorigin angeben und die Ausgabe sollte wie folgt aussehen.

<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>

Preconnect ist mit den neuesten Versionen von Chrome, Edge, Firefox und Safari kompatibel.

Prefetch

Lassen Sie den Browser die nächste Seite abrufen, von der Sie glauben, dass sie benötigt wird, wenn der Benutzer durch die Seite navigiert. Prefetch lädt die erforderlichen Ressourcen herunter, speichert sie im lokalen Cache und stellt sie bei Bedarf schnell bereit. Es gibt zwei Arten von Prefetch.

DNS-Prefetch – wird unten erklärt

Link-Prefetch – konfiguriert mit <link url ..>. Dient zum Prefetch von HTML- oder statischen Ressourcen. Sie können Prefetch-Ressourcen als Attribut verwenden.

<link rel="prefetch" href="https://somesite.com/articles/page/2/" as="document">

as-Attribut unterstützt verschiedene Ressourcen wie Audio, Video, Skript, Track, Style, Font, Objekt, Dokument usw. Link Prefetching kann mit Hilfe des Plugins Pre Party Resource Hints konfiguriert werden.

DNS Prefetch

Laden Sie Ressourcen von vielen Domains und möchten Sie diese im Hintergrund auflösen?

Diese schnelle Einrichtung kann dazu beitragen, alle potenziellen Domänen früher aufzulösen, so dass die Ressourcen schneller geladen werden, wenn sie angefordert werden. Dies trägt dazu bei, die Latenzzeit insgesamt zu verringern.

Angenommen, Sie laden Ressourcen von 3 Domänen und jede Domäne benötigt etwa 100 ms für die DNS-Suche, dann sparen Sie 300 ms Latenzzeit.

Ist das nicht cool?

Sie können entweder das Perfmatters-Plugin verwenden oder Folgendes in die Datei functions.php Ihres Themes einfügen, wenn Sie mit der Bearbeitung der Themedateien vertraut sind.

//* DNS Prefetching
function dns_prefetch() {
 echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);

Mehr dazu finden Sie in den Mozilla Web Docs.

Vorberechnung

Erwarten Sie von den Benutzern Ihrer Website, dass sie durch die potenzielle Seite navigieren?

Prerender kann Ihnen dabei helfen, diese Assets im Hintergrund zu laden, so dass der Benutzer beim Anklicken der Seite diese sehr schnell angezeigt bekommt. Dies können Sie mit dem Plugin Pre Party Resource Hints erreichen.

Prerendering eignet sich für eine leichtgewichtige Seite oder ein Asset, aber seien Sie vorsichtig mit der gesamten Website oder großen Ressourcen, da es die CPU-Auslastung und Bandbreite erhöhen und die Website verlangsamen kann. Versuchen Sie es also mit einer kleineren Ressource und testen Sie sie, um sicherzustellen, dass sie keine Nebenwirkungen hat.

Wie Sie sehen, gibt es vier wichtige Plugins für die Implementierung von Browser-Hinweisen in WordPress. Wählen Sie das Plugin, das Ihnen gefällt und den Anforderungen entspricht.

Pre Party Resource Hints Plugin – ein kostenloses Plugin bietet DNS-Prefetch, Link-Prefetch, Prerender, Preconnect und Preload.

Bessere Ressourcen-Hinweise – eine Alternative zum oben genannten Plugin.

Das kostenlose Plugin ist gut, solange es gewartet und unterstützt wird. Leider ist das bei vielen Plugins nicht der Fall, und deshalb ist es manchmal besser, sich für die kostenpflichtige Version zu entscheiden. Kommerzielle Versionen von Plugins werden professionell unterstützt und sind auf dem neuesten Stand der WordPress-Standards und Sicherheitskorrekturen. Wenn Sie bereit sind, ein paar Euro für die Optimierung der Leistung Ihrer Website auszugeben, dann sollten Sie sich die folgenden Plugins ansehen.

WP Rocket – sehr renommiert, mehr als 800.000 Websites vertrauen darauf. Es kostet $49 für eine Website.

Perfmatters – ein leichtgewichtiges und einfach zu befolgendes Programm für $24,95 für eine Website. Während ich schreibe, bietet es die folgenden Funktionen.

Das ist eine ganze Menge an Optimierung.

Fazit

Der WordPress-Kern ist ein Leichtgewicht, aber je nachdem, welches Theme und welche Plugins Sie verwenden, wird es sperrig. Und es ist wichtig, die Leistung Ihrer Website zu optimieren, um das Suchranking und die Konversion zu verbessern. Die oben genannten Techniken sind einfach zu befolgen, aber Sie sollten nicht dabei stehen bleiben.

Sie sollten auch die Verwendung eines CDN in Erwägung ziehen, um Inhalte zu cachen und sie Ihren Nutzern schneller zur Verfügung zu stellen – weltweit. Es gibt viele davon, aber ich würde Ihnen SUCURI empfehlen, das sowohl CDN als auch Sicherheit bietet.