SlideShare una empresa de Scribd logo
1 de 53
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!

Más contenido relacionado

La actualidad más candente

WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional IISebastian Blum
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationJakob
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxSebastian Blum
 
Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance OptimizationsJakob
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenJoomla! User Group Fulda
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling  am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling  am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdAOE
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartJakob
 

La actualidad más candente (8)

WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional II
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO Campixx
 
Client-side Performance Optimizations
Client-side Performance OptimizationsClient-side Performance Optimizations
Client-side Performance Optimizations
 
Wordpress Security
Wordpress SecurityWordpress Security
Wordpress Security
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling  am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling  am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
 

Destacado

Ce n'est pas votre contenu qui compte
Ce n'est pas votre contenu qui compteCe n'est pas votre contenu qui compte
Ce n'est pas votre contenu qui comptelamaisonnarrative
 
Responsabilidad social
Responsabilidad socialResponsabilidad social
Responsabilidad socialrafa8219
 
Trionfo new volley nel derby con l'unipolsai
Trionfo new volley nel derby con  l'unipolsaiTrionfo new volley nel derby con  l'unipolsai
Trionfo new volley nel derby con l'unipolsairedazione gioianet
 
Gemeenten, Maak werk van vrijetijd!
Gemeenten, Maak werk van vrijetijd!Gemeenten, Maak werk van vrijetijd!
Gemeenten, Maak werk van vrijetijd!Roeland Tameling
 
Travailler avec la métaphore littéraire
Travailler avec la métaphore littéraire Travailler avec la métaphore littéraire
Travailler avec la métaphore littéraire lamaisonnarrative
 
Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...
Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...
Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...tapahtumaruoka
 
Fundición
Fundición Fundición
Fundición crisol95
 
Le discours substitue le sens
Le discours substitue le sensLe discours substitue le sens
Le discours substitue le senslamaisonnarrative
 
Автоматизированное проектирование эис (Case технология)
Автоматизированное проектирование эис (Case технология)Автоматизированное проектирование эис (Case технология)
Автоматизированное проектирование эис (Case технология)adam93
 
Cs, sono nata il 21 a primavera
Cs, sono nata il 21 a primaveraCs, sono nata il 21 a primavera
Cs, sono nata il 21 a primaveraredazione gioianet
 
Lesson Planning Using Universal Design for Learning
Lesson Planning Using Universal Design for LearningLesson Planning Using Universal Design for Learning
Lesson Planning Using Universal Design for LearningBrookes Publishing
 
m20 Estudios
m20 Estudiosm20 Estudios
m20 Estudiosrljmaster
 

Destacado (20)

Ce n'est pas votre contenu qui compte
Ce n'est pas votre contenu qui compteCe n'est pas votre contenu qui compte
Ce n'est pas votre contenu qui compte
 
EDUC 6707 smitht
EDUC 6707 smithtEDUC 6707 smitht
EDUC 6707 smitht
 
Ferchos
FerchosFerchos
Ferchos
 
Responsabilidad social
Responsabilidad socialResponsabilidad social
Responsabilidad social
 
Boletim 66
Boletim 66Boletim 66
Boletim 66
 
Trionfo new volley nel derby con l'unipolsai
Trionfo new volley nel derby con  l'unipolsaiTrionfo new volley nel derby con  l'unipolsai
Trionfo new volley nel derby con l'unipolsai
 
Gemeenten, Maak werk van vrijetijd!
Gemeenten, Maak werk van vrijetijd!Gemeenten, Maak werk van vrijetijd!
Gemeenten, Maak werk van vrijetijd!
 
Mmoloki Lebatle CV
Mmoloki Lebatle CVMmoloki Lebatle CV
Mmoloki Lebatle CV
 
Travailler avec la métaphore littéraire
Travailler avec la métaphore littéraire Travailler avec la métaphore littéraire
Travailler avec la métaphore littéraire
 
Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...
Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...
Asiakkaiden ja tapahtumajärjestäjien näkökulmia päijäthämäläisestä tapahtumar...
 
Fundición
Fundición Fundición
Fundición
 
Le discours substitue le sens
Le discours substitue le sensLe discours substitue le sens
Le discours substitue le sens
 
Автоматизированное проектирование эис (Case технология)
Автоматизированное проектирование эис (Case технология)Автоматизированное проектирование эис (Case технология)
Автоматизированное проектирование эис (Case технология)
 
Cs, sono nata il 21 a primavera
Cs, sono nata il 21 a primaveraCs, sono nata il 21 a primavera
Cs, sono nata il 21 a primavera
 
Excellence et enjeu
Excellence et enjeuExcellence et enjeu
Excellence et enjeu
 
Lesson Planning Using Universal Design for Learning
Lesson Planning Using Universal Design for LearningLesson Planning Using Universal Design for Learning
Lesson Planning Using Universal Design for Learning
 
Oceanía
OceaníaOceanía
Oceanía
 
Dn12 u3 a19_maah tema libre
Dn12 u3 a19_maah  tema libreDn12 u3 a19_maah  tema libre
Dn12 u3 a19_maah tema libre
 
Símbols pneumàtics
Símbols pneumàticsSímbols pneumàtics
Símbols pneumàtics
 
m20 Estudios
m20 Estudiosm20 Estudios
m20 Estudios
 

Similar a Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend PerformanceNico Steiner
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02Chris Palatinus
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Icinga 2009 at Nagios Workshop
Icinga 2009 at Nagios WorkshopIcinga 2009 at Nagios Workshop
Icinga 2009 at Nagios WorkshopIcinga
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeldfelixnagel
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdAOE
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondUlrich Krause
 
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebContinuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebAndreas Schmidt
 

Similar a Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten (20)

Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Icinga 2009 at Nagios Workshop
Icinga 2009 at Nagios WorkshopIcinga 2009 at Nagios Workshop
Icinga 2009 at Nagios Workshop
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Präsentation zum Meetup - Hands-on SEO
Präsentation zum Meetup - Hands-on SEOPräsentation zum Meetup - Hands-on SEO
Präsentation zum Meetup - Hands-on SEO
 
GWT
GWTGWT
GWT
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebContinuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
 
TDD für Testmuffel
TDD für TestmuffelTDD für Testmuffel
TDD für Testmuffel
 

Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten

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