Nutzen Sie moderne Browserfunktionen wie Preloading, Prefetching, Preconnect, um die WordPress-Website schneller zu machen.
Wer möchte als Websitebesitzer nicht alles tun, um die Webseite schneller zu laden?
Es ist eine Herausforderung, sicherzustellen, dass Websites weltweit konsistent schneller geladen werden. Es gibt mehrere Dinge, die Sie tun können, um die Site-Ressourcen schnell zu laden, einschließlich der Aktivierung der folgenden Browserhinweise. Sie werden auch als Pre-Browsing-Techniken bezeichnet.
Hinweis: Browser-Hinweistechniken helfen nicht viel, wenn Sie zum ersten Mal auf die Website zugreifen, aber nachfolgende Anfragen sind schneller.
Inhaltsverzeichnis
Vorladen
Sie können das preload-Tag verwenden, um den Browser anzuweisen, einige der statischen Ressourcen frühzeitig abzurufen. Sie können ein Bild, eine Schriftart, JavaScript, CSS, Skripte, Videos usw. sein. Es hilft, das Laden von Ressourcen zu priorisieren; daher wird die Leistung verbessert.
Das Vorladen wäre eine gute Idee, wenn Sie erwarten, dass Ihre Benutzer nacheinander mehrere Seiten besuchen. Wie der E-Commerce-Shop, in dem der Benutzer die Produktseite besucht und dann die Informationen überprüft, mit anderen Produkten vergleicht, in den Warenkorb legt, bezahlt usw.
Sie können die folgenden Plugins verwenden, um die Preload-Funktion einzurichten.
Bessere Ressourcenhinweise – ein kostenloses Plugin zum Konfigurieren von CSS- und JS-Dateien.
WP Rocket – ein Premium-Plug-in, um die Website-Performance mit vielen wesentlichen Techniken zu verbessern, einschließlich Preload-Caching und Sitemap.
Woher weißt du, ob Preload aktiviert ist?
Der schnellste Weg, dies herauszufinden, ist die Anzeige der Seitenquelle. Sie sollten so etwas wie unten sehen.
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
Nicht alle Browser unterstützen Preload beim Schreiben. Schauen Sie sich also die an Kompatibilitätsmatrix vor der Umsetzung.
Vorverbinden
Laden Sie Ressourcen aus anderen Domänen? Vielleicht CDN?
Wenn dies nicht der Fall ist und jede Ressource von Ihrer einzelnen Domain geladen wird, ist dies möglicherweise nicht hilfreich.
Hinweis-Browser vorab verbinden, um eine Verbindung zu anderen Domänen im Hintergrund herzustellen, um Zeit für DNS-Lookup, Umleitung, TCP-Handshake, TLS-Aushandlung usw. zu sparen. Die Idee ist, die Latenz zu verringern, um ein schnelles Laden von Ressourcen aus einer anderen Domäne zu ermöglichen.
Auch hier können Sie das oben erwähnte Plugin für bessere Ressourcenhinweise oder das Premium-Plugin wie verwenden Leistungsangelegenheiten.
Nachdem Sie die erforderlichen Ressourcen konfiguriert haben, sollten Sie sie in der Seitenquelle wie unten sehen.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Hinweis: Wenn Sie die Ressourcen aus einer Domäne laden, für die CORS erforderlich ist, müssen Sie angeben, dass Crossorigin und Ausgabe so aussehen sollen.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect ist mit der neuesten Version von Chrome, Edge, Firefox und Safari kompatibel.
Vorauslesen
Lassen Sie den Browser die nächste Seite abrufen, von der Sie glauben, dass sie benötigt wird, wenn der Benutzer herumnavigiert. Prefetch lädt die erforderlichen Ressourcen herunter und speichert sie im lokalen Cache und stellt sie bei Bedarf schnell bereit. Es gibt zwei Arten von Prefetch.
DNS-Prefetch – unten erklärt
Link-Prefetch – konfiguriert mit . Wird verwendet, um die HTML- oder statischen Ressourcen vorab abzurufen. Sie können Ressourcen mit als Attribut vorab abrufen.
als Attribut unterstützt verschiedene Ressourcen wie Audio, Video, Skript, Spur, Stil, Schriftart, Objekt, Dokument usw. Link-Prefetching kann mit Hilfe von konfiguriert werden Plugin für Pre-Party-Ressourcenhinweise.
DNS-Prefetch
Sie laden Ressourcen aus vielen Domänen und möchten diese im Hintergrund auflösen?
Diese schnelle Einrichtung kann dazu beitragen, alle potenziellen Domänen früher aufzulösen, sodass sie schneller geladen werden, wenn Ressourcen angefordert werden. Dies trägt dazu bei, die Gesamtlatenz zu verringern.
Angenommen, Sie laden Ressourcen von 3 Domänen und jede Domäne benötigt etwa 100 ms, um die DNS-Suche durchzuführen, dann sparen Sie 300 ms Latenz.
Ist es nicht cool?
Sie können implementieren, indem Sie entweder das Perfmatters-Plugin verwenden oder Folgendes in die Datei functions.php Ihres Designs einfügen, wenn Sie mit der Bearbeitung der Designdateien 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);
Sie können mehr unter lesen Mozilla-Webdokumentation.
Vorrendern
Erwarten Sie, dass Ihre Website-Benutzer auf der potenziellen Seite navigieren?
Prerender kann helfen, diese Assets im Hintergrund zu laden, und wenn Benutzer darauf klicken, erhalten sie sie sehr schnell. Sie können dies mit dem Plugin Pre Party Resource Hints erreichen.
Prerendering eignet sich für eine schlanke Seite oder ein Asset, aber seien Sie vorsichtig mit der gesamten Website oder großen Ressourcen, da dies die CPU-Auslastung und Bandbreite erhöhen und die Website verlangsamen kann. Versuchen Sie es also mit der kleineren Ressource und testen Sie sie, um sicherzustellen, dass sie keine Nebenwirkungen hat.
Wie Sie sehen können, sind vier Haupt-Plugins beteiligt, um Browserhinweise in WordPress zu implementieren. Wählen Sie die, die Ihnen gefällt und die den Anforderungen entspricht.
Plugin für Pre-Party-Ressourcenhinweise – Ein kostenloses Plugin bietet DNS-Prefetch, Link Prefetch, Prerender, Preconnect und Preload.
Bessere Ressourcenhinweise – eine Alternative zum obigen.
Das kostenlose Plugin ist gut, solange es gewartet und unterstützt wird. Leider ist dies bei vielen Plugins nicht der Fall, weshalb es manchmal besser ist, sich für die kostenpflichtige Version zu entscheiden. Plugins der kommerziellen Version werden professionell unterstützt und sind mit WordPress-Standard- und Sicherheitsfixes auf dem neuesten Stand. Wenn Sie bereit sind, ein paar Dollar für die Optimierung der Leistung Ihrer Website auszugeben, können Sie sich die folgenden ansehen.
WP Rocket – hoch angesehen, mehr als 800.000 Websites vertrauen darauf. Es kostet $49 für eine Website.
Leistungsangelegenheiten – Ein Leichtgewicht mit einfach zu folgen kostet 24,95 $ für eine Seite. Während ich schreibe, bietet es die folgenden Funktionen.
Das ist eine Menge Optimierung.
Fazit
Der WordPress-Kern ist ein Leichtgewicht, aber er wird sperrig, je nachdem, welches Thema und welche Plugins Sie verwenden. Und es ist wichtig, die Leistung Ihrer Website für ein besseres Suchranking und eine bessere Conversion zu optimieren. Die oben genannten Techniken sind einfach zu befolgen, aber Sie sollten hier nicht aufhören.
Sie sollten auch die Verwendung eines CDN in Betracht ziehen, um Inhalte zwischenzuspeichern und Ihren Benutzern weltweit schneller bereitzustellen. Es gibt viele, aber ich würde empfehlen, SUCURI auszuprobieren, das sowohl CDN als auch Sicherheit anbietet.