PERFORMANCE-OPTIMIERUNG
  BARRIEREFREIHEIT BEGINNT MIT LADEZEITEN



    Best of Accessibility (Düsseldorf, 24.09.2009)
  ...
DAVID MACIEJEWSKI
@macx



   Teamlead Software Developer in Hannover
   In Wahrheit: Designer und Programmierer
   Verfec...
DIRK JESSE
@djesse



   Bauingenieur aus Dresden
   freiberuflicher Softwareentwickler
   Entwickler „Yet Another Multicol...
SCHNELLE WEBSEITEN
EINFLÜSSE AUF DIE LADEZEIT


  Latenzzeiten bei der Server- / Client-Kommunikation
  Bandbreite der Anbindung (ISDN, DSL, ...
STELLSCHRAUBEN


 HyperText Markup Language (HTML)
 Cascading Style Sheets (CSS)
 JavaScript
 Grafiken
 Content Delivery Ne...
HTML
SAUBERES HANDWERK


 schlanker, fehlerfreier Code
 vermeiden von Codekorrekturen durch den Browser

 Webstandards
 Trennun...
OPTIMIERUNG DES MARKUPS


REIHENFOLGE DER INHALTE
  Relevante Inhalte nach oben
  Sekundäres nach unten (Banner, Widgets, ...
CASCADING STYLESHEETS
        (CSS)
BEST PRACTICE (CSS)


EINBINDUNG INS MARKUP
  Verlinkung im <head>
  <head>
      <meta http-equiv="Content-Type" content=...
ENTWICKLER- UND LIVEFASSUNG


KOMPRIMIERUNG FÜR DEN LIVEBETRIEB
  CSS Tidy
  YUI Compressor


ZUSAMMENFASSEN VON STLYESHEE...
DEMO
Performanceanalyse für das Laden von Stylesheets
JOIN YOUR FILES!


CSS PERFORMANCE THEMATISIERT:
  Yahoo Developer Network
  http://developer.yahoo.com/performance/rules....
HTTP-REQUESTS


VERBINDUNGTYPEN
     max-connections-per-server (Handshake + Datenaustausch)
     max-persistent-connectio...
TESTCASE: GRUNDLAGEN


RANDBEDINGUNGEN
  Dateigrößen zwischen 5,0 und 30,0 kB
  Ein bis fünf Dateisegmente
  Firefox 3, Sa...
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 Stylesheet...
GRAFIKEN
GRAFIKFORMATE


WAHL DES RICHTIGEN GRAFIKFORMATES
  JPEG
  PNG
  GIF (wenn es nicht anders geht)


REDUKTION DER FARBTIEFE...
BEISPIEL STRICHGRAFIKEN




FORMAT          JPEG                                GIF                  PNG

Einstellungen   ...
BEISPIEL FOTO




FORMAT          JPEG                      GIF                    PNG

Einstellungen   24 bit (Qualität: ...
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 grace...
BEST PRACTICE


SKALIERUNG
  Finger Weg von HTML-Skalierung
  100% JPG muss nicht sein


CSS-SPRITES
  Reduzierung von HTT...
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
  Kompr...
JAVASCRIPT


APPLIKATION STUFENWEISE STARTEN
<script type="text/javascript>
    document.documentElement.className += "js"...
JAVASCRIPT


STARTEN DER APPLIKATION
Wenn möglich, nicht auf window.onload warten
   jQuery: $(document).ready(   ... );

...
BACKEND
MÖGLICHE OPTIMIERUNGEN IM BACKEND


 Content Delivery Network benutzen
 Cookie-lose (Sub)Domain, ext. Anbieter wie z.B. Am...
ZUSAMMENFASSUNG
WORÜBER HABEN WIR GEREDET?

  Latenzzeiten (Ladezeiten)                     Wahl des richtigen Grafikformates
  schlanker, ...
NOCH MEHR?

Artikel zum Nachlesen und Nachdenken:   webkrauts.de
                                        highresolution.in...
DISKUSSION
   Fragen?
DANKE!
Upcoming SlideShare
Loading in …5
×

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

9,466 views
9,242 views

Published on

Published in: Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,466
On SlideShare
0
From Embeds
0
Number of Embeds
1,655
Actions
Shares
0
Downloads
0
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide
  • Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

    1. 1. PERFORMANCE-OPTIMIERUNG BARRIEREFREIHEIT BEGINNT MIT LADEZEITEN Best of Accessibility (Düsseldorf, 24.09.2009) von David Maciejewski und Dirk Jesse
    2. 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. 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
    4. 4. SCHNELLE WEBSEITEN
    5. 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. 6. STELLSCHRAUBEN HyperText Markup Language (HTML) Cascading Style Sheets (CSS) JavaScript Grafiken Content Delivery Network (CDN) (Informationen zu Cookies bei jedem Request)
    7. 7. HTML
    8. 8. SAUBERES HANDWERK schlanker, fehlerfreier Code vermeiden von Codekorrekturen durch den Browser Webstandards Trennung von Struktur, Gestaltung und Interaktion Barrierefreiheit (natürlich!)
    9. 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
    10. 10. CASCADING STYLESHEETS (CSS)
    11. 11. 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
    12. 12. ENTWICKLER- UND LIVEFASSUNG KOMPRIMIERUNG FÜR DEN LIVEBETRIEB CSS Tidy YUI Compressor ZUSAMMENFASSEN VON STLYESHEETS Reduzierung der HTTP-Requests
    13. 13. DEMO Performanceanalyse für das Laden von Stylesheets
    14. 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. 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. 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
    17. 17. TESTCASE: STYLESHEETS
    18. 18. ERGEBNISSE Performanceanalyse
    19. 19. DATEIGRÖSSE & -ANZAHL FIREFOX 3 5-30 kB, 1-5 Dateien, Einbindung via <link>
    20. 20. DATEIGRÖSSE & -ANZAHL FIREFOX 3 5-30 kB, 1-5 Dateien, Einbindung via @import
    21. 21. DATEIGRÖSSE & -ANZAHL SAFARI 4 5-30 kB, 1-5 Dateien, Einbindung via <link>
    22. 22. DATEIGRÖSSE & -ANZAHL SAFARI 4 5-30 kB, 1-5 Dateien, Einbindung via @import
    23. 23. DATEIGRÖSSE & -ANZAHL IE8 5-30 kB, 1-5 Dateien, Einbindung via <link>
    24. 24. DATEIGRÖSSE & -ANZAHL IE8 5-30 kB, 1-5 Dateien, Einbindung via @import
    25. 25. EINFLUSS BANDBREITE FIREFOX 3 5 kB, Einbindung via <link>
    26. 26. EINFLUSS BANDBREITE FIREFOX 3 5 kB, Einbindung via @import
    27. 27. EINFLUSS BANDBREITE FIREFOX 3 30 kB, Einbindung via <link>
    28. 28. DATEIGRÖSSE & -ANZAHL FIREFOX 3 30 kB, Einbindung via @import
    29. 29. DATEIGRÖSSE & -ANZAHL IE6 5-30 kB, 1-5 Dateien, Einbindung via <link>
    30. 30. DATEIGRÖSSE & -ANZAHL IE6 5-30 kB, 1-5 Dateien, Einbindung via @import
    31. 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
    32. 32. GRAFIKEN
    33. 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. 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. 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
    36. 36. OPTIMIERUNG FÜRS WEB GRAFIKEN AUFS WESENTLICHE EINDAMPFEN Photoshop: „Für Web und Geräte speichern“ Adobe Fireworks
    37. 37. OPTIMIERUNG FÜRS WEB TOOLS NUTZEN! pngcrunch Smush.it
    38. 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. 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
    40. 40. DEMO CSS-Sprites / Sliding-Doors-Technik
    41. 41. SCREENSHOTS AUS DER LIVE-DEMO http://lab.macx.de/lectures/boa09/sprites/
    42. 42. SCREENSHOTS AUS DER LIVE-DEMO Alle Einzelbilder aus Demo 1 Die Image-Slide-Grafik aus Demo 2
    43. 43. JAVASCRIPT
    44. 44. 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" ...
    45. 45. 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; }
    46. 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)
    47. 47. BACKEND
    48. 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.
    49. 49. ZUSAMMENFASSUNG
    50. 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. 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
    52. 52. DISKUSSION Fragen?
    53. 53. DANKE!

    ×