PERFORMANCE
Sven Wolfermann
freier Frontend Entwickler aus Berlin
seit mehr als 10 Jahren Web-Entwickler
mittlerweile 33 Jahre alt
CSS-Spezialist und Certified TYPO3 Integrator
Frontend-Performance als neues Steckenpferd
http://maddesigns.tumblr.com/
Twitter: @maddesigns
CSS
Tools
Bildoptimierung/Bildformate
Crush-PNG
Sprites
Rendering-Optimierung
CSS
Schnelle CSS Selectoren
a

.link 

div div div p a.link

div > div > div > p > a.link
schnellste ->

auch schnell ->

langsam ->

sehr langsam ->
Warum ist das langsam?
http://stevesouders.com/efws/css-selectors/universal.php
Wie werden die Selektoren gewichtet?
*                      {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li                      {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li                  {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li             {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]  {}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red        {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level        {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y              {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""                 /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
CSS-Reset
browserspezifische Werte zurücksetzen mit CSS-Reset

* {margin: 0; padding: 0} ist nicht gut

besser reset.css von Eric Meyer

weil nicht einfach alle Werte zurückgesetzt werden

zudem ist *-Selektor der langsamste überhaupt
/*http://meyerweb.com/eric/tools/css/reset/*/
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
/* remember to define focus styles */
:focus {outline: 0;}
/* remember to highlight inserts somehow */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
CSS Shorthands
Kurzschreibweisen benutzen
margin: 10px 20px 30px 40px

margin: 10px 20px 30px

margin: 10px 20px

margin: 10px
top                     right                    bottom                left
top                  right & left            bottom
top & bottom      right & left
Alle 4 Seiten
top
right
bottom
left
margin
Weitere Kurzschreibweisen
padding: 10px 20px 30px 40px;

border: 1px solid red;

background: #000 url(pic.png) no-repeat right bottom;

font: bold 16px/18px Arial, Helvetica, sans-serif;

list-style: square inside url(images/bullet.png);

und natürlich Kurzschreibweise für Farbwerte:

#ffffff -> #fff
Best practice
Zuweisungen zusammenfassen
h1, h2, h3 {margin: 10px 0}
multiple Klassen im HTML zuweisen
<div class="box right"></div>
Das letzte Semicolon kann weg gelassen werden
Null-Werte ohne Einheit => h3 {margin: 0}
font-weight: 700 (bold), font-weight: 400 (normal)
CSS-Hacks vermeiden => Conditional Comments
CSS komprimieren
Kommentare
Print-Styles in das default-Stylesheet übernehmen
      @media print {}
Frontend-Performance
Richtiges Bildformat verwenden
PNG vor GIF bevorzugen
PNG8 für bis zu 256 Farben
PNG24 für Alphatransparenzen
JPG nur für Fotos
Crushing PNG (entfernen unnötiger Daten)
=> Mac: http://imageoptim.pornel.net/
=> PC: http://psydk.org/PngOptimizer
CSS-Sprites
#ch {background: transparent url(ch.png) no-repeat 0 50%}
#cz {background: transparent url(cz.png) no-repeat 0 50%}
#de {background: transparent url(de.png) no-repeat 0 50%}
#es  {background: transparent url(es.png) no-repeat 0 50%}
#fr   {background: transparent url(fr.png) no-repeat 0 50%}
#gb {background: transparent url(gb.png) no-repeat 0 50%}
#it   {background: transparent url(it.png) no-repeat 0 50%}
#us {background: transparent url(us.png) no-repeat 0 50%}
#za {background: transparent url(za.png) no-repeat 0 50%}
...
.flags {
background: transparent url(flag-sprite.png) no-repeat;
color: #fff;
display:block;
line-height: 1.4;
padding: 0 0 0 24px;
text-decoration: none;
}

#ch {background-position: 0 4px;}
#cz {background-position: 0 -57px;}
#de {background-position: 0 -118px;}
#es {background-position: 0 -180px;}
#fr {background-position: 0 -241px;}
#gb {background-position: 0 -301px;}
#it {background-position: 0 -362px;}
#us {background-position: 0 -423px;}
#za {background-position: 0 -485px;}
Rendering optimieren
CSS mit <link> in den HEAD-Bereich einbinden
@import vermeidenhttp://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Javascript vorm schließenden </body> wenn nicht onload-relevant
wenn in HEAD, dann nach CSS
Javascript blockt das Rendering                              so kann parallel geladen werden
Stylesheets und Javascript extern einbinden (cachable)
Stylesheets und Javascript komprimieren und zusammenfassen
max 4 Stylesheets mit < 10kb  sind schneller als 1 Datei
mit GZIP ausliefern
http://www.slideshare.net/dmacx/performance-optimierung-barrierefreiheit-beginnt-mit-ladezeiten
Tools
Standard-Tools für Firebug
YSlow
Standard-Tools für Firebug
PageSpeed
http://www.webpagetest.org/
Web-Tools
Weitere Spielwiesen
http://websiteoptimization.com/services/analyze/
http://tools.pingdom.com/
http://www.httpwatch.com/

http://stevesouders.com/cuzillion/
Bücher
Testsuite
Mehrere Bilder zu einem zusammenführen
Danke
Fragen?
http://maddesigns.tumblr.com/
http://maddesigns.de

Twitter: @maddesigns
Performance-
Optimierung
Schnelle CSS Selectoren
CSS Reset
Shortcuts
Best practice
Als Beispiel:






Der Browser liest CSS von RECHTS nach LINKS!

Also er sucht erst alle "a"-Tags, schaut dann welche von denen
ein "li" als Elternelement haben, sortiert diese aus und schaut danach welche ein "ul" als Elternelement haben und weist dann
die Farbe #f00 zu.
Links zum Thema "CSS-Sprites"
Tuturial "CSS Sprite - Ladegeschwindigkeit optimieren und HTTP-Requests verringern"
http://bit.ly/cHbtQ2

Backend-Skin in TYPO3 4.4: Technical changes...
http://slidesha.re/dmVAOC