Verzögern Sie das Parsen von Javascript - 5 Möglichkeiten, es zu beheben und die Geschwindigkeit zu steigern (2024)

Als jemand, der versucht zu verstehen, wie man das Parsen von Javascript aufschiebt, glauben wir, dass Sie ein Problem haben. Sie besitzen oder haben eine Website von jemandem besucht, den Sie kennen (vielleicht einen Kunden?), Und das Laden dauert ewig. Und als Sie die Tools zum Testen der Website-Geschwindigkeit getestet haben, haben Sie eine Empfehlung erhalten, deren Implementierung Sie nicht sicher sind.

In diesem Artikel werden wir verschiedene Möglichkeiten vorstellen, wie Sie Javascript verschieben und diese Warnung beheben und letztendlich das Laden der Website beschleunigen können, ohne diesen Fehler auszulösen!

Wenn Sie wenig Zeit haben, können Sie folgende schnelle Aktionen ausführen:

Anweisungen zum Aufschieben des Parsens von JavaScript

1. Laden Sie das Async-Plugin herunter hier.
2. Klicken Sie auf  Plugins> Neu hinzufügen> Plugin hochladen und wählen Sie die Datei aus, die Sie gerade heruntergeladen haben.
3. Klicken Sie auf  Mehr erfahren des installierten Plugins.
4. Gehen Sie zu Plugins und klicken Sie auf Einstellungen  für das Async-Plugin, das Sie gerade installiert haben.
5. Mit einem Klick auf Aktivieren Sie Async Javascript, oder Wenden Sie Async an als zwei der häufigsten Methoden zum Anwenden des Fixes.
6. Testen Sie Ihre Website, um festzustellen, ob noch alles gut funktioniert.

Warum ist das Verfahren zum Implementieren der verzögerten Analyse von Javascript wichtig? Wenn Sie das Parsen von Javascript nicht verschieben, scheint Ihre Website langsam geladen zu werden. Javascript ist im Wesentlichen ein wichtiger Baustein in der Sprache des Webs. Es ermöglicht Webentwicklern, "dynamische" Funktionen zu erstellen.

In den meisten Fällen werden Javascript-Dateien jedoch sehr groß. Sie können auch von Servern von Drittanbietern abgerufen werden. Dies macht den Download langsam. Dies ist jedoch nur das halbe Problem.

Das größte Problem ist, dass der Browser für die Anzeige von Inhalten gesperrt ist, wenn das Parsen von Javascript nicht verzögert wird. Die Website wird nicht wiedergegeben. Und wie sieht das für einen Benutzer aus? Es sieht so aus, als ob die Site entweder langsam, kaputt oder vollständig tot ist. 

Das Problem verschärft sich auf Mobilgeräten, bei denen die verfügbare Verarbeitungsleistung zusammen mit der verfügbaren Bandbreite das Erlebnis noch schlimmer macht.

Und was werden die Benutzer tun, die eine solche Erfahrung machen? Sie werden von Ihrer Website abprallen und niemals zurückkehren!

Wenn Sie schon eine Weile in der Webbranche tätig sind und versuchen, die SEO Ihrer Website zu verbessern, wissen Sie bereits, dass die Leistung der Website gleich ist wichtig bei der Verbesserung Ihrer Suchmaschinen-Sichtbarkeit.

Und wenn Sie Google PageSpeed ​​Insights zum Überprüfen Ihrer Website verwendet haben, gibt es neben dem "Aufschieben der Analyse von Javascript" noch mehr kryptische Warnungen, z. B. die mit dem Hinweis "Beseitigen von Renderblockierungsressourcen".

Dieses technische Zeug scheint den größten Einfluss auf Ihre Ladegeschwindigkeit zu haben! 

Beseitigen?! Aber wie soll ich diese wichtigen Dateien von meiner Website entfernen?

Keine Sorge, wir sind hier, um Ihnen zu helfen, diese Warnungen zu beheben, diese Probleme zu beheben und letztendlich das Laden Ihrer Seiten zu beschleunigen!

Wegen dir müssen sie nicht entfernen. Sie müssen lediglich das Parsen von JavaScript verschieben.

Schauen Sie sich dieses kurze Video unten an, um zu sehen, wie einfach es ist, das Parsen von Javascript mit einer der folgenden Methoden zu verschieben:

In Non-Geekspeak bedeutet dies, dass Sie einige Dinge in Ihrem WordPress optimieren müssen, damit die Seite Ihren Inhalt zuerst laden kann, bevor Sie Ihre JavaScript-Dateien laden oder analysieren. 

Dies liegt daran, dass das Rendern der Website zu einem sehr schweren Vorgang wird, wenn Sie das Parsen von Javascript nicht verschieben, und wie oben erwähnt, sieht die Website so aus, als wäre sie defekt.

