Beschleunigen Sie Ihre WordPress-Seite mit modernen Browserfunktionen wie Preloading, Prefetching und Preconnect.
Jeder Webseitenbetreiber möchte doch, dass seine Seite so schnell wie möglich lädt, oder?
Es ist eine große Herausforderung, Webseiten weltweit schnell und konsistent zu laden. Es gibt zahlreiche Möglichkeiten, die Ressourcen einer Seite schneller zu laden, darunter die Aktivierung von Browser-Hinweisen, auch bekannt als Pre-Browsing-Techniken.
Wichtig: Browser-Hinweise sind nicht sehr wirksam beim ersten Besuch einer Seite, aber sie beschleunigen die nachfolgenden Anfragen deutlich.
Preload (Vorladen)
Mit dem `preload`-Tag weisen Sie den Browser an, bestimmte statische Ressourcen frühzeitig zu laden. Das können Bilder, Schriftarten, JavaScript, CSS, Skripte, Videos usw. sein. Dies hilft, das Laden von Ressourcen zu priorisieren, was die Performance verbessert.
Vorladen ist besonders nützlich, wenn Besucher voraussichtlich mehrere Seiten hintereinander aufrufen, wie z.B. in einem E-Commerce-Shop, wo ein Nutzer eine Produktseite besucht, Informationen prüft, mit anderen Produkten vergleicht, Artikel in den Warenkorb legt und bezahlt.
Sie können Preload mit folgenden Plugins einrichten:
Bessere Ressourcenhinweise – ein kostenloses Plugin zur Konfiguration von CSS- und JS-Dateien.
WP Rocket – ein Premium-Plugin zur Verbesserung der Website-Performance durch viele wesentliche Techniken, einschließlich Preload-Caching und Sitemap.
Wie können Sie überprüfen, ob Preload aktiviert ist?
Am schnellsten geht das durch Betrachten des Seitenquelltextes. Dort sollten Sie Code ähnlich dem folgenden finden:
<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. Überprüfen Sie daher die Kompatibilitätsmatrix vor der Implementierung.
Preconnect (Vorverbinden)
Werden Ressourcen von anderen Domains geladen, beispielsweise von einem CDN?
Wenn nicht und alle Ressourcen von Ihrer eigenen Domain geladen werden, ist diese Funktion möglicherweise nicht hilfreich.
Browser können mit Preconnect Verbindungen zu anderen Domains im Hintergrund aufbauen, um Zeit bei der DNS-Auflösung, Weiterleitung, TCP-Handshake, TLS-Verhandlung usw. zu sparen. Ziel ist es, die Latenz zu verringern und Ressourcen von anderen Domains schneller zu laden.
Auch hier können Sie das Plugin „Bessere Ressourcenhinweise“ oder Premium-Plugins wie Perfmatters verwenden.
Nach der Konfiguration der Ressourcen sollten Sie im Seitenquelltext Einträge wie diesen finden:
<link rel="preconnect" href="https://ANOTHERSITE.com">
Wichtig: Wenn Ressourcen von einer Domain geladen werden, die CORS erfordert, muss das `crossorigin`-Attribut hinzugefügt werden:
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect wird von den aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützt.
Prefetch (Vorausladen)
Laden Sie die nächste Seite, die der Benutzer vermutlich besuchen wird, bereits im Voraus. Prefetch lädt die erforderlichen Ressourcen und speichert sie im lokalen Cache, um sie bei Bedarf schnell bereitzustellen. Es gibt zwei Arten von Prefetch:
DNS-Prefetch – siehe Erklärung unten
Link-Prefetch – wird mit `` konfiguriert. Hiermit werden HTML- oder statische Ressourcen vorab geladen. Ressourcen können mit dem `as`-Attribut vorab abgerufen werden.
Das `as`-Attribut unterstützt verschiedene Ressourcentypen wie Audio, Video, Skript, Track, Style, Font, Objekt, Dokument usw. Link-Prefetching lässt sich mit dem Plugin Pre Party Ressourcenhinweise konfigurieren.
DNS-Prefetch
Laden Sie Ressourcen von vielen Domains und möchten diese im Hintergrund auflösen?
Diese schnelle Einrichtung hilft, alle potenziellen Domains frühzeitig aufzulösen, sodass sie schneller laden, wenn Ressourcen angefordert werden. Dies trägt zur Verringerung der Gesamt-Latenz bei.
Angenommen, Sie laden Ressourcen von 3 Domains und jede Domain benötigt ca. 100 ms für die DNS-Auflösung, dann sparen Sie 300 ms Latenz.
Ist das nicht großartig?
Sie können dies entweder mit dem Perfmatters-Plugin implementieren oder, wenn Sie mit der Bearbeitung von Designdateien vertraut sind, folgenden Code in die `functions.php`-Datei Ihres Themes einfügen:
//* 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);
Weitere Informationen finden Sie in der Mozilla Webdokumentation.
Prerender (Vorabrendern)
Erwarten Sie, dass Ihre Nutzer eine bestimmte Seite besuchen?
Prerender kann helfen, diese Assets im Hintergrund zu laden, sodass sie bei einem Klick sehr schnell verfügbar sind. Dies kann mit dem Plugin Pre Party Resource Hints erreicht werden.
Prerendering ist nützlich für schlanke Seiten oder Assets. Verwenden Sie es jedoch mit Vorsicht bei der gesamten Seite oder großen Ressourcen, da dies die CPU-Auslastung und Bandbreite erhöhen und die Seite verlangsamen kann. Testen Sie daher Prerendering mit kleineren Ressourcen, um sicherzustellen, dass es keine negativen Auswirkungen hat.
Wie Sie sehen, sind vier Hauptplugins für die Implementierung von Browser-Hinweisen in WordPress relevant. Wählen Sie das Plugin, das Ihren Bedürfnissen entspricht.
Plugin Pre Party Ressourcenhinweise – ein kostenloses Plugin für DNS-Prefetch, Link Prefetch, Prerender, Preconnect und Preload.
Bessere Ressourcenhinweise – eine Alternative zum oben genannten.
Kostenlose Plugins sind gut, solange sie gewartet und unterstützt werden. Leider ist dies nicht immer der Fall, weshalb es manchmal besser ist, eine kostenpflichtige Version zu wählen. Kommerzielle Plugins werden professionell unterstützt und halten sich an WordPress-Standards und Sicherheitsupdates. Wenn Sie bereit sind, etwas Geld in die Optimierung der Leistung Ihrer Seite zu investieren, können Sie sich die folgenden ansehen.
WP Rocket – sehr angesehen, über 800.000 Webseiten vertrauen darauf. Es kostet 49 $ für eine Webseite.
Perfmatters – ein leichtgewichtiges und einfach zu bedienendes Plugin für 24,95 $ pro Seite. Es bietet aktuell folgende Funktionen:
Das ist eine ganze Menge Optimierung.
Fazit
Der WordPress-Kern ist leichtgewichtig, wird aber abhängig vom Theme und den verwendeten Plugins umfangreicher. Es ist wichtig, die Leistung Ihrer Webseite für ein besseres Suchmaschinenranking und höhere Conversion-Raten zu optimieren. Die oben genannten Techniken sind einfach anzuwenden, aber Sie sollten nicht hier aufhören.
Erwägen Sie auch die Verwendung eines CDN, um Inhalte zu cachen und sie Ihren Benutzern weltweit schneller zur Verfügung zu stellen. Es gibt viele Anbieter, aber ich würde SUCURI empfehlen, da dieser sowohl ein CDN als auch Sicherheitsfunktionen bietet.