{"id":28475,"date":"2019-10-11T01:07:33","date_gmt":"2019-10-11T08:07:33","guid":{"rendered":"https:\/\/kinsta.com\/?p=54531"},"modified":"2023-08-21T09:03:58","modified_gmt":"2023-08-21T08:03:58","slug":"parsen-von-javascript-verzogert","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/parsen-von-javascript-verzogert\/","title":{"rendered":"Wie man das Parsen von JavaScript in WordPress verz\u00f6gert (4 Methoden)"},"content":{"rendered":"

Hast du deine WordPress-Seite durch ein Leistungstest-Tool<\/a> laufen lassen, nur um eine Anweisung zum Aufschieben des Parsing von JavaScript in WordPress zu erhalten?<\/p>\n

Die Implementierung dieser \u00c4nderung kann sich positiv auf die Seitenladezeiten deiner Website auswirken, insbesondere f\u00fcr mobile Besucher. Aber die Warnung kann ein wenig schwer zu verstehen sein, weshalb wir dir genau erkl\u00e4ren werden, was es bedeutet, das Parsen von JavaScript zu verschieben und wie du diese \u00c4nderung auf deiner WordPress-Website umsetzen kannst.<\/p>\n

Hier ist, was du in diesem Artikel lernen wirst:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Wenn du nur direkt zum Tutorial springen m\u00f6chtest, kannst du auf den letzten Link in der Liste oben klicken.<\/p>\n

<\/a>Was bedeutet es, das Parsen von JavaScript in WordPress zu verschieben?<\/h2>\n

Wenn du jemals deine WordPress-Seite durch Google PageSpeed Insights<\/a>, GTmetrix oder andere Tools zum Testen der Seitengeschwindigkeit ausgef\u00fchrt hast, bist du wahrscheinlich auf den Vorschlag gesto\u00dfen, das Parsen von JavaScript zu verschieben.<\/p>\n

Aber…. was bedeutet das eigentlich? Und warum ist es eine wichtige Leistungsbetrachtung?<\/p>\n

Grunds\u00e4tzlich, wenn jemand deine WordPress-Seite<\/a> besucht, liefert der Server deiner Seite die HTML-Inhalte deiner Website an den Browser dieses Besuchers.<\/p>\n

Der Browser des Besuchers beginnt dann oben und geht durch den Code, um deine Seite darzustellen. Wenn es beim Wechsel von oben nach unten JavaScript findet, stoppt es das Rendern des Restes der Seite, bis es die JavaScript-Datei holen und analysieren kann.<\/p>\n

Es wird dies f\u00fcr jedes gefundene Skript tun, was sich negativ auf die Ladezeiten deiner Seite auswirken kann, da der Besucher auf einen leeren Bildschirm starren muss, w\u00e4hrend sein Browser das gesamte JavaScript herunterl\u00e4dt und analysiert.<\/p>\n

Wenn ein bestimmtes Skript f\u00fcr die Kernfunktion deiner Website nicht notwendig ist (zumindest beim Laden der ersten Seite), willst du nicht, dass es dem Laden wichtigerer Teile deiner Website im Weg steht, weshalb diese Tools zum Testen der Seitengeschwindigkeit<\/a> dir immer sagen, dass du das Parsen von JavaScript verschieben sollst.<\/p>\n

Was bedeutet es also, das Parsen von JavaScript zu verschieben?<\/p>\n

Im Wesentlichen wird deine Website den Browsern der Besucher sagen, dass sie mit dem Herunterladen und\/oder Parsen von JavaScript warten m\u00fcssen, bis der Hauptinhalt deiner Website bereits fertig geladen ist. Zu diesem Zeitpunkt k\u00f6nnen Besucher deine Seite bereits sehen und mit ihr interagieren, so dass die Wartezeiten f\u00fcr das Herunterladen und Analysieren, dass JavaScript keine so negativen Auswirkungen mehr hat.<\/p>\n

Indem du die Ladezeiten deiner Inhalte above the fold hinaus beschleunigst<\/a>, machst du Google gl\u00fccklich und schaffst ein besseres, schnelleres Erlebnis f\u00fcr deine Besucher.<\/p>\n

<\/a>Wie man feststellt ob man das Parsen von Java Script verz\u00f6gern muss<\/h2>\n

Um zu testen, ob deine WordPress-Seite das Parsen von JavaScript verz\u00f6gern muss, kannst du deine Website \u00fcber GTmetrix<\/a> ausf\u00fchren.<\/p>\n

GTmetrix gibt dir eine Note und listet auch bestimmte Skripte auf, die verschoben werden m\u00fcssen:<\/p>\n

\"Defer
Defer Parsing von JavaScript Test in GTmetrix<\/figcaption><\/figure>\n

<\/a>Die verschiedenen Methoden zum Aufschieben des Parsing von JavaScript<\/h2>\n

Es gibt einige verschiedene M\u00f6glichkeiten, das Parsen von JavaScript zu verz\u00f6gern. Erstens gibt es zwei Attribute<\/a>, die du deinen Skripten hinzuf\u00fcgen kannst:<\/p>\n

    \n
  1. Async<\/li>\n
  2. Defer<\/li>\n<\/ol>\n

    Mit beiden Attributen k\u00f6nnen Browser von Besuchern JavaScript herunterladen, ohne das HTML-Parsing anzuhalten. Der Unterschied besteht jedoch darin, dass async<\/strong> das HTML-Parsing nicht pausiert, um das Skript zu holen (wie es das Standardverhalten tun w\u00fcrde), sondern den HTML-Parser pausiert, um das Skript auszuf\u00fchren, sobald es abgerufen wurde.<\/p>\n

    Mit defer<\/strong> laden die Browser der Besucher die Skripte weiterhin herunter, w\u00e4hrend sie das HTML analysieren, aber sie warten mit dem Parsen des Skripts, bis das HTML-Parsing abgeschlossen ist.<\/p>\n

    Diese Grafik von Growing with the Web<\/a> macht es sehr gut, den Unterschied zu erkl\u00e4ren:<\/p>\n

    \"Grafik
    Grafik zur Erl\u00e4uterung von Async vs. Delay<\/figcaption><\/figure>\n

    Eine weitere Option, die von Patrick Sexton von Varvy empfohlen wird, verwendet ein Skript, um eine externe JavaScript-Datei erst dann aufzurufen, wenn das Laden der ersten Seite abgeschlossen ist. Das bedeutet, dass die Browser der Besucher kein JavaScript herunterladen oder ausf\u00fchren, bis das Laden der ersten Seite abgeschlossen ist.<\/p>\n

    Schlie\u00dflich ist ein weiterer Ansatz, den du sehen wirst, dein JavaScript einfach an den unteren Rand der Seite zu verschieben. Diese Methode ist jedoch keine gute L\u00f6sung, da, obwohl deine Seite fr\u00fcher sichtbar ist, die Browser der Besucher die Seite immer noch als geladen anzeigen, bis alle Skripte fertig sind. Dies k\u00f6nnte einige Besucher davon abhalten, mit deiner Seite zu interagieren, weil sie denken, dass der Inhalt nicht vollst\u00e4ndig geladen ist.<\/p>\n

    <\/a>Wie man das Parsen von JavaScript in WordPress verz\u00f6gert (4 Methoden)<\/h2>\n

    Um das Parsen von JavaScript in WordPress zu verz\u00f6gern, gibt es drei Hauptwege, die du nehmen kannst:<\/p>\n