Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Heiko Mamerow

Other Decks in Programming

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