HTML-/CSS-Performance Optimierung – Teil 1
Ja, ihr habt richtig gelesen: es geht um HTML und CSS Performance! Ein Thema über das sich die Wenigsten Gedanken machen. Leider.
Über Serverseitige Optimierung von PHP-Scripts, MySQL-Queries, Webserver etc. liest man ja mehr als genug. Leider aber kaum über die Client-Seitige Optimierung. Aber was bringt es dem User, wenn das PHP-Script in 0,09 statt in 0,25 Sekunden ausgeführt wird, wenn das Übertragen der Daten un das clientseitige Rendern der Seite 15 Sekunden dauert? Klar, hauptsache das PHP-Skript ist flott. Glückwunsch. Super. Gut gemacht!
Die Performance-Optimierung von Websiten betrifft längst nicht nur die serverseitige Abarbeitung des Requests, sondern auch das was mit den Daten passiert nachdem sie den Webserver verlassen haben. Aus diesem Grunde möchte ich euch heute (und im Teil 2, Teil 3, …) ein paar Tricks und Praktiken zeigen, die euch dabei helfen können, euere Websites effizient und sinnvoll auf Performance zu optimieren.
Der ganze Spaß hat natürlich auch einen Usability- und Marketing-Faktor. Seiten, die lange laden, wirken unsymphatisch und qualikativ minderwertig. Und kein User bleibt gern länger als nötig auf einer solchen Präsenz.
[Nitescape.de] Google AdSense Performance
Ich habe ein paar Performance-Tests an Nitescape.de durchgeführt und dabei bemerkt, dass der Google AdSense Banner über 7 Sekunden Ladezeit benötigt. Das ist mir definitv zu viel. Nachdem ich den Banner entfernt habe, benötigt die Seite nur noch 2 Sekunden zum Laden mit Cache sogar weniger (auf localhost). Wenn ich jetzt noch das Logo komprimiere, die CSS-Dateien optimiere und ein bisschen Schrott rauswerfe, is die Seite richtig flott =)
Die Banner werden in Zukunft per AJAX nachgeladen um den User nicht beim Surfen zu hindern. Aus diesem Grund wird kein AdSense mehr auf Nitescape.de eingesetzt. Es ist nicht möglich AdSense-Banner per AJAX zu laden, da diese anhand des Contents auf der Seite erstellt werden und sich per JavaScript an die entsprechende Stelle des DOM-Trees schreiben. Das Einbinden per AJAX würde keine Content-Relevanten Anzeigen mehr liefern und das Skript würde den DOM-Tree komplett zerschießen (ich habs ausprobiert, is nich’ gut *gg*).
Lasst euch da mal was einfallen, Google.