So verzögern Sie das Laden von Skripten in WordPress
Veröffentlicht: 2022-05-02Suchen Sie nach einer Möglichkeit, das Laden von Skripten in WordPress zu verzögern?
WordPress-Benutzer sind immer auf der Suche nach modernsten Techniken, um die Ladezeit ihrer Website zu verbessern. Geschwindigkeit ist für viele Faktoren, die eine erfolgreiche Online-Präsenz ausmachen, so unglaublich wichtig. Zwei der wichtigsten Punkte, wenn es um die Geschwindigkeit von WordPress geht, sind das Besuchererlebnis und das Suchmaschinenranking.
Es gibt viele Tools von Drittanbietern, die die Funktionalität oder Sichtbarkeit einer WordPress-Website verbessern. Diese Tools von Drittanbietern verwenden JavaScript, um ihre Funktionalität zu einer WordPress-Website hinzuzufügen.
Der Nachteil dieses hinzugefügten Drittanbieter-JavaScripts besteht darin, dass es in den meisten Fällen die Seitenladezeit jeder URL erhöht, auf der das Skript vorhanden ist.
Das bedeutet, dass überall dort, wo Sie das Skript auf Ihrer Seite haben und ein Besucher versucht, auf diese Seite zuzugreifen, die Zeit zum vollständigen Laden der Seite aufgrund des Skripts erhöht wird.
Vielleicht sind Sie sich nicht einmal sicher, ob Ihre Website schneller oder langsamer ist. Werfen Sie einen Blick auf den folgenden Link, um Ihnen einige Informationen zu einigen kostenlosen Tools zum Testen der Website-Geschwindigkeit zu geben, mit denen Sie die Geschwindigkeit Ihrer Website ermitteln können.
https://www.wpfixit.com/free-website-speed-testing-tools/
Es scheint nicht fair, dass Sie Funktionalität gegen Geschwindigkeit eintauschen müssen, oder?
Externe Skripte sind beim Laden der Seite Ihrer Website kostspielig
Skripte von Drittanbietern sind überall. Laut dem State of JavaScript-Bericht von HTTP Archive beträgt die durchschnittliche Anzahl externer Skripte, die von Websites angefordert werden, 20 und ihre Gesamtgröße beträgt etwa 449 KB .
Satte 93,59 % der Webseiten enthalten mindestens eine Ressource eines Drittanbieters. Eine tiefere Untersuchung derselben Daten zeigt, dass 76 % der Websites Benutzer mit Analyseskripts verfolgen.
Die schlimmste Auswirkung von Skripten von Drittanbietern ist die Verzögerung des kritischen Rendering-Pfads und die Beeinträchtigung Ihrer Core Web Vitals-Ergebnisse, beginnend mit der FID-Note.
Der kritische Rendering-Pfad ist die Reihe von Aktionen, die ein Browser durchführt, um HTML, CSS und JavaScript zu einer lebendigen, nutzbaren Website zusammenzusetzen.
Natürlich spielt hier die Payload-Größe der Skripte von Drittanbietern eine große Rolle, aber es gibt noch einen weiteren wichtigen Faktor, den es zu beachten gilt.
Die Ausführung von JavaScript nimmt eine Menge CPU-Ressourcen in Anspruch. Selbst wenn Sie Skripts von Drittanbietern optimieren, um die Auswirkungen auf die Renderzeit zu reduzieren, können sie sich dennoch auf die Metrik „Time to Interactive“ auswirken. Es misst, wie schnell Benutzer mit einer Webseite interagieren können.
Je langsamer es ist, desto frustrierter werden Ihre Benutzer sein und desto höher ist die Wahrscheinlichkeit, dass sie Ihre Website verlassen.
Die am häufigsten verwendeten externen Skripte auf WordPress
Nachfolgend finden Sie eine Liste einiger der am häufigsten verwendeten externen Skripte auf einer WordPress-Website. Viele davon werden Sie wiedererkennen, da Sie sie wahrscheinlich auf Ihrer Website verwenden.
- Google Analytics
- Facebook-Pixel-Code
- Live-Chat-Widgets
- Videoeinbettungen
- Eingebettete Formulare
- Social-Media-Widgets
- Eingebettete Formulare
Erzielen Sie Größe, wenn Sie das Laden von Skripten in WordPress verzögern
Es gibt keinen Grund, dass Sie Geschwindigkeit für Funktionalität opfern müssen.
Was wäre, wenn wir Ihnen sagen würden, dass Sie beides haben könnten?
Verbessern Sie die Funktionalität und Sichtbarkeit Ihrer WordPress-Website mit Skripten von Drittanbietern und stellen Sie außerdem sicher, dass jede Seite Ihrer Website für Ihre Besucher so schnell wie möglich geladen wird.
Es ist möglich und wird durch einen Prozess durchgeführt, bei dem Sie das Laden von Skripten in WordPress verzögern.
Wenn Sie ein internes Skript auf Ihrer Website verwenden, wird es unter normalen Umständen mit der Seite geladen, wenn ein Besucher auf eine Ihrer Website-URLs zugreift.
Wenn Sie das Laden des Skripts in WordPress verzögern, wird das externe Skript nicht geladen, bis die eingestellte Verzögerungszeit abgelaufen ist.
Wenn Sie die Verzögerungszeit beispielsweise auf 4 Sekunden einstellen, bedeutet dies, dass das Skript erst 4 Sekunden nach dem vollständigen Laden der Seite ausgeführt wird.
Dies ist äußerst leistungsfähig, da das Laden der Seite nicht auf den Abschluss des Skripts wartet. Ihre Besuchererfahrung wird sich verbessern, da die Seiten schneller geladen werden und jedes Geschwindigkeitstest-Tool, das Sie zum Testen einer der URLs auf Ihrer Website verwenden, bessere Ergebnisse liefert.
Sehen wir uns unten den Unterschied zwischen einem regulären externen Skriptladen und einem verzögerten Skriptladen an.
Regelmäßiges Laden externer Skripts
Das folgende Bild zeigt den Wasserfall-Ladevorgang einer URL, in die ein Testimonial-Widget von TrustPilot eingebettet ist.
Wie Sie im Bild sehen können, werden mit dieser Seite 5 externe Anfragen geladen. Diese Anforderungen stammen aus dem eingebetteten externen Skript.
Laden des externen Skripts verzögern
Werfen wir nun einen Blick auf dieselbe Seite, die mit verzögertem Skriptladen in WordPress geladen wurde.
Dieses Testimonial-Widget von TrustPilot ist immer noch auf der Seite eingebettet, aber wir haben eine verzögerte Ladezeit von 2,5 Sekunden nach dem Laden der Seite festgelegt.
Nicht nur die Anzahl der Anfragen ist gesunken, sondern wirf auch einen Blick auf die Vollladezeit und die Ladezeit, die ebenfalls zurückgegangen sind.
Es ist, als wäre das Skript während der Ladezeit gar nicht auf der Seite.
Nachdem wir nun die hohen Kosten der Ladezeit für externe Skripte und die Art und Weise erklärt haben, wie Sie sie ohne Geschwindigkeitseinbußen verwenden können, zeigen wir Ihnen den genauen Code, den Sie implementieren müssen, um Größe zu erreichen.
Laden des ursprünglichen Ladeskripts in WordPress
Der folgende Code ist das standardmäßige eingebettete Skript für dieses TrustPilot-Widget, das wir in den obigen Geschwindigkeitstests verwendet haben.
<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->Verzögern Sie das Laden von Skripts in WordPress
Der folgende Code ist das verzögerte eingebettete Skript für dieses TrustPilot-Widget, das wir in den obigen Geschwindigkeitstests verwendet haben.
<!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
head_ID.appendChild(script_element);
}, 2500 ); // ZEITVERZÖGERUNG, DIE SIE EINSTELLEN KÖNNEN
</script>
<!-- TrustBox-Skript beenden -->
<!-- TrustBox-Widget - Karussell -->
<div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme=" light" data-stars="1,2,3,4,5" data-review-languages="en">
</div>
<!-- TrustBox-Widget beenden -->Jede Verwendung verzögert das Laden von Skripts in WordPress
Der folgende Code ist die Standardvorlage, die Sie verwenden können, um das Laden von Skripts in WordPress zu verzögern.
Es gibt nur zwei Elemente in dieser Vorlage, die geändert werden müssen.
- Die URL für das externe Skript, das Sie verwenden möchten
- Die Zeitverzögerung, wann das Skript ausgeführt werden soll
<script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
head_ID.appendChild(script_element);
}, 2500 ); // ZEITVERZÖGERUNG, DIE SIE EINSTELLEN KÖNNEN
</script>Abschließend
Wir hoffen wirklich, dass dieser Beitrag hilfreich war und verstand, wie man das Laden von Skripten in WordPress verzögert.
Sie sollten dies wirklich für alle externen Skripte von Drittanbietern verwenden, die Sie auf Ihrer WordPress-Website verwenden, und Sie werden eine sofortige Verringerung der Seitenladezeit feststellen, was Ihren Suchmaschinen-Rankings und der allgemeinen Besuchererfahrung zugute kommt.
Wenn Sie Probleme haben, etwas zu implementieren, was Sie in diesem Beitrag gelesen haben, kommentieren Sie bitte unten und wir können sehen, wo Sie stecken bleiben.