Kostenloses WordPress JavaScript Plugin
Frank Goossens hat das kostenlose Async JavaScript-Plugin entwickelt. Sie können das Plugin verwenden, um render-blocking Javascript (JS)-Inhalte oberhalb des Folds zu eliminieren. Es ist kompatibel mit WordPress 4.6 und höher. Sie können es kostenlos in fünf Sprachen herunterladen: Niederländisch, US-Englisch und drei spanische Dialekte.
Diese App gibt Ihnen die vollständige Kontrolle darüber, ob Sie Defer- oder Await-Attribute zu Skripten hinzufügen oder entfernen möchten, und hilft dabei, die Ladezeit der Website zu erhöhen. Andere Plugins, die asynchrones JS-Laden anbieten, sind Lazy Widget Loader und Reverb for Publishers.
Asynchrones Laden erläutert
Normalerweise lädt WordPress Skripte nacheinander. Da es ein Element vollständig laden muss, bevor es das nächste lädt, erhöht es die Gesamt-Ladezeit der Website.
Asynchrones Laden lässt Dateien parallel laden. Entwickler tun dies, indem sie Ihrem Javascript ein async-Attribut oder einem bestimmten Skript ein "defer"-Attribut hinzufügen.
Browser-Unterstützung und CSS
Async ist ein neues Attribut in HTML 5 und funktioniert mit Chrome, Internet Explorer 10 und höher, Firefox 3.6 und höher, Safari und Opera. Es funktioniert nur mit der integrierten WordPress-Skriptwarteschlange.
Ein weiteres nützliches Attribut, das mit async verwendet werden kann, ist await, das für Web-API-Funktionen hilfreich ist. Bitte beachten Sie, dass await nur innerhalb von async-Funktionen funktioniert. Eine bestimmte Bedingung wird festgelegt, und nur wenn diese Bedingung erfüllt ist, wird das Javascript asynchron geladen.
Das Plugin funktioniert nur mit JS und ändert Ihre CSS-Skripte in keiner Weise. Um CSS zu optimieren, benötigen Sie ein dediziertes Plugin für diese Funktionalität.
Website-Leistung steigern
Async JavaScript bietet Website-Besitzern eine Möglichkeit, JavaScript asynchron zu laden oder das Laden bestimmter Skripte zu eliminieren oder zu verzögern, um die Ladezeit der Seite zu verringern. Eine weitere hilfreiche Option ist "await", bei der die Skripte nur geladen werden, wenn eine bestimmte Bedingung erfüllt ist. Await vereinfacht auch das Codieren.
Mit dem neuesten Release hat der Entwickler eine Workaround für bestimmte Inline-JS-Skripte hinzugefügt, die asynchron synchronisiert werden.
