Anzeige
Anzeige
Ratgeber
Artikel merken

Schnelle Ladezeiten: Die wichtigsten Techniken für die Web-Performance

Schnell zu sein, ist wichtiger denn je: Gute Ladezeiten sorgen für Nutzerzufriedenheit, verbesserte Conversions, mehr Traffic und ein besseres SEO-Ranking.

Von Felix Gessert
4 Min. Lesezeit
Anzeige
Anzeige

(Foto: Natasa Adzic / Shutterstock)

Zeit ist auch in der digitalen Welt eine wichtige Währung. Je schneller die eigene Webseite lädt, desto höher sind Traffic und Nutzerzufriedenheit. Zudem verbessern geringe Ladezeiten Conversions und das SEO-Ranking einer Webseite. Amazon hat beispielsweise ermittelt, dass bereits eine Ladezeiterhöhung von 100 Millisekunden den Umsatz um ein Prozent senkt. Hilfe versprechen eine Reihe an Lösungsmöglichkeiten und Angeboten. Doch welche bieten was? Wir bringen Licht ins Dunkel und klären auf, was sich hinter Abkürzungen wie AMP, PWA und CDN verbirgt.

Googles Vorschlag: Accelerated-Mobile-Pages

Anzeige
Anzeige

Accelerated-Mobile-Pages (AMP) sind Googles Ansatz, wie Artikel für den mobilen Zugriff optimiert werden. Dafür sollen Publisher ihre Artikel als AMP-Seiten bereitstellen, die dann durch Google speziell indiziert und zwischengespeichert werden.

Um zu verhindern, dass Entwickler ineffiziente AMP-Seiten erstellen, gelten strenge Einschränkungen. Diese betreffen insbesondere HTML sowie CSS und schließen das Ausführen von eigenem Javascript komplett aus. Auch bei Werbenetzwerken und Tracking können nur vordefinierte Anbieter genutzt werden. Außerdem sind dynamische Inhalte wie Kommentare und Formulare im Allgemeinen ausgeschlossen. Entsprechend eignen sich AMP-Seiten lediglich für einfache, statische Seiten ohne Nutzerinteraktion.

Anzeige
Anzeige

In der Google-Suche werden die AMP-Seiten prominent platziert und mit einem Blitzsymbol gekennzeichnet. Beim Klick auf die Seite liefert Google selbst die zwischengespeicherte Version aus – so bleibt der Nutzer effektiv auf Googles Seite. Ein großer Kritikpunkt ist, dass mit diesem Vorgehen dem eigentlichen Herausgeber des Artikels die Besucher entgehen und AMP-Seiten stattdessen nur zu Googles Traffic beitragen.

Anzeige
Anzeige

Facebooks Gegenentwurf: Instant Articles

Facebooks Instant Articles funktionieren recht ähnlich zu AMP. Auch hier muss eine eingeschränkte HTML-Seite entwickelt werden, die dann bei Facebook zwischengespeichert wird. Im Gegensatz zu AMP-Seiten, die auch als unabhängige Webseiten funktionieren, sind Instant Articles an Facebooks Plattform gebunden und werden lediglich in den nativen Facebook-Apps unter iOS und Android angezeigt.

Oldie but Goldie: Content-Delivery-Networks und Caching

Abgesehen von den spezialisierten Ansätzen von Facebook und Google gibt es natürlich auch allgemeine Ansätze und Best-Practices zur Beschleunigung von Webseiten. Das Zwischenspeichern von Daten in Caches ist seit Jahrzehnten die effektivste Methode, Ladenzeiten zu verringern und Datenvolumen bei der Übertragung zu sparen. Liegen die Daten einer Webseite bereits in einem nahegelegenen Cache, kann diese Kopie schneller geladen werden als das weiter entfernte Original. Im Optimalfall sind die Daten bereits auf dem Gerät des Nutzers im sogenannten Browser-Cache gespeichert und müssen deshalb überhaupt nicht geladen werden.

Anzeige
Anzeige

Caches gibt es auf vielen verschiedenen Ebenen. Serverseitige Caches beschleunigen, indem sie die Verarbeitungszeit im Server verringern. Content-Delivery-Networks (CDNs) speichern Daten an wichtigen Knotenpunkten des Internets und verringern so die Übertragungsdistanz. Mit Browser-Caches lassen sich viele Anfragen sogar komplett sparen.

Die große Herausforderung beim Caching besteht darin, die vielen verteilten Kopien der Daten aktuell zu halten. Aus diesem Grund eignet sich klassisches Caching nur für statische Daten, die sich selten bis gar nicht ändern. Das Caching von veränderlichen Daten wie Artikeln oder Kommentaren ist allerdings mittlerweile mit neuesten Techniken möglich.

Neuer, schneller und besser: HTTP in Version 2

