Laden, Interaktivität und Visualisierung Deiner Webseite

Roman Perich, geändert am 10 Juni 2022 , Lesezeit ca. 4 Min.


Es ist nicht leicht abzubilden, was damit gemeint ist. Manchmal redet man über Geschwindigkeit, dann über die Elemente und schließlich sind es die Farben und CI. Alles hat seine Berechtigung und soll immer als erstes erledigt werden. Aber wo fange ich an und worauf achte ich dabei, ist keine leichte Frage.

In diesem Artikel zeige ich dir, worauf du achten solltest und was aus meiner Sicht nicht aus der Acht gelassen werden soll.

Was ist Core Web Vitals ?

Largest Contentful Paint (LCP) – Wahgenommene Geschwindigkeit
First Input Delay (FID) – Reaktionsfähigkeit des ladevorgangs
Cumulative Layout Shift (CLS) – Visuelle Stabilität ( Layoutverschiebungen)

Was ist LCP ?

Largest Contentful Paint (LCP) ist eine wichtige, nutzerorientierte Kennzahl zur Messung der wahrgenommenen Ladegeschwindigkeit, da sie den Punkt in der Zeitachse des Seitenladevorgangs markiert, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde – ein schneller LCP gibt dem Nutzer die Sicherheit, dass die Seite nützlich ist. Mehr findest du unter LCP

First Input Delay (FID) ?

Die erste Eingabeverzögerung (First Input Delay, FID) ist eine wichtige, nutzerorientierte Kennzahl für die Messung der Reaktionsfähigkeit der Ladevorgänge, da sie die Erfahrungen der Nutzer bei der Interaktion mit nicht reagierenden Seiten quantifiziert – eine niedrige FID trägt dazu bei, dass die Seite nutzbar ist. Mehr findest du bei FID

First Input Delay (FID) ?

Die kumulative Layoutverschiebung (CLS) ist eine wichtige, nutzerorientierte Kennzahl zur Messung der visuellen Stabilität, da sie dazu beiträgt, zu quantifizieren, wie oft Nutzer unerwartete Layoutverschiebungen erleben – ein niedriger CLS-Wert trägt dazu bei, dass die Seite ansprechend ist.

Wie kann ich LCP verbessern

  • Bildgröße
  • zu viele Bibliotheken mit Javascript
  • langsammer Server

Zu große Bilddateien

Eines der ältesten Themen und immer noch ein Hauptproblem sind die Bilder. Oft lädt man die Bilder direkt aus Windows und das mag die Größe gar nicht zu optimieren. Die Bilder sind manchmal unverschämt groß und das sieht man gar nicht. Nach dem ersten Laden sind sie im Cache und man bekommt es nicht mehr mit. Man denkt ja, super, meine Seite lädt ja sehr schnell. In der Wirklichkeit dauert es bei dem Kunden eine Ewigkeit und man bekommt es nicht mit. Deswegen teste es immer wieder mit dem Speed-Test-Tool von Google oder ähnlichen Tools.

Weitere Beschleunigung fürs Laden wäre CDN. Damit bekommt man nicht nur den Server entlastet, sondern die Bilder und statischen Dokumente werden von verschiedenen Servern geladen. Das ist ein Muss, wenn man viele Bilder hat und eine weitere Beschleunigung braucht.

Zu viele Bibliotheken oder Plug-Ins

Plugins helfen uns, viele kleine oder auch große Aufgaben schneller zu erledigen. Wir nehmen ein Plugin, konfigurieren ein wenig und es ist perfekt. Was wir aber nicht sehen, ist, dass dabei sehr viele weitere Dateien im Hintergrund geladen werden. Das wird dann irgendwann zum Verhängnis und wir wissen gar nicht mehr, woran es liegt. Die Suche kann Monate dauern und oft kein Erfolg bringen.

Deswegen :

reduziere die Anzahl auf das Minimum
Installiere keine Plugins, die du nicht kennst.
Solltest du neue Plugins brauchen, so teste diese und prüfe jedes Mal, ob nach der Aktivierung starke Verringerungen der Ladezeiten auf deiner Seite festzustellen sind.

Es gibt einige JavaScripte Dateien, die notwendig sind, aber leider die Seite langsamer machen. Es ist nicht die Größe der Dateien, sondern mehr das Rendern durch den Browser. Es dauert viel zu lange, bis die überhaupt im Browser funktionieren.

Mein Tipp: verzichte auf Plugins, die dir wenig Wert bringen und deine Seite langsamer machen.

Letzten Endes, wenn du übertreibst, ist die Seite zwar da, kann aber von keinem genutzt werden.

Server ist zu langsam

Es hängt immer davon ab, wie viele Seiten du hast, wie komplex die Berechnungen sind. Oft sind das statische Dateien, die aus dem Cache kommen. Durch die Skalierung bekommst du es recht leicht in den Griff und alles läuft bestens. Bis zu diesem Punkt, brauchst du aber wirklich sehr viele Zugriffe.

Wichtig ist, dass du weißt, wie die Auslastung deines Servers ist. Diesen technischen Part vernachlässigen viele, da es zu technisch wird. Zum Beispiel bei AWS Webservices kannst du die Auslastung sehen und auch automatisch skalieren lassen. Zudem ist die Netzwerkanbindung dort recht hoch und übersteigt einige Angebote aus dem Netz.

Fazit

Achte vor allem auf die Bilder. Hier hast du den größten Hebel und es liegt bei dir. Wenn du Plugins noch mitnimmst, hast du schon 80% optimiert.