Um sicherzustellen, dass der Benutzer auf der Website bleibt, möchten wir ihn darüber informieren, dass tatsächlich etwas passiert, und dem Benutzer Inhalte anzeigen, anstatt darauf zu warten, dass der Browser alle Anstrengungen unternimmt, bevor er dem Benutzer tatsächlich etwas anzeigt . 

Übrigens, wenn Sie Ihr WordPress schnell machen möchten, gibt es ein paar Plugins wie diese hier. Das kann in wenigen Minuten einen echten Leistungsunterschied bewirken (mit wenig bis gar keinem Aufwand).

Wenn Sie interessiert sind, WP Rocket Wenn Sie das Parsen von Javascript und vielen anderen Optimierungen verschieben möchten, um Ihre Website schneller zu machen, klicken Sie einfach auf das unten stehende Banner, um es zu überprüfen. 

Sie sind noch nicht bereit, ein Plugin zu verwenden? Weiter lesen... 

Was ist das verzögerte Parsen von JavaScript?

Das Parsen von Javascript zu verschieben bedeutet, "defer"Oder"async"um das Blockieren einer Seite durch das Rendern zu vermeiden. Dieser HTML-Befehl weist den Browser an, die Skripte nach (Aufschieben) oder asynchron (parallel) zum Laden der Seite auszuführen / zu analysieren. Dadurch kann der Inhalt angezeigt werden, ohne auf das Laden der Skripte zu warten .

Wenn Sie das verzögerte Parsen von JavaScript einrichten, können Sie Ihre Inhalte schneller und mit hoher Priorität laden.

Woran liegt das?

Im Folgenden finden Sie eine hervorragende Erklärung, die zeigt, wie Webseiten geladen werden und wie JavaScript-Dateien die Ladezeit Ihrer Website erheblich beeinträchtigen.

Lassen Sie uns im obigen Video einen kurzen Blick darauf werfen, was passiert, wenn jemand Ihre Website besucht: 

1. Wenn ein Benutzer auf einen Link klickt, der auf Ihre Website verweist, fordert der Browser des Benutzers ihn von Ihrem Server an, den Ihr Server dann dem Browser Ihres Benutzers "bereitstellt".
2. Der Browser des Benutzers empfängt und sieht dann den HTML-Inhalt Ihrer Webseite und beginnt mit dem Rendern. Es beginnt mit dem Aufbau Ihrer Webseite von oben nach unten.
3. Wenn unterwegs JavaScript-Dateien gefunden werden, stoppt der Browser diese und ruft sie ab (wenn es sich um eine externe Datei handelt). Anschließend wird sie analysiert
4. Erst nachdem jedes einzelne Skript vollständig abgerufen und analysiert wurde, wird der Rest Ihres Inhalts weiter geladen.

Sie beginnen wahrscheinlich bereits zu erkennen, wo das Problem liegt.

Wenn Ihre Seiten viele JavaScript-Dateien enthalten, kann sich dies massiv auf die Ladezeit Ihrer Website auswirken - negativ.

Der Browser Ihres Benutzers zeigt kontinuierlich das Ladesymbol oder das sich drehende Rad an, während Sie Ihre Skripte analysieren und laden, bevor Ihr tatsächlicher Inhalt angezeigt wird. Dies ist insbesondere bei mobilen Browsern oder Benutzern bei langsamen Datenverbindungen sichtbar.

Wenn es länger als ein paar Sekunden dauert, insbesondere wenn Sie Ihre Skripte von einem externen Server aus bereitstellen (und dieser Server momentan Probleme hat), werden Ihre Besucher nervös.

Während dieser Zeit sieht Ihr Benutzer nur eine weiße leere Seite. Ist das nicht eines der frustrierendsten Dinge im Internet? Im Web soll alles sofort verfügbar sein. Warum müssen sie warten, bis Ihre Seite geladen ist?

Wenn ein Benutzer länger als 4 Sekunden wartet, wird er nervös. Nach 8 Sekunden ist Ihre Website so gut wie tot - der Benutzer springt auf eine andere Website.

Sie haben einen Besucher verloren und wahrscheinlich sein Geschäft. 

Die zusätzliche Komplikation besteht darin, dass diese JS-Dateien häufig durch wichtige Plugins und Themen, die Sie installiert haben, zu Ihrer Website hinzugefügt werden, sodass Sie sie nicht einfach entfernen können.

Also, was tun Sie?

Um dies zu beheben, müssen Sie das Parsen von JavaScript verschieben. Dies funktioniert, indem Sie Ihre Skripte analysieren, sobald der Hauptinhalt geladen wurde. Schauen Sie sich das Bild unten an, um genau zu sehen, wie sich die Ladezeit auswirkt. Wie wir sehen können, zwingt der Befehl defer den Browser, das Javascript später auszuführen, während die Asynchronisierung zulässt, dass Dinge parallel zum Download geschehen.

