codepalm_editors

JavaScript in WordPress nachladen

 

Optimiere den Aufruf Deiner Webseite mit Async und Defer

 

Wenn Du Deine Webseite schon einmal in Google Pagespeed Insights analysiert hast, wurde Dir bestimmt schon folgende Verbesserung von Google vorgeschlagen:

Google Pagespeed - Ressourcen beseitigen die das Rendering blockieren
 

Ich erkl├Ąre Dir, was der Hinweis "Ressourcen beseitigen, die das Rendering blockieren" bedeutet und wie Du das Rendering Deiner WordPress-Webseite verbesserst. Wenn Du bereits wei├čt, was dieser Hinweis bedeutet, kannst Du Dir den PHP-Code f├╝r Deine Webseite im letzten Teil des Beitrags "Ressourcen beseitigen die das Rendering blockieren in WordPress" kopieren. ├ťber einen Kommentar w├╝rde ich mich sehr freuen, wenn Du zufrieden mit dem Code-Schnipsel bist.

 

Was geschieht beim Aufruf einer Webseite?

 

Stelle Dir vor, Dein Webseiten-Besucher m├Âchte Deine Seite aufrufen. Dein Server sendet bei Erhalt der Anfrage die HTML-Datei, nachdem der PHP-Service alles vorbereitet hat. (Wir gehen mal bei dieser Annahme davon aus, dass du kein Server-Cache installiert hast)

Nun analysiert der Browser die HTML-Datei und sucht alle externen Dateien, wie Bilder, CSS- und JavaScript-Dateien auf dem Server oder auf anderen Quellen heraus. Sofern der Besucher noch nicht auf Deiner Seite war, hat er diese auch noch nicht in seinem Browser-Cache und muss diese beim Server einzeln anfragen.

Der Server sendet nun alle Dateien nacheinander an den Besucher. Nachdem die ersten Dateien beim Benutzer aufschlagen, f├Ąngt der Browser an das DOM zu vervollst├Ąndigen und die Formatierungen auszuf├╝hren. Danach werden noch alle JavaScripte geladen, um auch die Dynamik zur Seite hinzuzuf├╝gen.

(Dieses Beispiel dient nur der Veranschaulichung. Das echte "abholen" von Dateien sieht ein wenig komplexer aus)

Du merkst jetzt wahrscheinlich, dass der Prozess sehr umfangreich ist, bis eine einzelne Seite vollst├Ąndig geladen wurde. Gerade bei gekauften Templates auf Themeforest oder Andere, werden h├Ąufig sehr viele Stile und Skripte ausgef├╝hrt, die das erstmalige Rendering einer Webseite blockieren. Die Template-Hersteller wollen damit nichts b├Âses bezwecken, sondern m├Âglichst viele Anpassungsm├Âglichkeiten f├╝r Deine Webseite zur Verf├╝gung stellen.

 

Einf├╝gen von Skripten in WordPress

 

Wenn Du bereits ein wenig mit WordPress programmiert hast, kennst Du wahrscheinlich die Funktion, um ein neues Skript in Deine Webseite hinzuzuf├╝gen: wp_enqueue_script()

So k├Ânnte Dein Code aussehen:

<?php
	function set_frontend_scripts() {
		wp_register_script( 'custom-script', get_template_directory_uri().'/js/custom.js', array( 'jquery' ) );
		wp_enqueue_script( 'custom-script' );
	}
	add_action( 'wp_enqueue_scripts', 'set_frontend_scripts' );
?>

Mit dieser Funktionen werden Scripte in den wp_head() Bereich geladen. Es k├Ânnen mehrere Einstellungen und Abh├Ąngigkeiten in den Parametern der Funktion hinterlegt werden. Jedoch keinen Parameter, um ein Skript nachzuladen zu lassen.

 

Skripte in HTML nachladen

 

Um ein Script in HTML nachzuladen, werden zum <script>-Tag die Attribute async und defer hinzugef├╝gt.

Das Attribut "async" gibt an, dass ein Script "Asynchron" ausgef├╝hrt werden soll. Das bedeutet nicht, dass der Code in der Datei nacheinander ausgef├╝hrt wird, sondern dass der Code simultan mit beim Laden der Seite ausgef├╝hrt wird.

Das Attribut "defer" gibt an, dass der JavaScript-Code erst ausgef├╝hrt wird, wenn die Seite vollst├Ąndig geladen wurde.

Sollten beide Attribute fehlen, wird der JavaScript sofort ausgef├╝hrt, wenn er geladen wurde. Der Rest des HTML-Codes wird geparst, sobald das JavaScript beendet wurde. Deshalb wei├čt Google immer darauf hin, dass der Analytics-Code am Ende der Seite vor dem schlie├čenden <body>-Tag eingef├╝gt werden soll.

