Mit weniger HTTP Requests die Webseite schneller machen.
Je mehr HTTP-Requests deine Webseite macht, desto langsamer wird sie. Wenn du also die Ladezeiten deiner Webseite optimieren möchtest, ist es hilfreich zu wissen wieviele Anfragen deine Webseite an den Server macht. In diesem Beitrag lernst du wie du deine Webseite durch eine verbesserte Ladezeit optimieren kannst.
- Was sind HTTP-Requests?
- Warum ist eine Reduzierung der HTTP-Request wichtig?
- Wie kannst du die HTTP-Requests deiner Webseite analysieren?
- Wie reduzierst du HTTP-Requests?
Was sind HTTP-Requests?
Deine Webseite besteht aus verschiedenen Teilen. Wahrscheinlich hast du verschiedene Bild- und Videodateien die du auf deiner Webseite verwendest. Dann gibt es noch die CSS-Stylesheets die das Aussehen deiner Webseite festlegen und die Javascript Dateien die deine Webseite mit coolen Funktionen abrundet.
Wenn ich deine Webseite besuche, fragt mein Browser deinen Server nach allen Ressourcen die benötigt werden um deine Webseite darstellen zu können. Jede einzelne Anfrage dieser Dateien ist ein HTTP-Request. HTTP-Request steht für Hypertext Transfer Protocol und ist die Art der Kommunikation des Browser zu deinem Webserver. Dein Server antwortet mit den relevanten Daten die der Browser herunterladen kann. Dabei ist es wichtig zu verstehen, das jedes Element einen eigenständigen HTTP-Request darstellt.
Warum ist eine Reduzierung der HTTP-Request wichtig?
Generell sollte man wissen, je mehr HTTP-Anfragen deine Webseite stellt, desto langsamer wird sie vom Browser geladen und dargestellt. Eine Möglichkeit die Performance deiner Webseite zu steigern, ist die Optimierung der Ladezeit. Eine Webseite die als Portfolio genutzt wird und über 40 Bilder auf der Startseite bereit stellt, lädt langsamer als eine Webseite die nur 10 Bilder darstellt. Das soll nicht heißen das man auf wichtiges Bildmaterial verzichten soll. Vielmehr sollte man sich Gedanken machen, wie man die Ladezeit bis zur ersten Darstellung der Webseite durch optimierte HTTP-Request reduzieren kann.
Wie kannst du die HTTP-Requests deiner Webseite analysieren?
Bisher haben wir gelernt das die Anzahl der HTTP-Requests über die Länge der Ladezeiten deiner Webseite entscheidet. Du solltest aber beachten das nicht jede HTTP-Anfrage gleich ist. Einige Anfragen dauern länger als andere. Häufig habe ich bei Kunden bemerkt das Bilder mit dem Smartphone aufgenommen werden und in die Webseite eingebunden werden. Die Idee ist gar nicht schlecht oder schlimm. Allerdings sollten die Bilder in Dimension und Größe optimiert werden. Denn das Laden eines 3MB großen Bildes dauert viel länger, als das gleiche, optimierte Bild mit 300KB. Wenn du also die größte Verbesserung an deiner Webseite vornehmen willst, dann musst du deinen Fokus auf die besonders langen HTTP-Requests legen. Beim Analysieren der HTTP-Requests deiner Webseite hilft dir die Wasserfall-Analyse. Tools wie Pingdom helfen dir bei deiner Analyse. Alternativ kannst du die Entwicklertools deines Webbrowsers nutzen.
Wasserfall Analyse mit dem Entwicklertool von Google Chrome.
In dem oben dargestellten Bild siehst du das Wasserfall Diagramm meiner Startseite. Darin kannst du erkennen welche verschiedenen Daten vom Browser angefragt wurden, wie groß die Daten sind und wie lange es gedauert hat diese herunter zu laden. Am unteren Ende des Bildes erkennst du die gesamte Ladezeit bist zur Darstellung der Webseite.
Wie reduzierst du HTTP-Requests?
Grundlegend gibt es zwei Herangehensweisen um die HTTP-Requests zu reduzieren.
HTTP-Requests entfernen. Nutzt du ein Webseitenbaukasten oder ein CMS (Content Management System) wie WordPress, kann es sein, das deine Webseite unnütze Dateien lädt. Das heißt, der Browser lädt Daten die zur Darstellung und Funktion der Seite nicht notwendig sind. Das kann unterschiedliche Gründe haben. Zum einen kann es ein Plugin sein, das du irgendwann einmal installiert hast, nicht mehr brauchst aber es nicht entfernt hast. Zum Anderen können es Plugins sein die nur auf bestimmten Unterseiten deiner Webseite zum Einsatz kommen, aber ihre CSS-Daten und Javascript-Dateien auf globaler Ebene deiner Webseite einbinden. Entferne also erstes ungenutzte Plugins.
HTTP-Request kombinieren. Wenn du Assets hast die du unbedingt laden musst, dann überlege dir ob du diese verbinden kannst. Zum Beispiel kannst du 3 CSS-Stylesheets zu einer einzigen Datei zusammenfassen. Diese eine, größere Datei wird vom Browser immer noch schneller geladen als die 3 einzelnen HTTP-Requests zusammen. Wenn du Nutzer von WordPress bist, dann kann ich dir das Plugin AutoOptimize empfehlen. Dieses WordPress-Plugin übernimmt die komplexe Arbeit für dich. Das gleich gilt übrigens auch für die Javascript-Dateien deiner Webseite. Wenn du kein CMS wie WordPress nutzt und keine Programmierkenntnisse hast, dann sprich den Entwickler deines Vertrauen an. Im Handumdrehen kann er dir die Daten optimieren.
Du kannst noch mehr optimieren.
Gute Bilder machen deine Webseite attraktiver und benutzerfreundlicher, keine Frage. Allerdings solltest du dir überlegen, ob du jedes deiner geladenen Bilder benötigst. Vielleicht findest du das Katzen GIF auf deiner Webseite ganz lustig, aber einen Mehrwert bietet es nicht. Dann entferne es. Eine weitere Möglichkeit Ladezeiten durch Bilder und HTTP-Requests zu verbessern, ist das Lazy-Loading von Inhalten „below the fold“. Bilder, Videos und andere Inhalte werde erst geladen, wenn der Betrachter deiner Webseite in die Nähe dieser Inhalte scrollt. Auch dafür kannst du als WordPress Nutzer das Plugin AutoOptimize verwenden.
Zusammenfassung
Alle Inhalte deiner Webseite stellen HTTP-Requests dar. Eine Bilddatei ist ein HTTP-Request. Eine CSS-Datei ist ein HTTP-Request, eine Javascript-Datei ist ein HTTP-Request. Genauso wie geladene Schriftarten HTTP-Requests sind. Wenn du die Ladezeit deiner Webseite optimieren möchtest, dann fokussiere dich auf die langen HTTP-Anfragen. Entferne unnötige Assets und kombiniere deine Dateien soweit es möglich ist. Ein kleiner Tipp zum Schluss, das von Google zur Verfügung gestellte Tool Page Speed Insights zeigt dir nach Eingabe der Url deiner Webseite, einen durchschnittlichen Performance Score. Zusätzlich werden dir weitere Möglichkeiten zur Optimierung deiner Webseite gegeben.