Wenn ein Benutzer Ihre Website besucht, analysiert Ihr Browser stattdessen weiterhin alles von oben nach unten, überspringt jedoch Ihre JavaScript-Dateien für später. Auf diese Weise können Ihre Benutzer Ihre Inhalte sofort sehen, ohne warten zu müssen. 

Wenn Sie das obige Video gesehen haben, haben Sie gesehen, dass die Attribute "async" und "defer" sehr hilfreich sind.

Aber wie würden Sie das in WordPress machen? Wann ist der richtige Zeitpunkt, um sie zu verwenden? Mal sehen und los geht's!

Analysieren Sie Ihre Website

Bevor wir beginnen, müssen Sie wissen, ob Sie den verzögerten Javascript-Fix auf Ihrer Site implementieren müssen oder nicht. Um herauszufinden, ob dies erforderlich ist, können Sie verschiedene Tools verwenden, die online verfügbar sind.

Einige Beispiele sind die folgenden:

1. GTMetrix

In diesem Fall werden sowohl die PageSpeed- als auch die Yslow-Metrik überprüft und Sie erhalten eine Bewertung von F bis A. Außerdem erhalten Sie Empfehlungen sowie Tipps zur Verbesserung Ihrer Website, wenn Probleme gefunden werden. Hier erfahren Sie speziell, ob Sie das Parsen von JavaScript verschieben müssen. 

Im Allgemeinen sollte die Punktzahl mindestens 71 betragen.

Das Bild unten zeigt eine Website, die nicht verschoben werden muss. 

2. PageSpeed-Tools

PageSpeed ​​Insights, ein von Google entwickeltes Tool, ist ein weiteres umfassendes Tool, das Ihnen umfassende Informationen zu Leistungsproblemen Ihrer Website sowie Tipps zur Behebung dieser Probleme wie bei GTMetrix bietet.

Eines der besten Dinge an diesem Tool ist, dass es Links zu ausführlichen Anleitungen und Ressourcen enthält, mit denen Sie alle Ihre Leistungsprobleme beheben können. Das folgende Bild zeigt eine Website, die dringend eine verzögerte Analyse von JavaScript implementieren muss.

3. Pingdom Werkzeuge 

Ein weiteres beliebtes Tool zum Testen der Website-Leistung, das für alle frei verfügbar ist.

Obwohl es Ihnen nicht explizit zu sagen scheint, ob Sie das Parsen von JavaScript verschieben müssen, können Sie dank der umfassenden Ergebnisseite überprüfen, wie lange das Laden Ihrer Skripte gedauert hat.

Das Bild unten zeigt eine Website, deren Seite fast zur Hälfte aus JavaScript besteht - ein guter Indikator dafür, dass Sie Ihre Skripte möglicherweise verschieben möchten. 

4.  Varvy PageSpeed 

Ein weiteres hervorragendes Tool, mit dem Sie feststellen können, ob Ihre Site Render-Blocking-Skripte enthält.

Das Beste ist, dass Sie genau wissen, was sie sind, genau wie im Bild unten: 

Gut, cool!

Jetzt haben Sie Zugriff auf Tools, mit denen Sie feststellen können, ob Sie das verzögerte Parsen von JavaScript-Dateien implementieren müssen.

Aber Sie fragen sich vielleicht, warum Sie es nicht einfach implementieren und in Ruhe lassen? Wenn Sie das Parsen von JavaScript falsch verschieben, kann dies zu Problemen führen, und es kann frustrierend sein, Fehler zu beheben, wenn Sie nicht technisch versiert sind.

Das einfache Einschalten des Verzögerungsmodus bedeutet nicht, dass alles vergessen ist und einwandfrei funktioniert. Sie müssen überprüfen, ob Sie es richtig gemacht haben, und sicherstellen, dass alles noch wie beabsichtigt funktioniert. 

Wenn Sie beispielsweise jQuery verwenden, müssen Sie sorgfältig auswählen, welches Ihrer Skripte Sie verschieben möchten, da es anscheinend ein gibt Problem mit defer und jQuery.

Darüber hinaus werden Sie feststellen, dass es im Stapelüberlauf unzählige Fragen zu jQuery, Async und Defer gibt, bei denen es häufig darum geht, wie Sie Defer und Async, wenn überhaupt, für Ihre Skripte implementieren sollten, die auf jQuery basieren. 

Also, was sind die Ergebnisse? Müssen Sie Ihre Skripte verschieben?

Wenn ja, dann lassen Sie uns jetzt herausfinden, wie Sie JavaScript in WordPress verschieben können!

So verschieben Sie das Parsen von JavaScript in WordPress

Das Parsen von JavaScript in WordPress zu verschieben, kann ziemlich einfach sein.

Sie können einfach eines der Tausenden von Plugins im WordPress-Repository installieren und los geht's. Es gibt jedoch auch erweiterte Möglichkeiten, dies zu tun, wenn Sie mehr Kontrolle benötigen, insbesondere wenn Sie komplexe Skripts verwenden, um Ihre Website ansprechender und interaktiver zu gestalten. 

In diesem Abschnitt werden fünf verschiedene Möglichkeiten zum Aufschieben der Analyse von JavaScript in WordPress beschrieben: über Plugins, über functions.php und manuelles Bearbeiten von Code. 

Es gibt so viele Plugins im WordPress-Repository, mit denen Sie die Leistung Ihrer Website verbessern können.

Es gibt solche, die einer bestimmten Aufgabe gewidmet sind, z. B. das Minimieren Ihres HTML-Codes, und es gibt Plugins, die versuchen, alle leistungsbezogenen Optimierungen in einem Plugin zu integrieren, z. B. die Möglichkeit, CSS- und JavaScript-Dateien zu minimieren und zu verschieben, das Browser-Caching zu implementieren und zu nutzen ((was wir in diesem Artikel ausführlich behandelt haben) Und mehr. 

Es werden jedoch nicht alle Plugins gleich erstellt. Einige funktionieren hervorragend, andere funktionieren in Ordnung, andere funktionieren überhaupt nicht und können sogar einige oder alle Funktionen Ihrer Website beeinträchtigen. 

(Wenn Sie lieber jemanden haben möchten, der Erfahrung damit hat, können Sie dies mit einem billigen Fiverr-Auftritt erledigen, indem Sie auf die Schaltfläche unten klicken.)

1. Verschieben Sie das Parsen von Javascript mit dem Async Plugin

Ehrlich gesagt empfehlen wir dringend, sich für ein Premium-Plugin zu entscheiden (das absolut günstig ist), aber Sie können sicher sein, dass Sie nicht nur diese Warnung, sondern eine ganze Reihe von Problemen mit der Ladegeschwindigkeit der Website beheben.

Wir beginnen mit einer der beliebtesten, die einen einzelnen in diesem Artikel definierten Job ausführen sollen.

Eine der beliebtesten Optionen für diesen Job ist Async Javascript. Dieses Plugin konzentriert sich auf die Verbesserung der Leistung Ihrer Website, indem es die Art und Weise, wie Ihre Skripte geladen werden, optimiert. Wie WP Rocket unten bietet es auch zusätzliche erweiterte Funktionen, mit denen Sie bestimmte Skripte vom Zurückstellen ausschließen können.

Hier sind die Schritte, die Sie ausführen müssen, um dieses Plugin zu verwenden.

1. Laden Sie das Async-Plugin herunter hier.
2. Klicken Sie auf Plugins> Neu hinzufügen im WP-Backend.
3. Klicken Sie auf Plugin hochladen und wählen Sie die Datei aus, die Sie gerade heruntergeladen haben.
4. Alternativ können Sie nach Async Javascript suchen und auf klicken Jetzt installieren.
5. Klicken Sie auf Mehr erfahren des installierten Plugins.
6. Gehen Sie zu Plugins und klicken Sie auf Einstellungen für das Async-Plugin, das Sie gerade installiert haben.
7. Wir empfehlen Ihnen, auf zu klicken Aktivieren Sie Async Javascript, oder Wenden Sie Async an als zwei der häufigsten Methoden zum Anwenden des Fixes.
8. Wenn diese nicht funktionieren, können Sie verschiedene Kombinationen ausprobieren.
9. Testen Sie Ihre Website, um festzustellen, ob noch alles gut funktioniert.

Vielleicht liegt eine seiner Stärken darin, dass Sie neben der Möglichkeit, bestimmte Skripte vom Zurückstellen auszuschließen, auch die Option haben, auszuwählen, welche Skripte stattdessen zurückgestellt werden sollen:

Möglicherweise stellen Sie auch fest, dass Sie die Option haben, ein Skript entweder zu asynchronisieren oder zu verschieben. Weitere Informationen zum Unterschied zwischen den beiden finden Sie hier Artikel.

Eine einzigartige Funktion dieses Plugins ist, dass Sie festlegen können, dass ein bestimmtes Thema oder Plugin ausgeschlossen werden soll.

Es gibt auch eine Option zur Integration von GTMetrix in Ihre Site, sodass Sie die Leistung jederzeit überprüfen können. Beachten Sie, dass jedes Mal, wenn Sie einen Test durchführen, ein API-Guthaben von Ihrem GTMetrix-Konto abgezogen wird.

Während einige Leute empfehlen werden WP Aufgeschobenes JavaScriptDieses Plugin wurde seit mehr als 3 Jahren nicht mehr aktualisiert und nicht mit den letzten 3 Hauptversionen getestet. Wir empfehlen daher dringend, dieses Plugin nicht zu verwenden. Es mag immer noch funktionieren, aber es ist nicht getestet, daher ist es ein Risiko, das Sie nicht eingehen sollten.

Wenn Sie eine relativ einfache Website haben und Ihre Ladezeiten weiter verbessern möchten, ist dies möglicherweise genau das, was Sie brauchen. Dieses Plugin erfordert überhaupt keine Konfiguration - einfach installieren, aktivieren und vergessen.

Denken Sie auch hier daran, dass diese Version für komplexe Websites wie E-Commerce nicht empfohlen wird, da sie keine erweiterten Optimierungsoptionen bietet und altersbedingt ist. Die Möglichkeit, die Optionen zum Verschieben von JavaScript zu optimieren, ist für große und komplexe Websites von entscheidender Bedeutung.

2. WP Rocket

WP Rocket ist derzeit das führende WordPress-Performance-Plugin auf dem Markt und bietet nicht nur die Möglichkeit, das Parsen von JavaScript-Dateien, sondern auch Ihrer CSS-Dateien zu verschieben. Darüber hinaus erhalten Sie unzählige andere Optionen zur Leistungsverbesserung.

Einige Funktionen umfassen Folgendes: 

• Minimierung - Verkleinert den Code Ihrer Site, damit er schneller geladen wird. Dazu werden Leerzeichen und andere unnötige Zeichen aus dem Code entfernt, ohne die Kernfunktionalität zu beeinträchtigen.
• Verkettung - kombiniert mehrere CSS- und JavaScript-Dateien zu einer.
• Lazy Loading - Dies ist der Verzögerungsmodus für Videodateien und andere Multimedia-Inhalte wie Bilder. Das Laden dieser ressourcenintensiven Dateien wird verzögert, bis der Benutzer zu ihnen gescrollt hat.

Eines der besten Dinge an WP Rocket ist, dass Sie es nach der Installation und Aktivierung einfach in Ruhe lassen können und automatisch Leistungssteigerungen erzielen.

Sie können jedoch erweiterte Einstellungen konfigurieren, um die Leistung noch weiter zu steigern. Beachten Sie jedoch, dass einige davon negative Auswirkungen auf Ihre Website haben können. Und aus diesem Grund ist ihre Zurückstellungsoption für JavaScript- und CSS-Dateien standardmäßig nicht aktiviert, denn wenn Sie dies tun, achten Sie darauflessly, sie können Dinge zerstören.

Zum Glück können Sie bestimmte Skripte vom Zurückstellen ausschließen.

Sie können versuchen, zuerst alle Ihre Skripte auszuschließen und dann das Parsen von Javascript-Dateien nacheinander zu verschieben, bis Sie das problematische finden. Sie haben umfangreiche Dokumentation um dir dabei zu helfen. Auf diese Weise können Sie die Leistungsverbesserungen maximieren, ohne einige oder alle Funktionen Ihrer Website zu beeinträchtigen oder zu beeinträchtigen.

WP Rocket ist ein Premium-Plugin, aber angesichts des Preises und der bereitgestellten Funktionalität (nicht nur das Verschieben und Asynchronisieren von JS-Dateien, sondern auch viele andere Optimierungen) garantiert Wir glauben, dass es den Preis sehr wert ist, um Ihre Website schneller zu machen.

Laden Sie WP Rocket herunter

3. Speed ​​Booster Pack

Ein weiteres großartiges All-in-One-Leistungs-Plugin, mit dem Sie das Parsen von Javascript-Dateien verschieben können, ist Geschwindigkeitsverstärker-Pack. Es ist ähnlich wie WP Rocket in Bezug auf Funktionen, aber es ist kostenlos. Es verfügt über die meisten grundlegenden Funktionen von WP Rocket wie Minimieren, Verschieben, Entfernen unnötiger Dateien usw.

Unten sehen Sie einige der im Plugin verfügbaren Funktionen: 

Auf der Registerkarte "Erweitert" können Sie festlegen, dass einige Skripte entweder vom Verschieben in die Fußzeile oder vom Zurückstellen oder von beiden ausgeschlossen werden sollen. Sie können jedoch nur bis zu 4 ausgeschlossene Skripte hinzufügen, was sicherlich eine Einschränkung für komplexe und große Websites darstellt. 

Insgesamt ist es eine gute kostenlose Alternative zu WP Rocket, die für kleine Websites geeignet ist.

4. Verwenden von functions.php Tweaks

Was ist, wenn Sie keine Plugins verwenden möchten?

Es gibt noch einen weiteren Trick, mit dem Sie das Parsen von Javascript in WordPress verschieben können, indem Sie die Datei functions.php Ihres Themas bearbeiten.

Kopieren Sie einfach den folgenden Code und fügen Sie ihn am Ende der function.php-Datei Ihres Themas ein: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Denken Sie daran, dass Sie Ihre Website möglicherweise durcheinander bringen, wenn Sie es falsch machen. Achten Sie also genau darauf und stellen Sie sicher, dass Sie die richtige Datei im richtigen Thema bearbeiten und das Code-Snippet an der richtigen Stelle einfügen. Achten Sie darauf, nichts anderes zu löschen / zu ändern.

Zum Glück können Sie ein untergeordnetes Thema erstellen, um Ihre Datei functions.php sicher zu bearbeiten. Darüber hinaus können Sie alle benutzerdefinierten Änderungen in der Datei beibehalten, falls Sie Ihr Thema jemals ersetzen oder aktualisieren. Hier ist ein großartiger Artikel, in dem erklärt wird, wie ein untergeordnetes Thema erstellt wird. Wenn Sie ein untergeordnetes Thema erstellt haben, fügen Sie einfach das Code-Snippet in die Datei function.php des Kindes ein, speichern Sie es und alles ist fertig.

Lesen Sie mehr: Nachrichtenblockierung ist aktiv

5. Passen Sie Ihren Code manuell an

Dies mag beängstigend klingen, insbesondere wenn Sie nicht gerne codieren, aber für fortgeschrittene Benutzer ist das manuelle Optimieren des Codes eine gute Möglichkeit, das Parsen von JavaScript-Dateien in WordPress zu verschieben. 

Varvi verfügt über ein großartiges Code-Snippet, mit dem der ursprüngliche Inhalt Ihrer Webseite vollständig geladen werden kann, bevor andere externe Skripte geladen werden. Das Code-Snippet ist unten:

  Funktion downloadJSAtOnload () {
    var element = document.createElement ("script");
    element.src = "//www.yourdomain.com/defer.js";
    document.body.appendChild (Element);
  }
  if (window.addEventListener)
    window.addEventListener ("load", downloadJSAtOnload, false);
  sonst wenn (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  sonst window.onload = downloadJSAtOnload;

Ersetzen Sie defer.js durch Ihre eigene Skriptdatei. Wenn Sie es so bearbeitet haben, dass es Ihr eigenes Skript widerspiegelt, fügen Sie es direkt vor Ihren HTML-Codes ein Etikett. In WordPress können Sie dies tun, indem Sie die Datei footer.php Ihres Themas bearbeiten.

Auch hier wird empfohlen, ein untergeordnetes Thema zu verwenden, wenn Sie Änderungen in Ihren Designdateien erstellen möchten. Ein kleiner Hinweis: Das Bearbeiten von footer.php über ein untergeordnetes Thema unterscheidet sich von functions.php: Sie müssen die gesamte footer.php Ihres Hauptthemas zusammen mit dem Inhalt in Ihr untergeordnetes Thema kopieren und dann die Änderungen vornehmen / hinzufügen. 

Wenn Sie sich nicht die Mühe machen möchten, Ihre footer.php zu bearbeiten, können Sie ein Plugin namens verwenden Kopf- und Fußzeilen einfügen. 

Fügen Sie einfach das Code-Snippet in das Feld "Skripte in der Fußzeile" ein, klicken Sie auf Speichern, und das Skript wird im unteren Bereich des Codes Ihrer Site über dem Feld hinzugefügt Etikett. 

Auf diese Weise können Sie das Parsen von JavaScript in WordPress verschieben! Aber arbeiten sie? Haben sie die Leistung Ihrer Website verbessert? Lassen Sie uns die Ergebnisse überprüfen!

Testen der Ergebnisse

Um die Ergebnisse zu testen, rufen Sie GTMetrix.com, PageSpeed ​​Insights und Pingdom Tools auf, um festzustellen, ob sich Ihr Leistungsgrad und Ihre Ladezeit verbessert haben.

In GTMetrix sollte Ihre Punktzahl mindestens 71 betragen. Je mehr desto besser! Eine perfekte Punktzahl würde dies mögen :-) 

Suchen Sie in PageSpeed ​​Insights nach „ersten Farben“:

Wenn Sie testen, ob Ihre Implementierung des verzögerten Parsens von JavaScript dazu geführt hat, dass die Skripte verzögert wurden, sollten Sie im Allgemeinen grüne Ergebnisse in First Contentful Paint und First Meaningful Paint anstreben.

Vergleichen Sie vor und nach dem Aufschieben und prüfen Sie, ob sie sich verbessern.

Sehen Sie sich für Pingdom Tools im Abschnitt Ladereihenfolge an, ob die meisten, wenn nicht alle Ihrer Skriptdateien zuletzt geladen wurden. Vergleichen Sie vor und nach dem Aufschieben und achten Sie darauf, ob die Position der Skriptdateien in der Ladereihenfolge geändert wurde (dh ob sie früher oder später geladen wurden). 

Haben Sie die Ergebnisse zufriedengestellt? Wenn ja, tolle Arbeit! Wenn nicht, experimentieren Sie mehr. Wenn Sie andere Methoden in unserer Liste verwendet haben, versuchen Sie, erweiterte Plugins zu verwenden, mit denen Sie Ihre Verzögerungs- und Leistungsoptionen weiter anpassen können. Lesen Sie außerdem im nächsten Abschnitt einige Empfehlungen von Google. Sie könnten dir helfen.

So verschieben Sie das Parsen von JavaScript mithilfe eines Skripts

Es gibt verschiedene Techniken, mit denen Sie das Parsen von JavaScript verschieben können. Im nächsten Abschnitt wird erläutert, was Sie tun müssen. 

Zusammenfassend müssen Sie Folgendes ausführen:

1. Kopieren Sie den folgenden Code und fügen Sie ihn kurz vor dem hinzu Tag in Ihrem HTML.
2. Ersetzen Sie example.js im folgenden Code durch die Datei, die das zu verschiebende Skript enthält.
3. Speichern Sie die Änderungen.
4. Testen Sie Ihre Website, um den Effekt zu sehen.

Schauen wir uns diese Schritte genauer an:

• Verwenden Sie ein Skript, um eine externe JS-Datei aufzurufen, sobald die erste Seite geladen ist. Auf varvy.com schlägt Patrick Sexton eine Methode vor, mit der der Inhalt der Website vor dem Laden eines JS geladen werden kann (um sicherzustellen, dass der Benutzer den Inhalt zuerst sehen kann). Dadurch wird sichergestellt, dass der kritische Ladepfad nicht von Skripten beeinflusst wird, die eine Renderblockierung verursachen. Bei dieser Methode wird eine externe Datei erstellt, die für die anfängliche Anzeige des Inhalts nicht erforderlich ist. Fügen Sie dann das folgende Skript kurz vor dem hinzu im HTML. Im folgenden Beispiel wird eine Datei example.js verwendet, die entsprechend aktualisiert werden müsste. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.js";
          document.body.appendChild(element);
      }
      if (window.addEventListener)
          window.addEventListener("load", downloadJSAtOnload, false);
      else if (window.attachEvent)
          window.attachEvent("onload", downloadJSAtOnload);
      else window.onload = downloadJSAtOnload;
  </script>

  Sobald das Laden der Webseite abgeschlossen ist, beginnt das Skript mit dem Herunterladen und Ausführen beispiel.js - Das Problem ist, dass Sie die Datei manuell erstellen müssen.

• Verwenden der asynchronen oder verzögerten Attribute. Das JS-Tag async or verschieben Attribute verhalten sich ähnlich - sie funktionieren so, dass sie die Zeit minimieren, in der die HTML-Analyse stoppt, um auf das Herunterladen und Ausführen von Skripten zu warten. Asynchron Ermöglicht das Herunterladen von JS-Dateien asynchron und nicht synchron, dh es wird ein neuer Thread zum Herunterladen geöffnet, während HTML weiter analysiert wird. Defer weist den Browser an, das Skript auszuführen, nachdem das Laden der Seite abgeschlossen ist. Dies ist eine weitere Möglichkeit, die Seitenanalyse zu beenden und somit keine Auswirkungen auf die Ladezeit zu haben. Beide Tags minimieren das Rendern von JS. Bei Verwendung dieser beiden Funktionen muss der JS nicht warten, bis der HTML-Code fertig ist, bevor er mit dem Herunterladen oder Ausführen beginnt. Dadurch wird sichergestellt, dass die Seite weiterhin schnell geladen wird. In den folgenden Abbildungen sehen Sie, wie die Ausführung für Async bzw. Defer erfolgt.
  
  

• Verschieben Sie JavaScript an den unteren Rand Ihrer Seite. Der dritte und letzte Vorschlag ist, alle zu verschieben <script> Tags am Ende der Seiten (insbesondere, wenn sie nicht kritisch sind, z. B. Anzeigen). Diese Methode ist nicht ideal, da der Browser noch beschäftigt ist, bis das letzte Skript vollständig heruntergeladen und analysiert wurde. Angesichts der Tatsache, dass der Browser beschäftigt zu sein scheint, können einige Besucher die Seite erst dann aktivieren, wenn sie vollständig geladen ist, was zu einer möglicherweise negativen Benutzererfahrung führt.

