Tipps zur Website-Optimierung: Das sind die Trends 2025

Schnelle Webseiten sind wichtiger denn je. Laut einer Studie von Akuma ist die Erwartungshaltung klar: 83 Prozent aller Besuchenden erwarten, dass eine Website innerhalb von drei Sekunden lädt. Wir werfen daher einen Blick auf aktuelle Themen der Performance-Optimierung.

Neue Bildformate braucht das Web!

Bereits heute werden mehr als 60 Prozent des Traffics im World Wide Web durch Bilder verursacht, vor allem durch Formate wie JPEG, PNG und GIF. Nun sind aber all diese Dateiformate relativ alt und nicht immer wirklich effizient. Dennoch sind sie, aufgrund der Kompatibilität und teils auch wegen ihrer uniquen Features, wie Transparenz bei PNGs, meist alternativlos.

Google ist stets bemüht, den nächsten Schritt zu gehen und mit neuen Ansätzen für Innovation und schneller ladende Seiten zu sorgen, sowohl als Unternehmen als auch in Form von Mitarbeitenden wie Ilya Grigorik, seines Zeichens Web-Performance-Koryphäe der ersten Stunde. Und das selbstverständlich nicht uneigennützig, denn schnelle Webseiten machen auch Googles Infrastruktur (Crawling & Co.) das Leben leichter! So wundert es auch wenig, dass Google bereits vor einigen Jahren ein neues Bildformat vorgestellt hat, das auf den Namen WebP hört. Es vereint alle Vorteile der vorgenannten, „alten“ Dateiformate, ist aber insgesamt deutlich effektiver (sprich: kleinere Dateigröße bei vergleichbarer Qualität).

Obwohl WebP als Bildformat mittlerweile von allen gängigen Browsern und auch von Content-Management-Systemen wie WordPress unterstützt wird, nutzen es bisher nur rund 14 % der Websites, sodass ein hoher Spielraum für Pagespeed-Optimierung besteht.

Seit 2020 hat sich mit AVIF (AV1 Image File Format) ein weiteres äußerst vielversprechendes Bildformat etabliert. Es basiert auf dem modernen AV1-Codec und bietet eine deutlich bessere Datenreduktion bzw. -kompression als WebP, bei gleichzeitiger Erhaltung einer hervorragenden Bildqualität. Mit AVIF können Dateien bei identischer visueller Qualität noch kleiner werden, was Ladezeiten drastisch reduziert. Zudem unterstützt es Features wie Transparenz und HDR (High Dynamic Range), die es besonders für anspruchsvolle Anwendungen interessant machen. Dank der breiten Unterstützung durch moderne Browser und CMS ist AVIF eine ideale Wahl für zukunftssichere Websites, die auf Performance setzen. Bisher wird das Format erst bei 0,3 % aller Websites eingesetzt, obwohl Berechnungen zufolge etwa 93 % der Endgeräte AVIF anzeigen können.

HTTP/3 – ein Protokollupdate für mehr Performance

Seit dem Release des aktuellen HTTP/1.1-Standards Ende der 90er Jahre hat sich am eigentlichen HTTP-Protokoll wenig getan. Verglichen mit der Tatsache, wie schnelllebig das Internet und zugehörige Technologien sonst sind, scheint das eher verwunderlich. Auch hier gehörte Google wieder einmal zu den treibenden Kräften und forcierte mit SPDY die deutlich schnellere Entwicklung eines neuen Standards, der schlussendlich in Teilen als „Vorlage“ für HTTP/2 diente. Seit 2012 arbeitete das Unternehmen an einem weiteren Nachfolger namens QUIC, der als HTTP/3 im Jahre 2022 standardisiert wurde.

HTTP/3 ersetzt das traditionelle TCP durch UDP, um Verbindungsaufbauzeiten zu minimieren und Latenzen zu verringern. So wird dafür gesorgt, dass die signifikant gestiegene Anzahl von Dateien pro Webseitenaufruf, und damit auch das deutlich größere Datentransfervolumen, weiterhin performant bewältigt werden kann. Eine der größten Neuerungen ist die Fähigkeit, Verbindungen nahtlos bei Netzwerkschwankungen aufrechtzuerhalten – ein entscheidender Vorteil für das Surfen auf mobilen Endgeräten. Zudem werden Datenflüsse unabhängig voneinander behandelt, wodurch blockierende Anfragen, wie sie bei HTTP/2 auftreten konnten, der Vergangenheit angehören. HTTP/3 wird weithin unterstützt und ist mittlerweile bei großen Anbietern wie Cloudflare, AWS und Google Cloud verbreitet. Seitenbetreibende, die auf Geschwindigkeit und moderne Technologien setzen, sollten HTTP/3 unbedingt in Betracht ziehen, um Ladezeiten weiter zu verkürzen und die Nutzererfahrung zu optimieren.