Bei allen Anfragen, die nicht direkt vom Browser-Cache beantwortet werden, sollte die Übertragung so effizient wie möglich sein. Nach mehr als 15 Jahren löst nun HTTP/2 seinen Vorgänger HTTP/1.1 als Standard zur Datenübermittlung im Internet ab. Der Fokus des Updates liegt klar auf der Optimierung von Ladezeiten. Funktional bleibt das Protokoll das gleiche, dafür werden aber etliche Performance-Probleme von HTTP/1.1 gelöst. Die zentrale Optimierung lässt den Browser mehrere Anfragen parallel über die gleiche Verbindung stellen (Request-/Response-Multiplexing), was die Wartezeit bei Anfragen verkürzt. Der Browser kann außerdem wichtigen Daten eine höhere Priorität beim Laden zuordnen (Resource-Prioritization). Der Server bekommt mit h2 sogar die Möglichkeit, Daten an den Browser zu senden, bevor diese angefragt werden (Server-Push). Dadurch muss der Browser nicht mehr auf kritische Daten warten. Letztlich reduziert h2 auch die Größe der übertragenen Daten, indem Metadaten komprimiert werden (Header-Compression).

Anzeige
Anzeige

Wird die Webseite bereits verschlüsselt ausgeliefert, ist die Umstellung auf h2 in den meisten Fällen problemlos. Um das volle Potential zu nutzen, sollte die Seite jedoch im Anschluss auf h2 optimiert und Server-Push implementiert werden.

Webseiten wie Apps: Progressive-Web-Apps

Wer seine Webseite als Progressive-Web-App (PWA) aufstellt, kann noch weiter optimieren und von einer ganzen Menge an Vorteilen profitieren. Durch den offenen Web-Standard ist es nicht nur möglich, die Ladezeit – insbesondere bei schlechter Netzqualität – zu verringern: Mit etwas Aufwand können Nutzer die Seite sogar offline verwenden. Darüber hinaus kann die Seite auf Android-Smartphones installiert werden wie eine App aus dem Play-Store und sie empfängt sogar Push-Nachrichten. Für den Benutzer fühlt sich die Website damit an wie eine native App.

Die ersten Schritte zur eigenen PWA sind sehr einfach. Um aus einer bestehenden Webseite eine PWA zu machen, müssen lediglich eine Datei mit Darstellungsinformationen, ein sogenanntes App-Manifest, und ein Skript, ein sogenannter Service-Worker, in die Seite eingebunden werden. Funktionen wie den Offlinemodus, die Push-Nachrichten und insbesondere die schnellen Ladezeiten erfordern allerdings einige Arbeit am Service-Worker und erhöhen schnell den Entwicklungsaufwand. Für die Beschleunigung müssen im Service-Worker Cache-Strategien implementiert werden. Auch hier gilt: Das Caching von änderbaren Inhalten ist nur mittels sehr spezieller Techniken möglich.

Anzeige
Anzeige

Die Qual der Wahl

Jede Webseite ist anders, aber jede sollte schnell sein. Abhängig von Zielgruppen, Inhalt und verfügbaren Ressourcen bieten sich für unterschiedliche Webseiten unterschiedliche Optimierungsstrategien an. Für statische Inhalte sind AMP-Seiten oder Instant Articles ein moderates Mittel, um die Ladezeit zu senken. Will man die auferlegten Einschränkungen umgehen oder einfach den Traffic auf der eigenen Domain wissen, bietet sich auch der Ausbau der eigenen Webseite zur PWA an.

Diese Ansätze sind auf mobile Nutzer zugeschnitten. Doch daneben gibt es auch Techniken, die jede Webseite nutzen sollte und kann. Caching ist dabei die effektivste Art zur Verringerung von Ladezeiten: In Verbindung mit h2 und einem CDN kann schon eine Menge erreicht werden. Mit den richtigen Mitteln kann so jede Seite Geschwindigkeiten wie bei AMP erreichen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Andreas Säger

Am allerwichtigsten ist natürlich der Adblocker. Er hat einen weit größeren Effekt als die im Artikel vorgestellten Maßnahmen.

Antworten
dennis

verstehe ich nicht. Was soll der Adblocker machen? und wie soll ein Webseitenbetreiber den Adblocker auf dem Client Rechner beeinflussen?

Antworten
Felix Gessert

Das stimmt aus User-Sicht in den meisten Fällen, der Artikel bezieht sich auf die Betreiber-Seite. Ein Publisher, der versucht seine Website zu beschleunigen, wir seinen Usern eher nicht empfehlen, einen Adblocker zu installieren ;-)

Antworten
dennis

AMP ist von vielen versucht worden und von vielen weggeschoben worden.
AMP ist definitiv keine Lösung und das braucht niemand. Schöner Versuch von Google, aber einfach praktisch nicht zu gebrauchen.

Antworten
Felix Gessert

Ja, die negative Presse über AMP häuft sich in letzter Zeit. Ich habe kürzlich auf der Code.talks in einem Vortrag AMP eher negativ bewertet und die Probleme beschrieben: https://www.youtube.com/watch?v=7ipQ0MG-jSo

Was mich am meisten verwundert hat war, mit welchen religiösen Argumenten wir anschließend von einem AMP-Entwickler von Google konfrontiert wurden. Da fehlte die komplette Einsicht, das Entwickler keine technischen Einschränkungen mögen und der Verzicht auf JavaScript eben kein Feature sondern ein Problem ist. Genauso, dass die Platzierung von AMP-Ergebnissen in Sucherergebnissen die Ausnutzung eines Monopols ist – ginge es Google wirklich nur um Performance, könnte man schlicht schnelle Seiten statt AMP-Seiten präsentieren.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige