Nichts ist so beständig wie der Wandel. Das gilt besonders für die Webtechnologien, die im Fokus der Aufmerksamkeit aller Unternehmen stehen, die mit dem und über das Netz Geld verdienen. Sie entwickeln sich rapide weiter, und das Grundprinzip dabei lautet: Zeit ist Geld. Die Ladegeschwindigkeit hat direkte Auswirkungen auf die Conversion und letztlich auf die Umsätze, die mit der Seite generiert werden. Ein paar Beispiele: Amazon hat errechnet, dass es 1,6 Milliarden Dollar im Jahr weniger Umsatz machen würde, wenn die Seite eine Sekunde langsamer laden würde [1]. Pinterest hat die subjektive Ladezeit um 40 Prozent gesenkt und damit ein Trafficplus von 15 Prozent geschafft [2]. Und bei Walmart sinkt die Conversion mit jeder Sekunde, die die Seite länger lädt, um zwei Prozent [3]. In der Praxis bedeutet das: 18 Prozent der Onlineshopper brechen den Einkauf ab, wenn die Seite zu langsam lädt, und 79 Prozent kommen danach nicht mehr wieder. Dass noch eine Menge zu tun ist, hat Google selbst in einer Benchmark von Landing Pages herausgefunden: Ein Viertel aller Seiten lädt länger als 10 Sekunden [4]! Wer wartet denn heute noch 10 Sekunden lang ab, ob eine Seite vielleicht noch fertig lädt? Dass Google langsam ladende Seiten im Page Ranking abstraft, ist inzwischen schon längst Allerweltswissen.

Ladezeit als Ausschlusskriterium

In Deutschland ist die Bandbreite immer noch das Sorgenkind der digitalen Entwicklung. Das Festnetz ist auf dem Land oft erbärmlich langsam und 5G ist auf den mobilen Endgeräten immer noch Zukunftsmusik. Viele Websites werden völlig falsch konzipiert, gerade so, als spiele die Bandbreite keine Rolle mehr. Deshalb gilt gerade für die urbanen „Digital Natives“, die in den Agenturen Websites entwickeln: Testet eure Seiten auch auf einem Einsteigersmartphone mit 3G oder Edge. Wer das einmal erlebt hat, für den wird Page Speed ein unverzichtbares Kriterium bei der Entwicklung sein.

Das Google Page Experience Update kommt im Mai 2021

Eines der wichtigsten Ereignisse im Performancebereich wird das Update der Page Experience sein, das Google für Mai 2021 angekündigt hat [5]. Ab diesem Zeitpunkt wird sich die Page Experience unmittelbar auf das Rankingergebnis auswirken. Die Benutzerfreundlichkeit der Seite wird also nicht mehr nur bewirken, dass der Kunde ein besseres Onlineshoppingerlebnis hat, sondern dass er einen Onlineshop auch besser findet. Die für Mobile optimierten AMP-Seiten werden weiterhin gut ranken, aber dann nicht mehr automatisch bevorzugt; auch klassische Webseiten können hervorgehoben werden.

Die Page Experience basiert auf den Core Web Vitals von Google. Das ist ein Bewertungssystem aus drei Metriken, die die Renderzeit und die visuelle Stabilität der Seite messen.

LCP, FID und CLS

Zentral wichtig fürs Ranking ist das Loading, auch Largest Contentful Paint (LCP) genannt. Diese Kennzahl misst das wahrgenommene Ladetempo bis zu dem Moment, an dem die Hauptinhalte der Seite geladen sind. Wenn das größte Element schnell im Viewport geladen ist, etwa das Hauptbild der Seite, dann ist der LCP-Wert gut und die Seite wird gut gerankt. Logische Folge: Die effiziente Komprimierung des Bildmaterials wird immer wichtiger.

Die Interaktivität der Seite wird mit dem First Input Delay (FID) gemessen. Der Wert macht eine Aussage über die Fähigkeit einer Seite, auf Eingaben der Nutzer zu reagieren: Wann ist der Nutzer im Ladeprozess zum ersten Mal in der Lage, mit der Seite zu interagieren?

Mit dem Cumulative Layout Shift (CLS) schließlich wird die visuelle Stabilität der Seite ausgedrückt. Er hält fest, wann die letzten unerwarteten Layoutänderungen bei sichtbaren Seiteninhalten erfolgen.

