Scripts Aktions-abhängig laden, z.B. wenn ein Button geklickt wird

Für WordPress und natürlich andere CMS gibt es tausende Plugins und viele davon laden eigene Scripts und Styles bei euch im Frontend. Die Anzahl und vor allem die Größe kann eure Website-Performance massiv beeinträchtigen. Wie man Plugins dazu bringt, Scripts & Styles nur zu laden, wenn sie wirklich notwendig sind, habe ich euch bereits gezeigt.

Es gibt aber Elemente z.B. Share-Buttons oder Autosuggest-Suchen die sind auf jeder Seite vertreten, werden aber nur bei einem Bruchteil der Seitenaufrufe wirklich von Nutzer genutzt. Nur, wenn der User den Beitrag teilen möchte oder eine Suche eintippt.

Ziel ist es an dieser Stelle das benötigte Script erst zu laden, wenn man sich sehr sicher ist, dass der Nutzer die Aktion ausführen will. Im Idealfall muss der User vorher auf einen Button klicken aber auch wenn der User mit der Maus über dem Suchfeld oder Button schwebt, kann als Auslöser herangezogen werden.

Das Aktions-abhängige Nachladen muss man allerdings immer manuell implementieren und ist es nicht ganz einfach. Sicherlich eher am Ende der Optimierungskette anzusiedeln, wenn ihr alle anderen Performanceoptimierungen bereits umgesetzt habt.

Anhand der Autosuggest-Suche von dem ElasticPress-Plugin, zeige ich euch wie es funktionieren kann. In der Praxis könnt ihr eine Demo auf Travel-Dealz.de finden. Klickt dafür auf die Lupe oben rechts, um eine Suche zu starten.

Voraussetzungen

• Im Idealfall integriert ihr die Funktion in euer Theme. Entweder euer eigenes Theme oder ihr benötigt auf jeden Fall ein Child Theme.
• Problematisch aber nicht unmöglich sind außerdem Scripts die Abhängigkeiten besitzen z.B. jQuery.

1. Dequeue Script

Damit das Script nicht von WordPress geladen wird, solltet ihr es aus der Warteschlange zur Einbindung nehmen. Dafür müsst ihr auch, möglichst als letztes, in die Aktion wp_enqueue_scripts einhängen und mithilfe der wp_dequeue_script Funktion das entsprechende Script anhand des Handler aus der Warteschlange nehmen:

function my_theme_remove_script() {
	wp_dequeue_script( 'elasticpress-autosuggest' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_remove_script', 100 );Code-Sprache: JavaScript (javascript)

2. Aktion definieren

Als Nächstes benötigen wir einen Auslöser. Im besten Fall ist das ein Button, der das Suchfeld öffnet. In meinem Fall in einem Dialog-Popup. Zusätzlich empfehle ich aber bereits beim Mouseover-Event die Scripts zu laden.

<button onclick="openSearchDialog()" onmouseover="loadAutosuggest()" name="<?php _e( 'Search' ); ?>"><?php _e( 'Search' ); ?></button>Code-Sprache: HTML, XML (xml)

Wenn ihr das Suchfeld sichtbar eingebunden habt, könnt ihr das Focus-Event verwenden:

<input type="text" name="s" id="s" placeholder="<?php _e( 'Search' ); ?> ..." autocomplete="off" onfocus="loadAutosuggest()">
Code-Sprache: HTML, XML (xml)

Allerdings kann es in diesem Fall zu einem verlieren der Texteingabe oder des Fokus kommen, was den Nutzer sehr irritieren kann. Ideal ist das leider nicht.

3. Script laden

Die loadAutosuggest-Funktion macht eigentlich genau das, was wir Serverseitig verhindert haben. Sie fügt am Ende des Bodys ein Script-Element für das Autosuggest-Script hinzu. Anschließend lädt der Browser die Datei vom Server.

function loadAutosuggest() {
	if (!document.getElementById('elasticpress-autosuggest-script')) {
		var elasticpress = document.createElement('script');
		elasticpress.setAttribute('id', 'elasticpress-autosuggest-script');
		elasticpress.setAttribute('src', '<?php echo EP_URL ?? ''; ?>/dist/js/autosuggest-script.min.js?ver=<?php echo EP_VERSION ?? ''; ?>');
		document.body.appendChild(elasticpress);
	}
}Code-Sprache: PHP (php)

Es ist allerdings etwas tricky den richtigen Pfad zur .js-Datei zu finden. Bei ElasticPress haben wir Glück und sowohl die URL EP_URL als auch die Version EP_VERSION (zum Cache Busting bei einer neuen Version), steht als Konstante zur Verfügung. Wenn ihr das so verwendet, solltet ihr aber immer prüfen, ob die Konstante auch wirklich verfügbar ist. Sonst kann es eine Fehlermeldung geben, z.B. wenn ihr hier das ElasticPress-Plugin deaktiviert.

Damit das Script nicht bei jedem weiteren Klick auf dem Button oder Mouseover erneut geladen wird, solltet ihr eurer Script-Element mit einer ID ausstatten und überprüfen, ob diese ID bereits im document vorhanden ist.

Tipp: Wenn ihr Glück habt, ist beim Klick des Buttons durch das Mouseover-Event das Script bereits geladen und ihr könnt in der Funktion, die den Dialog öffnet, auch direkt den Fokus in das Suchfeld setzten.

function openSearchDialog() {
	loadAutosuggest()
	openDialog(document.getElementById('search-dialog'));
	document.querySelector('#search-dialog #s').focus();
}Code-Sprache: Java (java)

Auch wenn das Script bereits beim Mouseover-Event geladen wird, empfiehlt es sich beim Click-Event erneut zu überprüfen, ob das Script bereits geladen worden ist. Bei Smartphones/Tablets gibt es i.d.R. keine Maus und damit wird das Mouseover-Event nicht ausgelöst.

4. Zusammensetzen

Zusammengesetzt (ohne den Suchdialog) sieht das wie folgt aus:

<button onclick="openSearchDialog()" onmouseover="loadAutosuggest()" name="<?php _e( 'Search' ); ?>"><?php _e( 'Search' ); ?></button>
<script>
	function loadAutosuggest() {
		if (!document.getElementById('elasticpress-autosuggest-script')) {
			var elasticpress = document.createElement('script');
			elasticpress.setAttribute('id', 'elasticpress-autosuggest-script');
			elasticpress.setAttribute('src', '<?php echo EP_URL ?? ''; ?>/dist/js/autosuggest-script.min.js?ver=<?php echo EP_VERSION ?? ''; ?>');
			document.body.appendChild(elasticpress);
		}
	}
	function openSearchDialog() {
		loadAutosuggest()
		openDialog(document.getElementById('search-dialog'));
		document.querySelector('#search-dialog #s').focus();
	}
</script>Code-Sprache: HTML, XML (xml)

Ich habe den Javascript-Teil direkt Inline eingebunden. Wenn ihr für euer Theme aber eine eigene Javascript-Datei ladet, könnt ihr das natürlich auch dort einbinden.

Fazit

Funktionen wie eine Autosuggest-Suche, sind sehr nutzerfreundlich, werden aber halt nur bei einem Bruchteil der gesamten Seitenaufrufe genutzt. Wenn jedes Mal das Script geladen und gerendert wird kann das viel Ladezeit kosten. Diesen Nachteil können wir durch das bedarfsgerechte Nachladen verhindern.