Website-Performance: JavaScript- und CSS-Dateien parallel downloaden

Dank DSL und Breitband-Internet-Zugängen gibt es immer weniger Modem- und ISDN-Surfer und daher machen sich (leider) immer weniger Webdesigner Gedanken darüber, wie die Performance einer Website verbessert werden könnte. Da aber immer mehr Surfer auch mobil unterwegs sind, scheint dieses Thema langsam wieder etwas an Bedeutung zu gewinnen. Heute habe ich einen sehr interessante Artikel auf PHP Performance gefunden, der sich mit dem Themenbereich Browser-Caching beschäftigt und der Frage, wie man den HTML-Quellcode aufbauen sollte, damit JavaScript- und CSS-Dateien parallel verarbeitet werden können. Hier ein Auszug:

Zuerst ist zu sagen, dass auf CSS-Dateien stets im <head> der Seite referenziert werden sollte und auf JavaScript am Ende des Bodys. Das ist deshalb gut, weil der Browser dann sofort alle CSS-Regeln hat und sofort mit der Formatierung der HTML-Elemente beginnen kann. Ansonsten wartet der Browser mit dem Rendering der Seite bis alle CSS-Dateien geladen sind.

JavaScript-Dateien sollten aus dem Grund direkt vor </body> eingefügt werden, da mit JavaScript HTML-Elemente erzeugt werden können, z.B. durch document.write() oder document.createElement(). Dadurch wird der HTML-Baum verändert. Deshalb muss der Browser mit dem Rendern des folgenden HTML-Codes warten bis die JavaScript-Datei geladen ist (denn der Browser weiss ja vorher nicht, was in der JS-Datei gemacht wird).

Ein sehr gut gemachter Artikel, daher lesenswert:

PHP Performance: JavaScript- und CSS-Dateien parallel downloaden