Vorheriger Artikel Nächster Artikel

10 grundlegende Tipps für mehr Website-Speed

Auf der Website Six Revisions hat Autor Adam Heitzmann zehn aufgelistet, um die Ladezeiten einer Website zu verkürzen. Das ist aus verschiedenen Gründen wichtig. So hat die Schnelligkeit eines Online-Shops beispielsweise direkten Einfluss auf dessen Umsätze. Und nicht zuletzt beziehen Suchmaschinen wie Google das Website-Tempo in ihre Bewertung mit ein.

10 grundlegende Tipps für mehr Website-Speed
Speeeeed... kann man eigentlich nicht genug haben. Foto: © Tetastock - Fotolia.com

Die zehn Tipps von Adam Heitmann richten sich klar an Einsteiger, so dass Profis ein Gähnen sicher nicht unterdrücken können. Zusammengenommen ergeben sie aber eine Checkliste, die man vor allem an weniger fachlich versierte Mitmenschen weiterreichen kann:

  1. Aktuelle Geschwindigkeit der Website messen. Nur dann kann man schließlich feststellen, welche Erfolge man erzielt. Adam Heitmann empfiehlt dazu Pingdom, Page Speed und Web Page Test. In den Kommentaren wird außerdem YSlow genannt.
  2. Bilder optimieren. Wähle das Komprimierungsformat und den Komprimierungsgrad der Bilder passend zum Motiv und zum Zweck. GIF eignet sich für Grafiken mit wenigen Farben, JPEG ist besser für viele Farben und Details, PNG bietet sich besonders an, wenn hohe Qualität und Transparenzen gefordert sind.
  3. Bilder nicht skalieren. Zwar kann man Grafiken auch per HTML jede denkbare Größe zuweisen, aber das ist keine besonders gute Idee, weil die Datei selbst dann so groß bleibt wie sie eben ist. Besser ist es, die Bilder in exakt dem Format zu erstellen, das man auch verwenden möchte.
  4. Komprimiere die Inhalte. Auch HTML, JavaScript und CSS kann man noch kleiner bekommen, in dem man beispielsweise auf HTTP Compression setzt.
  5. Verweise auf die Stylesheets im <head>-Bereich. Das ist ganz nebenbei bemerkt auch der W3C-Standard und ich persönlich wäre auch gar nicht darauf gekommen, das anders zu machen.
  6. Verweise auf Skripte ganz ans Ende des Quelltextes. Platziert man sie direkt vor den schließenden <body>-Tag, ist die sichtbare Seite bereits geladen, bevor der Browser die Skripte holt. Allerdings könnte ich mir denken, dass das auch problematisch sein kann, sofern die JavaScripte essentiell wichtige Funktionen bereitstellen, die dann eventuell im ersten Moment nicht funktionieren. Ein zweischneidiges Schwert.
  7. JavaScript und CSS immer in externe Dateien auslagern. Der einfache Grund: Dann profitiert der Nutzer davon, dass der Browser die Dateien in seinem Cache behält und nicht immer neu lädt. Hat man beides hingegen im Quelltext der Website, wird es jedes Mal mitgeladen. Ganz abgesehen davon, dass sich auf diese Weise Änderungen natürlich viel einfacher seitenweit vornehmen lassen.
  8. Verringere die Zahl der HTTP-Requests. Jedes Element auf der Website zwingt den Browser zu einer neuen Anfrage – und das kostet Zeit. Minimiert man diese Zahl zum Beispiel durch den Einsatz von CSS Sprites, kann das einen Vorteil bringen.
  9. Nutze einen Website-Cache. Wer ein Content Management System einsetzt, kann die Webseiten oftmals „cachen“, sprich: Anstatt alle Inhalte für jeden Aufruf aus der Datenbank zu holen, werden die Seiten statisch generiert und dann diese Versionen ausgeliefert.
  10. Vermeide Weiterleitungen. Jede Weiterleitung zwingt den Browser, eine neue Anfrage auszuführen. Je weniger, desto besser. Logisch, oder?

Was haltet ihr von der Liste? Ist sie vollständig oder fehlen wichtige Tipps? Mancher Tipp wie beispielsweise die Nr. 6 ist auch nicht unproblematisch. Dass die Tipps nicht neu sind, ist natürlich klar. Allerdings zeigt sich, dass solche Hinweise immer und immer wieder gefragt sind…

