Design for Permormance

Was muss ich beachten, wenn ich meine Webseite gestalte?

Transcript

1. PNG branding 3 sec. PERFROMANCE GIF JPG SVG CSS3 DESIGN 40% RATE für B A R C A M P Google U X
2. Design = Performance @prwebcare http://prc.li
3. Webdesign Heute U X
4. Logo menü menü menü menü menü WE ARE UNIQUE
5. Logo KLEINER SLIDER Erster Text Bacon ipsum dolor amet venison jowl Leberkäs, pork loin t-bone biltong.
6. @prwebcare Quelle: https://www.formstack.com/the-anatomy-of-a-perfect-landing-page
7. BRANDING
8. Und nu?
9. Seid Mutig! Content & Design Mobile First? Morphing Design.
10. Performance
11. +500ms = -20% Google Traffic @prwebcare Quelle: websiteoptimization.com
12. Nach 3 Sekunden 40% der Leute weg! @prwebcare Quelle: gomez.com
13. 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
14. Was lädt da so lang?
15. • Jede Datenbankabfrage • Jede Serveranfrage • Jedes Zeichen HTML • Jede Grafik • Jedes Bild • Jede Schrift • Jedes Zeichen Script @prwebcare Phillip Roth
16. Wie teste ich Geschwindigkeit?
17. tools.pingdom.com/fpt developers.google.com/speed/pagespeed/insights webpagetest.org gtmetrix.com @prwebcare Phillip Roth
18. Bilder & Grafiken
19. 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
20. Formatwahl Reduzieren Optimieren srcset / picturefill Lazy Load https://imageoptim.com/
21. Schriften Schnitte Google Fonts
22. 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
23. 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
24. @prwebcare Quelle: http://caniuse.com/#search=woff
25. 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
26. 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
27. Result Responsive Wenig Bilder Kleine Bilder Sprites für Icons
 Weniger Blogbeiträge mobil? mittlere Firma reduziert
28. Praxis kleine Firma Responsive Kleine Bilder Alle Infos schnell im Blick Suche?! Service
29. War’s das?
30. Caching Caching Caching html reduzieren & minifizieren Skripte reduzieren & zusammenlegen Skripte minifizieren & in den Footer A/B-Tests gzip, cdn, expire, hhvm, nginx @prwebcare Phillip Roth
31. Testen Vergleichen Anpassen
32. Gute Performance == Gutes Design