Geschwindigkeitsoptimierung von Webseiten: Unterschied zwischen den Versionen

Aus Tipps, Tricks und Anleitungen
Wechseln zu: Navigation, Suche
Amazon-Werbung
 
 
Zeile 65: Zeile 65:
  
 
==Zahl der Seitenelemente==
 
==Zahl der Seitenelemente==
Das Laden jedes Seitenelements bedeutet einen Serveraufruf, selbst wenn die Seitenelemente auf dem eigenen Server liegen. Jeder Serveraufruf kostet nicht nur Zeit, es sind zudem nur eine begrenzte Zahl von Serveraufrufen zeitgleich möglich. Insofern lohnt es sich in den meisten Fällen, die Zahl der Seitenelemente gering zu halten. Insbesondere bei Webseiten mit vielen Bildern lohnt sich oftmals das Erstellen von sogenannten "CSS Sprites". Dabei werden alle Bilder als Kollage in einer einzigen Bilddatei zusammengefasst, aus der die einzelnen Bildelemente anschließend vorgefertigten HTML-Elementen zugewiesen werden. Das folgende Beispiel (Quelle: Quellcode von [http://www.pooq.org/ http://www.pooq.org]) schneidet aus der Bilddatei "Box1.png" (die so nur einmal geladen werden muss) vier Teilbilder aus und weist sie als Hintergrundbild einem ''<nowiki><td></nowiki>''-Element zu. Dabei bezeichnen ''width'' und ''height'' die Größe des Ergebnisbilds und ''background-position'' bezeichnet die Verschiebung des Originalbilds, an der das Teilbild ausgeschnitten werden soll.
+
Das Laden jedes Seitenelements bedeutet einen Serveraufruf, selbst wenn die Seitenelemente auf dem eigenen Server liegen. Jeder Serveraufruf kostet nicht nur Zeit, es sind zudem nur eine begrenzte Zahl von Serveraufrufen zeitgleich möglich. Insofern lohnt es sich in den meisten Fällen, die Zahl der Seitenelemente gering zu halten. Insbesondere bei Webseiten mit vielen Bildern lohnt sich oftmals das Erstellen von sogenannten "CSS Sprites". Dabei werden alle Bilder als Kollage in einer einzigen Bilddatei zusammengefasst, aus der die einzelnen Bildelemente anschließend vorgefertigten HTML-Elementen zugewiesen werden. Das folgende Beispiel schneidet aus der Bilddatei "Box1.png" (die so nur einmal geladen werden muss) vier Teilbilder aus und weist sie als Hintergrundbild einem ''<nowiki><td></nowiki>''-Element zu. Dabei bezeichnen ''width'' und ''height'' die Größe des Ergebnisbilds und ''background-position'' bezeichnet die Verschiebung des Originalbilds, an der das Teilbild ausgeschnitten werden soll.
  
 
   <nowiki>
 
   <nowiki>

Aktuelle Version vom 10. Mai 2016, 11:32 Uhr

Hinweis: Der Autor des Artikels ist kein ausgebildeter Fachmann zum Thema. Alle hier getroffenen Aussagen sind nach bestem Wissen sowie gegebenenfalls nach persönlicher Einschätzung des Autors getroffen. Dabei ist es leider nicht auszuschließen, dass einige Angaben veraltet, irreführend oder sonstwie fehlerhaft sind. Letztendlich liegt es in der Verantwortung jedes einzelnen Lesers, die hier gemachten Angaben zu überprüfen und gegebenenfalls weitere Informationen einzuholen. Der Autor kann und will darum keine Garantie oder Haftung für Probleme oder Verluste, die trotz oder wegen der Befolgung der hier genannten Ratschläge eintreten, übernehmen. Jeder Leser hat natürlich die Möglichkeit, die folgenden Ratschläge nicht zu befolgen oder sie gar nicht erst zu lesen.


Wie kann ich die Geschwindigkeit meiner Webseite verbessern?

Dieser Artikel behandelt hilfreiche Werkzeuge zur Bewertung und Optimierung von Webseiten. Er ist Teil einer Serie über Webseitenoptimierung und am Ende dieses Artikels gibt es eine Übersicht über weitere Artikel zu diesem Thema.

Einleitung

Die Geschwindigkeit einer Webseite hängt von mehreren Komponenenten ab und ist dabei zudem statistischen Schwankungen unterworfen. So liefert selbst bei einem lokalen Webserver jeder Seitenaufruf meist leicht unterschiedliche Ladezeiten und im Internet kommt eine weitere Varianz der Ladezeiten durch den Weg durchs Netz hinzu. Insofern muss man zur Ermittlung der Ladezeit mehrere Seitenaufrufe vernünftig (eventuell sind einzelne Ausrutscher auszusortieren) zu mitteln, um ein einigermaßen aussagekräftiges Ergebnis zu erhalten.

Neben der reinen Ladezeit einer Webseite, die man mit Messprogrammen bestimmen kann, gibt es außerdem noch das Phänomen der subjektiven Ladezeit. Hierbei wird versucht, den Aufbau der Seite so zu gestalten, dass der Nutzer die Seitenelemente in einer Reihenfolge präsentiert bekommt, dass ihn der eventuell langsame Aufbau der Gesamtseite nicht so sehr bewusst wird. Da die Optimierung der subjektiven Ladezeit eher individuelle Maßnahmen erfordert und nur bei umfangreichen Seiten für den Nutzer ins Gewicht fällt, beschränkt sich dieser Artikel auf die objektive Gesamtladezeit einer Webseite. Dabei sind es im wesentlichen vier Themenfelder, die man bearbeiten kann:

Codebasis der Webseite

Als Codebasis der Webseite soll alles bezeichnet werden, was die Webseite an Quelltextinformationen an den anfragenden Browser schickt. Dabei bezeichnet die Angabe zur Seitengröße jedoch nur die Größe der HTML-Codebasis und bezieht zusätzliche Elemente wie etwa Bilder nicht mit ein. Sie beinhaltet also im Wesentlichen den HTML-Code sowie gegebenenfalls die Angaben zu CSS-Stylesheets und zu eingebetteten Scripten. Die Größe der HTML-Codebasis lässt sich bei den meisten Browsern direkt anzeigen, indem man mit der rechten Maustaste auf die Webseite klickt und dann "Seiteninformationen" auswählt. Die Größen der verwendeten Stylesheet- und Scriptdateien werden in der Auswertung von Messprogrammen angezeigt.

Bei dem Einfluss der Codebasis auf die Ladezeit kommt es zum Einen darauf an, wie schnell diese Informationen vom Webserver fertiggestellt sind und losgeschickt werden und davon wie umfangreich diese Daten sind, das heißt wie lange es dauert, bis diese beim Webbrowser des Besuchers ankommen und verarbeitet sind. Die Größe der Dateien kann zudem insbesondere beim Aufruf durch mobile Geräte zu Entlastungen führen, da sie häufig an vertragliche Grenzen bezüglich des Datenvolumens gebunden sind.

Überflüssige Angaben vermeiden

Oftmals enthält bereits die Webseite ans sich Informationen, die überflüssig sind. Dies können zum Einen sichtbare inhaltliche Elemente sein wie grafische Spielereien oder Copyright-Angaben zur Webseite, die man nur für das eigene Ego eingefügt hat. Schauen sie sich die Webseite einmal genau an, ob es sichtbare Seitenelemente gibt, auf die sie problemlos verzichten können.

Auch im versteckten Bereich gibt es Seiteninformationen, die zwar auf der Webseite unsichtbar sind, aber im Quellcode enthalten sind. Um zu sehen, wie der HTML-Code der ausgelieferten Seite aussieht, klicken sie mit der rechten Maustauste auf einen Bereich ihrer Webseite und wählen im Kontextmenu "Quelltext betrachten". Auch diesen Quelltext sollten sie nach überflüssigen Angaben durchsuchen und diese entfernen. Dies betrifft insbesondere die sogenannten Metatags der Webseite, die sich zwischen den beiden HTML-Tags "<head>" und "</head>" befinden. Hier liefern einige Webseiten zum Teil sehr umfangreiche Angaben über den Autor, die zu erwartenden Inhalte in diversen denkbaren Sprachen und einiges mehr. Welche Angaben dabei wichtig sind, muss man natürlich individuell entscheiden. Als Anhaltspunkt sei hier der Header-Abschnitt genannt, den ich derzeit auf der Webseite http://www.web-fortbildung.de verwende:

 
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="SHORTCUT ICON" href="favicon.ico">
  <link rel=stylesheet type="text/css" href="schriften.css">
  <title>Suchen im Internet</title>
  <meta name=viewport content="width=600px, initial-scale=1">
  <meta name="description" content="Diese Seite beschreibt, wo man im Internet nach Inhalten suchen kann.">
  <meta name="language" content="de">
  <meta name="keywords" lang="de" content="Internet,Suchen im Internet,Internetsuche,Hilfe,Suchmaschine,Suchhilfe,finden,Webseiten,Linkliste,Webkatalog">
  <meta name="revisit-after" content="14 days">
  <meta name="robots" content="follow">
  <meta http-equiv="expires" content="14 days">
  </head>

W3C-Konventionen übergehen

Der Validator von W3C lässt eine Überprüfung zu, ob eine Webseite der Norm der W3C entspricht. Eine saubere W3C-konforme Programmierung sollte in der Theorie (aber leider nicht immer in der Praxis) zu einer fehlerfreien Darstellung einer Webseite in allen Browsern führen. Eventuell wird W3C-Konformität sogar von Suchmaschinen als Qualitätskriterium einer Webseite herangezogen, was allerdings aufgrund der Geheimhaltung der Bewertungsalgorithmen durch die Suchmaschinenbetreiber eine reine Mutmaßung bleibt. Letztlich ist es jedoch prinzipiell empfehlenswert, sich an die Konvention zu halten.

Allerdings beinhaltet das Einhalten der Konvention auch die Verwendung vieler zusätzlicher Zeichen, die in der Praxis nicht benötigt werden, weil die gängigen Browser in der Lage sind, auch abweichende Darstellungen richtig zu interpretieren. Durch Weglassen dieser Zeichen kann man unter Verletzung der Konvention spürbar Datenvolumen sparen, das man übertragen muss. Dabei bieten sich zwei häufig vorkommende Fälle an, bei denen auf einfache Weise eine Einsparung möglich ist. Zum Einen lassen sich einfache Tags (nicht aber doppelte!) ohne das "/" als Endezeichen schreiben. So tut etwa <br> seinen Dienst ebenso gut wie das empfohlene </br>. Zum Anderen lassen sich bei Angaben innerhalb von HTML-Tags die Anführungsstriche sparen, sofern die entsprechende Angabe keine Leerzeichen enthält. So hat <table title=hallo valign=top width=160> den gleichen Effekt wie <table title="hallo" valign="top" width="160px">, welches normkonform wäre.

Lesbarkeit übergehen

HTML-Code enthält oft viele Zeichen, die unnötig übertragen werden, die jedoch die Lesbarkeit des HTML-Codes fördern. Dazu gehören etwa erklärende Kommentare oder auch Zeilenumbrüche zwischen den einzelnen Codezeilen. Das Entfernen dieser Zeichen kann den Umfang der Webseite oft deutlich reduzieren, macht den Webseiten-Quelltext aber für Menschen schwer lesbar. Hier muss man für sich selbst den richtigen Mittelweg finden. Wer lesbaren HTML-Code beim Bearbeiten und hochoptimierten Kurzcode bei der Auslieferung möchte, kann im Internet auch zahlreiche Programme finden, die Quelltext (auch Ordnerweise) automatisch verkürzen. In dem Fall bearbeitet man die Webseite mit seinem normalen HTML-Code und lädt auf die Webseite den komprimierten HTML-Code.

Elemente, die sich zur Komprimierung eignen, sind HTML-Kommentare (also Angaben zwischen den Tags "<!--" und "-->"), lange "sprechende" Klassennamen von CSS-Klassen (also <td class="rf"> statt <td class="rotes_feld_fuer_hinweis_auf_wichtige_infomeldungen">) sowie Leerzeilen und Zeilenumbrüche ("<tr> <td>" ist länger als "<tr><td>"). Letzteres gilt insbesondere für die Definitionen in CSS-Stylesheets, die oftmals durch viele Zeilenumbrüche und Leerzeichen sehr luftig dargestellt sind. Eine zeilenweise Zusammenfassung ohne unnötige Leerzeichen kann dabei oft schon helfen und bleibt sogar noch gut lesbar (Codeausschnitt als Beispiel):

 
  td.d{text-align:left;padding-left:10px;}
  td.f{background-color:#AAAAAA;text-align:center;font-weight:bold;font-size:small;}
  td.f1{background-image:url("b/k1.gif");background-repeat:no-repeat;}
  td.f2{background-image:url("b/k2.gif");background-repeat:no-repeat;}

Seitenelemente

Als Seitenelemente werden alle weiteren Komponenten betrachtet, die von dem Code in der HTML-Codebasis nachgeladen werden. Dies sind üblicherweise Bilder, die angezeigt werden sollen. Entsprechende Optimierungen sollte man auch bei anderen Seitenelementen durchführen, welche jedoch nur auf wenigen Webseiten vorkommen.

Größe von Bildern

Bei Bildern sollte beachtet werden, dass sie oftmals deutlich mehr Datenvolumen erzeugen, als die HTML-Codebasis der Webseite. Bilder bieten darum ein sehr großes Optimierungspotential für Webseiten. Dabei ist es zuerst wichtig, dass die Bilder von der Pixel-Größe genauso groß vorgehalten werden, wie sie später dargestellt werden. Dies spart nicht nur unnötige Datenübertragung (es gibt tatsächlich Webseiten, bei denen ein 4MB-Kamerabild für die Darstellung eines 30px mal 30px großen Vorschaubildes geladen werden), sondern erspart dem Browser auch die Größenumrechnung der Bilddatei.

Darüber hinaus ist das verwendete Bildformat nicht unwichtig. So sind in der Regel Bilder im "png"-Format kleiner als die gleichen Bilder im "jpg"-Format. Als letzten Schritt sollte man auf Webseiten Bilder nach Möglichkeit komprimieren. Mit Hilfe von Komprimier-Programmen wie RIOT lässt sich die Datei-Größe von Bildern oft drastisch reduzieren mit einem kaum sichtbar geringen oder manchmal auch gar keinem Qualitätsverlust des Bildes.

Quelle von Seitenelementen

Seitenelemente, die von einem externen Server geladen werden, benötigen zusätzliche Zeit, da sie nicht direkt vom Server geladen werden können, sondern erst ein zusätzlicher anderer Server kontaktiert werden muss, um die benötigten Daten zu erhalten. Soweit technisch und rechtlich möglich, sollte man darum alle Daten auf dem eigenen Server vorhalten und Zugriffe auf externe Quellen vermeiden.

Eine Ausnahme, bei der man bewusst auf externe Quellen zugreift, ist die Verwendung eines CDN ("Content Delivery Network") oder einer CDN-artigen Struktur. Dabei lagert man Inhalte gezielt auf (möglichst leistungsfähige) Server aus, weil die meisten Browser-Webserver-Kommunikationen nur eine begrenzte Zahl gleichzeitiger Downloads zulassen. Wenn also sehr viele Seitenelemente nachgeladen werden müssen, hat es in manchen Fällen Vorteile, diese auf mehrere Server zu verteilen, da sie dann gleichzeitig und letztlich schneller geladen werden können.

Zahl der Seitenelemente

Das Laden jedes Seitenelements bedeutet einen Serveraufruf, selbst wenn die Seitenelemente auf dem eigenen Server liegen. Jeder Serveraufruf kostet nicht nur Zeit, es sind zudem nur eine begrenzte Zahl von Serveraufrufen zeitgleich möglich. Insofern lohnt es sich in den meisten Fällen, die Zahl der Seitenelemente gering zu halten. Insbesondere bei Webseiten mit vielen Bildern lohnt sich oftmals das Erstellen von sogenannten "CSS Sprites". Dabei werden alle Bilder als Kollage in einer einzigen Bilddatei zusammengefasst, aus der die einzelnen Bildelemente anschließend vorgefertigten HTML-Elementen zugewiesen werden. Das folgende Beispiel schneidet aus der Bilddatei "Box1.png" (die so nur einmal geladen werden muss) vier Teilbilder aus und weist sie als Hintergrundbild einem <td>-Element zu. Dabei bezeichnen width und height die Größe des Ergebnisbilds und background-position bezeichnet die Verschiebung des Originalbilds, an der das Teilbild ausgeschnitten werden soll.

 
  td.box_c1{width:4px;height:4px;background-image:url("b/box1.png");background-repeat:no-repeat;}
  td.box_c2{width:4px;height:4px;background-image:url("b/box1.png");background-position:-216px 0px;background-repeat:no-repeat;}
  td.box_c3{width:4px;height:4px;background-image:url("b/box1.png");background-position:0px -167px;background-repeat:no-repeat;}
  td.box_c4{width:4px;height:4px;background-image:url("b/box1.png");background-position:-216px -167px;background-repeat:no-repeat;}

Struktur der Seitenelemente

Manche Seitenelemente sind voneinander abhängig. Wenn man etwa einen externen CSS-Stylesheet verwendet, muss dieser zunächst einmal geladen werden (was einen Serveraufruf kostet), erst dann kann das Stylesheet ausgewertet werden und erst dann können zum Beispiel dort gemachte Anforderungen zu weiteren Seitenelementen wie etwa Hintergrundbildern bearbeitet werden. Durch die Verwendung des <style>-Tags und des </style>-Tags können die CSS-Angaben eines Stylesheets auch direkt in den HTML-Code der Webseite übernommen werden, was zu einer schnelleren Ladezeit führt. Da jedoch die meisten Browser eine externe Stylesheet-Datei auf dem Rechner des Nutzers zwischenspeichern und so bei jedem weiteren Aufruf bereits lokal verfügbar haben, lädt die Webseite bei einem erneuten Aufruf meist schneller, wenn man eine eigene Stylesheet-Datei verwendet.

Darüberhinaus existieren im Internet diverse Tricks, wie man das Laden von langwierigen Seitenelementen versteckt am Ende des Seitenaufbaus durchführt, wo es den Seitenaufbau nicht mehr ausbremst, und dann unter Zuhilfenahme von "javascript" nachträglich an die richtige Stelle auf der Webseite einfügt (siehe z.B. http://www.frontpigs.de/javascript-in-html/#ads. Da diese Tricks Spezialfälle betreffen, sollen sie hier nicht näher betrachtet werden.

Server

Ein grundlegender Faktor für die Dauer der Bearbeitung einer Anfrage und der Geschwindigkeit der Internetanbindung, mit der diese an den anfragenden Browser geschickt wird, stellt natürlich der verwendete Server und dessen Anbindung ans Internet dar.

Servergeschwindigkeit

Die für den Heimgebrauch üblichen Serviceprovider liefern in der Regel eine annehmbare Geschwindigkeit, wobei es sich aber lohnt, die Auslieferungszeiten durch manuelle Aufrufe mit einem Messprogramm gelegentlich zu kontrollieren oder mit Diensten wie zum Beispiel https://www.pingdom.com oder Google Webmastertools regelmäßig zu monitoren. Sollte man mit der Geschwindigkeit des Servers nicht zufrieden sein, bleiben einem mehrere Möglichkeiten. Zum Einen kann man versuchen, die Servereinstellungen anzupassen, sofern man darauf Zugriff hat und die nötigen Kenntnisse besitzt (bei zentral gemanageten Serven sollte man bei Problemen Kontakt zum Kundendienst aufnehmen). Zum Anderen kann man versuchen, auf einen technisch leistungsfähigeren Server umzuziehen. Dies ist meist jedoch mit zusätzlichen Kosten oder gar mit Wechsel des Serverbetreibers verbunden.

Serveraufgaben

In vielen Fällen ist eine Webseite nicht statisch, sondern benutzt im Hintergrund eine Programmiersprache und eine Datenquelle, um dynamisch aktuelle Inhalte zu erzeugen. Die Ausführung dieser Hintergrundaktionen hat natürlich Einfluss auf die Geschwindigkeit der Webseite. Sofern diese Hintergrundprogramme umfangreicher sind, sollten diese ebenfalls optimiert werden und auf überflüssige Aktionen möglichst verzichtet werden. Da solche Optimierungen individuell sind, soll hier nicht näher darauf eingegangen werden. Man sollte jedoch beim Einsatz einer Datenbank darauf achten, dass schreibende Zugriffe auf die Datenbank deutlich mehr Zeit kosten als lesende, und dass man durch die richtige Indexierung von Datenbankentabellen deren Zugriffszeiten deutlich verbessern kann.


Verwandte Artikel

Weitere Artikel: