Tipps zur Website-Op­ti­mie­rung: Das sind die Trends 2025

Schnelle Webseiten sind wichtiger denn je. Laut einer Studie von Akuma ist die Er­war­tungs­hal­tung klar: 83 Prozent aller Be­su­chen­den erwarten, dass eine Website innerhalb von drei Sekunden lädt. Wir werfen daher einen Blick auf aktuelle Themen der Per­for­mance-Op­ti­mie­rung.

Neue Bild­for­ma­te braucht das Web!

Bereits heute werden mehr als 60 Prozent des Traffics im World Wide Web durch Bilder ver­ur­sacht, vor allem durch Formate wie JPEG, PNG und GIF. Nun sind aber all diese Da­tei­for­ma­te relativ alt und nicht immer wirklich effizient. Dennoch sind sie, aufgrund der Kom­pa­ti­bi­li­tät und teils auch wegen ihrer uniquen Features, wie Trans­pa­renz bei PNGs, meist al­ter­na­tiv­los.

Google ist stets bemüht, den nächsten Schritt zu gehen und mit neuen Ansätzen für In­no­va­ti­on und schneller ladende Seiten zu sorgen, sowohl als Un­ter­neh­men als auch in Form von Mit­ar­bei­ten­den wie Ilya Grigorik, seines Zeichens Web-Per­for­mance-Koryphäe der ersten Stunde. Und das selbst­ver­ständ­lich nicht un­ei­gen­nüt­zig, denn schnelle Webseiten machen auch Googles In­fra­struk­tur (Crawling & Co.) das Leben leichter! So wundert es auch wenig, dass Google bereits vor einigen Jahren ein neues Bild­for­mat vor­ge­stellt hat, das auf den Namen WebP hört. Es vereint alle Vorteile der vor­ge­nann­ten, „alten“ Da­tei­for­ma­te, ist aber insgesamt deutlich ef­fek­ti­ver (sprich: kleinere Da­tei­grö­ße bei ver­gleich­ba­rer Qualität).

Obwohl WebP als Bild­for­mat mitt­ler­wei­le von allen gängigen Browsern und auch von Content-Ma­nage­ment-Systemen wie WordPress un­ter­stützt wird, nutzen es bisher nur rund 14 % der Websites, sodass ein hoher Spielraum für Pagespeed-Op­ti­mie­rung besteht.

Seit 2020 hat sich mit AVIF (AV1 Image File Format) ein weiteres äußerst viel­ver­spre­chen­des Bild­for­mat etabliert. Es basiert auf dem modernen AV1-Codec und bietet eine deutlich bessere Da­ten­re­duk­ti­on bzw. -kom­pres­si­on als WebP, bei gleich­zei­ti­ger Erhaltung einer her­vor­ra­gen­den Bild­qua­li­tät. Mit AVIF können Dateien bei iden­ti­scher visueller Qualität noch kleiner werden, was La­de­zei­ten drastisch reduziert. Zudem un­ter­stützt es Features wie Trans­pa­renz und HDR (High Dynamic Range), die es besonders für an­spruchs­vol­le An­wen­dun­gen in­ter­es­sant machen. Dank der breiten Un­ter­stüt­zung durch moderne Browser und CMS ist AVIF eine ideale Wahl für zu­kunfts­si­che­re Websites, die auf Per­for­mance setzen. Bisher wird das Format erst bei 0,3 % aller Websites ein­ge­setzt, obwohl Be­rech­nun­gen zufolge etwa 93 % der Endgeräte AVIF anzeigen können.

HTTP/3 – ein Pro­to­kol­l­up­date für mehr Per­for­mance

Seit dem Release des aktuellen HTTP/1.1-Standards Ende der 90er Jahre hat sich am ei­gent­li­chen HTTP-Protokoll wenig getan. Ver­gli­chen mit der Tatsache, wie schnell­le­big das Internet und zu­ge­hö­ri­ge Tech­no­lo­gien sonst sind, scheint das eher ver­wun­der­lich. Auch hier gehörte Google wieder einmal zu den trei­ben­den Kräften und forcierte mit SPDY die deutlich schnel­le­re Ent­wick­lung eines neuen Standards, der schluss­end­lich in Teilen als „Vorlage“ für HTTP/2 diente. Seit 2012 arbeitete das Un­ter­neh­men an einem weiteren Nach­fol­ger namens QUIC, der als HTTP/3 im Jahre 2022 stan­dar­di­siert wurde.

HTTP/3 ersetzt das tra­di­tio­nel­le TCP durch UDP, um Ver­bin­dungs­auf­bau­zei­ten zu mi­ni­mie­ren und Latenzen zu ver­rin­gern. So wird dafür gesorgt, dass die si­gni­fi­kant ge­stie­ge­ne Anzahl von Dateien pro Web­sei­ten­auf­ruf, und damit auch das deutlich größere Da­ten­trans­fer­vo­lu­men, weiterhin per­for­mant bewältigt werden kann. Eine der größten Neue­run­gen ist die Fähigkeit, Ver­bin­dun­gen nahtlos bei Netz­werk­schwan­kun­gen auf­recht­zu­er­hal­ten – ein ent­schei­den­der Vorteil für das Surfen auf mobilen End­ge­rä­ten. Zudem werden Da­ten­flüs­se un­ab­hän­gig von­ein­an­der behandelt, wodurch blo­ckie­ren­de Anfragen, wie sie bei HTTP/2 auftreten konnten, der Ver­gan­gen­heit angehören. HTTP/3 wird weithin un­ter­stützt und ist mitt­ler­wei­le bei großen Anbietern wie Cloud­fla­re, AWS und Google Cloud ver­brei­tet. Sei­ten­be­trei­ben­de, die auf Ge­schwin­dig­keit und moderne Tech­no­lo­gien setzen, sollten HTTP/3 unbedingt in Betracht ziehen, um La­de­zei­ten weiter zu verkürzen und die Nut­zer­er­fah­rung zu op­ti­mie­ren.

Da sich die Brow­ser­her­stel­ler ein­stim­mig darauf geeinigt haben, wie bei HTTP/2 auch HTTP/3-Ver­bin­dun­gen nur für ge­si­cher­te Ver­bin­dun­gen (aka HTTPS) zu erlauben, steht der Ver­wen­dung des neuen Pro­to­kolls in jedem Fall auch eine ent­spre­chen­de HTTPS-Migration bevor, insofern besagte Webseite noch nicht auf HTTPS betrieben wird.

Spä­tes­tens seit in den Browsern sowohl nicht sichere Form-Fields bei der Eingabe als „unsicher“ markiert als auch in der Brow­ser­zei­le ein ent­spre­chen­der Hinweis auftaucht, sollten alle Sei­ten­be­trei­ben­den das Thema HTTPS auf der Agenda haben. Aktuelle Zahlen zeigen, dass rund 80 Prozent der Websites via HTTPS aus­ge­lie­fert werden – Tendenz steigend. Dies ist vor dem Hin­ter­grund, dass die Nutzung von HTTPS mitt­ler­wei­le ein ent­schei­den­der Faktor im SEO ist, nicht ver­wun­der­lich.

Per­for­mance-Extreme: Op­ti­mie­rung des Critical Path Ren­de­rings

Viele Op­ti­mie­run­gen sind heut­zu­ta­ge absolute Must-haves und bedürfen (ei­gent­lich) gar keiner Dis­kus­si­on. Spielt La­de­ge­schwin­dig­keit eine Rolle (und das sollte nunmehr für jede Website der Fall sein), kommt man nicht umhin, sich damit aus­ein­an­der­zu­set­zen, wie viel Ja­va­Script man wo und wann lädt. Genauso wichtig sind ef­fi­zi­en­tes Caching und durch­op­ti­mier­te Bilder.

