Jedes Mal, wenn Sie im Web surfen, laufen hinter den Kulissen unzählige technische Vorgänge ab. Normalerweise sind es Entwickler und IT-Fachleute, die sich mit diesen Vorgängen befassen müssen. Marketer – vor allem diejenigen, die von ihrem technischen Know-how nicht so überzeugt sind – scheuen mitunter davor zurück.
Marketer müssen jedoch wenigstens ein allgemeines Verständnis davon haben, was hinter den Kulissen ihrer Website vor sich geht.
Warum? Zum einen können Kennzahlen, für die Marketer in der Regel verantwortlich sind, erheblich von der Backend-Entwicklung einer Website abhängig sein. Zum Beispiel wirkt sich die Anzahl der HTTP-Anfragen (engl.: HTTP requests) Ihrer Seite auf die Seitenladezeit aus, was letztlich das Nutzererlebnis, die Bounce-Rate und andere Kennzahlen beeinflusst.
Was ist eine HTTP-Anfrage? Wie wirkt sie sich auf das Nutzererlebnis aus? Und was können Marketer tun, um die HTTP-Anfragen ihrer Websites zu reduzieren? Lassen Sie uns diese Fragen nacheinander durchgehen. Am Schluss werden Sie ein besseres Verständnis davon haben, warum diese Antwortprotokolle eine Rolle spielen und was Sie tun können, um Ihren Website-Besuchern ein besseres Erlebnis zu bieten.
Jedes Mal, wenn eine Website besucht wird, passiert in der Regel Folgendes: Der Webbrowser (Chrome, Firefox usw.) des Besuchers kontaktiert (im Fachjargon: pingt) den Webserver, der die Website hostet, die besucht werden soll – in diesem Fall eine Seite auf Ihrer Website.
Der Webbrowser fordert an, dass der Server ihm die Dateien sendet, die die Inhalte für diese Website enthalten. Diese Dateien enthalten alle Texte, Bilder, und Multimedia-Elemente, die auf dieser Website vorhanden sind.
Dieser Vorgang wird als HTTP-Anfrage bezeichnet. HTTP steht für „Hypertext Transfer Protocol“, das ist die technische Bezeichnung für den Vorgang, bei dem ein Webbrowser eine Datei anfordert und der Server die Datei an diesen Browser schickt (transferiert).
Sobald ein Server eine HTTP-Anfrage vom Browser eines Benutzers empfängt, antwortet der Server und liefert die gewünschten Dateien (gesetzt dem Fall, dass der Vorgang reibungslos abläuft). Der Browser des Benutzers kann daraufhin die Website anzeigen.
Und hier ist der Knackpunkt: Der Browser muss für jede einzelne Datei auf Ihrer Website eine eigene HTTP-Anfrage senden. Wenn Ihre Website nicht viele Dateien enthält, dann dauert das Anfordern und Herunterladen der Inhalte von Ihrer Website nicht sehr lange. Aber die meisten guten Websites umfassen eine Menge Dateien. Große, hochauflösende Bilder können dabei zu erheblichen Verlangsamungen führen.
Kurz gesagt, je mehr Dateien sich auf Ihrer Website befinden, desto mehr HTTP-Anfragen muss der Browser eines Benutzers senden, um auch tatsächlich sämtliche Inhalte anzeigen zu können. Je mehr HTTP-Anfragen, desto länger dauert es, Ihre Website zu laden. Und die Übertragung größerer Dateien dauert natürlich länger.
Eine lange Ladezeit kann störend und frustrierend für Ihre Benutzer sein. Das gilt insbesondere für Nutzer mit Mobilgeräten, weil sie oft warten müssen, bis das gesamte Material für eine Website heruntergeladen ist, bevor der mobile Browser überhaupt beginnt, die Seite anzuzeigen.
Studien haben ergeben, dass die Ladezeit für die Website-Performance eine wichtige Rolle spielt. Laut KISSmetrics erwarten 47 % der Verbraucher, dass eine Website innerhalb von zwei Sekunden oder weniger geladen wird, und 40 % verlassen eine Website, die länger als drei Sekunden braucht, um geladen zu werden.
Was ist also die magische Anzahl an HTTP-Anfragen, die eine Website anvisieren sollte? Die Antwort ist nicht „eine“. Gelegentlich versuchen Website-Betreiber, dieses Problem zu umgehen, indem sie die gesamte Website nur mit einer JavaScript-Datei steuern. Aber denken Sie daran: Auch die Dateigröße wirkt sich auf die Ladezeit aus. Bei komplexen Websites wird diese eine Datei extrem lang.
Es gibt nicht unbedingt eine optimale Anzahl an Dateien, auf die eine Seite reduziert werden sollte. Jeffrey Vocell, leitender Produkt-Marketing-Manager von HubSpot, rät jedoch, sich auf zwischen 10 und 30 Dateien zu beschränken.
Bei den meisten erfolgreichen Websites ist es schwierig, dieses Ziel zu erreichen, und meist ist dafür ein nicht unerheblicher Entwicklungs-Aufwand nötig. Steve Souders, ein Experte für Internet-Performance, der früher bei Yahoo! und Google tätig war, twitterte letztes Jahr, dass die durchschnittliche Anzahl der Anfragen tatsächlich bei über 99 pro Seite liegt.
Im Bereich „Network“ der Entwicklertools von Google Chrome können Sie ganz einfach überprüfen, wie viele HTTP-Anfragen eine Website durchführt. Hier werden alle Dateien aufgeführt, die ein Browser anfordern und übertragen muss, um die Seite herunterzuladen – und es wird zudem die dazu erforderliche Dauer angezeigt.
Die API zeigt beispielsweise genau an, wann die HTTP-Anfrage für ein Bild begonnen hat und wann das letzte Byte des Bilds empfangen wurde. Es ist eine wirklich praktische Möglichkeit festzustellen, was sich alles auf Ihrer Seite befindet und welche Elemente langsam geladen werden.
Um den Bereich „Network“ für eine bestimmte Seite Ihrer Website anzuzeigen, öffnen Sie die Website in Google Chrome. Klicken Sie oben im Hauptmenü von Chrome auf „Weitere Tools“ > „Entwicklertools“.
Der Bereich „Network“ wird im Browser geöffnet. Da in diesem Bereich alle Netzwerkaktivitäten bei geöffneten Entwicklertools verzeichnet werden, ist der Bereich beim ersten Öffnen möglicherweise leer. Laden Sie die Seite erneut, um mit der Aufzeichnung zu beginnen, oder warten Sie einfach ab, bis eine Netzwerkaktivität in Ihrer Anwendung auftritt.
In diesem Überblick erläutern wir Ihnen alle wichtigen Elemente des Bereichs „Network“:
Sie sind neugierig, wie viele Anfragen Ihre Website benötigt? Im Bereich „Network“ finden Sie auch die Antwort auf diese Frage. Sehen Sie sich im obigen Screenshot den Bereich ganz links unten an. Hier wird die Gesamtanzahl der Anfragen angezeigt; in diesem Fall sind es 183.
Um Informationen über die einzelnen Elemente in diesem Bereich zu erhalten und um etwas ausführlicher zu erfahren, wie Sie Ihre Netzwerk-Performance bewerten, lesen Sie diesen Google Chrome-Artikel.
Nun sollten Sie eine Vorstellung davon haben, welche Dateien, einschließlich Bilddateien, am langsamsten geladen werden. Die einfachste Möglichkeit, um die Anzahl der angeforderten Dateien zu reduzieren? Überflüssige Bilder entfernen.
Bilder sind wertvolles Website-Material, weil sie für ein starkes visuelles Erlebnis auf Ihren Seiten sorgen. Wenn sich auf Ihrer Seite allerdings Bilder befinden, die keinen besonderen Wert beitragen, ist es am besten, sie einfach zu entfernen – insbesondere die großen.
Verwenden Sie für die Bilder, die Sie behalten, qualitativ hochwertige Fotos in komprimierten Dateien. Dadurch wird die Zeit für eine HTTP-Anfrage und damit auch die Ladezeit verringert.
Wenn Sie HubSpot-Benutzer sind, müssen Sie sich nicht um das Komprimieren von Bildern kümmern – das HubSpot CMS verkleinert und komprimiert Ihre Bilder automatisch. Andernfalls können Sie ein Tool wie TinyPNG oder Compressor.io verwenden, um die Dateigröße zu reduzieren.
Das Entfernen und Komprimieren von Bildern ist ein guter erster Schritt zur Verringerung von HTTP-Anfragen und der Ladezeit einer Seite. In den Entwicklertools von Chrome finden Sie allerdings noch andere Dinge, die sich auf die Ladezeit einer Seite auswirken.
Beispielsweise könnten Sie feststellen, dass ein Video oder eine Twitter-Integration die Ladezeit um eine ganze Sekunde oder zwei verlängert. Das ist gut zu wissen. Jetzt können Sie und Ihr Team entscheiden, ob es sich lohnt, dieses Material beizubehalten.
Wenn sich auf Ihrer Seite JavaScript-Elemente befinden, die nicht asynchron sind, bitten Sie Ihre Entwickler, diese zu verändern – oder gegebenenfalls vollständig aus der Website zu entfernen.
Warum? Letztendlich ist es eine Frage des Nutzererlebnisses. Beim Laden einer Website durch einen Browser wird das Material der Seite von oben nach unten geladen. Wenn dabei eine JavaScript-Datei geladen werden muss, die nicht asynchron ist, dann unterbricht der Browser das Laden aller anderen Elemente auf der Seite, bis diese Datei vollständig geladen worden ist.
Wenn das JavaScript-Element asynchron ist, lädt der Browser es gleichzeitig mit den anderen Elementen. Asynchrone JavaScript-Dateien sorgen somit für ein besseres Nutzererlebnis.
Weitere Informationen dazu, wie Sie asynchronen JavaScript-Code erstellen, finden Sie in dieser Präsentation von Steve Souders und in diesem Beitrag von heise online.
Jede CSS-Datei, die Sie für Ihre Website verwenden, erhöht die Anzahl der HTTP-Anfragen Ihrer Website und verlangsamt dadurch die Ladezeit. Obwohl dies manchmal unvermeidlich ist, können Sie in den meisten Fällen zwei oder mehr CSS-Dateien tatsächlich zusammenfassen. (Sie benötigen dazu gegebenenfalls die Hilfe eines Entwicklers.)
Wieso? CSS-Code kann überall auf Ihrer Website oder in einer beliebigen Anzahl von Dateien vorhanden sein und trotzdem genauso gut funktionieren. Häufig ist der einzige Grund, warum mehrere CSS-Dateien eingesetzt werden, die Vorliebe des Website-Designers, der die Arbeit mit separaten Dateien einfacher fand. (Ausführliche Informationen zum Zusammenfassen von CSS-Dateien finden Sie in diesem Leitfaden zur Frontend-Website-Performance.)
Wenn Sie einen ausführlicheren Bericht über die Gesamt-Performance Ihrer Website haben möchten, sehen Sie sich den neu gestalteten Website Grader von HubSpot an. Sie erhalten einen kostenlosen, personalisierten Bericht, in dem Ihre Website anhand von Kennzahlen bewertet wird – darunter Performance, Optimierung für Mobilgeräte, SEO und Sicherheit.