Analyse, Beratung & Strategie
Marketing-as-a-Service (MaaS)
E-Mail-Marketing
Website-Erstellung & Webdesign
Website-Check (inkl. DSGVO)
WordPress-Wartung
Google Ads
Im Google Lighthouse Report werden unter Opportunities Einstellmöglichkeiten genannt, die eine Website beschleunigen können. Heute befassen wir uns mit “Preload key requests” und zwei Möglichkeiten zur Optimierung.
Was ist “Preload key requests” – Einführung
Beim Laden einer Website werden Dateien und Scripte in unterschiedlicher Reihenfolge geladen. Die kritischen Anfragenketten (Critical request chains) werden teils für die Darstellung der Website benötigt. Ein folgendes Beispiel zeigt die Abfragenkette:
index.html
|--app.js
|--styles.css
|--ui.jsJe länger die Ketten sind und je größer die Download-Größe ist, desto bedeutender ist die Auswirkung auf die Leistung beim Laden von Seiten.
Ihre index.html-Datei deklariert script src = "app.js". Wenn app.js ausgeführt wird, wird fetch () aufgerufen, um styles.css und ui.js herunterzuladen. Die Seite wird erst vollständig angezeigt, wenn die letzten beiden Ressourcen heruntergeladen, analysiert und ausgeführt wurden. In dem obigen Beispiel würde Lighthouse styles.css und ui.js als Kandidaten kennzeichnen.
Die potenziellen Einsparungen hängen davon ab, wie viel früher der Browser die Anforderungen starten könnte, wenn Sie Links zum Vorladen deklarieren. Wenn zum Beispiel app.js 200 ms zum Herunterladen, Analysieren und Ausführen benötigt, beträgt die potenzielle Einsparung für jede Ressource 200 ms, da app.js nicht länger ein Engpass für jede der Anforderungen ist.
Durch das Vorladen von Anforderungen können Ihre Seiten schneller geladen werden.
Das Problem hierbei ist, dass der Browser die letzten beiden Ressourcen erst erkennt, nachdem er app.js heruntergeladen, analysiert und ausgeführt hat. Sie wissen jedoch, dass diese Ressourcen wichtig sind und so schnell wie möglich heruntergeladen werden sollten.
Deklarieren Sie Ihre Preload-Links im HTML Code
Mit der Kennzeichnung der wichtigen Dateien als Preload-Links in Ihrem HTML-Code, kann der Browser angewiesen werden, wichtige Ressourcen so schnell wie möglich herunterzuladen.
<head>
...
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="ui.js" as="script">
...
</head>WP Rocket: Preload key requests
Das WordPress Plugin WP Rocket bietet eine Einstellmöglichkeit an, um wichtige Anfragen mit <link rel=preload> zu laden.
Diese Einstellung ist zu finden unter: WP Rocket > Einstellungen > Cache füllen > Preload Fonts.
Hier muss die URL eingetragen werden, welche im Lighthouse Report aufgeführt wird. Dazu lässt sich die Datei per Rechtsklick und “Link kopieren” in die Zwischenablage kopieren. Anschließend bei WP Rocket in das Feld einfügen und speichern. WP Rocket kürzt die URL automatisch und erstellen der Seiten Cache neu.
Damit ist die Einrichtung abgeschlossen. Befinden sich mehrere URL im Lighthouse Report, müssen die Schritte für die jeweilige URL wiederholt werden.
Tipp: Sollte die Liste der Dateien länger sein, sollte geprüft werden, welche URL hier überhaupt benötigt werden. Denn trotz Preload werden diese Abfrage natürlich durchgeführt und machen die Ladezeit der Seite eventuell unnötig langsam.
