Grafiken richtig einbinden

Webseiten beschleunigen Teil 5 – Code optimieren

Im 5. und letzten Teil der Artikelreihe Webseiten beschleunigen will ich erklären, wie ihr den Code eurer Webseiten optimieren könnt. Die Möglichkeiten sind natürlich gerade bei HTML und CSS sehr begrenzt, da es sich ja nicht um Programmiersprachen sondern um eine Auszeichnungssprache (HTML) bzw. um eine Beschreibungssprache (CSS) handelt. Ein paar Tipps wie ihr euren Code optimieren und damit eure Webseiten beschleunigen könnt, kann ich euch aber trotzdem geben.

Reihenfolge von CSS und Javascript optimieren

Wenn ihr mit Page Speed eure Website überprüft, dann spuckt das Tool eventuell folgende Fehlermeldung aus:

Optimize the order of styles and scripts

Oder auf Deutsch: „Optimieren Sie die Reihenfolge der Stile und Skripte“. Mit styles (Stile) sind die CSS-Dateien gemeint und mit scripts (Skripte) Javascript-Dateien. Warum ist es nun wichtig, bei der Einbindung dieser Dateien auf die richtige Reihenfolge zu achten? Das liegt einfach daran, dass der Browser den HTML-Code erst verarbeiten kann, wenn er weiß, wie dieser formatiert wird. Deshalb ist es sinnvoll, die CSS-Dateien bereits im <head>-Teil des HTML-Dokuments zu laden (alles andere wäre im übrigen auch nicht valide). Dann weiß der Browser wie die einzelnen HTML-Befehle dargestellt werden sollen und kann sofort damit beginnen.

Außerdem ist es wichtig, die Dateien zu gruppieren. Zuerst sollten alle CSS-Befehle im Code erscheinen und danach alle Javascript-Anweisungen. Gleichartige Dateien kann der Browser nämlich gleichzeitig herunterladen. Bei verschiedenen Dateitypen muss der Browser allerdings immer warten, bis ein Typ fertig geladen ist, bevor er mit dem nächsten beginnen kann. Eine richtige Einbindung von CSS- und Javascript-Befehlen sieht demnach so aus:

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
<script src="javascript1.js" type="text/javascript"></script>
<script src="javascript2.js" type="text/javascript"></script>

Dateien kombinieren

Sehr oft spuckt Page Speed auch eine der beiden folgenden Meldungen aus:

– Combine external JavaScript

– Combine external CSS

Damit weist das Tool daraufhin, dass es natürlich schneller ist, wenn ein Browser nur eine Datei übertragen muss, anstatt 2 oder sogar noch mehr. Generell ist es deshalb empfehlenswert, Javascript- und CSS-Dateien soweit wie möglich zusammenzufassen.

Allerdings gibt es auch Fälle, in denen das nicht unbedingt sinnvoll ist. Wenn ich z. B. auf Seite A nur einen einzigen Javascript-Befehl brauche, auf Seite B brauche ich aber mehrere und vielleicht sogar noch eine große JavaScript-Bibliothek wie z. B. jQuery, wäre eine Zusammenlegung kontraproduktiv.

Dateien minimieren

Um den Code übersichtlich und gut lesbar zu machen, werden in Javascript- und CSS-Dateien oftmals viele Zeichenumbrüche und Kommentare verwendet. Während der Entwicklung ist das sicher auch sinnvoll. Wenn der Code allerdings fertig ist, solltet ihr diesen überflüssigen Ballast entfernen. Darauf weisen die beiden Page Speed-Meldungen „Minify CSS“ und „Minify JavaScript“ hin. Bei großen JavaScript-Bibliotheken wie dem bereits angesprochenen jQuery gibt es meistens bereits eine minimierte (minified) Version. Außerdem bietet Page Speed sowohl für JavaScript als auch für CSS eine minimierte Version an, die ihr nur abspeichern und auf den eigenen Webspace hochladen müsst.

Page Speed bietet auch an, HTML-Dateien zu minimieren. Dies kann ich allerdings nicht empfehlen, da es bei mir bei einigen HTML-Dateien vorkam, dass sie danach nicht mehr richtig dargestellt wurden.

Grafiken richtig einbinden

Grafiken richtig einbinden

Im ersten Teil dieser Serie habe ich ja beschrieben, wie ihr Grafiken verkleinern könnt, um Übertragungskapazität zu sparen. Um den Seitenaufbau zu beschleunigen ist aber nicht nur eine geringe Dateigröße der Grafik wichtig, sondern auch die richtige Einbindung in den HTML-Code. So sollte im img-Tag die Breite und Höhe einer Grafik angegeben werden, also z. B. so:

<img src="test.jpg" width="300" height="200" alt="Test-Grafik" />

Wichtig dabei ist aber, dass die im img-Tag angegebenen Größen auch mit der tatsächlichen Bildgröße übereinstimmen. Ist das nicht der Fall, muss der Browser das Bild an die angegebenen Werte anpassen. Das hat 2 große Nachteile: Erstens kostet die Vergrößerung oder Verkleinerung einer Grafik sehr viele Ressourcen und verlangsamt dadurch den Seitenaufbau erheblich.

Und zweitens sind Browser dazu entwickelt worden, Webseiten dazustellen und nicht dazu, die Größe von Grafiken zu verändern. Deshalb sind die vom Browser veränderten Grafiken meistens unscharf und sehen nicht gut aus. Am einfachsten ist es, wenn ihr eure Bilder zuerst in einem Bildbearbeitungsprogramm wie paint.net oder gimp auf die richtige Größe bringt und sie erst danach in eure Webseite einbaut.

Webseiten beschleunigen

Damit ist die Artikelreihe „Webseiten beschleunigen“ nun abgeschlossen. Wer all die gegebenen Tipps umsetzt, kann die Ladezeit seiner Webseiten erheblich verkürzen. Ich hatte bei meiner Rätselseite zu Beginn der Optimierung bei Page Speed einen Wert von ungefähr 80, den ich dann durch die von mir beschriebenen Optimierungs-Tipps auf 99 verbessern konnte. Durch den Einbau von Werbebannern, auf deren Code ich leider keinen Einfluss nehmen kann, ist der Wert zwar wieder gesunken, trotzdem hat sich die Ladezeit gegenüber dem Anfang erheblich verkürzt.

Eure Optimierungstipps

Habt ihr noch Fragen dazu, wie ihr eure Webseiten beschleunigen könnt? Liefert euch Page Speed vielleicht eine Meldung, die ihr nicht versteht? Oder habt ihr noch einige Tipps, wie der Aufbau von Webseiten beschleunigt werden kann? Dann schreibt doch bitte etwas in den Kommentaren dazu.

Artikelreihe Webseiten beschleunigen:

1. Dateigröße von Grafiken verkleinern

2. Expires-Header verwenden

3. Parallele Downloads

4. Die gzip-Compression

Webseiten beschleunigen - Code optimierenHigh Performance Websites

High Performance Websites

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

