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.

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

    View full-size slide

  2. Das kleine 1x1
    der Web-Performance
    Ein praktischer Leitfaden für „Nicht-Techis“

    View full-size slide

  3. Heiko Mamerow

    Freelancer

    Frontend-Entwickler

    WordPress Genießer

    View full-size slide

  4. „Performance is a feature.“
    (Google)

    View full-size slide

  5. Warum soll ich meine Website
    auf Performance optimieren?

    View full-size slide

  6. Darum!
    16,42s

    View full-size slide

  7. Darum!
    16,42s 1,57s

    View full-size slide

  8. Was ist eine performante Website?
    Wie schnell ist schnell?

    View full-size slide

  9. Datenbasis: 202 Websites #wccgn15
    Speed Index

    View full-size slide

  10. Datenbasis: 202 Websites #wccgn15
    Langsamste Seite: 22.800ms
    Speed Index

    View full-size slide

  11. Datenbasis: 202 Websites #wccgn15
    Langsamste Seite: 22.800ms
    Schnellste Seite: 614ms
    Speed Index

    View full-size slide

  12. :-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

    View full-size slide

  13. Praxistipp 1:
    Kurzer Weg zur Zielgruppe

    View full-size slide

  14. Kurze Latenz durch Standortvorteil
    Webserver in dem Land betreiben,
    wo die Zielgruppe ist.

    View full-size slide

  15. Köln <= 21ms => koeln.de
    Köln <= 29ms => hamburg.de
    Köln <= 32ms => berlin.de
    Köln <= 214ms => lacity.org
    Ping

    View full-size slide

  16. Viele Länder?
    CDN = Content Delivery Network

    View full-size slide

  17. Praxistipp 2:
    Bilder optimieren

    View full-size slide

  18. Grundregeln

    Vor dem Hochladen optimieren

    Dateiformat:
    – Foto => jpg
    – Grafik => png

    Größe an der maximalen Breite orientieren

    View full-size slide

  19. Bilder für das Web aufbereiten z.B. mit Gimp
    www.gimp.org

    View full-size slide

  20. Praxistipp 3:
    Bilder nachladen

    View full-size slide

  21. Bilder laden erst im sichtbaren Bereich.

    View full-size slide

  22. z.B. Plugin
    Crazy Lazy
    Plugin Directory Suche
    Keyword: lazy loading

    View full-size slide

  23. Praxistipp 4:
    Dateien komprimieren

    View full-size slide

  24. Kompression mit gzip
    Einstellung beim Provider oder als Plugin
    z.B. GZip Ninja Speed Compression
    Plugin Directory
    Keyword: gzip

    View full-size slide

  25. Praxistipp 5:
    Code komprimieren

    View full-size slide

  26. Löschen von unnötigen Leerzeichen,
    Zeilenumbrüchen, Tabulatoren
    Kürzen von Wörtern

    View full-size slide

  27. Unkomprimiert komprimiert

    View full-size slide

  28. z.B. Plugin
    Autoptimize
    Plugin Directory Suche
    Keyword: minify

    View full-size slide

  29. Praxistipp 6:
    Kombinieren

    View full-size slide

  30. Verringern von Dateiaufrufen
    durch Zusammenstellen
    von CSS und JavaScript

    View full-size slide

  31. z.B. Plugin
    Better WordPress Minify
    Plugin Directory Suche
    Keyword: minify

    View full-size slide

  32. Praxistipp 7:
    Seiten-Caching

    View full-size slide

  33. Artikel/Beiträge als fertige Datei
    auf dem Server

    View full-size slide

  34. z.B. Plugin
    Cachify
    Plugin Directory Suche
    Keyword: caching

    View full-size slide

  35. 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

    View full-size slide