Performance Optimierung von Webapps und Websites

Grundlegende und fortgeschrittene Tipps zur Verbesserung von der Performance von Webapps und Websites.

Transcript

1. Bitte warten... Roswitha Wallner roswitha.wallner@netural.com | @rowallner 2012 03 “ ”
2. Cachen • Expires header setzen • 12345.js; bild.jpg?v=12345 Versionsnummer -> Revisionsnummer -> Build Script!
3. Zusammenfügen, komprimieren und optimieren • JS, CSS - Ant + Yahoo YUI Kompressor • Ressourcen optimieren, JPEGs statt PNGs - JPEGTran • Gzip!
4. The fastest HTTP re- quest is the one not made. Steve Souders “ • einzelnes Bild vs. Sprite vs. Base64 in CSS • Inhalte mit Ajax nachladen ”
5. Weltweiter Zugriff • Content Delivery Network (z.B. Akamai) • Subdomain für Ressourcen (IE7 erlaubt nur 2 parallele Downloads pro Hostname)
6. Es geht um den Inhalt! “ ” • Don't let me wait! • Content on demand laden • Script Einbindung (im Body an letzter Stelle)
7. Javascript • Code nicht unnötig doppelt ausführen, Ergebnisse speichern • DOM Zugriffe reduzieren - Element auslesen, ändern, überschreiben; Länge speichern bei DOM Iterationen • CSS Transitions anstatt JS Fades • document.getElementById • For-in vermeiden
8. • Binäre Operationen verwenden • Garbage Collector arbeiten lassen - Event Handler entfernen • Event Bindings reduzieren
9. • Konstruktor Funkion - Inner Funktion vs. Prototype
10. • Unnötige Closures vermeiden zB. Event Handler
11. • Achtung Closures + IE7 + DOM Objekt + zirkuläre Referenzen
12. Backend optimieren • Ergebnisse cachen (z.B. Apache Lucene für Volltextsuche)
13. Tools und ... • YSlow • Fiddler • Build management - Jenkins + Ant • HTML5 Boilerplate Build Script (guter Einstieg) • http://stevesouders.com/
14. Ausblick • Webworkers