Da sich die Browserhersteller einstimmig darauf geeinigt haben, wie bei HTTP/2 auch HTTP/3-Verbindungen nur für gesicherte Verbindungen (aka HTTPS) zu erlauben, steht der Verwendung des neuen Protokolls in jedem Fall auch eine entsprechende HTTPS-Migration bevor, insofern besagte Webseite noch nicht auf HTTPS betrieben wird.

Spätestens seit in den Browsern sowohl nicht sichere Form-Fields bei der Eingabe als „unsicher“ markiert als auch in der Browserzeile ein entsprechender Hinweis auftaucht, sollten alle Seitenbetreibenden das Thema HTTPS auf der Agenda haben. Aktuelle Zahlen zeigen, dass rund 80 Prozent der Websites via HTTPS ausgeliefert werden – Tendenz steigend. Dies ist vor dem Hintergrund, dass die Nutzung von HTTPS mittlerweile ein entscheidender Faktor im SEO ist, nicht verwunderlich.

Performance-Extreme: Optimierung des Critical Path Renderings

Viele Optimierungen sind heutzutage absolute Must-haves und bedürfen (eigentlich) gar keiner Diskussion. Spielt Ladegeschwindigkeit eine Rolle (und das sollte nunmehr für jede Website der Fall sein), kommt man nicht umhin, sich damit auseinanderzusetzen, wie viel JavaScript man wo und wann lädt. Genauso wichtig sind effizientes Caching und durchoptimierte Bilder.

Mit den Core Web Vitals hat Google die Bedeutung der User Experience klar in den Fokus gerückt, wodurch Strategien wie die Optimierung des Critical Path Renderings an Bedeutung gewinnen. Ladezeiten, Interaktivität und visuelle Stabilität einer Website – gemessen durch Metriken wie Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS) – sind entscheidend für eine gute Platzierung in den Suchergebnissen.

Die gesonderte Optimierung des Critical Path Renderings ist ein komplexes, aufwendiges Thema, dem (leider) häufig noch zu wenig Aufmerksamkeit geschenkt wird. Gemeint ist hier der direkt sichtbare Bereich (ohne zu scrollen) – abhängig von der jeweiligen Auflösung des Endgerätes, mit dem auf die Seite zugegriffen wird.

Es empfiehlt sich, sichtbare Elemente, wie das Logo, sofort zu laden und alles andere bei entsprechender (Scroll-)Interaktion nachzuladen. Dieses sogenannte Lazy Loading gehört zu den effektivsten Strategien, denn es senkt nicht nur die Ladezeit, sondern minimiert auch den Datenverbrauch – ein Pluspunkt vor allem für mobile Nutzerinnen und Nutzer. Das größte Augenmerk sollte hierbei auf der Verwendung von CSS liegen, denn selbiges ist maßgeblich für die Darstellung verantwortlich.

Am besten teilt man das CSS in zwei Blöcke: Alle relevanten Notationen für den Critical Path werden zukünftig als Inline-CSS direkt in die Seite eingebunden (damit wird der zusätzliche HTTP-Request vollständig eingespart) und alle CSS-Notationen für den nicht sichtbaren Bereich werden asynchron nachgeladen. Selbstredend geht auch hier noch deutlich mehr – so wäre es im Sinne einer wirklich guten, komplett responsiven Seite auch wichtig, Bilder in verschiedenen Größen auszuliefern oder gar das DOM (Document Object Model) entsprechend aufzuräumen.

SSR und Edge Computing als Schlüsseltechnologien

Durch die stetig steigenden Anforderungen in den Bereichen Geschwindigkeit und Reaktionsfähigkeit kommen neue Technologien ins Spiel, die dazu beitragen sollen, die beste Experience unabhängig vom Endgerät oder Standort zu ermöglichen.

Server-Side Rendering (SSR)

Mit SSR werden HTML-Inhalte direkt auf dem Server generiert. Dieser liefert eine fertige Seite an den Browser aus. Dies sorgt dafür, dass Inhalte schneller sichtbar werden – insbesondere für Nutzerinnen und Nutzer mit langsameren Verbindungen. Ein Vorteil von SSR ist auch die Verbesserung der SEO-Performance, da Suchmaschinen-Crawler vollständigen HTML-Content indexieren können, ohne JavaScript auszuführen. In Kombination mit Caching-Mechanismen können häufig angeforderte Inhalte noch schneller bereitgestellt werden.

Edge Computing: Datenverarbeitung näher am User

Auch Edge Computing kann für eine erhöhte Website-Performance sorgen, indem Inhalte und Berechnungen auf Servern bereitgestellt werden, die geografisch näher an der Nutzerin oder dem Nutzer liegen. Dank der Skalierbarkeit kann auch bei erhöhtem Traffic dafür gesorgt werden, Latenzen zu vermeiden.