Nico Steiner - Frontend-Entwicklung und -Architektur

Donnerstag, 17. Dezember 2009

Performance-Optimierung - Was bringt's konkret?

Mit der neuen Hosting-Kampagne ging eine weitere Performance-Optimierung für alle Hosting-Projekte online. Ich habe die Gelegenheit genutzt, um für eine Seite die Ladezeiten vor und nach der Optimierung gegenüberzustellen. Dabei werden die Werte nach der Optimierung durch neue Seitenelemente negativ beeinflußt (es kamen Grafiken mit einer Gesamtgröße von 55KB hinzu). Die Unterschiede wären bei gleich bleibenden Elementen noch deutlicher ausgefallen. Weiterhin werden die Zeiten dadurch beeinflußt, dass die Messungen von einem Server in den USA vorgenommen wurden.

1. Request (ohne Cache)

Messung	Start Render	Gesamt	Requests	Bytes
Vorher	6,8 Sek.	10,2 Sek.	36	590 KB
Nachher	2,6 Sek.	6,0 Sek.	38	378 KB
Einsparung	4,2 Sek.	4,2 Sek.	-2	212 KB

2. Request (mit Cache)

Messung	Start Render	Gesamt	Requests	Bytes
Vorher	1,4 Sek.	4,8 Sek.	33	215 KB
Nachher	1,1 Sek.	4,7 Sek.	32	270 KB
Einsparung	0,3 Sek.	0,1 Sek.	1	-55 KB

Es wurden folgende Optimierungen vorgenommen:

• Gzip-Komprimierung der Stylesheets und Scripte
• Scripte an das Ende der Seite
• Laden der Scripte über Managed XHR
• Expires-Header für Stylesheets und Scripte

Die beeindruckensten Verbesserungen finden sich beim ersten Request. Das Rendern der Seite beginnt ganze 4 Sekunden eher und die komplette Seite ist ebenfalls 4 Sekunden schneller geladen.

Geschrieben von Nico Steiner in Referenzen um 23:00 | Kommentare (0) | Trackbacks (0)