Grundlagen für eine erfolgreiche Homepage

Die Website Performance ist ein sehr interessantes und äußerst wichtiges Thema. Sie ist so wichtig, dass große Internetfirmen quasi von ihr besessen sind. Für Amazon, Facebook, Google, Yahoo oder auch eBay, bedeutet eine schlechte Website Performance weniger Besucher, weniger Umsatz und eine schlechte Reputation.

Diese Globalplayer können sich keinen dieser drei Punkte leisten und deshalb achten sie tunlichst auf eine gute Performance ihrer Website. Und du solltest dies auch tun!

Warum?

Auch wenn die Versorgung mit Breitbandanschlüssen immer besser wird, gehen immer mehr Menschen mit ihren Smartphones oder Tablets von unterwegs aus ins Internet. Dort sind die extremen Geschwindigkeiten längst noch nicht angekommen, aber die Nutzer erwarten trotzdem eine vergleichbare Performance beim Surfen im Internet.

Deshalb ist es wichtig sich mit dem Thema Website Performance auseinanderzusetzen. Und genau das wollen wir einleitend in diesem Artikel tun.

Mehr erfahren

Wenn du häufig im Internet unterwegs bist, hast du sie sehr wahrscheinlich schon häufiger gesehen. Mittlerweile sind sie auf den meisten Seiten individuell gestaltet. Trotzdem sorgen sie in unregelmäßigen Abständen für enttäuschte Gesichter und Aufregung beim Webadministrator.

Ich spreche von den HTTP Statuscodes und den damit verbunden Fehlerseiten im Webbrowser.

HTTP Error 404

Am häufigsten trifft man im Internet auf den 404 Fehler (siehe Abbildung). Dieser ist besonders ärgerlich, wenn man eine super interessante Seite gefunden hat und sich diese nicht öffnen lässt. Es gibt aber noch einige weitere wichtige HTTP Statuscodes, die man häufiger in seinem Browser bewundern darf 😉

Die wichtigsten Vertreter dieser Zunpft stelle ich dir hier in einer schicken Infografik vor. Außerdem erkläre ich dir, was es mit den HTTP Statuscodes auf sich hat und was die einzelnen Meldungen bedeuten.

Was sind HTTP Statuscodes und wie entstehen diese?

Zuerst müssen wir uns anschauen, was passiert wenn du eine Internetseite aufrufst.

Sagen wir mal du möchtest in der freien Enzyklopädie Wikipedia ein bestimmtes Wort nachschlagen. Du gibst also www.wikipedia.de in die Adresszeile deines Webbrowser ein und bestätigst deine Eingabe. Wenn alles glatt läuft, wird dir die Website im Webbrowser dargestellt und du kannst dich auf die Suche nach deiner Erklärung machen.

Doch was passiert im Hintergrund?

Sobald du die Eingabe der URL www.wikipedia.de in deinem Webbrowser bestätigt hast, schickt dieser eine Anfrage an den entsprechenden Webserver. Der Server bearbeitet deine Anfrage und liefert die angefragte Webseite aus. Die Webseite erscheint auf deinem Bildschirm.

Anfrage an einen Webserver

Für diesen Prozess wird HTTP (Hypertext Transfer Protokoll) genutzt und um den Erfolg oder Misserfolg einer Anfrage an deinen Computer zu übermitteln, verwendet das Protokoll sogenannte Status-Meldungen. Das sind die angesprochenen HTTP Statuscodes. Ein HTTP Statuscode ist immer eine dreistellige Nummer im Bereich von 100 – 599.

Bei der oben geschilderten Anfrage, wird deinem Browser z.B. der Statuscode 200 zurückgeliefert. Dieser sagt aus, dass mit der Anfrage alles OK ist, die Webseite gefunden wurde und sie ordnungsgemäß ausgeliefert werden kann.

Wichtig ist hier noch zu wissen, dass nicht jeder Statuscode auch eine Fehlermeldung im Browser erzeugt. Wenn deine Anfrage letztendlich bearbeitet werden konnte, ist dies auch gar nicht notwendig.

Die Klassen der HTTP Statuscodes

Insgesamt gibt es rund 40 unterschiedliche HTTP Statuscodes. Diese können in 5 Klassen eingeteilt werden:

