Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Performance-Optimierung für WordPress-Websites

676 views

Published on

Meine Folien vom Affiliate-Stammtisch in Leipzig 2016

  • Be the first to comment

Performance-Optimierung für WordPress-Websites

  1. 1. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Performance-Optimierung für WordPress-Websites
  2. 2. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Wie kriegen wir unsere Daten schnell durch die Leitung?
  3. 3. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 3 Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr
 Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales Google hat errechnet, dass eine 4/10 Sekunde täglich Acht Mio. weniger Suchen bedeuten würde
 Quelle: http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience
  4. 4. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Wie schwer ist eigentlich eine [mobile] Website?
  5. 5. © 121WATT - André Goldmann Beispiel posterxxl.de: Requests: 118 • 1500 kb Bilder • 802,3 kb Script • 290,6 kb Diverses • 54,1 kb HTML • 28,6 kb CSS Page Size: 2.6 MB
 5 http://www.posterxxl.de/ Wie schwer ist eine [mobile] Website?
  6. 6. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 2,6 MB: • GPRS: 56 kbit/sec
 2,6 MB = 46 Sekunden • EDGE: 220 kbit/sec
 2,6 MB = 12 Sekunden • UMTS (3G): 376 kbit/sec
 2,6 MB = 7 Sekunden • HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
 2,6 MB = 0,3 Sekunden • LTE (4G): 100 Mbit/sec
 2,6 MB = 0,02 Sekunden 6
  7. 7. © 121WATT - André Goldmann Beispiel m.zalando.de: Requests: 129 • 507,3 kb Script • 243,9 kb Bilder • 35,7 kb CSS • 26,1 kb Diverses • 21,8 kb HTML Page Size: 834,9 kb
 
 7 m.zalando.de Wie schwer ist eine [mobile] Website?
  8. 8. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 834,9 kb: • GPRS: 56 kbit/sec
 834,9 kb = 15 Sekunden • EDGE: 220 kbit/sec
 834,9 kb = 4 Sekunden • UMTS (3G): 376 kbit/sec
 834,9 kb = 2 Sekunden • HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
 834,9 kb = 0,1 Sekunden • LTE (4G): 100 Mbit/sec
 834,9 kb = 0,008 Sekunden 8
  9. 9. © 121WATT - André Goldmann Beispiel 121watt.de: Requests: 66 • 321,2 kb Bilder • 147,6 kb Script • 84,3 kb Diverses • 18,7 kb CSS • 13 kb HTML Page Size: 584.7 kb
 9 http://www.121watt.de Wie schwer ist eine [mobile] Website?
  10. 10. © 121WATT - André Goldmann Was bedeutet das für mobile? Ladezeit für 584,7 kb: • GPRS: 56 kbit/sec
 584,7 kb = 10 Sekunden • EDGE: 220 kbit/sec
 584,7 kb = 3 Sekunden • UMTS (3G): 376 kbit/sec
 584,7 kb = 2 Sekunden • HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
 584,7 kb = 0,08 Sekunden • LTE (4G): 100 Mbit/sec
 584,7 kb = 0,005 Sekunden 10
  11. 11. © 121WATT - André Goldmann 11 http://tools.pingdom.com/fpt/ Pingdom Website Speed Test
  12. 12. © 121WATT - André Goldmann@fuchsfaktor10 #asl16
  13. 13. © 121WATT - André Goldmann@fuchsfaktor10 #asl16
  14. 14. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Checklisten für den Einstieg in die Optimierung
  15. 15. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Ladezeit-Optimierung am Server/Hosting
  16. 16. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren 16 http://wp-rocket.me/de/ Ladezeit-Optimierung am Server
  17. 17. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren 17 https://de.wordpress.org/plugins/wp-super-cache/ Ladezeit-Optimierung am Server
  18. 18. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen 18 https://de.wordpress.org/plugins/redirection/ Ladezeit-Optimierung am Server
  19. 19. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren 19 http://www.mysql.com/products/workbench/ Ladezeit-Optimierung am Server
  20. 20. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren 20 https://de.wordpress.org/plugins/wp-optimize/ Ladezeit-Optimierung am Server
  21. 21. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren 21 https://infinitewp.com/ Ladezeit-Optimierung am Server
  22. 22. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren Verwendung eines Content-Delivery-Networks 22 https://deliciousbrains.com/wp-offload-s3/ Ladezeit-Optimierung am Server
  23. 23. © 121WATT - André Goldmann Server: Caching & gzip-Kompression aktivieren HTTP-Requests reduzieren Weiterleitungsketten auseinandernehmen Datenbanken optimieren Verwendung eines Content-Delivery-Networks Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen 23 http://www.elegantthemes.com/plugins/monarch/ Ladezeit-Optimierung am Server
  24. 24. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Ladezeit-Optimierung im HTML-Code
  25. 25. © 121WATT - André Goldmann 25 http://wp-rocket.me/de/ Ladezeit-Optimierung im HTML-Code HTML: HTML-Kommentare entfernen HTML-Code komprimieren & ungenutztes CSS entfernen Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden) CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain)
  26. 26. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Ladezeit-Optimierung für Bilder und Grafiken
  27. 27. © 121WATT - André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) 27 Ladezeit-Optimierung für Bilder und Grafiken
  28. 28. © 121WATT - André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren 28 http://optimus.io/ Ladezeit-Optimierung für Bilder und Grafiken
  29. 29. © 121WATT - André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren 29 https://kraken.io/ Ladezeit-Optimierung für Bilder und Grafiken
  30. 30. © 121WATT - André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren Bilder per CDN laden 30 https://deliciousbrains.com/wp-offload-s3/ Ladezeit-Optimierung für Bilder und Grafiken
  31. 31. © 121WATT - André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren Bilder per CDN laden Icons als Font laden (http://fontello.com/ oder https://icomoon.io/) 31 https://icomoon.io/ Ladezeit-Optimierung für Bilder und Grafiken
  32. 32. © 121WATT - André Goldmann Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg oder .webp) Bildqualität reduzieren Bilder per CDN laden Icons als Font laden (http://fontello.com/ oder https://icomoon.io/) Einsatz des HTML5 <picture>-Elements 32 https://de.wordpress.org/plugins/picturefillwp/ Ladezeit-Optimierung für Bilder und Grafiken
  33. 33. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 <picture> Responsive Bilder für unterschiedliche Anwendungsfälle
  34. 34. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Probleme bei skalierten Bildern 34 • kein Qualitätsverlust • mehr Datenvolumen beim Nutzer • deutlicher Qualitätsverlust • weniger Datenvolumen beim Nutzer
  35. 35. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Lösung: <picture>-Element 35 Bildquelle: http://www.apple.com/de/ Bildquelle: http://www.apple.com/de/ Das Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus. <picture> <source media="(min-width: 650px)"srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)“ srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"> </picture>
  36. 36. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Einleitung <picture> Element Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von: • Art-Direction-basierte Bildauswahl • Pixel-Dichten-basierte Bildauswahl • Viewport-basierte Bildauswahl 36
  37. 37. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Beispiel: Zalando auf dem Desktop 37
  38. 38. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Beispiel: Zalando auf dem Smartphone 38
  39. 39. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Einleitung <picture> Element Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von: • Art-Direction-basierte Bildauswahl • Pixel-Dichten-basierte Bildauswahl • Viewport-basierte Bildauswahl 39
  40. 40. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Pixel-Dichten-basierte Bildauswahl (Pixeldensity) Für den Nutzer sichtbar:
 Bild 100x100 Pixel für 2fache Pixel-Dichte (iPhone & Co.):
 Bild 200x200 Pixel für 1,5fache Pixeldichte:
 Bild 150x150 Pixel Das Bild selbst wird jedoch immer
 in 100x100 Pixeln per CSS ausgegeben 40
  41. 41. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Einleitung <picture> Element Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von: • Art-Direction-basierte Bildauswahl • Pixel-Dichten-basierte Bildauswahl • Viewport-basierte Bildauswahl 41
  42. 42. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Viewport-basierte Bildauswahl 42 Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
  43. 43. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Wann sollten wir welche Auswahl definieren? • Art-Direction-basierte Bildauswahl
 (Bildausschnitt enorm wichtig, CTA muss sichtbar sein) • Pixel-Dichten-basierte Bildauswahl
 (Zielgruppe ist im High-Resolution Bereich) • Viewport-basierte Bildauswahl
 (User-Generated Content, Performance, automatische Prozesse) 43
  44. 44. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Meine ❤ Performance-Plugins für WordPress WP Rocket (Caching, Komprimierung, CDN & HTTP-Request-Reduzierung) OptimusHQ (Bildoptimierung bereits beim Upload) WP Offload™ S3 (automatischer Upload ins CDN) Redirection (für Weiterleitungen) - Alternativ „Yoast SEO Premium“ 44
  45. 45. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Wie optimiert man für den individuellen Nutzer?
  46. 46. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Was ist Contextual-Content? oder: Was ist personalisierter Content?
  47. 47. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Unterschiedliche Zielgruppen – personalisierter Content 47
  48. 48. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Kontext: Der Nutzer selbst Nutzerdaten verwenden, um Inhalte auszuspielen: • Verbindung zu Social Networks nutzen • Daten in Cookies speichern oder „nach Login“ Personalisierte Inhalte des Nutzers Registrierungsoptionen ein/ausblenden Sortierung der Inhalte 48
  49. 49. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Kontext: Der Ort des Nutzers Location-based Services: Angepasste Inhalte und Funktionen auf Basis der geografischen Position des Nutzers (GPS) 49
  50. 50. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Wozu kann man die Geolocation nutzen? Navigation zu einem Geschäft (festgelegte Adresse) Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.) Lokale Werbung Geschäftsadressen passend zur Location ausgeben (Seminarstandorte etc.) Berechnung von Liefergebühren, Preisen etc. Vorausgefüllte Formularfelder 50
  51. 51. © 121WATT - André Goldmann 51 http://html5demos.com/geo Geolocation nutzen!
  52. 52. © 121WATT - André Goldmann 52 http://caniuse.com/#search=Geolocation Can I use Geolocation?
  53. 53. © 121WATT - André Goldmann 53 https://www.maxmind.com/de/geoip2-services-and-databases Fragen ist nett. Einfach machen ist besser.
  54. 54. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Kontext: Das eigentliche Gerät Responsive-Design: Angepasste Inhaltsmengen, Bedienlogiken & die Darstellung der Website. Darstellung/Funktion der Website auf Basis des Geräts/der Geräteart Umleitung zur App-Installation 54
  55. 55. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Kontext: Uhrzeit des Nutzers Anpassung der Inhalte je nach Tageszeit bzw. größeren Zeitabschnitten, wie wochentags & Wochenende oder der aktuellen Jahreszeit. Kontaktmöglichkeiten oder Anreise-Informationen am Tag eines Events Layout zur Weihnachtszeit etc. automatisch angepasst Abends eher gedeckte Farben als am Tag 55
  56. 56. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Kontext: Haltung oder Befinden des Nutzers Sitzt der Nutzer auf dem Sofa?
 Befindet er sich gestresst und beengt auf dem Markt oder in der Bahn? Hinweis auf sensible Daten vorab geben Geräteausrichtung nutzen, um Inhalte besser darzustellen 56
  57. 57. © 121WATT - André Goldmann 57 https://dan.exposure.co/tbd-fest Beispiel: exposure.co https://dan.exposure.co/tbd-fest?slow=1
  58. 58. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Umsetzung von „Contextual-Content“: 58 Kontext X, dann Inhalt Y Ich brauche:
 Informationen über den Kontext Ich brauche:
 Zusatz-Informationen für meinen Inhalt
  59. 59. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 Wie kann man das alles umsetzen? …mit Tools natürlich.
  60. 60. © 121WATT - André Goldmann 60 http://www.monetate.com/ Monetate
  61. 61. © 121WATT - André Goldmann 61 http://www.gravity.com/ Gravity
  62. 62. © 121WATT - André Goldmann 62 http://www.apptus.com/ APPTUS
  63. 63. © 121WATT - André Goldmann 63 https://www.onespot.com/ OneSpot
  64. 64. © 121WATT - André Goldmann 64 http://www.monoloop.com/ Monoloop
  65. 65. © 121WATT - André Goldmann 65 https://www.optimizely.com/ Optimizely
  66. 66. © 121WATT - André Goldmann 66 http://www.webpower.eu/de/ Webpower
  67. 67. © 121WATT - André Goldmann 67 https://vwo.com/ Visual Website Optimizer
  68. 68. © 121WATT - André Goldmann@fuchsfaktor10 #asl16 André Goldmann 68 • Seit 1996 Front-End Entwickler 
 & Optimierer aus Leidenschaft • Chief Operating Officer bei der 121WATT
 CEO bei Pixeldreher
 CEO bei Fuchsfaktor10 – Virtual-Reality-Studio für 360°-Videos • Seminare bei der 121WATT:
 Mobile SEO & User Experience Seminar
 Technical SEO & OnPage 
 SEO Basis-Seminar
 WordPress Intensiv-Seminar
 Instagram-Marketing Seminar • Twitter: @fuchsfaktor10
 E-Mail: andre.goldmann@121watt.de

×