Bestimmte Skripte und Style­sheets inline einbinden

Performance-Optimierungstools wie PageSpeed Insights empfehlen, JavaScript-Code, der kritisch für die Funktion der Website ist und so schnell wie möglich ausgeführt werden muss, inline zu laden. Und auch bei JS- und/oder CSS-Dateien mit sehr wenig Code kann es sinnvoll sein, den Code inline einzufügen statt eine externe Datei laden zu müssen (wenn Sie die Dateien nicht lieber zu einer etwas größeren zusammenfassen möchten).

Das sind zugegebenermaßen etwas konstruierte Fälle, aber aus Gründen habe ich mich mit dem Thema beschäftigt und nach einer Lösung gesucht, wie in WordPress als externe Dateien eingebundene Skripte oder Stylesheets so angepasst werden können, dass sie inline geladen werden.

Sowohl für Skripte als auch Stylesheets ist das Vorgehen recht ähnlich:

1. Ich hänge mich an den Action-Hook, der vor der Ausgabe ausgeführt wird (wp_print_scripts und wp_print_styles).
2. Anschließend durchsuche ich die registrierten Skripte beziehungsweise Styles nach den Einträgen, die ich inline laden möchte.
3. Ist der Eintrag gefunden, entferne ich die Ressourcen mit wp_deregister_script()/wp_deregister_style().
4. Danach registriere ich sie mit dem Wert false für die Skript-/Stylesheet-URL neu (alle anderen Werte werden gesetzt, wie bei der initialen Registrierung), was dazu führt, dass Skripte und Stylesheets, die den Eintrag als Abhängigkeit gesetzt haben, weiter geladen werden, aber das neu registrierte Skript/Stylesheet nicht.
5. Ich füge mit wp_add_inline_script() beziehungsweise wp_add_inline_style() den Inhalt der Datei inline ein und gebe als Abhängigkeit die neu registrierte Ressource mit, damit die Position im Quellcode stimmt.

Nachfolgend sehr ihr den Code. Beispielhaft wird das Skript mit dem Handle lazysizes inline eingebunden und das Stylesheet mit dem Handle wp-block-navigation. In das Array könnt ihr die Handles der Skripte/Stylesheets schreiben, die ihr inline laden möchtet.

add_action( 'wp_print_scripts', function() {
	global $wp_scripts;
	$scripts_to_inline = [
		'lazysizes'
	];

	foreach ( $scripts_to_inline as $handle ) {
		$dependeny_object = $wp_scripts->registered[ $handle ] ?? null;
		if ( ! $dependeny_object ) {
			continue;
		}

		$src = 0 === strpos( $dependeny_object->src, '/' ) ? ABSPATH . $dependeny_object->src : $dependeny_object->src;
		$file_content = file_get_contents( $src );

		if ( ! $file_content ) {
			continue;
		}

		$in_footer = (bool) $dependeny_object->extra['group'] ?? false;

		wp_deregister_script( $handle );
		wp_register_script( $dependeny_object->handle, false, $dependeny_object->deps, $dependeny_object->ver, $in_footer );
		wp_add_inline_script( $dependeny_object->handle, $file_content );
	}
} );

add_action( 'wp_print_styles', function() {
	global $wp_styles;
	$styles_to_inline = [
		'wp-block-navigation',
	];

	foreach ( $styles_to_inline as $handle ) {
		$dependeny_object = $wp_styles->registered[ $handle ] ?? null;
		if ( ! $dependeny_object ) {
			continue;
		}

		$file_content = file_get_contents( $dependeny_object->src );

		if ( ! $file_content ) {
			continue;
		}

		wp_deregister_style( $handle );
		wp_register_style( $dependeny_object->handle, false, $dependeny_object->deps, $dependeny_object->ver, $dependeny_object->args );
		wp_add_inline_style( $dependeny_object->handle, $file_content );
	}
} );
Code-Sprache: PHP (php)