Zu den Core Web Vitals gehören darüber hinaus noch vier weitere Faktoren, die das Ranking beeinflussen: Wie Mobile-freundlich ist die Seite aufgebaut? Wie sicher ist sie? Liegt sie im HTTPS-Standard vor? Und: Sind hinderliche Unterbrecherelemente eingebaut?

Damit bekommen Seitenbetreiber einen sehr verlässlichen und klaren Rahmen für die Performance der Seite (Abb. 1). Die Core Web Vitals sind quasi das Handwerkszeug, mit dem die Seite schneller und besser gemacht werden kann.

Abb. 1: Performancemetriken [6]

Mobile-only statt Mobile-first

Seit mehreren Jahren werden schon mobile Inhalte bevorzugt, im März 2021 wurde nun Googles Crawling-Index erneut überarbeitet. Ab sofort werden reine Desktopinhalte nicht mehr in den Suchindex aufgenommen, für die Crawler gilt jetzt Mobile-only. Entscheidend sind also die Anweisungen für die Crawler in der robots.txt. Die Meta-Robot-Tags und die Inhalte für Desktop und Mobile müssen übereinstimmen, sonst kommt es zu Trafficeinbußen.

Wenn Seiten beim Relaunch mit Fokus auf Mobilgeräte umgestaltet werden, wirkt sich das meistens nicht nur auf die Indexierung aus, vieles verbessert auch zugleich die Performance. Das Design wird schlichter und klarer, die Texte werden kürzer und bekommen mehr Struktur. Das alles begünstigt die Ladezeiten und die verbesserte Performance wird wiederum beim Ranking bevorzugt. Auch hier gilt: Smartphones haben keine 200-Mbit-Leitung. Bei der Optimierung der Mobile-Performance muss daher darauf geachtet werden, dass die Webseite nicht nur mit DSL-Geschwindigkeit, sondern auch mit Edge und besonders mit 3G getestet wird. Bei langsameren Geschwindigkeiten ist der LCP-Wert schwieriger zu verbessern. Bildgrößen, JS- und CSS-Größen müssen viel schlanker werden.

Page Speed – im Grunde ist es wie beim Puzzle

Bei der Performanceoptimierung ergeben viele Details zusammen ein großes Kunstwerk – eine blitzschnelle Seite. Mit einer Website verhält es sich wie mit einem großen Puzzle: Die kleinen Einzelteile brauchen viel Zeit zum Zusammenbau. Mit weniger Teilen, einfacheren Formen und klaren Farben lassen sich die Zuordnung der Teile und der Aufbau des Gesamtbilds viel schneller bewerkstelligen. Einige der langfristig gültigen Tricks, das Puzzle einfacher zu machen, seien hier kurz wiedergegeben.

Statischer Inhalt lädt schneller als vom Webserver erst neu generiertes HTML. Datenbanken sind häufig ein Flaschenhals. Deshalb ist es sinnvoll, das Ergebnis vor der Auslieferung in einer statischen HTML-Seite zu speichern und diese auszuliefern.

Mehrere JS- und CSS-Dateien sollten komprimiert und zu einer bis zwei Dateien zusammengefasst werden. Die sind dann schneller zu laden. Zum Beispiel ist jQuery FancyBox unkomprimiert 157 KB, minimiert 67 KB und per gzip komprimiert an den Browser übertragen nur noch 22 KB klein. Ausnahmen können sehr große Projekte sein, bei denen es sinnvoll ist, verschiedene Bundles zu erstellen – also etwa eine Hauptdatei mit den häufigsten Elementen und dann weitere mit einzelnen Modulen. Dann muss zum Beispiel die Formularvalidierung nicht auf jeder Seite geladen werden, sondern nur auf der Kontaktseite.

Mit Lazy Loading lädt der sichtbare Teil der Seite am schnellsten, während der Rest der Seite erst nachlädt, wenn der Nutzer nach unten scrollt. Aber aufgepasst: Lazy Loading sollte nicht für die Hauptinhalte der Seite angewandt werden, damit die Google-Bots nicht an der Erfassung der Inhalte gehindert werden.

Bandbreite spart auch die responsive Verwendung (Abb. 2) verschiedener Bilder je nach Plattform. Mit dem Picture-Tag werden dann für den Desktop große, eher quadratische Bilder geladen, fürs Tablet schmale und für Mobile kleine Detailaufnahmen (Abb. 3 bis 6). Aber Vorsicht! Ist auf dem Tablet eine Galerie dreispaltig und mobil einspaltig, kann die Bildgröße mobil auch schon mal größer sein. Da muss man einen guten Kompromiss finden.

Abb. 2: Responsive Bilder [7]

Abb. 3: Bildgrößen im Vergleich

Abb. 4: Mobile-Darstellung [8]

Abb. 5: Tabletdarstellung [8]

Abb. 6: Desktopdarstellung [8]

Für hochfrequentierte Seiten kann ein Proxy-Cache die Page Speed verbessern. Er entlastet durch die Bündelung der Anfragen den Backend-Server ungemein. Was häufig unterschätzt wird, sind Softwareupdates. Ein Beispiel: Der Ladeprozess einer Seite, die auf WordPress läuft, beschleunigt sich um 60 Prozent, wenn man WordPress 5.6 von PHP 7.1 auf PHP 7.4 updatet. Schließlich sei noch auf den Einsatz von Service Workern hingewiesen. Sie ermöglichen es, die Geschwindigkeit für mobile Endgeräte zu erhöhen, die häufiger eine Seite besuchen, da sie auch gecachte Inhalte ausliefern, wenn die Internetverbindung unterbrochen ist.

Viele kleine Puzzleteile ergeben ein großes Bild

Zusätzlich gibt es noch ungezählte weitere kleine Puzzleteile, die dabei helfen, die Performance zu verbessern. Dazu zählen die korrekt gesetzten Caching-Header, eine gute Komprimierung, der Einsatz des HTTP/2-Pushverfahrens, ein leistungsfähiges Webhosting und die globale Verteilung der Serverstandorte über ein angepasstes Content Delivery Network (CDN). Sehr kleine Bilder könnte man auch im Base64-Code speichern, um das Volumen noch weiter zu reduzieren. Schließlich kann man bei jedem einzelnen Projekt die Ladezeit noch individuell verbessern; manchmal zum Beispiel dauert die Suche sehr lange, das könnte man mit dem Einsatz eines Solr-Servers korrigieren.

Page Speed ist kein Projekt

Das Fazit lautet: Eine langsame Website ist ein Bug. Die Performance einer Seite ist kein Projekt, sondern als laufende Aufgabe zu begreifen. Nur vor dem Launch einmal übers Tempo nachzudenken, das reicht nicht mehr. In der Entwicklung, vor dem Launch und vor jedem neuen Feature muss man handeln. Wenn sich neue technische Rahmenbedingungen ergeben, muss man handeln. Letzten Endes ist es auch eine Frage der grundlegenden Konzeption und des Designs. Wenn die Seite auch bei 3G in nur zwei Sekunden vollständig laden soll, dann ist ein vollformatiges Imagebild keine gute Idee, auch wenn das Markenimage dadurch besonders emotional transportiert werden kann. Verantwortungsvolle E-Commerce-Anbieter handeln proaktiv, bevor die ersten Kundenklagen oder verschlechterte Conversion-Zahlen hereinkommen. Wenn dieses grundlegende Verständnis von Performance besteht und die aktuellen Tools eingesetzt werden, dann stellt Page Speed kein Problem mehr dar.

Links & Literatur

[1] Fast Company: „How One Second Could Cost Amazon $1.6 Billion In Sales“: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

[2] Pinterest Engineering Blog: „Driving user growth with performance improvements“: https://medium.com/pinterest-engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7

[3] Green, Viki: „Impact of slow page load time on website performance“: https://medium.com/@vikigreen/impact-of-slow-page-load-time-on-website-performance-40d5c9ce568a

[4] Think with Google: „Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed“: https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

[5] Google Search Central Blog: „Zeitplan für die Einführung einer verbesserten Nutzerfreundlichkeit von Seiten in der Google Suche“: https://developers.google.com/search/blog/2020/11/timing-for-page-experience

[6] Performancemetriken: https://web.dev/measure/

[7] Responsive Bilder: https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

[8] Bildgrößenvergleich unter Mobile, Tablet und Desktop: https://www.das-testzentrum.de