Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

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

(Foto: Natasa Adzic / Shutterstock)

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

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

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.

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.

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.

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).

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.

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.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

5 Reaktionen
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
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

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

Abbrechen