Kürzlich fragte uns einer unserer Leser, wie sie JavaScripts in WordPress nach unten verschieben können, um ihren Google Page Speed Score zu erhöhen. Wir sind froh, dass sie gefragt haben, denn ehrlich gesagt wollten wir darüber schreiben. Zuvor haben wir darüber gesprochen, wie man JavaScript und CSS-Styles richtig hinzufügt in WordPress. In diesem Artikel zeigen wir Ihnen, wie Sie JavaScripts in WordPress nach unten verschieben, damit Sie Ihre Ladezeit und Ihren Google Page Speed Score verbessern können.
Vorteile des Verschiebens von JavaScripts nach unten
JavaScript ist eine clientseitige Programmiersprache. Sie wird vom Webbrowser eines Benutzers ausgeführt und nicht von Ihrem Webserver. Wenn Sie JavaScript oben platzieren, können Browser das JavaScript ausführen oder verarbeiten, bevor der Rest Ihrer Seite geladen wird. Wenn JavaScripts nach unten verschoben werden, rendert Ihr Webserver die Seite schnell und der Browser des Benutzers führt dann die JavaScripts aus. Da das gesamte serverseitige Rendering bereits abgeschlossen ist, wird das JavaScript im Hintergrund geladen, was die Gesamtladezeit beschleunigt.
Dies verbessert Ihren Geschwindigkeits-Score bei Tests mit Google Page Speed oder Yslow. Google und andere Suchmaschinen berücksichtigen die Seitenladegeschwindigkeit inzwischen als eine der Leistungsmetriken bei der Anzeige von Suchergebnissen. Das bedeutet, dass Websites, die schneller laden, in den Suchergebnissen prominenter erscheinen werden.
Die richtige Art, Skripte in WordPress hinzuzufügen
WordPress verfügt über ein leistungsstarkes Enqueuing-System, das es Theme- und Plugin-Entwicklern ermöglicht, ihre Skripte in eine Warteschlange einzureihen und sie bei Bedarf zu laden. Das richtige Einreihen von Skripten und Stilen kann die Ladezeit Ihrer Seite erheblich verbessern.
Um Ihnen ein einfaches Beispiel zu zeigen, fügen wir ein wenig JavaScript in ein WordPress-Theme ein. Speichern Sie Ihr JavaScript in einer .js-Datei und legen Sie diese .js-Datei in das js-Verzeichnis Ihres Themes. Wenn Ihr Theme kein Verzeichnis für JavaScripts hat, erstellen Sie eines. Nachdem Sie Ihre Skriptdatei platziert haben, bearbeiten Sie die Datei functions.php Ihres Themes und fügen Sie diesen Code hinzu:
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
In diesem Code haben wir die Funktion wp_register_script() verwendet. Diese Funktion hat die folgenden Parameter:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Um das Skript im Footer oder am Ende einer WordPress-Seite hinzuzufügen, müssen Sie lediglich den Parameter $in_footer auf true setzen.
Wir haben auch eine weitere Funktion get_template_directory_uri() verwendet, die die URL für das Template-Verzeichnis zurückgibt. Diese Funktion sollte zum Einreihen und Registrieren von Skripten und Stilen in WordPress-Themes verwendet werden. Für Plugins werden wir die Funktion plugins_url() verwenden.
Das Problem:
Das Problem ist, dass WordPress-Plugins manchmal ihren eigenen JavaScript-Code zu Seiten innerhalb des <head>-Bereichs oder innerhalb des Seitenkörpers hinzufügen. Um diese Skripte nach unten zu verschieben, müssen Sie Ihre Plugin-Dateien bearbeiten und die Skripte ordnungsgemäß nach unten verschieben.
Die JavaScript-Quelle finden
Öffnen Sie Ihre Website im Webbrowser und zeigen Sie den Seitenquelltext an. Sie sehen den Link zur JavaScript-Datei, der den Speicherort und die Herkunft der Datei angibt. Zum Beispiel zeigt uns der Screenshot unten, dass unser Skript zu einem Plugin namens 'test-plugin101' gehört. Die Skriptdatei befindet sich im Verzeichnis js.
Manchmal sehen Sie JavaScript, das direkt in die Seite eingefügt wird und nicht über eine separate .js-Datei verlinkt ist. In diesem Fall müssten Sie alle Ihre Plugins einzeln deaktivieren. Aktualisieren Sie die Seite nach dem Deaktivieren jedes Plugins, bis Sie dasjenige gefunden haben, das das Skript zu Ihren Seiten hinzufügt. Wenn das JavaScript auch nach dem Deaktivieren aller Plugins nicht verschwindet, versuchen Sie, zu einem anderen Theme zu wechseln, um zu sehen, ob das JavaScript von Ihrem Theme hinzugefügt wird.
Skripte registrieren und einreihen
Sobald Sie das Plugin oder Theme gefunden haben, das JavaScript im Kopfbereich hinzufügt, besteht der nächste Schritt darin, herauszufinden, wo das Plugin die Datei aufruft. In einer der PHP-Dateien Ihres Themes oder Plugins sehen Sie einen Aufruf zu dieser speziellen .js-Datei.
Wenn das Plugin oder Theme bereits JavaScript-Dateien über enqueuing hinzufügt, müssen Sie nur die Funktion wp_register_script in Ihrem Plugin oder Theme ändern und für den Parameter $in_footer true hinzufügen. So:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Nehmen wir an, Ihr Plugin oder Theme fügt rohes JavaScript im Header oder zwischen dem Inhalt hinzu. Suchen Sie den rohen JavaScript-Code in den Plugin- oder Theme-Dateien, kopieren Sie das JavaScript und speichern Sie es in einer .js-Datei. Verwenden Sie dann die Funktion wp_register_script() wie oben gezeigt, um JavaScript nach unten zu verschieben.
Anmerkung der Redaktion: Es ist wichtig zu verstehen, dass Ihre Änderungen nicht überschrieben werden, wenn Sie Änderungen an den Kerndateien vornehmen und das Plugin aktualisieren. Ein besserer Weg wäre, das Skript zu deregistrieren und es aus der functions.php-Datei Ihres Themes neu zu registrieren. Siehe dieses Tutorial.
Abgesehen davon, die Skripte in den Footer zu verschieben, sollten Sie auch ein schnelleres Social-Media-Plugin und Lazy Load für Bilder in Betracht ziehen. Darüber hinaus sollten Sie auch W3 Total Cache und MaxCDN verwenden, um die Geschwindigkeit Ihrer Website zu verbessern.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, JavaScripts in WordPress nach unten zu verschieben und Ihre Seiten-Geschwindigkeit zu verbessern. Für Fragen und Feedback hinterlassen Sie bitte einen Kommentar unten.
Ravi
Werden meine Plugins normal aktualisiert, wenn ich ihre JS-Dateien in eine einzige Datei verschiebe? Ich bin ein Anfänger.
WPBeginner-Mitarbeiter
Es gibt mehrere Möglichkeiten, dies zu tun. Eine der gebräuchlichsten ist, JavaScript-Dateien, die von verschiedenen Quellen geladen werden, in einer einzigen JS-Datei zusammenzufassen und diese dann einzureihen.
Catharine
Großartig, danke!
Catharine
Hallo Syed, danke für das Tutorial. Ich bin jedoch ein absoluter Neuling und habe eine sehr grundlegende Frage. Für diesen Codeausschnitt, den du gepostet hast (die gesamte Funktion usw.), müssen wir das für jedes einzelne Stück JavaScript, das wir enqueuen wollen, in die functions.php-Datei einfügen? Ich glaube, meine Frage ist, wie würdest du diesen Code formatieren, wenn du mehr als ein Stück JavaScript hättest, das in den Headern von mehr als einer Seite geladen wird?
Deine Hilfe wäre sehr willkommen!
Marc Jacobs
Hallo, tolles Tutorial. Ich habe jedoch eine Frage. Ich habe meine Website durch Google Page Speed Insights laufen lassen und die Warnung erhalten, dass ich render-blocking JavaScript (und CSS) eliminieren muss, um meine Seitengeschwindigkeit zu erhöhen. Ich habe die Informationen auf dieser Website gelesen (tolle Lektüre!), aber ich kann die PHP-Dateien nicht finden, in denen das Plugin die JS-Dateien „aufruft“, die meine Website langsam machen. Ich habe herausgefunden, welches Plugin die meiste Verzögerung verursacht (Google-maps-ready), aber ich habe keine Ahnung, wie ich von dort aus weitermachen soll. Ich habe jede PHP-Datei im Plugin-Ordner durchsucht, aber keine JS-Datei gefunden, die auch nur annähernd ähnlich wie die im Google-Geschwindigkeitstest genannten Dateien benannt ist:
...
Wie finde ich heraus, welche PHP-Datei ich bearbeiten muss? Hilfe wäre sehr willkommen!
Gruß,
Marc.
WPBeginner Support
Ein Plugin auf Ihrer Website namens Google Maps Ready fügt diese Dateien hinzu.
Admin
Basavaraj Tonagatti
Hallo, ich bin kürzlich auf das Genesis Framework + Eleven 40 Child Theme umgestiegen. Ich habe auch das gleiche Problem, wenn ich den Google Page Speed Test ausführe. Da ich aber nicht genau weiß, wie ich vorgehen soll, fällt es mir schwer, Änderungen vorzunehmen. Kann mir jemand sagen, was genau die Ursache auf meiner Website ist und wie ich dieses JavaScript-Problem beheben kann? (Ich kenne keine Styling-Sprachen und bin mit diesen Codesprachen völlig unbekannt.)
Joseph Stanley-Hunt
Vielen Dank, ich habe mich gefragt, wie das geht und einige andere Tricks (für die ich hier auch Antworten gefunden habe).
Eine Frage, ich sehe, dass es keine in-head-Parameter gibt. Bedeutet das, dass wenn in_footer auf false gesetzt ist, es automatisch im Kopfbereich registriert wird?
WPBeginner Support
Ja, der Standardwert für in_footer ist false. Sie müssen also explizit in_footer auf true setzen, sonst erscheint es im Kopfbereich.
Admin
Mike
Das Plugin-Update kam mir auch sofort in den Sinn. Ich freue mich auf weitere Ratschläge dazu.
Jason
Toller Artikel! Ich stelle diese Fragen schon lange, weil so viele Themes bei Googls Geschwindigkeitstest wegen zuerst geladener Java-Skripte bestraft werden. Vielleicht wissen andere, wie man diese Skripte in den Footer einfügt.
Nochmals vielen Dank und ich werde das ausprobieren und Ihnen sagen, wie es funktioniert.
Jeremy Myers
Tolles Tutorial.
Aber sobald wir das Plugin aktualisieren, müssen wir das wieder tun, richtig? Und jedes Mal, wenn das Plugin aktualisiert wird?
Ist es möglich, das js in functions.php zu deregistrieren und es dann einfach irgendwie im Footer neu zu registrieren?
adam
Hallo, danke für diese nützlichen Tipps. Aber, wie verschiebt man .js von W3 Total Cache Minify in den Head?
Das ist der js-Speicherort im Cache in wp-content, nicht im wp-Plugin.
Lucca
Danke für das wertvolle Wissen – machen Sie weiter so mit exzellenter Arbeit.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Guter Tipp. Danke fürs Teilen!