In Teil 1 zu “Website Geschwindigkeit optimieren” haben wir uns um das messen der Geschwindigkeit und die serverseitige Komprimierung gekümmert in Teil 2 ging es dann um Javascript und CSS Minify, heute das nächste Thema.
Reduzierung von HTTP-Requests
Je weniger HTTP-Requests, also Serveranfragen, desto besser! Die Anzahl der parallelen Anfragen ist bei den Browsern i.d.R. Auf 2-4 pro Host begrenzt, deshalb sollten im ersten Schritt, möglichst viele CSS und Javascript-Dateien zusammengefassten werden. Bilder wie Icons oder Navigationsbuttons werden zur Optimierung zu Sprites verbunden und mittels CSS als Hintergrundgrafiken eingebunden (siehe Teil 4 ab 15.4. 14:00 Uhr).
Oft können jedoch nicht alle CSS und Javascript-Dateien zusammengefasst werden. Bei der Verwendung externer Frameworks sollte man deshalb auf ein Content Delivery Network (CDN) zurückgreifen. Die großen CDNs wie z.B. Google bieten sehr viele Frameworks und nahezu 100% Erreichbarkeit. Doch auch beim eigentlich simplen Einbinden von CSS und Javascript gibt es einiges zu beachten. Damit die parallelen HTTP-Requests überhaupt funktionieren, müssen im <head> zuerst alle externen CSS-Dateien und erst danach alle Javascript-Dateien eingebunden werden. Nur dann lädt der Browser tatsächlich parallel mehrere Dateien.
Die Einbindung von jQuey-1.4.2 über das CDN von Google könnte z.B. so aussehen: Dies habe ich auch im Artikel “Geolocation Overlay mit Googles Location API und jQuery” so verwendet.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>Morgen um 14:00 Uhr erscheint Teil 4, der letzte Teil aus der Serie “Website Geschwindigkeit optimieren” mit dem Thema “Nutzung von CSS-Sprites”.
