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

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

ERGEBNISSE
Performanceanalyse

DATEIGRÖSSE & -ANZAHL FIREFOX 3
5-30 kB, 1-5 Dateien, Einbindung via <link>

5-30 kB, 1-5 Dateien, Einbindung via @import

DATEIGRÖSSE & -ANZAHL SAFARI 4

DATEIGRÖSSE & -ANZAHL IE8

EINFLUSS BANDBREITE FIREFOX 3
5 kB, Einbindung via <link>

5 kB, Einbindung via @import

30 kB, Einbindung via <link>

30 kB, 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

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


TOOLS NUTZEN!
pngcrunch
Smush.it


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

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)

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.

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

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Ähnlich wie Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten