Das kleine 1x1 der Web-Performance

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.

29958f86da5d76e052520ccfc24dbde9?s=128

Heiko Mamerow

June 07, 2015
Tweet

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