PERFORMANCE-OPTIMIERUNG BARRIEREFREIHEIT BEGINNT MIT LADEZEITEN Best of Accessibility (Düsseldorf, 24.09.2009) von David Maciejewski und Dirk Jesse
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
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
SCHNELLE WEBSEITEN
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, )
STELLSCHRAUBEN HyperText Markup Language (HTML) Cascading Style Sheets (CSS) JavaScript Grafiken Content Delivery Network (CDN) (Informationen zu Cookies bei jedem Request)
HTML
SAUBERES HANDWERK schlanker, fehlerfreier Code vermeiden von Codekorrekturen durch den Browser Webstandards Trennung von Struktur, Gestaltung und Interaktion Barrierefreiheit (natürlich!)
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
CASCADING STYLESHEETS (CSS)
BEST PRACTICE (CSS) EINBINDUNG INS MARKUP Verlinkung im <head> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>boa 2009</title> <link rel="stylesheet" src="core.css" type="text/css" /> </head> Bitte <link /> statt <style>@import url('misc.css');</style> SCHREIBWEISE OPTIMIEREN Shorthands (padding, margin, border, font) Mehrfachdefinitionen vermeiden
ENTWICKLER- UND LIVEFASSUNG KOMPRIMIERUNG FÜR DEN LIVEBETRIEB CSS Tidy YUI Compressor ZUSAMMENFASSEN VON STLYESHEETS Reduzierung der HTTP-Requests
DEMO Performanceanalyse für das Laden von Stylesheets
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.
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 3 Safari 3,4 Chrome 1,2 Opera 9 HTTP 1.1 persistent connections HTTP 1.0 (no persistent connections) 2 6 2 6 4 6 4 4 6 8 6 4? 4 Quelle: http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/
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
TESTCASE: STYLESHEETS
ERGEBNISSE Performanceanalyse
DATEIGRÖSSE & -ANZAHL FIREFOX 3 5-30 kb, 1-5 Dateien, Einbindung via <link>
DATEIGRÖSSE & -ANZAHL FIREFOX 3 5-30 kb, 1-5 Dateien, Einbindung via @import
DATEIGRÖSSE & -ANZAHL SAFARI 4 5-30 kb, 1-5 Dateien, Einbindung via <link>
DATEIGRÖSSE & -ANZAHL SAFARI 4 5-30 kb, 1-5 Dateien, Einbindung via @import
DATEIGRÖSSE & -ANZAHL IE8 5-30 kb, 1-5 Dateien, Einbindung via <link>
DATEIGRÖSSE & -ANZAHL IE8 5-30 kb, 1-5 Dateien, Einbindung via @import
EINFLUSS BANDBREITE FIREFOX 3 5 kb, Einbindung via <link>
EINFLUSS BANDBREITE FIREFOX 3 5 kb, Einbindung via @import
EINFLUSS BANDBREITE FIREFOX 3 30 kb, Einbindung via <link>
DATEIGRÖSSE & -ANZAHL FIREFOX 3 30 kb, Einbindung via @import
DATEIGRÖSSE & -ANZAHL IE6 5-30 kb, 1-5 Dateien, Einbindung via <link>
DATEIGRÖSSE & -ANZAHL IE6 5-30 kb, 1-5 Dateien, Einbindung via @import
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
GRAFIKEN
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)
BEISPIEL STRICHGRAFIKEN FORMAT JPEG GIF PNG Einstellungen 24 bit (Qualität: 40 %), Niedrige Qualität für geringe Größe 8 bit (128 Farben) ohne Rasterung 8 bit (128 Farben) ohne Rasterung Dateigröße 13,0 kb 8,12 kb 5,64 kb
BEISPIEL FOTO FORMAT JPEG GIF PNG Einstellungen 24 bit (Qualität: 60 %) ohne Transparenz 24 bit mit Alphatransparenz 8 bit (256 Farben) mit Alphatransparenz Dateigröße 22,3 kb 152,0 kb 47,1 kb
OPTIMIERUNG FÜRS WEB GRAFIKEN AUFS WESENTLICHE EINDAMPFEN Photoshop: Für Web und Geräte speichern Adobe Fireworks
OPTIMIERUNG FÜRS WEB TOOLS NUTZEN! pngcrunch Smush.it
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-derneuesten-png-fix-methoden/
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
DEMO CSS-Sprites / Sliding-Doors-Technik
SCREENSHOTS AUS DER LIVE-DEMO http://lab.macx.de/lectures/boa09/sprites/
SCREENSHOTS AUS DER LIVE-DEMO Alle Einzelbilder aus Demo 1 Die Image-Slide-Grafik aus Demo 2
JAVASCRIPT
JAVASCRIPT POSITION IM MARKUP Scripte auslagern (Maintenance) Einbindung vor </body> LADEZEITEN MINIMIEREN Komprimierung (YUI Compressor, JSmin) Zusammenführen von Scripten Content Delivery Network (CDN) Beispiel: Einbindung von jquery via Google <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script> <script src="http://jqueryjs.googlecode.com/svn/trunk/plugins/livequery/jquery.livequery.js"...
JAVASCRIPT APPLIKATION STUFENWEISE STARTEN <script type="text/javascript> document.documentelement.classname += "js"; </script MIT CSS AUF JS-VERFÜGBARKEIT REAGIEREN #myapp { display: none; } #jswarning { display: block; }.js #myapp { display: block; }.js jswarning { display: none; }
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)
BACKEND
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.
ZUSAMMENFASSUNG
WORÜBER HABEN WIR GEREDET? Latenzzeiten (Ladezeiten) schlanker, fehlerfreier Code Reihenfolge der Inhalte im Markup Schreibweise optimieren (Shorthands in CSS) Komprimierung der Inhalte (CSSTidy) Reduzierung von HTTP-Requests Wahl des richtigen Grafikformates Grafiken verkleinern (Tools nutzen) CSS-Sprites nutzen Einbindung von JavaScript, DOM ready Chaining (jquery), Event Delegation 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
NOCH MEHR? Artikel zum Nachlesen und Nachdenken: Zum anhören und angucken: Auf Twitter: webkrauts.de highresolution.info macx.de Technikwürze - Web Standards Podcast technikwuerze.de @macx @djesse
DISKUSSION Fragen?
DANKE!