Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

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 freiberuﬂicher 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 (Serverkonﬁguration, CMS, …)

STELLSCHRAUBEN HyperText Markup Language (HTML) Cascading Style Sheets (CSS) JavaScript Graﬁken Content Delivery Network (CDN) (Informationen zu Cookies bei jedem Request)

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) Mehrfachdeﬁnitionen 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 ﬁles 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 ﬁles 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 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/

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/Miniﬁzierung 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 Einﬂuss 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 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

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

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-der- neuesten-png-ﬁx-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-Graﬁk 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. Graﬁken)

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 (Deﬂate-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) 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

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

DISKUSSION Fragen?

DANKE!

http://www.highresolution.info	1014
http://technikwuerze.de	165
http://www.der-webentwickler.net	148
http://www.webzeugkoffer.de	65
http://netzlogbuch.de	40
http://www.slideshare.net	28
http://teamweb.mms-at-work.de	7
http://www.phpblogstars.de	4
http://translate.googleusercontent.com	2
http://static.slidesharecdn.com	1
http://blog.highresolution.info	1
http://intranet.minol.org	1
http://www.netvibes.com	1

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

by David Maciejewski

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 1,477

Statistics

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten Presentation Transcript