molily: Performance-Optimierung

Beitrag lesen

Hallo!

Performance-Optimierung ist eine empirische Wissenschaft. Ziel ist es nicht, auf Teufel komm raus die Seite schneller zu machen, sondern das dahinterstehende Ziel zu erreichen und den Erfolg statistisch zu messen. Im Marketing oft Conversion genannt: Finden der gewünschten Informationen, Verweildauer auf der Site, Geschäftsabschluss, generell Interaktionen. Es gibt wenige Performance-Richtlinien, die uneingeschränkt in allen Fällen anwendbar sind und immer Verbesserungen bringen.

Performance-Optimierung heißt nicht nur, die übertragene Datenmenge zu reduzieren. Die Bandbreite ist nur ein Faktor, der zunehmend unwichtiger wird. Ein anderer wichtiger Faktor ist z.B. die Netzwerk-Latenz. Bei hoher Latenz ist es eher nachteilig, kleine Datenpakete mit Protokollen wie HTTP nachzuladen. Manchmal ist das Übertragen von mehr Daten letztendlich besser für die User Experience.

Für eine kleine Website, die nicht Unmengen an CSS enthält, ist es einfacher, das gesamte CSS in eine HTTP-Ressource zu packen (z.B. mit einem Präprozessor wie Sass) und diese schon auf der Startseite zu laden. Wichtig ist dann, dass der CSS-Code minifiziert wurde, der Server den Code GZip-komprimiert überträgt und der Browser angewiesen wird, die Ressource lange zu cachen. Es verbessert die Performance nicht, wenn 2 KB CSS (minified + gzipped) für ein Kontaktformular erst bei Bedarf nachgeladen werden. Der HTTP-Overhead ist groß, die Latenz ist u.U. groß, das kann sogar die Benutzbarkeit der Site verschlechtern. Vielleicht lädt die Startseite minimal schneller (ich würde behaupten, nicht signifikant), dafür ist jeder Seitenwechsel langsamer.

Bei großen Sites, die aus hunderten oder tausenden unterschiedlichen Seiten und dementsprechend einem riesigen Haufen CSS bestehen, muss man sich über Modularisierung des CSS Gedanken machen. Dann ist es sinnvoll, CSS-Pakete von Seite zu Seite nachzuladen, sonst würde die Startseite einen Megabyte CSS einbinden, von dem nur ein Bruchteil gebraucht wird. Manche hochfrequentierten Mobilseiten betten das initial nötige CSS sogar ins HTML der Einstiegsseiten ein und speichern es per JavaScript zwischen, um die Ladezeit zu verbessern. Solche Hardcore-Optimierungen kosten für die meisten kleinen und mittleren Sites mehr als sie nützen.

Mathias