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

Datenkompression - Ein praktischer Leitfaden für den Einstieg

Datenkompression - Ein praktischer Leitfaden für den Einstieg

Am 26.01.2017 habe ich beim WP Meetup Berlin einen Vortrag über Datenkompression gehalten.

PS: Dazu gibt es auch einen Beitrag auf meinem Blog und (bald) bei WordPress TV

Heiko Mamerow

January 27, 2017
Tweet

More Decks by Heiko Mamerow

Other Decks in Technology

Transcript

  1. Datenkompression
    Ein praktischer Leitfaden für den Einstieg
    WordPress Meetup Berlin, 26.01.2017

    View full-size slide

  2. Heiko Mamerow

    Frontender

    WordPresser

    Perfmatterer
    @HeikoMamerow

    View full-size slide

  3. „Performance is a feature.“
    Ilya Grigorik, Google

    View full-size slide

  4. Datenkompression
    ist gut für
    Web Performance

    View full-size slide

  5. Datenkompression ist gut, weil …
    Verringert die Dateigröße

    View full-size slide

  6. Kleine Datei
    30 kB
    100
    kB
    Kompression
    30 – 70%

    View full-size slide

  7. Kleine Datei = Schnelle Ladezeit
    Unkomprimiert Komprimiert
    Dateigröße: 100 MB 30 MB
    Übertragungsrate: 10 Mbit/s (DSL)
    Dauer: 80s 24s

    View full-size slide


  8. Kompressionsprogramm

    Dateiformat: dateiname.gz

    Open Source (GPL)

    Normalerweise installiert. \o/

    Normalerweise nicht aktiviert. /o\
    gzip

    View full-size slide

  9. Eignet sich am besten für alle
    Dateien, die Text enthalten.
    z.B.
    .html, .php, .js, .css, .svg, .woff2
    gzip

    View full-size slide

  10. gzip Check
    www.gziptest.com

    View full-size slide

  11. gzip Plugins für WordPress
    https://wordpress.org/plugins/tags/gzip
    Plugins nur im „Notfall“.
    Eigenen sich nur für Apache Server.
    Möglichst die Einstellungen beim Provider nutzen
    bzw. erst mal dort anfragen.

    View full-size slide

  12. Alternative Brotli
    https://github.com/google/brotli
    Noch bessere Kompression
    Nur für Erwachsene ;-)

    View full-size slide

  13. Vergleich
    Unkomprimiert
    gzip
    Brotli

    View full-size slide

  14. Danke :-)
    @HeikoMamerow

    View full-size slide

  15. Bildnachweis:
    Fernsehturm (Slide 2)
    Urheber:
    von Kazuyanagae (Eigenes Werk) [CC BY-SA 4.0 (
    http://creativecommons.org/licenses/by-sa/4.0)],
    via Wikimedia Commons
    Andrere Bilder und Grafikelemente (ausser Screenshot)
    Pixabay

    View full-size slide