Das kleine 1x1 der Web-Performance

Mein Vortrag auf dem WordCamp Cologne MMXV vom 07.06.2015

PS: Die Animationen sind in der PDF leider nicht zu sehen.

Transcript

1. Wer will ein guter Rechner sein, Der lerne wohl das Ein mal Ein. Johann Lammerding: Die selbst-lehrende Rechen-Schule. Münster 1718
2. Das kleine 1x1 der Web-Performance Ein praktischer Leitfaden für „Nicht-Techis“
3. Heiko Mamerow • Freelancer • Frontend-Entwickler • WordPress Genießer
4. „Performance is a feature.“ (Google)
5. Warum soll ich meine Website auf Performance optimieren?
6. Darum! 16,42s
7. Darum! 16,42s 1,57s
8. Was ist eine performante Website? Wie schnell ist schnell?
9. Speed Index
10. Datenbasis: 202 Websites #wccgn15 Speed Index
11. Datenbasis: 202 Websites #wccgn15 Langsamste Seite: 22.800ms Speed Index
12. Datenbasis: 202 Websites #wccgn15 Langsamste Seite: 22.800ms Schnellste Seite: 614ms Speed Index
13. :-D :-) :-| ;-( 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 7x <1s 34x <2s 56x <3s 104x >3s Sekunden Speed Index
14. Praxistipp 1: Kurzer Weg zur Zielgruppe
15. Kurze Latenz durch Standortvorteil Webserver in dem Land betreiben, wo die Zielgruppe ist.
16. Köln <= 21ms => koeln.de Köln <= 29ms => hamburg.de Köln <= 32ms => berlin.de Köln <= 214ms => lacity.org Ping
17. Viele Länder? CDN = Content Delivery Network
18. Praxistipp 2: Bilder optimieren
19. Grundregeln • Vor dem Hochladen optimieren • Dateiformat: – Foto => jpg – Grafik => png • Größe an der maximalen Breite orientieren
20. Bilder für das Web aufbereiten z.B. mit Gimp www.gimp.org
21. Praxistipp 3: Bilder nachladen
22. Bilder laden erst im sichtbaren Bereich.
23. z.B. Plugin Crazy Lazy Plugin Directory Suche Keyword: lazy loading
24. Praxistipp 4: Dateien komprimieren
25. Kompression mit gzip Einstellung beim Provider oder als Plugin z.B. GZip Ninja Speed Compression Plugin Directory Keyword: gzip
26. Praxistipp 5: Code komprimieren
27. Löschen von unnötigen Leerzeichen, Zeilenumbrüchen, Tabulatoren Kürzen von Wörtern
28. Unkomprimiert komprimiert
29. z.B. Plugin Autoptimize Plugin Directory Suche Keyword: minify
30. Praxistipp 6: Kombinieren
31. Verringern von Dateiaufrufen durch Zusammenstellen von CSS und JavaScript
32. z.B. Plugin Better WordPress Minify Plugin Directory Suche Keyword: minify
33. Praxistipp 7: Seiten-Caching
34. Artikel/Beiträge als fertige Datei auf dem Server
35. z.B. Plugin Cachify Plugin Directory Suche Keyword: caching
36. Danke :-)
37. Bildnachweis: Lehrer Lämpel (Slide 1) Urheber: Wilhelm Busch Fernsehturm (Slide 3, 6,7, und 20) Urheber: von Kazuyanagae (Eigenes Werk) [CC BY-SA 4.0 ( http://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons