Um auf meinen Eintrag von gestern zurückzukommen zeige ich heute Möglichkeiten auf, wie man Quelltexte in Sachen Geschwindigkeit optimieren kann.
Zuallererst sollte man sich schon beim Entwerfen des Designs, bspw. mit Photoshop, Gedanken darüber machen, wie man das fertige Design am besten in validen Quelltext umsetzen kann. Einfach drauflos zu designen und sich erst dann Gedanken über die Umsetzung zu machen bringt nur massive Probleme mit sich, durch die man schnell die Lust am frisch entworfenen Design verliert. Hat man sich jedoch Gedanken gemacht fällt die Umsetzung meist sehr leicht, da das fertige Grundgerüst schon im Kopf herumgeistert.
Die Umsetzung des Quelltextes
Viele setzen bei der HTML-Umsetzung auf Frameworks, wie z.B. YAML. Doch diese engen den Ideenfluss meist nur ein, wenn man ein komplett selbst erstelltes Template für eine Website gestalten will. Von daher empfiehlt es sich ein leeres Gerüst zu erstellen, dass bis auf die wichtigsten Metatags und die Basis-Elemente nichts enthält. Wenn dahinter noch eine ausgeklügelte Ordnerstruktur für die ausgelagerten Dateien und Bilder steckt ist dies umso besser, da man sich einige Arbeit sparen kann.
Anschließend sollte man darauf achten, dass man so wenig Tags wie möglich verwendet, um den Quelltext nicht unnötig aufzublähen. Ein gutes Beispiel hierfür sind kompliziert verschachtelte DIV-Blöcke, die man durch gut eingesetztes CSS auf einen, maximal zwei verringern kann. Zum einen sorgen weniger Tags natürlich für weniger anfallenden Traffic, zum anderen jedoch auch für eine erhöhte Barrierefreiheit, da z.B. Screenreader leichter auf die Inhalte zugreifen können. Hier könnte, wenn es ganz dumm läuft, etwas ähnliches herauskommen, wie zu Zeiten der Tabellenlayouts. Sieht gut aus, hat aber keinen wirklichen Nutzen für die User.
Eine weitere Möglichkeit Traffic zu sparen ist auf Kommentare zu verzichten. Ich will hier niemanden dazu auffordern unübersichtlichen, da nicht dokumentierten, Code zu produzieren. Ganz im Gegenteil. Eine gute Dokumentation ist für die spätere Weiterarbeit an Projekten unerlässlich. Jedoch werden Kommentare nicht für den Produktivbetrieb benötigt. Deswegen kann man sie getrost entfernen. Positiver Nebeneffekt: Leuten, die zu faul sind eigenen Quellcode zu schreiben und von diversen Sites klauen erschwert man die Arbeit, da die benötigten Stellen schwieriger zu finden sind
CSS und Javascript optimieren
In Sachen CSS und Javascript bin ich ebenfalls der Meinung, dass eine Dokumentation das A und O bedeutet. Allerdings sollte man auch hier auf eben diese im Produktiveinsatz verzichten. Was die Entwicklung mit diesen beiden Sprachen angeht sollte man keinesfalls darauf verzichten den Code so zu schreiben, wie er für einen selbst am besten zu lesen ist. Wenn man gerne viele Leerzeichen setzt, mit Tabs einrückt oder auf Kurzschreibweisen verzichtet, dann soll niemand daran gehindert werden.
Die Komprimierung und Optimierung von diesen beiden Arten Quelltext erfolgt im Nachhinein, nachdem man die Codes ausführlich getestet und für gut befunden hat. Hierfür gibt es einige sehr interessante Dienste im Netz, die diese Arbeit übernehmen. Und das sogar gut.
Zum einen gibt es für Javascript den Compressor von Sergej Müller, mit dem man den Code auf zwei verschiedene Arten komprimieren kann. Die erste führt dazu, dass sämtliche unnötigen Kommentare, Leerzeichen, -zeilen, Tabs, etc. entfernt werden. Die zweite, effektivere, bewirkt noch um einiges mehr, da alles in eine einzige Zeile geschrieben wird. Hier jedoch muss der Code noch einmal in aller Ausführlichkeit getestet werden, da einzeiliges Javascript schon des öfteren zu Problemen geführt hat.
Eben genannter Dienst ist sogar für CSS geeignet, wobei ich dafür den Code Beautifier bevorzuge, da er sehr viele nützliche Einstellungen bietet. Man kann damit bspw. die letzten „;“ in einer Definition entfernen oder ausführlich geschriebene Styles durch Kurzschreibweisen (Shorthands) ersetzen. Auch Farbnamen und font-weight-Angaben können optimiert werden. Nebenbei kann er auch ungültige Angaben für die angegebene CSS-Version löschen, um validen Code zu erhalten. Das beste Feature ist jedoch, dass man auswählen kann, wie stark man komprimieren will. Vom Entfernen unnötiger Zeilenumbrüche und Kommentare bis hin zur einzeiligen Ausgabe ist vieles möglich. Auch hier empfiehlt sich ein ausführlicher Test in verschiedenen Browsern, da durch zu starke Komprimierung schon mal die eine oder andere Angabe durch ungklückliche Sortierung wieder überschrieben werden kann. Dies stellt jedoch die Ausnahme dar.
gZip-Komprimierung
Ist man soweit gekommen, könnte man annehmen, dass alle Möglichkeiten den Code zu optimieren schon erschöpft sind. Weit gefehlt. Es gibt noch eine letzte, extrem wirkungsvolle, Technik, den Code noch weiter zu komprimieren: gZip-Komprimierung. Einige werden jetzt denken, dass dies nur mit PHP-Dateien funktioniert. Prinzipiell stimmt das auch, jedoch gibt es diverse Lösungsansätze mit denen man auch andere Arten von Textdateien zippen kann.
Eine davon beschreibt Alinki.com. Hier wird mittels einer .htaccess-Datei und bereits gezippten Dateien ein möglicher Overhead durch die ständige Neugenerierung umgangen, da die komprimierten Dateien bereits auf dem Server liegen und nur noch ausgeliefert werden müssen.
Eine weitere Möglichkeit mittels eines PHP-Scripts wird auf PHP-Vision.de beschrieben. Dort werden die Dateien on-the-fly komprimiert, was jedoch, speziell bei günstigen Webspace-Angeboten und Freehostern, zu eventuellen Einbußen in der Performance führen kann.
Fazit
Allgemein kann man sagen, dass es nicht allzu schwer ist optimierten und schnellen Code zu produzieren, der sehr viele positive Nebeneffekte mit sich bringt. Logischerweise liegt es immer an einem selbst, ob man die gebotenen Möglichkeiten nutzt oder nicht. Es ist auf alle Fälle jedem zu empfehlen, der seine Website einer breiteren Masse zur Verfügung stellen will.
schön