PageSpeed Insights und WordPress: „Verwendet keine passiven Listener zur Verbesserung der Scrollleistung“

Wenn es will, kann WordPress durchaus flink sein. Wenn du ein geeignetes Theme verwendest, ist sogar PageSpeed Insights beinahe zufrieden. Eine Meldung, die du vielleicht erhältst und nicht so einfach weg bekommst, ist folgende:

Verwendet keine passiven Listener zur Verbesserung der Scrollleistung

Wenn du deine Event-Listener für Tipp- und Mausradbewegungen als passive markierst, kannst du damit die Scrollleistung deiner Seite verbessern.

Quelle:
…js/comment-reply.min.js?ver=X.X.X:Y:ZZZ

Wie behebe ich das?

Um es kurz zu machen: Dieser Hinweis kann mit ein paar Zeilen Quellcode behoben werden. Diese können entweder in einem Plugin hinterlegt werden oder in der functions.php deines Themes (dann aber bitte im Child Theme, Updatesicherheit und so weiter). Füge diesen Code also an geeigneter Stelle ein:

add_action('init', function() {
	wp_deregister_script('comment-reply');
});

add_action('wp_footer', function() {
	$code = <<<'EOF'
	<script>
	// Function checks if a given script is already loaded
	function fixPagespeed_isScriptLoaded(src) {
		return document.querySelector('script[src="' + src + '"]') ? true : false;
	}
	 
	// When a reply link is clicked, check if reply-script is loaded. If not, load it and emulate the click
	var fixPagespeed_commentReplyLink = document.querySelector('.comment-reply-link');
	if(fixPagespeed_commentReplyLink != null) {
		fixPagespeed_commentReplyLink.addEventListener('click', function(event) {
			if(!(fixPagespeed_isScriptLoaded("/wp-includes/js/comment-reply.min.js"))) {
				var script = document.createElement('script');
				script.src = "/wp-includes/js/comment-reply.min.js"; 
				script.onload = fixPagespeed_emRepClick(this.getAttribute('data-commentid'));
				document.head.appendChild(script);
			} 
		});
	}

	// Function waits 50 ms before it emulates a click on the relevant reply link now that the reply script is loaded
	function fixPagespeed_emRepClick(comId) {
		fixPagespeed_sleep(50).then(() => {
			document.querySelectorAll('[data-commentid="'+comId+'"]')[0].dispatchEvent(new Event('click'));
		});
	}
	// Function does nothing, for a given amount of time
	function fixPagespeed_sleep(time) {
		return new Promise((resolve) => setTimeout(resolve, time));
	}
	</script>
EOF;

	echo $code;
});

Worauf will PageSpeed hinaus?

Achtung, es wird technisch. Dein Browser ist in der Lage, bestimmte Ereignisse abzufangen. Diese Ereignisse heißen „Event“. Derer gibt es sehr viele, manche kümmern sich um alle denkbaren Arten des Scrollens, etwa mit dem Mausrad oder indem du die Seite auf einem Touchscreen verschiebst. Scripte haben die Möglichkeit, sich in ein solches Event mit einem „Event Listener“ einzuklinken und können dann tun, was sie für richtig halten.

Mit einem preventDefault() haben die Scripte sogar die Macht, das normale Verhalten zu unterbinden; im Falle eines Scroll-Events also das Scrollen verhindern. Mit einem {passive: true}-Flag kann man dem Browser aber versprechen, dass genau das nicht passieren wird, dass es also kein Problem ist, zu scrollen, wenn der Nutzer das wünscht.

Wie kommt das „Problem“ in mein WordPress?

PageSpeed Insights moniert die Existenz eines nicht passiven Listeners in einem JavaScript von WordPress. Genauer gesagt geht es um verschachtelte Kommentare – also um die Möglichkeit, auf vorhandene Kommentare zu antworten.

Was der Code macht, ist zunächst einmal das automatische Laden des Scripts zu verhindern. Das neue JavaScript stattet den Link zum Antworten auf einen Kommentar mit einem neuen Event aus. Das lädt bei Bedarf (und nur dann) das Script von WordPress nach, wartet 50 Millisekunden und führt dann die Aktion für den Klick aus.

Der größte Teil von dem Code ist von WebProTime – ich habe ihn jedoch ein wenig lesbarer gemacht, ihn um jQuery befreit und die Funktionsnamen mit einem Präfix versehen. Damit keine Kollisionen mit anderen Scripten auftreten, die meinen, eine Funktion sleep() zu nennen, sei eine gute Idee.