Weitere Informationen und Quellen zum Thema

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
12 Antworten
  1. von Christopher K. am 08.03.2011 (11:06 Uhr)

    Naja, also für Webmaster sollte diese Liste ein alter Hut sein.
    Trotzdem zeigt sich, dass auch Profis sie und andere offenbar nicht beherzigen:
    Google Page Speed meckert bei dieser Seite z.B.:
    - einige Grafiken können nicht wirklich gecacht werden, da keine Experation angegeben ist. Davon wäre die meisten aber scheinbar cachebar.
    - alle Requests vom selben Hostname ist schlecht für viele Browser da nicht parallelisierbar -> statische Daten auf subdomains auslagern
    - (mehr) CSS-Sprites wäre möglich
    - viele HTTP-Requests für CSS und JS (-> zusammenfassen)
    - CSS und JS (teils?) nicht minimiert
    - einiges des JavaScript könnte später geladen werden
    - viele ineffiziente CSS-selektoren

    Da habt ihr auch gleich noch einiges was in der Liste fehlt ;)

    Also, erstmals selber ran! ;)

    Antworten Teilen
  2. von Karl Kratz am 08.03.2011 (11:17 Uhr)

    Hehehe, das kenne ich: Jeder winkt ab und erzählt, "dass das ein alter Hut sei". Und wer setzt diese Punkte wirklich um? Gerade mal Technik-Nerds und Menschen, die High-Performance aus betriebswirtschaftlichen Gründen benötigen ;-)

    Antworten Teilen
  3. von Jan Tißler am 08.03.2011 (11:30 Uhr)

    @Christopher K.: Da sieht man mal wieder... ;-) Habe ja zum Glück im Text auch nicht behauptet, dass wir da schon alles umgesetzt hätten. Puh ;-)

    Antworten Teilen
  4. von Sipatshi am 08.03.2011 (11:35 Uhr)

    Hallo,

    ich setze komplett auf High-Performance. Das hat allerdings den Nachteil das die Entwicklung von den oben genannten Punkten bis hin zur Programmierung sich alles extrem in die Länge zieht! Ich bin ein Nerd und habe die Gedult dafür. In der "normalen-freien" Marktwirtschaft sieht es ganz anders aus. Alles muss "zack zack" abgewickelt werden.

    Antworten Teilen
  5. von Christopher K. am 08.03.2011 (12:39 Uhr)

    Naja, also man kann ja erstmal schnell entwickeln ohne extrem auch high performance zu setzen. Also Bilder nicht skalieren und so würde ich jetzt direkt umsetzen. Aber z.B. sprites kann man nachträglich leicht umsetzen (http://spriteme.org/ hilft dabei ungemein). Dann noch Google Page speed die Tipps umsetzen und gut ist.

    Allerdings sind manche Optimierungen hinderlich was Änderungen angeht. Wenn ich z.B. ein Bild häufig (vllt. sogar die Größe) ändere, dann sind sprites lästig. Außerdem muss dann immer das ganze sprite neu geladen werden was caching verhindert sodass sprites für häufig ändernde Grafiken auch schlecht für performance sein können....

    Alles nich so einfach ;-)

    Antworten Teilen
  6. von Bertram Simon am 08.03.2011 (17:34 Uhr)

    Ich würde ergänzen, dass alle neueren Browser mittlerweile mehre Requests parallel laden. Daher kann die Aufteilung in mehrere CSS- oder JS-Dateien sinnvoller als eine große Datei sind.

    Antworten Teilen
  7. von ling am 08.03.2011 (18:57 Uhr)

    Wirklich neu ist das ganze Thema wirklich nicht. Ist allerdings nie schlecht sich die Thematik immer mal wieder ins Gedächtnis zu rufen. Hier hat es auch noch eine schöne Zusammenstellung: https://developer.yahoo.com/performance/rules.html

    Antworten Teilen
  8. von abouttheweb am 09.03.2011 (10:21 Uhr)

    Einige Punkte sind leider nicht umsetzbar, wenn man z.B. auf soziale Plugins von Facebook setzt.

    Antworten Teilen
  9. von Felix Nagel am 09.03.2011 (10:42 Uhr)

    Ich stimme Christoper zu. Diese Liste findet sich tausende Male im Netz. Wie wäre es mit einer Liste für Consultants wie man diese Liste beim Kunden verkäuft. Die Nerds haben nämlich schon Bock die Seite schneller zu machen -- nur will das niemand bezahlen.

    @Bertram
    Mit der Meinung stehst du ziemlich alleine. Als gäbe es bei einer modernen Seite mit all ihren Bildern, swfs und x nicht genug requests zum Abarbeiten. Bester Gegenbeweis dürfte wohl die immer weiter verbreitete Technik der Sprites sein.

    Antworten Teilen
  10. von Felix Nagel am 09.03.2011 (10:49 Uhr)

    @Bruno
    Wo steht denn was von Funktionsnamen kürzen? Liebe Facebooker um 10 Uhr vormittags, erstmal lesen lernen und dann ... ;-)

    Antworten Teilen
  11. von stefan am 09.03.2011 (11:18 Uhr)

    grundhaft wird die punkte sicher jeder beherzigen - wenn jedoch mancher kunde drängt oder noch besser: sich für jemand billigeren entscheidet um ein schnäppchen zu machen, bleibt dabei oft eben auch die saubere optimierung auf der strecke. qualität kostet zeit - und damit geld. schade drum.

    Antworten Teilen
  12. von BastianBBux am 16.03.2011 (13:00 Uhr)

    die liste ist ja nun wirklich alles andere als neu.
    Erwähnen sollte man noch, dass TYPO3 die meisten dieser Punkte hervorragend unterstützt.
    Beispielsweise die Komprimierung (hauptsächlich mal entfernen von unnötigen leerzeichen, zeilenumbrüchen und kommentaren) und zusammenführung von js und css funktioniert tadellos vollautomatisch, wenn man sich das richtig herrichtet.

    Was ich persönlich aber zum beispiel gar nicht mag, das sind diese ganzen css-hacks. ein vernünftiger programmierer schreibt sich da einmal eine javascript browser-weiche, die die tatsächlichen funktionen eines browser abprüft und lädt dann wenn benötigt pro browser eine kleine css datei zusätzlich.
    hier gibt es die dazu notwendigen informationen: http://www.javascriptkit.com/javatutors/objdetect3.shtml

    meiner erfahrung nach braucht man bei einer mittelgrossen website solche zusätzlichen css dateien ausschliesslich für die IE familie, und da dann vielleicht 5-10 zeilen je version (und wenn jemand js deaktiviert hat, dann hat er vielleicht irgendwo 3-5 px mehr oder weniger abstand, was zumindest der benutzbarkeit der seite keinen abbruch tut).
    bei der umsetzung muss man sich halt an etwas mehr halten, als an die bloßen standards. es ist halt nun mal leider so, dass die browser nicht immer alle standards perfekt abbilden.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Tipps
5 Startup-Tipps – Von Gründern für Gründer [#websummit]
5 Startup-Tipps – Von Gründern für Gründer [#websummit]

Wer ein Startup gründen und damit erfolgreich sein will, braucht Glück, Timing und ein paar Tipps für den Start. Wir haben uns auf dem Web Summit in Dublin mit Gründern getroffen, die das schon … » weiterlesen

Hinweise auf iOS 8.1, 8.2 und 8.3: Apple arbeitet an Folge-Updates für iOS 8
Hinweise auf iOS 8.1, 8.2 und 8.3: Apple arbeitet an Folge-Updates für iOS 8

Nach dem holprigen Start von iOS 8 hat Apple in den vergangenen Tagen bereits zwei kleinere Updates zur Behebung von Bugs ausgespielt. In Cupertino wird aber bereits an mehreren Folge-Updates für … » weiterlesen

So sammelst du die ersten 1.000 Newsletter-Abonnenten [Infografik]
So sammelst du die ersten 1.000 Newsletter-Abonnenten [Infografik]

Ein Newsletter erweist sich für fast jede Website als Lieferant von qualitativ hochwertigem Traffic. Die folgenden Tipps helfen beim Aufbau deiner Liste. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen