03.04.2014 | Top-Thema Page Speed richtig optimieren

Code optimieren - gruppieren, kombinieren, minimieren

Kapitel
So optimieren Sie den Code.
Bild: Haufe Online Redaktion

Die Möglichkeiten den Code einer Webseite zu optimieren, sind leider begrenzt, da es sich bei dem Code meist nicht um Programmiersprachen, sondern um eine Auszeichnungssprache (HTML) bzw. um eine Beschreibungssprache (CSS) handelt. Doch es gibt einige Wege, den Code zumindest teilweise zu verbessern.

Reihenfolge von CSS und Javascript optimieren

Der Browser verarbeitet den HTML-Code erst, wenn er weiß, wie dieser formatiert wird. Deshalb ist es sinnvoll, die CSS-Dateien bereits im <head>-Teil des HTML-Dokuments zu laden. Dann weiß der Browser, wie die einzelnen HTML-Befehle dargestellt werden sollen und kann sofort damit beginnen.

Die Dateien zu gruppieren ist ebenso wichtig. 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:

 Kombinieren

 

<link rel="stylesheet" type="text/css" href="irgendwas1.css"/>

 

<script type="text/javascript" src="irgendwas1.js"></script>

 

Eine gute Erläuterung findet man auf SelfHtml.

Sollten wir aber auf Seite eins nur einen einzigen oder wenige Javascrip-Befehle brauchen, auf Seite zwei gleich eine Menge, wenn nicht gar eine ganze JavaScript-Bibliothek, so ist eine Zusammenlegung von Seite eins und zwei eher schlecht als recht. Daher ist bei dieser Angelegenheit auch ein bisschen logisches Denken gefragt.

Die Kombination kann auch nachträglich in der .htaccess mit den entsprechenden Pfaden so hinterlegt werden:

 

# BEGIN combine Skript

<IfModule mod_rewrite.c>

    RewriteEngine On

    RewriteBase /

 

    RewriteRule ^templates/iwas/css/(.*\.css) /shop/combine.php?type=css&files=$1

    RewriteRule ^templates/iwas/javascript/(.*\.js) /shop/combine.php?type=javascript&files=$1

</IfModule>

# END combine Skript

 Minimieren

Auf der Entwicklungsebene wird der Code gut lesbar mit vielen Kommentaren und Zeilenumbrüchen geschrieben. Wer darauf verzichten will, kann alles Überflüssige auch entfernen, um sich ein paar Bytes zu sparen. Das meint auch Google mit den Meldungen “Minify CSS” und “Minify JavaScript”. Dazu gibt es aber auch zahlreiche Tools, wie cssminifier, die die Durchführung leichter machen. Googles PageSpeed Insight bietet auch an, HTML-Dateien zu minimieren. Ist aber wegen der ab und zu auftauchenden Darstellungsfehler nur mit Backups auszuprobieren.

Schlagworte zum Thema:  Suchmaschinenoptimierung, Website-Optimierung, Optimierung, Homepage, Web, SEO

Aktuell

Meistgelesen