Design for Permormance - Speaker Deck

Design for Permormance

by Phillip Roth

Slide 1

Slide 1 text

PNG branding 3 sec. PERFROMANCE GIF JPG SVG CSS3 DESIGN 40% RATE für B A R C A M P Google U X

Slide 2

Slide 2 text

Design = Performance @prwebcare http://prc.li

Slide 3

Slide 3 text

Webdesign Heute U X

Slide 4

Slide 4 text

Logo menü menü menü menü menü WE ARE UNIQUE

Slide 5

Slide 5 text

Logo KLEINER SLIDER Erster Text Bacon ipsum dolor amet venison jowl Leberkäs, pork loin t-bone biltong.

Slide 6

Slide 6 text

@prwebcare Quelle: https://www.formstack.com/the-anatomy-of-a-perfect-landing-page

Slide 7

Slide 7 text

BRANDING

Slide 8

Slide 8 text

Und nu?

Slide 9

Slide 9 text

Seid Mutig! Content & Design Mobile First? Morphing Design.

Slide 10

Slide 10 text

Performance

Slide 11

Slide 11 text

+500ms = -20% Google Trafﬁc @prwebcare Quelle: websiteoptimization.com

Slide 12

Slide 12 text

Nach 3 Sekunden 40% der Leute weg! @prwebcare Quelle: gomez.com

Slide 13

Slide 13 text

47% erwarten eine Ladezeit von unter 2 Sek. 52% Shopper kommen wieder, wenn die Seite schnell ist 14% wechseln die Seite, wenn diese zu lahm ist 23% hören auf zu Shoppen 64% Kaufen nächstes mal woanders @prwebcare Quelle: akamai.com

Slide 14

Slide 14 text

Was lädt da so lang?

Slide 15

Slide 15 text

• Jede Datenbankabfrage • Jede Serveranfrage • Jedes Zeichen HTML • Jede Graﬁk • Jedes Bild • Jede Schrift • Jedes Zeichen Script @prwebcare Phillip Roth

Slide 16

Slide 16 text

Wie teste ich Geschwindigkeit?

Slide 17

Slide 17 text

tools.pingdom.com/fpt developers.google.com/speed/pagespeed/insights webpagetest.org gtmetrix.com @prwebcare Phillip Roth

Slide 18

Slide 18 text

Bilder & Graﬁken

Slide 19

Slide 19 text

JPEG - nicht transparent, viele Farben GIF - Transparenz, wenig Farben CSS3 - Transparenz, wenig Farben PNG - Transparenz, viele Farben SVG - Vektoren, Animation BASE64 - Bild im Quelltext Sprites - Bildersammlung @prwebcare Phillip Roth

Slide 20

Slide 20 text

Formatwahl Reduzieren Optimieren srcset / pictureﬁll Lazy Load https://imageoptim.com/

Slide 21

Slide 21 text

Schriften Schnitte Google Fonts

Slide 22

Slide 22 text

Je Schrift eine Anfrage - Lato, Droid, Handwriting Bereitstellen - eot, woff, truetype, opentype, svg Je Schnitt doppelte Lademenge - 300,400,700,900 IE6-8 lädt alles runter - O_o Google telefoniert nach Hause! @prwebcare Phillip Roth

Slide 23

Slide 23 text

Brauche ich alle Schriften? Andere Schrift mit kleinerer Ladezeit? Kann ich mit Farben variieren? Kann ich den Schriftsatz reduzieren? Kann ich Googleanfrage umgehen? Wie reduziere ich die Wartezeit? @prwebcare Phillip Roth

Slide 24

Slide 24 text

@prwebcare Quelle: http://caniuse.com/#search=woff

Slide 25

Slide 25 text

Schriftwahl Optimieren Direkt einbetten http://www.fontsquirrel.com/tools/webfont-generator http://www.localfont.com/ http://bdadam.com/blog/loading-webfonts-with-high-performance.html http://typecast.com/ https://viget.com/extend/the-font-face-dilemma

Slide 26

Slide 26 text

Header Video - mobil Bild AirBnB Suche - mobil reduziert Wochenend ist gleich Welt - mobil reduziert Slider unten mobil weg Gemeinschaft mobil weg the big guys viele viele  medien

Slide 27

Slide 27 text

Result Responsive Wenig Bilder Kleine Bilder Sprites für Icons  Weniger Blogbeiträge mobil? mittlere Firma reduziert

Slide 28

Slide 28 text

Praxis kleine Firma Responsive Kleine Bilder Alle Infos schnell im Blick Suche?! Service

Slide 29

Slide 29 text

War’s das?

Slide 30

Slide 30 text

Caching Caching Caching html reduzieren & miniﬁzieren Skripte reduzieren & zusammenlegen Skripte miniﬁzieren & in den Footer A/B-Tests gzip, cdn, expire, hhvm, nginx @prwebcare Phillip Roth