Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Performance matters

Web Frontend Performance
by

Sven Wolfermann

on 30 April 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Performance matters

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
Full transcript