Zudem solltest du beachten, dass die Attribute async und defer nur bei externen Ressourcen funktionieren. Also bei JavaScript-Dateien und nicht bei Inline-Skripten.

Der HTML-Code um ein Skript hinzuzuf├╝gen, dass nachgeladen werden soll, w├╝rde dann zum Beispiel so aussehen:

<script async="async" defer="defer" src="/js/custom.js"></script>
 

Ressourcen beseitigen die das Rendering blockieren in WordPress

 

Wie k├Ânnen wir es also anstellen, dass die Attribute defer und async zum wp_enqueue_script() hinzugef├╝gt werden?

Die kurze Antwort: ├ťber diese Funktion gar nicht.

Es gibt jedoch in WordPress einen Filter, mit dem Skripte gepr├╝ft und bearbeitet werden k├Ânnen, nachdem sie vom Template oder Plugins zur "Pipe" hinzugef├╝gt wurden.

Mit dem script_loader_tag-Filter und einem str_replace() k├Ânnen wir den Output des Skripts nach belieben bearbeiten. Ich habe eine Funktion vorbereitet, die Du Du f├╝r Dein Projekt kopieren und anpassen kannst, um bestimmte Skripte mit den wertvollen defer- und async-Attributen zu versehen.

Aber vorsicht: Es kann sein, dass Skripte durch diese Angaben nicht mehr funktionieren. Teste am besten ein Skript nach dem anderen, ob Deine JavaScripts die Attribute unterst├╝tzen. Im besten Fall verwendest du ein lokales Test-System, also eine Spiegelung Deiner Webseite, auf der Du verschiedene Sachen ausprobieren kannst.

Die nachfolgenden Code-Schnipsel kannst Du in die functions.php Deines Child-Themes hinzuf├╝gen, oder ein eigenes Plugin daf├╝r erstellen.

 

Das Async-Attribut hinzuf├╝gen

<?php
	add_filter( 'script_loader_tag', 'add_async_attribute', 10, 2 );
	function add_async_attribute( $tag, $handle ) {
		$scripts_to_async = array( 'custom-script', 'another-script' );
		
		foreach( $scripts_to_async as $defer_script )
			if( $defer_script === $handle )
				return str_replace( ' src', ' async="async" src', $tag );
		
		return $tag;
	}
?>
 
 

Das Defer-Attribut hinzuf├╝gen

<?php
	add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
	function add_defer_attribute( $tag, $handle ) {
		$scripts_to_defer = array( 'custom-script', 'another-script' );
		
		foreach( $scripts_to_defer as $defer_script )
			if( $defer_script === $handle )
				return str_replace( ' src', ' defer="defer" src', $tag );
		
		return $tag;
	}
?>
 

Kompatibilit├Ąt des Codes

script_loader_tag Ab WordPress 4.1.0
str_replace() Ab PHP 4
async Ab HTML 4
Von allen modernen Browsern unterst├╝tzt:
Async auf CanIUse.com
defer Ab HTML 5
Von allen modernen Browsern unterst├╝tzt:
Defer auf CanIUse.com
 

Nachdem nun die meisten Skripte Deiner Webseite mit Defer oder Async geladen werden, kannst Du erneut mit den Google Pagespeed Insights die blockierenden Ressourcen pr├╝fen. Du solltest feststellen, dass Google zufriedener sein sollte.

Ein letzter Hinweis: Ich habe die Erfahrung gemacht, dass es besser ist jQuery nicht als Defer oder Async zu laden. Au├čerdem gibt es Templates, die keines der beiden Attribute zulassen. Du musst ein wenig testen, um herauszufinden ob die Attribute gesetzt werden k├Ânnen oder nicht.

 

Hast Du schon Erfahrungen mit den Defer- und Async-Attributen gesammelt? Teile Dein Wissen in den Kommentaren.

 

Codepalm
JavaScript in WordPress nachladen
 

Das konnte dich auch interessieren

Abonniere die Fanpage von Codepalm und verpasse keine Beitr├Ąge mehr

Codepalm auf Facebook
 
Verzeichnis
 
 
 

Teile diesen Beitrag

 
Das k├Ânnte Dir gefallen:

Einstieg in Phyton - Ideal f├╝r Programmier-Anf├Ąnger

EUR 24,90

Zu Amazon Mehr erfahren

Kommentare

Sei der Erste, der einen Kommentar erstellt!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht ver├Âffentlicht. Erforderliche Felder sind mit * markiert.

 
 
Secured By miniOrange