2. DAVID MACIEJEWSKI
@macx
Teamlead Software Developer in Hannover
In Wahrheit: Designer und Programmierer
Verfechter sauberen Handwerks
Technikwürze – Podcast für Webentwickler
seit 2005, ~150 Folgen
chronico – Magazin für Geschichte (Geschichtspodcast)
AppStars (iPhone, in Vorbereitung)
AniMels.de – Haustierbedarf Hunde, Katzen, Kleintiere
native iPhone-Applikationen
Redaktion Webkrauts
3. DIRK JESSE
@djesse
Bauingenieur aus Dresden
freiberuflicher Softwareentwickler
Entwickler „Yet Another Multicolumn Layout“ (YAML)
entwickelt Javascript-Applikationen
CSSDOC
Autor des Buches
„CSS-Layouts, Praxislösungen mit YAML 3.0“
Redaktion Webkrauts
5. EINFLÜSSE AUF DIE LADEZEIT
Latenzzeiten bei der Server- / Client-Kommunikation
Bandbreite der Anbindung (ISDN, DSL, Mobil)
Gesamtvolumen der Webseite (KiloByte)
Anzahl der zu ladenden Objekte (HTTP-Requests)
Optimierungspotential im Frontend (> 90%)
Quelle: Yahoo! Developer Network Blog
Backend (Serverkonfiguration, CMS, …)
6. STELLSCHRAUBEN
HyperText Markup Language (HTML)
Cascading Style Sheets (CSS)
JavaScript
Grafiken
Content Delivery Network (CDN)
(Informationen zu Cookies bei jedem Request)
8. SAUBERES HANDWERK
schlanker, fehlerfreier Code
vermeiden von Codekorrekturen durch den Browser
Webstandards
Trennung von Struktur, Gestaltung und Interaktion
Barrierefreiheit (natürlich!)
9. OPTIMIERUNG DES MARKUPS
REIHENFOLGE DER INHALTE
Relevante Inhalte nach oben
Sekundäres nach unten (Banner, Widgets, …)
AUFRÄUMEN VOR DER AUSLIEFERUNG
Whitespaces und Kommentare entfernen
(automatisiert, z.B. mit HMTL Tidy)
CSS und JavaScript in externe Dateien auslagern
14. JOIN YOUR FILES!
CSS PERFORMANCE THEMATISIERT:
Yahoo Developer Network
http://developer.yahoo.com/performance/rules.html#num_http
„Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script,
and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and
stylesheets vary from page to page, but making this part of your release process improves response times.“
Steve Saunders „Don‘t use @import“
http://stevesounders.com/blog/2009/04/09/dont-use-import/
„The bottomline is:use LINK instead of @import if you want stylesheet to download in parallel resulting in a
faster page.“
15. HTTP-REQUESTS
VERBINDUNGTYPEN
max-connections-per-server (Handshake + Datenaustausch)
max-persistent-connections-per-server („keep-alive“)
HTTP 1.1, Abschnitt 8.1.4: http://tools.ietf.org/html/rfc2616
Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server.
A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.
Browser IE 6, 7 IE 8 Firefox 2 Firefox Safari 3,4 Chrome Opera 9
3 1,2
HTTP 1.1 2 6 2 6 4 6 4
persistent connections
HTTP 1.0 4 6 8 6 4 ? 4
(no persistent connections)
Quelle: http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/
16. TESTCASE: GRUNDLAGEN
RANDBEDINGUNGEN
Dateigrößen zwischen 5,0 und 30,0 kB
Ein bis fünf Dateisegmente
Firefox 3, Safari 4, Internet Explorer 6 & 8
Bandbreite
EINBINDUNG DER STYLESHEETS
<link> innerhalb des Markup
@import aus externem, zentralen Stylesheet
31. ZUSAMMENFASSUNG
REGELN FÜR GUTE PERFORMANCE
Komprimierung/Minifizierung für den Livebetrieb
Einbindung der Stylesheets möglichst weit oben im <head>
Aufsplittung von Stylesheets (> 10 kB) in mehrere Teile sinnvoll
Einbindung per <link> oder @import hat relativ geringen Einfluss
PERFORMANCEGEWINN DURCH SPLITTING STEIGT…
mit sinkender Bandbreite (ISDN, Mobiles Internet)
mit dem zu übertragenden Datenvolumen
durch Aufsplittung auf bis max. vier Dateien
33. GRAFIKFORMATE
WAHL DES RICHTIGEN GRAFIKFORMATES
JPEG
PNG
GIF (wenn es nicht anders geht)
REDUKTION DER FARBTIEFE
JPEG 8/24 Bit (Graustufen)
PNG 8/24 Bit (jeweils optional + Alphatransparenz)
34. BEISPIEL STRICHGRAFIKEN
FORMAT JPEG GIF PNG
Einstellungen 24 bit (Qualität: 40 %), Niedrige 8 bit (128 Farben) 8 bit (128 Farben)
Qualität für geringe Größe ohne Rasterung ohne Rasterung
Dateigröße 13,0 kB 8,12 kB 5,64 kB
35. BEISPIEL FOTO
FORMAT JPEG GIF PNG
Einstellungen 24 bit (Qualität: 60 %) 24 bit 8 bit (256 Farben)
ohne Transparenz mit Alphatransparenz mit Alphatransparenz
Dateigröße 22,3 kB 152,0 kB 47,1 kB
38. OPTIMIERUNG FÜRS WEB
Vermeidung von Alphatransparenzen
Erhöhter Renderingaufwand für Browser
PNG 8 Bit defrades gracefully in IE
Internet Explorer Wordarounds (Performancekiller)
dazu: Testcase der
PNG-Fix-Methoden
http://macx.de/journal/testcase-der-
neuesten-png-fix-methoden/
39. BEST PRACTICE
SKALIERUNG
Finger Weg von HTML-Skalierung
100% JPG muss nicht sein
CSS-SPRITES
Reduzierung von HTTP-Requests
Reduzierung von Metainformationen
Keine Nachladeeffekte (IE6)
evtl. geringerer Wartungsaufwand beim Austausch von Bildern
46. JAVASCRIPT
STARTEN DER APPLIKATION
Wenn möglich, nicht auf window.onload warten
jQuery: $(document).ready( ... );
YUI: YAHOO.util.Event.onDOMReady( ... );
SCHNELLES JAVASCRIPT
Event Delegation
Chaining (jQuery)
Nachladen von Code
Vorausladen von Daten (z.B. Grafiken)
48. MÖGLICHE OPTIMIERUNGEN IM BACKEND
Content Delivery Network benutzen
Cookie-lose (Sub)Domain, ext. Anbieter wie z.B. Amazon S3
Expires Header setzen (oder Cache-Control)
Ablauf der Datei in weite Ferne setzen, zum Beispiel bei Apache für statische Dateien:
ExpiresActive On
ExpiresDefault „modification plus 10 years“
GZIP nutzen (Deflate-Algorithmus)
Kleine Dateien auf Server, werden beim Client entpackt; für HTML, JS, CSS, XML, TXT
Content Management System einstellen
Performanter Server, performante Anbindung
APC installieren (PHP-Cache)
In PHP </head><?php ob_flush(); ?><body> nutzen
Dem Client Material übertragen, wenn das Backend noch beschäftigt ist.
50. WORÜBER HABEN WIR GEREDET?
Latenzzeiten (Ladezeiten) Wahl des richtigen Grafikformates
schlanker, fehlerfreier Code Grafiken verkleinern (Tools nutzen)
Reihenfolge der Inhalte im Markup CSS-Sprites nutzen
Schreibweise optimieren (Shorthands in CSS) Einbindung von JavaScript, DOM ready
Komprimierung der Inhalte (CSSTidy) Chaining (jQuery), Event Delegation
Reduzierung von HTTP-Requests Backend-Optimierungen
Performanceanalyse für das Laden von
Stylesheets
EINSPARPOTENTIAL
Im Backend (Serverseitig, Cache, CMS)
Im Frontend: HTML, CSS und JavaScript
Grafiken optimieren
Dateien und Code strukturieren
51. NOCH MEHR?
Artikel zum Nachlesen und Nachdenken: webkrauts.de
highresolution.info
macx.de
Zum anhören und angucken: Technikwürze - Web Standards Podcast
technikwuerze.de
Auf Twitter: @macx
@djesse