Mit den Core Web Vitals hat Google die Bedeutung der User Ex­pe­ri­ence klar in den Fokus gerückt, wodurch Stra­te­gien wie die Op­ti­mie­rung des Critical Path Ren­de­rings an Bedeutung gewinnen. La­de­zei­ten, In­ter­ak­ti­vi­tät und visuelle Sta­bi­li­tät einer Website – gemessen durch Metriken wie Largest Con­tentful Paint (LCP), First Input Delay (FID) und Cu­mu­la­ti­ve Layout Shift (CLS) – sind ent­schei­dend für eine gute Plat­zie­rung in den Such­ergeb­nis­sen.

Die ge­son­der­te Op­ti­mie­rung des Critical Path Ren­de­rings ist ein komplexes, auf­wen­di­ges Thema, dem (leider) häufig noch zu wenig Auf­merk­sam­keit geschenkt wird. Gemeint ist hier der direkt sichtbare Bereich (ohne zu scrollen) – abhängig von der je­wei­li­gen Auflösung des End­ge­rä­tes, mit dem auf die Seite zu­ge­grif­fen wird.

Es empfiehlt sich, sichtbare Elemente, wie das Logo, sofort zu laden und alles andere bei ent­spre­chen­der (Scroll-)In­ter­ak­ti­on nach­zu­la­den. Dieses so­ge­nann­te Lazy Loading gehört zu den ef­fek­tivs­ten Stra­te­gien, denn es senkt nicht nur die Ladezeit, sondern minimiert auch den Da­ten­ver­brauch – ein Pluspunkt vor allem für mobile Nut­ze­rin­nen und Nutzer. Das größte Augenmerk sollte hierbei auf der Ver­wen­dung von CSS liegen, denn selbiges ist maß­geb­lich für die Dar­stel­lung ver­ant­wort­lich.

Am besten teilt man das CSS in zwei Blöcke: Alle re­le­van­ten No­ta­tio­nen für den Critical Path werden zukünftig als Inline-CSS direkt in die Seite ein­ge­bun­den (damit wird der zu­sätz­li­che HTTP-Request voll­stän­dig ein­ge­spart) und alle CSS-No­ta­tio­nen für den nicht sicht­ba­ren Bereich werden asynchron nach­ge­la­den. Selbst­re­dend geht auch hier noch deutlich mehr – so wäre es im Sinne einer wirklich guten, komplett re­spon­si­ven Seite auch wichtig, Bilder in ver­schie­de­nen Größen aus­zu­lie­fern oder gar das DOM (Document Object Model) ent­spre­chend auf­zu­räu­men.

SSR und Edge Computing als Schlüs­sel­tech­no­lo­gien

Durch die stetig stei­gen­den An­for­de­run­gen in den Bereichen Ge­schwin­dig­keit und Re­ak­ti­ons­fä­hig­keit kommen neue Tech­no­lo­gien ins Spiel, die dazu beitragen sollen, die beste Ex­pe­ri­ence un­ab­hän­gig vom Endgerät oder Standort zu er­mög­li­chen.

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 – ins­be­son­de­re für Nut­ze­rin­nen und Nutzer mit lang­sa­me­ren Ver­bin­dun­gen. Ein Vorteil von SSR ist auch die Ver­bes­se­rung der SEO-Per­for­mance, da Such­ma­schi­nen-Crawler voll­stän­di­gen HTML-Content in­de­xie­ren können, ohne Ja­va­Script aus­zu­füh­ren. In Kom­bi­na­ti­on mit Caching-Me­cha­nis­men können häufig an­ge­for­der­te Inhalte noch schneller be­reit­ge­stellt werden.

Edge Computing: Da­ten­ver­ar­bei­tung näher am User

Auch Edge Computing kann für eine erhöhte Website-Per­for­mance sorgen, indem Inhalte und Be­rech­nun­gen auf Servern be­reit­ge­stellt werden, die geo­gra­fisch näher an der Nutzerin oder dem Nutzer liegen. Dank der Ska­lier­bar­keit kann auch bei erhöhtem Traffic dafür gesorgt werden, Latenzen zu vermeiden.