JavaScript Effizienz & Caching für WordPress Websites in 2021 – WordPress Optimierung Teil 3

Node² > Blog > WordPress > WordPress Optimierung > JavaScript Effizienz & Caching für WordPress Websites in 2021 – WordPress Optimierung Teil 3

Die Optimierung der JavaScript-Implementierung verhindert eine Verlangsamung der Ladezeit Ihrer Website. Der Einfluss von JavaScript selbst ist genau wie bei der CSS-Optimierung eher gering einzuschätzen. Dennoch sollte eine Optimierung alle Bereiche abdecken, um Ihre Homepage so schnell wie möglich zu machen. Wir kommen zu Schritt 3 unserer Reihe über WordPress Ladezeitoptimierung.

Im Folgenden werden wir außerdem Wege aufzeigen, wie Sie die Plugin-Datenmenge geringhalten und Server-Caching in Ihre WordPress-Website implementieren.

1. Server Side Optimierung von JavaScript

1.1 Minifizierung and Dateiaggregation

Wie in unserem vorherigen Post, Schritt 2 der Ladezeitoptimierung, benutzen wir das Autoptimize Plugin um die JavaScript-Dateien zu optimieren.
Dazu wählen wir folgende Einstellungen aus:

  • JavaScript-Code optimieren
  • JS-Dateien zusammenfügen
  • Auch Inline-JS zusammenfügen
Ausgewählte JavaScript-Optionen

Die Optionen sorgen dafpr, dass JavaScript komprimiert und Seite für Seite zu einer verkleinerten Datei verdichtet wird. dadurch wird der Ladeaufwand insgesamt verringert und die Ladezeiten somit verkürzt.

Wir erhalten eine verkleinerte aggregierte Multi-Ressourcendatei

1.2 HTML komprimieren

Oft übersehen wird eine weitere sinnvolle Option, die kleine Ladezeitverbesserungen schafft, ist die Möglichkeit HTML in Autoptimize zu minimieren. Genau wie bei JavaScript und CSS ist das Ergebnis eine komprimierte Dateienübertragung. In einigen Fällen kann der Browser den Code dadurch sogar schneller interpretieren.

Verkleinertes HTML verbessert die Ladezeiten Ihrer Webseite

2. Frontend Plugins optimieren

2.1 Funktionalität umschreiben

WordPress bietet eine ganze Menge Plugins an, die hilfreiche Funktionen in die Website integrieren. So sinnvoll viele auch scheinen, mit Erfahrung im Programmieren ist es oft leicht, die Funktion ohne ein Plugin durch JavaScript oder CSS direkt in die Seite einzufügen.

Eine solche Funktion haben wir auf der alten Seite eines Kunden vorgefunden.Der WP Reading Progress ist ein Balken, der beim Scrollen mitläuft. Die Funktion selbst lässt sich leicht reproduzieren.

JavaScript

<script type="text/javascript">
	var pos;

	document.addEventListener('scroll', function()
	{
	  pos = (document.documentElement['scrollTop']||document.body['scrollTop']) / ((document.documentElement['scrollHeight']||document.body['scrollHeight']) - document.documentElement.clientHeight) * 100;
	  document.querySelector('.progress-bar').style.setProperty('--scroll', pos + '%');
	});
</script>

CSS

<style type="text/css">
.progress-bar
{
  background: linear-gradient(to right, #5f6789 var(--scroll), transparent 0);
  background-repeat: no-repeat;
  position: fixed;
  width: 100%;
  height: 5px;
  z-index:9999;
  bottom:0;
  left:0;
}
</style>

Wenn wir diese Funktion über Code in unsere Seite implementieren (wichtig: Damit der Code an gewünschter Stelle umgesetzt wird, benötigt man auf der Zielseite ein zusätzliches Halteelement – in diesem Fall ein div mit der Klasse „progress-bar“), bekommen wir eine sehr ähnliche Funktion mit einer deutlich geringeren Dateimenge, als sie das Plugin mitbringt.

Wenn Sie dies mit Frontend-basierten Plugins tun, lässt sich die Lademenge und somit die Zeit, die Ihre Website zum laden benötigt, deutlich verringern.

3. WordPress Caching Plugins

3.1 W3 Total Cache

Es gibt viele gute WordPress Caching Plugins, beispielsweise W3TC, WP Rocket und WP Fastest Cache.

In unserem Fall schauen wir uns W3TC genauer an.
Wir empfehlen, die folgenden Optionen zu wählen – abhängig von der relativen Ladegeschwindigkeit jeder Quelle.

We use Autoptimize to minify, therefore we do not enable this option.
Ein Caching Service kann die Ladezeit größerer Dateimengen stark verkürzen

OPCache, ein Opcode (operation code) Caching Service hilft dabei, die Verarbeitungszeit des PHP Scripts zu beschleunigen. Diese werden zu behinn von der CPU berechnet und diese Berechnungen werden gespeichert, sodass die Berechnungszeit der PHP Quelle anschließend wegfällt.

Ähnliches stellen wir auch in der Object Cache fest, wo unnötige Abrufe des Database Service vermieden werden. Die zuvor abgefragten und unveränderten Informationen werden auch hier in einem Caching Service wie memcached gespeichert.

Browser Caching Optionen gehören zu den wichtigsten Einstellungen für wiederkehrende Besucher

Browser Caches helfen jenen, die mehrere Seiten Ihrer Website besuchen beziehungsweise zu einem anderen Zeitpunkt zurück kommen. Bereits geladene Elemente müssen dann nicht erneut abgefragt werden, sondern werden schnell und einfach wieder übermittelt.

Mit Code Komprimierung und Caching lassen sich erneut mit wenigen Klicks Datenmengen einsparen, die Ihre Seite verlangsamen. Auch ein Blick in die Funktionen von Plugins lohnen sich. Vieles davon lässt sich ganz ohne Plugin und teilweise mit geringem Aufwand und etwas Recherche reproduzieren.

Im nächsten Artikel schauen wir uns die Verbesserung der Serverleistung an, die Sie selbst ausführen können, um Ihre WordPress-Website schnell und optimal laufen zu lassen.

Schreibe einen Kommentar