Vorschläge von Google

Google verfügt über unzählige Ressourcen zur Verbesserung der Leistung Ihrer Website. Sie haben sogar eine Seite, die sich der Verbesserung der Ladezeit von Skripten auf Ihrer Website widmet und die Sie überprüfen können hier.

Im linken Menü finden Sie auch andere Ressourcen, mit denen Sie die Leistung Ihrer Website verbessern können. Überprüfen Sie sie auch, wenn in Ihrem PageSpeed ​​Insights-Bericht Probleme gemeldet wurden.

Für eine Übersicht schlägt Google vor, dass Sie stattdessen kritische Skripte einbinden und nicht kritische Skripte entweder asynchronisieren oder verschieben. Das bedeutet, dass Skripte, die von Ihrer Site benötigt werden, stattdessen in den HTML-Code eingebettet werden sollten. Dies ist jedoch die Aufgabe der Entwickler von WordPress-Themes und Plugins. Wenn Sie jedoch Ihr Theme oder Plugin erstellen möchten, denken Sie daran.

Lesen Sie mehr:  Wie man (GROSSE) Javascript-Entwickler anstellt

Darüber hinaus hat Google eine Möglichkeit beschrieben, mit der Sie manuell ermitteln können, welches Ihrer Skripte das Rendern Ihrer Webseite blockiert, indem Sie eine sehr lange Ladezeit haben. Sie können dies mit den Dev Tools von Chrome tun. Berichterstattung Tab.

Verschieben Sie nicht verwendetes CSS

Ein ähnliches Problem, das heutzutage möglicherweise auch im Pagespeed Insights-Tool auftritt, ist das Aufschieben von nicht verwendetem CSS. Während dies ein ähnliches Problem ist, sind seine Wurzeln etwas anders. Im Wesentlichen müsste das CSS umstrukturiert werden, um dies korrekt zu beheben.

{loadpostion imh-embed}

Häufig gestellte Fragen

Wie behebe ich das Defer-Parsing von JavaScript in WordPress?

Um das verzögerte Parsen von Javascript in WordPress zu beheben, müssen Sie einige geringfügige Änderungen an Ihrem Code vornehmen. Sie können entweder alle Skripte finden und die hinzufügen verschieben Tag zu ihnen, oder Sie könnten ein Plugin installieren, das dies automatisch tut. Sie können auch ein Skript erstellen, das die Dateien asynchron lädt, wie im Abschnitt So verschieben Sie das Parsen von Javascript mithilfe eines Skriptabschnitts dieses Artikels beschrieben.

Was ist JavaScript zurückstellen?

Beim verzögerten Parsen von Javascript wird der Browser Ihrer Website-Besucher angewiesen, bestimmte Dateien nach dem Laden der Seite zu laden. Auf diese Weise kann der Benutzer den Inhalt der Seite viel schneller sehen, als wenn Sie das verzögerte Parsen von Javascript nicht implementiert hätten