Klassen	Beschreibung der Klasse
100-199	Hierbei handelt es sich um einen Hinweis für deinen Rechner. Zum Beispiel teilt der Server deinem Rechner über diese Klasse von HTTP Statuscodes mit, dass er deine Anfrage erhalten hat oder das der Verarbeitungsprozess ausgeführt wird.
200-299	In dieser Klasse sind HTTP Statuscodes zusammengefasst, die für eine erfolgreiche Bearbeitung stehen. Wenn z.B. die angefragte Webseite erfolgreich zurückgesendet werden konnte oder eine Datei erfolgreich auf dem Server gespeichert wurde, wird ein Statuscode dieser Klasse verschickt.
300-399	Bei diesen HTTP Statuscodes, muss der Client immer eine neue Aktion veranlassen. Sei es aus dem Grund, dass die angefragte Internetseite verschoben wurde oder dein Rechner die Seite aus dem Cache laden soll.
400-499	Diese Status-Meldungen umfassen alle Client-Fehler die bei einer Anfrage auftreten können. In dieser Klasse ist auch der Eingangs erwähnte 404 Fehler zu finden, den ich gleich noch näher beschreiben werde.
500-599	In dieser Klasse sind Fehlermeldungen des Servers zusammengefasst.

Die wichtigsten Statuscodes in der Übersicht

Jetzt wird es Zeit dir die wichtigsten HTTP Statuscodes vorzustellen. Auf diese wirst du immer wieder stoßen. Nicht nur wenn du im Internet surfst, sondern auch wenn du eine Homepage erstellst. Bühne frei für die erste Infografik hier auf dem Webschmöker.

Infografik zu den wichtigsten HTTP Statuscodes

Ich hoffe die Infografik hat dir gefallen. Sollte das so sein, dann fühl dich frei diese auszudrucken oder auf deiner eigenen Webseite einzubinden.

Zur Einbindung kannst du den folgenden Quellcode verwenden:
<a href=”https://www.webschmoeker.de/die-wichtigsten-http-statuscodes/” title=”Infografik: HTTP Statuscodes” target=”_blank”>
<img src=”https://www.webschmoeker.de/wp-content/uploads/2014/08/http-statuscodes-infografik.png” alt=”Infografik” style=”width:100%”>
</a>
<p>Quelle: <a href=”https://www.webschmoeker.de” title=”Der Webschmöker”>Der Webschmöker</a>

Einzelne HTTP Statuscodes näher betrachtet

Das war bis jetzt gute Lektüre zum Schmökern oder? Jetzt will ich dir den ein oder anderen HTTP Statuscode aber noch näher vorstellen. Bei diesen reichen die Informationen in der Infografik nicht aus, um den genauen Ablauf zu verstehen.

301 – Moved Permanently

Der HTTP Statuscode 301 Moved Permanently, wird für dauerhafte Weiterleitungen (Redirects) verwendet und führt zu einer erneuten Anfrage durch deinen Rechner. Er wird vom Webserver gesendet, wenn du eine URL aufrufst, die verschoben worden ist und unter einer neuen Adresse zufinden ist.

Der Webserver liefert in dem Fall nicht sofort die angeforderte Webseite aus, sondern schickt zuerst eine Antwort mit dem Statuscode 301 und der neuen Adresse des Dokuments. Dein Rechner verarbeitet diese Informationen und sendet eine neue Abfrage mit dem neuen Ort, an dem sich das Dokument befindet. Erst dann liefert der Webserver das angefragte Dokument auch wirklich aus.

Von dieser Prozedur bekommst du nicht viel mit. Man kann das Verfahren aber sehr schön nachstellen. Tippe doch einfach mal die URL www.webschmoeker.de/grundlagen in die Adresszeile deines Browser ein. Wichtig hierbei ist, dass du kein abschließendes Slash-Zeichen verwendest. Bestätige deine Eingabe und achte darauf, wie sich die URL nach dem Laden der Seite verändert hat.

Wenn alles so funktioniert hat, wie ich mir das vorstelle, steht in der Adresszeile deines Browsers jetzt www.webschmoeker.de/grundlagen/. Habe ich Recht?

Was ist hier passiert?

Bei deiner Abfrage ohne das abschließende Slash-Zeichen, macht sich der Webserver auf die Suche nach einer Datei, die entsprechend bezeichnet worden ist. Diese wird er aber an der Position nicht finden. Deshalb sucht er anschließend nach einem Verzeichnis mit dem angegebenen Namen. Dieses existiert und der Webserver schickt einen 301 Statuscode und die neue Adresse (mit dem End-Slash) an deinen Rechner zurück. Dein Rechner sendet nun eine neue Abfrage an den Webserver und die Seite wird ausgeliefert.

Daher kommt also das Slash am Ende der URL.

Weiterleitungen kannst du natürlich auch manuell setzen. Überarbeitest du z.B. deine Navigation und ändern sich dabei die URLs deiner einzelnen Internetseiten, ist es sinnvoll 301 Redirects einzurichten. Damit wird sichergestellt, dass die User, aber auch die Suchmaschinen, deine Inhalte weiterhin finden. Die Nutzung des HTTP Statuscode 301 Moved Permanently, wird sogar von Google für solche Zwecke empfohlen.

304 – Not Modified

Dieser HTTP Statuscode wird beim Caching einer Webseite eingesetzt.

Rufst du eine Webseite das erste Mal auf, werden z.B. die Bilder der Internetseite auf deiner Festplatte (im sogenannten Browser-Cache) abgelegt. Bei einem erneuten Besuch der gleichen Seite, sendet dein Rechner zusätzliche Informationen an den Webserver. Über diese Informationen, kann festgestellen werden, ob es Änderungen an den Bildern seit deinem letzten Besuch gab. Ist dies nicht der Fall, sendet der Server den HTTP Statuscode 304 Not Modified zurück und dein Browser verwendet die Bilder, die sich auf deiner Festplatte befinden.

Dieses Verfahren spart sehr viel Ladezeit, da die Bilder nicht vom Webserver übertragen werden müssen. Wenn du also gerade damit beschäftigt sein solltest, die Ladezeiten deiner Homepage zu optimieren, aktiviere auf jeden Fall das Browser-Caching 😉

403 – Forbidden

Der Statuscode wird vom Webserver verwendet, wenn er deine Anfrage verstanden hat, du aber keine Zugriffsrechte auf das angeforderte Dokument oder Verzeichnis besitzt.

Dies kann verschiedene Gründe haben. Wenn man z.B. die Verzeichnisstruktur auf dem Webserver von einer Internetseite kennen sollte und in dem entsprechendem Verzeichnis keine index.html existiert, kann man sich alle Dateien eines Verzeichnisses direkt im Browser darstellen lassen. Über diese Möglichkeit können dritte natürlich sehr einfach an deine Bilder oder auch an deinen Quellcode gelangen und diesen herunterladen.

Nun ist es verständlich, dass viele Webmaster das nicht wollen und schützen solche Verzeichnisse mit besonderen Zugriffsrechten. Steuerst du eines dieser Verzeichnisse an, beantwortet der Webserver deine Anfrage mit dem HTTP Statuscode 403 und es erscheint eine Fehlermeldung bzw. Hinweis in deinem Browser, dass du hier kein Zugriff besitzt.

Hinweis am Rande:

Ähnlich läuft das Verfahren beim HTTP Statuscode 401 ab. Hier wurden auch bestimmte Zugriffsrechte für ein Verzeichnis oder ein Dokument gesetzt. Bei diesem Statuscode erscheint aber ein Authentifizierungsdialog, in dem du Benutzername und Passwort eintragen kannst. Nach erfolgreicher Identifizierung wirst du in das entsprechende Verzeichnis weitergeleitet. So kann man einen einfachen geschützten Bereich auf seinem Webserver einrichten.

Fazit

HTTP Statuscodes sind ein wichtiges Kommunikationsmittel zwischen deinem Rechner und dem Webserver. Über diese wird der Erfolg oder Misserfolg des Abrufs einer Webseite kommuniziert.

Wie der Name es vermuten lässt, werden die HTTP Statuscodes vom Hypertext Transfer Protokoll verwendet und sind dreistellige Nummer im Bereich von 100 – 599. Jeder der rund 40 existierenden HTTP Statuscodes steht für ein spezielles Ereignis, welches während der Kommunikation auftreten kann. Diese Ereignisse lassen sich in 5 verschiedene Klassen aufteilen.

Bist du häufiger im Internet unterwegs oder beschäftigst dich mit der Erstellung deiner eigenen Homepage, wirst du einige HTTP Statuscodes öfters antreffen. Besonders wenn du deine eigene Homepage erstellst, ist es nicht verkehrt zu wissen, welcher Statuscode für welches Ereignis steht. Wir einen schnellen Überblick über die wichtigsten HTTP Statuscodes, habe ich dir in diesem Artikel eine Infografik zur Verfügung gestellt. Schau dir diese am besten nochmal an und druck sie dir aus. Die Informationen wirst du wahrscheinlich häufiger benötigen, als du aktuell vermutest.

Das User Datagram Protocol (UDP) – Das Internet – Teil 8

Einführung in die Website Performance und warum du dich damit beschäftigen musst

Das Transmission Control Protocol (TCP) – Das Internet – Teil 7

Alles was du über die Conversion Rate wissen musst

Was ist der Browser-Cache und welche Vorteile bietet er dir?

Die wichtigsten HTTP Statuscodes + Infografik