Die Core Web Vitals sind Messparameter, wie schnell eine Webseite lädt. Keiner möchte im Jahr 2026 30 Sekunden auf eine Webseite warten, bevor die Inhalte lesbar sind. Zentral sind dabei 3 Kennzahlen:
Vital 1: Vollständig gefüllter Bildschirm
Google empfiehlt den Webseitenbetreiber, dass die Webseite in unter 2,5 Sekunden mit den ersten (oberen) Inhalten gefüllt ist. Der Nutzer liest in der Regel zuerst den Text oben oder betrachtet die Bilder oberhalb und scrollt dann herunter. Der erste Abschnitt des Text / Bilder soll deshalb priorisiert sein. Während der Nutzer oben liest, kann der Rest „gemütlich“ nachladen. Zum Rest gehören auch Logos, Pop-ups, Info-Banner und alle anderen Webseiten-Elemente, die nicht essenziell für den Konsum des Inhalts sind.
Vital 2: Das Erreichen der ersten Bytes
Bevor ein Ladevorgang einer Webseite startet, muss Dein Browser den Webseiten-Server hinter der Domain finden. Das Domain Name System (DNS) übersetzt eine Domain https://lippke.li zu einer IP-Adresse 192.168.178.1.
Jeder öffentliche Server hat eine solche Nummer. Wenn der Server die Anfrage erhält, muss er meistens selbst nach den Inhalten in seinen Speicher suchen. Zum Schluss sendet der Server die ersten Bytes zum Browser. Dieser Prozess sollte in unter 100 Millisekunden stattfinden, weil das Seitenladen erst danach kommt.
IPv6 und HTTP/3 alles richtig gemacht
DNS ist nur ein Teil für die ersten Bytes. Das (PHP-)Backend generiert die Webseite. Im besten Fall generiert PHP die Webseite nicht, sondern hat der Server Nginx / Apache serviert eine Version, die PHP vorher schon generiert und zwischen gespeichert hat. Das geht z. B. mit dem Plugin WP-Optimize. Selbst wenn alles schon vorgeneriert ist, kann die Übertragung ohne Kompression langsam sein. Deshalb sind HTTP2 oder QUIC / HTTP3 mit Brotli oder Gzip Pflicht. Nach all den Schritten erreicht die Webseiten mit den ersten Bytes den Browser des Nutzers.
Vital 3: Zeit bis zur finalen Elementanordnung
Manche Webseiten laden so, dass ein Element beim Laden andere Elemente verschieben z. B. Der Text ist schon geladen, aber das Kopfbild nicht. 1 Sekunde später erscheint das Kopfbild und verschiebt den Text nach unten, sodass der Browser das Bild später erst in der richtigen Größe anzeigt. Kein Nutzer möchte einen Text lesen, welcher plötzlich auf dem Bildschirm verschoben wird oder verschwindet.
Feste Bildgrößen in der HTML erlauben einen Platzhalter bzw. eine leere Fläche, in welche das Bild geladen wird. Die Verrückung findet nicht statt und der Nutzer kann nach dem Lesen des ersten Satzes das Bild darüber betrachten.
Warum ist Page Speed wichtig?
1. Ladezeiten sind nervig
Kennst Du einem Menschen auf unserem Globus, der gerne und voller Freunde 30 Sekunden auf einen weißen Bildschirm starrt? Ich gehöre nicht zu dieser seltenen Gattung.
Steffen Lippke
Webseiten müssen schnell laden, damit das Surfen Spaß macht. Selbst wenn die Inhalte komplex und umfangreich sind, sollte der Nutze einen Ladestatus und erste Inhalte sehen. Die Nutzer wollen mitbekommen, dass die Webseite nicht unbrauchbar ist und 1 Stunden noch weiß bleibt.
Jede Sekunde zählt
2. Ladezeit kostet Umsatz
Stellt Dir vor, Du musst schnell online Kaffee bestellen.
Du verwendest eine Suchmaschine und tippst „Kaffee kaufen“ ein. Du klickst auf den ersten Link, aber Du siehst nur einen weißen Bildschirm.
Nach 5,4 Sekunden klickst Du auf den Zurück-Button und klickst auf den zweiten Link. Der Webshop lädt fast instant (0,8 Sekunden) und Du findest Deinen Kaffee schnell. Der Webshop 1 mit sein 16,3 Sekunden Ladezeit hat einen massiven Nachteil gegenüber ungeduldige Neukunden. Jede Sekunde Ladezeit kostet Dich massiv Umsatz!
3. Höhere Belastung für den Server
Für manche Webseiten muss der Server viel Vorarbeit leisten und die Inhalte im ersten Schritt generieren. Diese Arbeit kann sich der Server sparen, wenn der Hauptspeicher die Inhalte für die 10000 häufigsten Anfragen zwischenspeichert.
Hauptspeicher und SSD-Speicher ist inzwischen so günstig, dass der Server viele Anfragen ohne On-The-Fly-Generierung bedienen kann. Das spart eine Menge an Rechenkapazität ein. Für eine Webseite müssen mehere SQL-Anfrage getätigt werden und die HTML-Elemente von PHP so platziert werden, damit die Webseite Sinn ergibt. Mit Caching kann der Server mehrere Anfragen pro Sekunde bearbeiten und bei Leistungsspitzen geht den Server seltener die Puste aus. Der Server serviert nur die fertigen Gerichte, anstatt die immer wieder die gleichen Rezepte zu kochen und auszuliefern.
Meine Top-Tipps für mehr Speed
#1 Keep it simple, stupid!
Brauchst Du die tausenden Plugins, Pop-ups und Funktionen wirklich? Über die Jahre kann sich auf einer Webseite viel Müll ansammeln, welcher das System verlangsamt.
Entweder gehst Du den Weg der Radikalkur und setzt die Webseite komplett neu auf und installierst nur das Notwendigste … oder Du deaktivierst Woche für Woche ein unnötiges Plugin und schaust was passiert. Einzelne Plugins sind so ressourcenhungrig, dass diese die Webseite verlangsamen.
#2 Komprimierung an!
Gzip und HTTP/3 (oder 2) geben Deiner Webseite mehr Speed. Je weniger Rohdaten über die Leitung müssen, desto weniger Ladezeiten misst das Tool. Verliere mit HTML-Komprimierung oder JavaScript Obfuskation eine Menge an Größe.
Oben zuerst! Lade Inhalte, die sich oben auf der Webseite befinden immer zuerst. Große Scripte kannst Du mit async und defer nachladen. Dies sind später für die Interaktion erst wichtig.
#3 Bilder komprimiert und im neuen Gewand!
Zu Beginn solltest Du die Bilder auf die richtige Größe zu schneiden. Ein 6000 x 6000 Pixel Bild sollte kein Vorschaubild auf dem Monitor mit 2 cm x 2 cm sein.
Je nach Situation sollte der Browser die passende Bildgröße und Auflösung laden. Zwischen den Formatem RAW und AVIF, WebP oder JPEG-2000 findest Du dramatische Dateigrößen Unterschiede vor. Inzwischen sind AVIF und WebP Standard für schnelle Webseiten. Wir können stundenlang über die Vor- und Nachteile zwischen den Kompressions-Formaten sprechen, aber AVIF und WebP sind die guten Standards für den Start. Bilder Du als JPEG oder PNG hochlädst, konvertiert ein Plugin wie WebpExpress zu WebP.
Richtige Größe für die Bilder
Rohdateiformate speichern separat Pixel für Pixel, während JPEG ähnliche Pixel zusammenfasst. Übertreibe die Komprimierung nicht, weil einige Formate einen Detailverlust verursachen.
Modere Webseiten binden nicht mehr Bilder mit dem img-Tag in eine Größe ein, sondern geben dem Browser eine Vielzahl an Größen. Der Picture-Tag gruppiert die verschiedenen Größen und Formate. Smartphones laden kleine Bilder, während Desktop-Computer zu den großen Varianten tendieren.
Img –> Picture in WebpExpress
Bilder laden wir genauso verzögert wie Script. Ein Bild ganz unten auf der Webseiten brauchen wir nicht zu Beginn.
#4 Schriften lokal!
Im besten Fall verwendest Du Schriftarten des Betriebssystems und keine eigenen Schriften. Alle nennenswerte Betriebssysteme haben Serife und San-Serife Schriftarten, welche gut lesbar sind.
Falls Du doch in eine Schriftart verliebt bist, solltest Du eine Schriftart mit geringer und optimierter Dateigröße wählen (ttf). Außerdem sollte eine Schriftart immer nachgeladen werden, weil diese in der Regel erst Sekunden nach dem Text verfügbar ist. Variable Schriftarten wie Inter https://rsms.me/inter/ bieten viele Arten von der gleichen Schrift an. Das verzögert das Laden massiv. Deshalb wälst Du eine Normale und Fette-Schriftart vor aus und genießt diese.
#5 Caching, Caching, Caching!
Auf jeder Ebene solltest Du Inhalte cachen.
Datenbanken können Standardanfragen bereithalten und Webserver können gesamte Webseitenausgabe cachen.
Ein Webserver mit einem guten Cache muss nur die Daten vom Hauptspeicher in die Netzwerkkarte schieben.
#6 Richtige Configs!
Die Einstellungen am Webserver beeinflussen massiv die Geschwindigkeit der Webseite. Nutze nur die neueste PHP-, Go- oder Node-Version und beachte alle Best Practices, welche Deine Software / Framework vorschreibt.
Jedes Softwareprodukt hat eine oder mehre Achillessehen, welche bei falscher Einstellung den Server in eine Schnecke verwandeln.
#7 Weltweit verteilt!
Ein Content Delivery Network hält Kopien Deiner Webseiten und Multimedia Inhalten auf vielen Servern weltweit bereit. Statt den Ursprungsserver anzufragen, fragt der Browser des Nutzers einen Server an, welches das CDN in der Nähe zur Verfügung stellt.
Die IP-Pakete laufen mit Lichtgeschwindigkeit durch das Kabel, aber die vielen Zwischenstationen (Switch, Router, …) brauchen immer eine gewisse Verarbeitungszeit.
Was ist gut gemacht?
#8 Mehr Muskelkraft!
Hast Du alle Maßnahmen vorher umgesetzt, aber die Webseite ist immer noch erschreckend langsam, musst Du eine bessere Software und Hardware nutzen. Je nach Webseitentyp macht Apache mehr Sinn (Shared Environment), während ein NGINX für kleine Dateien optimal ist.
Die Betreiber einer großen Webseite sollten sich eine Lastenverteilung überlegen, Webserver virtualisieren, Firewalls und Black Holes erstellen, welche den Strom der Anfragen verarbeiten kann.
Sicherheit und Speed
Eine schnelle Webseite hat Sicherheitsvorteile. Im Fall einer (natürlichen) Lastspitze kann der Server mit der „schlanke“ Webseite die Inhalte noch darstellen, während eine alte „voll gebaute“ Webseite den Server nach wenigen Anfragen in die Knie zwingt.
Eine schlanke Webseite reduziert die Wege des Angreifers, weil weniger Angriffsfläche zur Verfügung steht. Alte Erweiterungen und Komponenten machen eine Webseite unsicher.
Schreibe einen Kommentar