• Save
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Upcoming SlideShare
Loading in...5
×
 

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

on

  • 13,394 views

 

Statistics

Views

Total Views
13,394
Views on SlideShare
11,795
Embed Views
1,599

Actions

Likes
22
Downloads
0
Comments
0

15 Embeds 1,599

http://www.highresolution.info 1036
http://www.der-webentwickler.net 191
http://technikwuerze.de 170
http://netzlogbuch.de 74
http://www.webzeugkoffer.de 67
http://www.slideshare.net 28
http://stuff.lime-flavour.de 13
http://teamweb.mms-at-work.de 7
http://www.phpblogstars.de 4
http://lanyrd.com 3
http://translate.googleusercontent.com 2
http://blog.highresolution.info 1
http://static.slidesharecdn.com 1
http://intranet.minol.org 1
http://www.netvibes.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten Presentation Transcript

  • 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 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/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 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-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) 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!