Bezeichnet die Zeit, in welcher das erste Element (bspw. Bild oder Text) im Browser geladen und damit für den Nutzer sichtbar wird.

Steht für die Responsivität bzw. die Reaktionsfreude einer Webseite beim Laden. Er drückt die User Experience aus, die beim Versuch entsteht, mit einer Webseite zu interagieren.

Der LCP steht stellvertretend für die Ladezeit einer Webseite und gibt an, wie lange es dauert, das größte Seitenelement zu laden.

Der CLS gibt an, in welchem Ausmaß Ladefehler und Verschiebungen im Layout vorkommen. Ein niedriger CLS verbessert die Usability. Ein niedriger CLS verbessert die Usability.

Um die Websiteperformance zu messen, gibt es verschiedene Tools im Web. Das wohl meistgenutzte Tool hierfür ist PageSpeed Insights von Google und lässt sich über pagespeed.web.dev abrufen.

Das ist praktisch, da der großteil der User Google als Suchmaschine verwenden und du hierdurch direkte Infos bekommst.

Google schickt hier auf Anfrage einen Crawler zu deiner Webadresse und prüft Diese komplett durch, Mobil und Desktop.

Die Hauptauswertung der Page Speed besteht aus den Core-Web-Vitals. Das sind die wichtigsten Funktionen der Website-Performance. Diese hast du vorhin kennengelernt.

Folgend wirst du die wichtigsten und gängigsten Optimierungswege kennenlernen

Vermeide Inline-CSS und Javascript.

Dieser Code muss bei jeder HTML-Seite neu geladen werden. Nutze lieber eine zentrale CSS-/Javascript-Datei, die einmalig geladen werden muss.

Minified Code bezeichnet die Komprimierung des Codes.Durch Algorithmen werden beispielsweise unnötige Leerzeichen entfernt und somit die Codemenge gekürzt. So kann dein Code um bis zu 90% komprimiert werden.

Um Code einfach zu komprimieren, kannst du verschiedene Online-Konverter verwenden oder auch ein Plugin in Visual Studio Code.

Es ist logisch, dass beispielsweise ein Bild mit viel Speicherplatz auch länger laden muss.Daher kannst du deine Website Performance enorm verkürzen, indem du deine Medien komprimierst.

Gerade Bilder mit hohen Auflösungen benötigen Unmengen an Speicherplatz.Achte also darauf deine Bilder richtig zu dimensionieren. Auch kannst du z.B. bei einem Hintergrundvideo die Tonspur entfernen und so wichtige Ressourcen einsparen.

Bilder können in Photoshop komprimiert oder auch mit Online-Konvertern (z.B. tinypng.com).

Das Format deiner Medien spielt eine wichtige Rolle bei der Optimierung deiner Website-Performance.Beispielsweise sollte ein Icon eher im SVG-Format als im PNG-Format eingeladen werden, da SVGs viel weniger Speicherplatz und somit Ladezeit wegnehmen.

Das selbe Prinzip gilt auch bei Bildern. Das Format WEBP ist für das Web optimiert und hat eine viel geringere Dateigröße als Alternativformate, wie JPG, PNG, etc.

Ein guter Webserver ist die halbe Miete. Daher sollte man bei der Wahl seines Hosters genau hinschauen und die Response-Time (Antwortrate) des Servers prüfen.

Optimalerweise sollte dein Server eine Response-Time von unter 200ms haben.

Browser-Caching ermöglicht es dem Browser, eine Vielzahl von Informationen zu speichern. Diese Informationen werden im Browser hinterlegt und müssen bei erneutem Website-Aufruf nicht neu geladen werden.

Gespeichert werden können verschiedene Dateien, wie beispielsweise Bilder & Videos, aber auch Code-Dateien (CSS, Javascript, etc.).

Websites, die viele Bilder beinhalten, laden logischerweise länger.

Um dieses Problem zu umgehen, wurde die Methode "Lazy Loading" entwickelt. Sie sorgt dafür, dass Bilder erst geladen werden, wenn sie im Viewport des Nutzers erscheinen.

Scrollt der Nutzer also beispielsweise gar nicht an das Ende der Website, müssen die Bilder, die dort platziert sind, nicht geladen werden.

Wenn du Inhalte von externen Quellen auf deine Website einlädst, muss der Nutzer Daten von einem externen Server herunterladen, bevor deine Website flüssig läuft.

Bekannte Beispiele hierfür sind iFrames, eingeladene Webfonts (z.B. Google Fonts), Tracking Tools (Google Analytics) oder auch externe Scripte, wie jQuery.

Versuche möglichst viele dieser externen Quellen lieber lokal einzubinden.

Weiterleitungen sind in vielen Fällen sinnvoll. Jede Weiterleitung bedeutet jedoch auch eine erhöhte Ladezeit.

Versuche daher nur zwingend notwendige Weiterleitungen einzubauen.