16 Gedanken zu „Webseiten beschleunigen Teil 5 – Code optimieren“

  1. Bei einer Domain von mir, die ein Script basierend auf Templates verwendet, haue ich gerade die in den TPL-Datein verwendeten IF-Bedingungen raus, zu denen ich die Einstellung via ACP garantiert nicht verändern werde.

    Was hältst Du davon?

  2. Das halte ich für eine gute Idee. IF-Bedingungen, von denen man genau weiß, das man sie nicht braucht, kann man natürlich entfernen.

    Ich mache das z. B. oft bei der .htaccess. Wenn ich genau weiß, dass mein Webspace ein bestimmtes Modul unterstützt, brauche ich das Vorhandensein des Moduls doch nicht mehr mit einem if-Befehl abzufragen.

  3. „Gleichartige Dateien kann der Browser nämlich gleichzeitig herunterladen.“
    Ein modernern Browser lädt alle möglichen Dateien parallel herunter.

    Ernsthaft? Breite und Höhe des Bildes per style-Tag angeben? CSS hat dort – meiner Meinung nach – nichts zu suchen, da dies schließlich das Layout und nicht den Content verändern sollte. Die Attribute width und height haben es schließlich nicht aus Langeweile in den HTML5-Standard geschafft (Randnotiz: in HTML5 wurden sehr viele Attribute entfernt, da diese nur das Layout beeinflussen und somit durch CSS ersetzt werden sollen)

    Extra Tipp:
    JavaScript wird ausgeführt, sobald es geladen wurde. Es bietet sich also an JavaScript-Dateien am Ende einer Seite einzubinden und erst auszuführen, wenn die Seite geladen wurde. Dies verändert zwar nicht wirklich die Geschwindigkeit mit der eine Seite geladen wird, sorgt jedoch dafür das die Seite früher angezeigt wird.

  4. @Jemand
    Deinen Tipp mit dem Laden im Nachhinein von Javascripts finde ich interessant. Kannst Du das näher erläutern? Bin dahingehend etwas blond! 😉

    @Erik
    Habe mir gerade mal den Quellcode von Deinem Blog angesehen. Warum teilst Du den CSS-Teil auf die zu ladene CSS-Datei (style.css) und den Header auf?

    Header:

    div.aka_half {
    float: left;
    overflow: auto;
    width: 45%;
    }
    div.aka_clear {
    clear: both;
    float: none;
    }

    Macht für mich keinen Sinn, da auch CSS gecached werden kann! Auch ein Tipp?

  6. http://developer.yahoo.com/performance/rules.html

    @chander: Dort (s.O.) wird zumindest kurz angeschnitten, warum JavaScript am Ende eingebunden werden sollte (Siehe Überschrift „Put Scripts at the Bottom“)

    JavaScript wird unmittelbar ausgeführt, da es direkt den Inhalt einer Seite verändern kann (Stichwort document.write). Ich versuche immer JS-Dateien erst am Ende einer Seite einzubinden und mittels JS-Framework erst nach dem onload-Event auszuführen. Aber wie gesagt, es verändert nicht zwingend die Ladezeit, führt aber dazu, das eine Seite schneller angezeigt wird.

    Beispiel:
    HTML laden => JS einbinden => JS ausführen => Anzeige
    HTML laden => Anzeige => JS einbinden => JS ausführen

    @Erik: Das mit der direkten Ausführung von JavaScript erklärt auch, wieso es zu den größeren Ladezeiten kommt, wenn JS- und CSS-Dateien „wild durcheinander gewürfelt“ eingebunden werden.
    Aber danke für den Link

  9. @Chandor Das Theme hier ist ein fertiges Design. Da habe ich nur wenig daran verändert. Außerdem habe ich ja im Artikel geschrieben, dass es durchaus Sinn machen kann, nicht alle CSS-Befehle in eine Datei zu stecken.

    Wenn du meine Optimierungstipps nachvollziehen willst, dann gucke dir lieber mal meine Rätselseite an. Da habe ich alles umgesetzt, was ich hier im Artikel beschrieben habe.

  10. Für WordPress gibt es das Plugin „Supercache“. Ich bin damit relativ zufrieden, d.h.: vorher war die Seite elendig langsam, jetzt läd sie deutlich schneller. Ganz zufrieden bin ich trotzdem noch nicht und ich werde ein paar von deinen Tipps testen. Hatte eigentlich gehofft, mich nicht allzusehr mit dem Code beschäftigen zu müssen, das ist oft so langwierig.

  11. Manche Scripte, die die Website läd sind auf einem furchtbar langsamen Server. Da macht es Sinn de lokal zu speichern. Natürlich nur wenn der eigene Server schneller ist (kleiner Scherz) Das gilt auch für Werbeeinblendungen und Ähnliches. Damit spart man auch die Zeit den anderen Server zu besuchen, was Page Speed ja auch zu Recht moniert. Auch muss man nicht unbedingt jedes Javascript auf jeder Seite laden – das wäre dann wieder ein Beispiel für eine nützliche If-Anweisung;-)

  14. Weiter Möglichkeiten den Code zu optimieren sind:
    Die Leerzeilen entfernen (Whitspaces).
    Ordnerstruktur möglichst flach halten, also möglichst keine Unterordner verwenden.
    Besser a href=“pages/seite.html“
    als a href=“../pages/seite.html“
    Auch bei CSS gibt es viele Einsparungsmöglichkeiten.
    Statt -> div id=“container“ -> div id=“co“
    Ebenso: {background-color:#ffffff;} oder {background-color:#003366;}
    Besser: {background-color:#fff;} oder
    {background-color:#036;}.
    Oft sieht man auch: {margin:0px;} oder ähnliches,
    aber es reicht auch {margin:0;} -> 0px gibt es nicht.
    Gerade bei größeren Seiten mit großen CSS-Dateien lässt sich damit einiges an Code einsparen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.