Google hat einige Tipps dazu gegeben, wie sich die Ladezeit von JavaScript-Websites optimieren lässt. Ein wichtiger Bestandteil: Server Side Rendering.
Websites, auf denen JavaScript zum Einsatz kommt, haben gegenüber reinen HTML-Websites einen Nachteil: Ihre Ladezeit ist in der Regel höher. Das liegt daran, dass der JavaScript-Code erst geladen und dann ausgeführt werden muss. Wenn dies alles beim Client, also im Browser, passiert, erhöht sich die Dauer bis zur Anzeige der Inhalte.
Auf der anderen Seite ist JavaScript heute ein unverzichtbarer Bestandteil auf vielen Websites, weil sich damit Funktionen abbilden lassen, die ausschließlich mit HTML nicht möglich wären.
Für solche Websites muss ein Mittelweg gefunden werden: Trotz JavaScript muss der Page Speed möglichst gering gehalten werden. Wie das funktionieren kann, dazu hat Martin Splitt von Google jetzt einige Tipps gegeben:
Zunächst einmal gilt es, möglichst viel JavaScript einzusparen. Umso weniger Code geladen und ausgeführt werden muss, desto besser ist das für die Ladezeit. Konkret bedeutet das: Es ist zu prüfen, welche Funktionen einer Website unbedingt benötigt werden und welche nicht. Letztere sollten deaktiviert werden.
Zudem sollte nach Möglichkeit auf Client Side Rendering verzichtet werden, insbesondere für die kritischen Inhalte, damit diese so schnell wie möglich geladen werden können. Auf Landing Pages und statischen Seiten sollte Server Side Rendering zum Einsatz kommen, bei Bedarf auch Hydration, das bedeutet, der vom Server ausgelieferte HTML-Code wird im Cient angereichert mit JavaScript. Dabei kann zum Beispiel das JavaScript für Zusatzfunktionen, die nicht die Darstellung kritischer Inhalte betreffen, im Client ausgeführt werden.
Bei neuen Projekten sollte über den Einsatz passender Frameworks wie next.js, nuxt.js oder Angular Universal nachgedacht werden.
Splitt riet außerdem dazu, Abhängigkeiten reduzieren, wenn Client Site Rendering genutzt wird. Code sollte aufgeteilt oder zusammengefasst werden, wo es sinnvoll ist: Wenn man zum Beispiel für eine Seite einen bestimmten Code-Schnipsel nicht benötigt, sollte dieser dort auch nicht geladen werden.
Für die übrigen Code-Bestandteile sollte Prefetch verwendet werden, um die Ladezeiten zu verbessern.
Grundsätzlich rät Splitt dazu: Umso weniger JavaScript zum Einsatz kommt, desto besser ist dies für den Page Speed.
Zusammenfassend ist zu sagen: Wenn JavaScript verwendet wird, ist Server Side Rendering die beste Wahl - vor allem, wenn es um die Anzeige wichtiger Inhalte geht. Für alle weiteren Inhalte und Funktionen ist zu überprüfen, ob JavaScript notwendig ist. Falls ja, sollte auch hier Server Side Rendering oder notfalls Hydration zum Einsatz kommen.
Titelbild: Copyright comzeal - Fotolia.com