Was ist der Unterschied zwischen asynchronem und zurückgestelltem Javascript?

Async bedeutet, dass der Javascript-Inhalt parallel zu jedem anderen vorhandenen Code als eigene neue Verbindung geladen wird. Mit Async erstellt der Browser einen neuen Verarbeitungsthread, der vorhandene Downloads nicht verlangsamt, während das Javascript heruntergeladen und ausgeführt wird. Aufschieben hingegen fordert den Browser auf, das Skript zu analysieren, nachdem der Rest des Inhalts heruntergeladen wurde. Dies ist normalerweise gut für die Geschwindigkeit, aber es kann einige Probleme mit Ihrem Inhalt geben, wenn es auf das Skript verweist, das zurückgestellt wurde (weil es nicht verfügbar ist).

Wie reduziere ich JavaScript in WordPress?

Um Javascript in WordPress zu minimieren, müssen Sie ein Plugin implementieren, das dies automatisch ausführt. Sie können mehr darüber lesen hier. 

Fazit

Und Sie haben gerade gesehen, wie Sie das Parsen von JavaScript in WordPress verschieben können.

Wir haben gelernt, dass dies entweder über Plugins oder über manuelle Optimierungen erreicht werden kann. Es hat unzählige Vorteile für Ihre Website, wie z. B. verbesserte Suchmaschinenoptimierung, bessere Benutzererfahrung und schnellere Ladezeiten. Es ist daher wichtig sicherzustellen, dass Sie so viele Skripte wie möglich verschieben, um maximale Leistungssteigerungen zu erzielen.

Aber denken Sie daran, führen Sie immer ein Backup und testen Sie viel, um sicherzustellen, dass Sie die richtigen Skripte zurückgestellt haben! Es mag langweilig erscheinen, aber wenn es richtig gemacht wird, sind die Vorteile und Gewinne enorm.

Wenn Sie die Ladegeschwindigkeit Ihrer Website wirklich maximieren möchten, empfehlen wir, sie den PROs wie den Mitarbeitern von WP Rocket zu überlassen, um den maximalen Nutzen aus dieser und Hunderten anderer Aktionen zu ziehen und das Laden Ihrer Website zu beschleunigen.

Besuchen Sie WP Rocket, um Ihre Website noch heute schneller zu gestalten  

Über den Autor

Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/Email: David@collectiveray.com €XNUMX

David ist seit 21 Jahren in der Online- und Digitalbranche tätig. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den damit verbundenen Nischen. Er hat mit Softwareentwicklungsagenturen, internationalen Softwareunternehmen und lokalen Marketingagenturen zusammengearbeitet und ist jetzt Head of Marketing Operations bei Aphex Media – einer SEO-Agentur. Als digitaler Berater liegt sein Fokus darauf, Unternehmen dabei zu helfen, sich durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen. Seine Mischung aus Technologieexpertise gepaart mit ausgeprägtem Geschäftssinn verschafft seinen Schriften einen Wettbewerbsvorteil.