Cologne Web Performance Meetup #29 Performance Optimierung - Was kann ich ohne Code-Änderung tun? von Angelina Farsch und Ingo Steinke von Avenga Germany

1. Cologne Web Performance Optimization Meetup #29
Performance Optimierung -
Was kann ich ohne Code-Änderung tun?
Angelina Farsch Ingo Steinke
Mittwoch, 29. 04. 2020 als Online-Event
Avenga Germany GmbH

2. 19
Büros
2500+
Mitarbeiter
350+
Kunden
20+
Jahre Erfahrung

3. Unsere Online Meetup Regeln
https://cardinalatwork.stanford.edu/manager-toolkit/engage/retention-strategies/managing-virtual-workplace
& Fragen bitte im
Chat stellen!
Das Meetup wird
aufgenommen
Via Chat können
private Nachrichten
gesendet werden.

4. Agenda
1. Ein paar Zahlen und Daten zum Start
2. Warum ist Web Performance wichtig?
3. Tools zur Performance Messung
4. Tools zur Optimierung
5. So kannst du starten.
6. So bleibst du informiert.

5. 1. Ein paar Zahlen und Daten zum Start

6. Entwicklung der Ladezeit
Websites mit Ladezeiten
von maximal 1 Sekunde
(Stand 2019)
● Booking.com - 0,7 Sekunden
● Indeed.com - 0,9 Sekunden
● otto.de - 0,9 Sekunden
Quellen: https://www.smarketer.de/blog/mobile-webseiten-ladezeit-verbessern/
Quellen: https://www.seo-suedwest.de/3318-studie-durchschnittliche-ladezeit-webseiten-dreieinhalb-sekunden.html
Im Jahr 2016: Durchschnittliche Ladezeit 3:25
Im Jahr 2018: Durchschnittliche Ladezeit 3:21
Im Jahr 2019: Durchschnittliche Ladezeit 2:65
... Zahlen für 2020 sind noch offen.
Stand 2019

7. Auswertungen & Umfragen
Quelle: https://onlinemarketing.de/news/google-lighthouse-studie-so-geht-es-an-die-spitze-der-suchergebnisse
Quelle: https://www.sem-deutschland.de/blog/page-speed-seo-ranking/
Bounce Rate(%)
Pageviews (% of total pageviews)

8. 2. Warum ist Performance Optimierung wichtig?

9. Warum ist Website Performance wichtig?
1. Schlechte Performance wirkt sich auf die User-Experience und Umsatzzahlen aus
2. 53% der Nutzer Verlassen eine Seite, die länger als 3 Sekunden lädt → Auswirkungen auf
Kaufabbrüche etc.
3. Auswirkung auf dein Ranking bei Google
4. Führt dazu, dass Besucher nicht wiederkommen und im Worst Case anderen Nutzern davon
berichten
Quelle: https://www.thinkwithgoogle.com/data/mobile-page-speed-new-industry-benchmarks-load-time-vs-bounce/
Quelle: https://www.konversionskraft.de/daten-fakten/website-performance-benchmark-deutscher-onlineshops-2018.html
“Warum sich heute noch mit Website Performance beschäftigen, wo
doch das Internet schnell und die Endgeräte so leistungsfähig sind?“

10. Nicht nur eine bessere Ladezeit - Entlastung des
Backends
Nach Einsatz von wao.io, als Tool zur Performance Optimierung konnte das Backend um 79,9 %
entlastet werden.

11. Vorteile einer schnellen
Ladezeit
➔ Höhere Klickrate
➔ Niedrigere Absprungrate
➔ Höhere Verweildauer auf der
Webseite
➔ Höhere Kundenzufriedenheit
➔ Chance der wiederkehrenden
Kunden steigt
➔ Ladegeschwindigkeit wird von Google
Bot bewerten und das Ranking kann optimiert
werdenU.a. Quelle: https://www.inboundly.de/blog/optimale-ladezeit-website/#chfy-coo-check-save

12. 3. Tools zur Performance Messung

13. Möglichkeit 1: PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=de

14. Möglichkeit 2: Googles “Test My Site”
https://www.thinkwithgoogle.com/intl/de-de/feature/testmysite/
basiert auf dem "Chrome User Experience Report": https://developers.google.com/web/tools/chrome-user-experience-report

15. Möglichkeit 3: Yellowlab.Tools
https://yellowlab.tools/
● Yellow Lab Tools open source Projekt
von Gaël Métais.
● Es erlaubt, eine Webseite
(über eine URL) zu testen und
erkennt die Leistung und die Qualität
des Frontend-Codes.

16. Möglichkeit 4: WebPageTest
https://webpagetest.org/
● Web-Performance-Tool, das mit
echten Browsern auf Webseiten
zugreift und Timing-Metriken
sammelt
● Neben der URL wird auch der
Browser mit welchem getestet
werden soll uns der Ort der
Testdurchführung ausgewählt

17. Möglichkeit 5: GTmetrix
https://gtmetrix.com/
● GT-Metrix vereint
verschiedene
Bewertungssysteme für die
Geschwindigkeit von
Websites und verfügt über ein
mächtiges Filter- und
Vergleichswerkzeug

18. wao.io/de/analyzer
Möglichkeit 6: wao.io von Avenga
● Neben dem IST-Zustand wird
auch das zu erreichende
Optimierungspotential aufgezeigt
● Zeigt auch die Möglichkeit die
Sicherheit der Webseite zu
optimieren
● Hosting in Deutschland
Zeig uns deine Seite!

19. 4. Tools zur Optimierung

20. Performance Optimierung
Was kann
ich ohne -Änderung
tun?

21. Was beeinflusst Performance & Page Speed?
5.
Serverstandort -
Kanada für
deutsche User
3.
Größe
(Datenmenge)
der Schriften
4.
Programmcode
komplex und
umfangreich
1.
Gesamtgröße
der Seite
2.
Dateiformat,
-größe & Anzahl
der Bilder

22. Do it yourself
● Verzicht (kein Startseitenvideo o.ä.)
● Performance als Priorität:
● Vorgaben an Agentur, Redakteure
Dienstleister / CDN
● CloudFlare
● Akamai
● wao.io
● ...

23. WordPress-Plugins
● Native Lazyload
https://wordpress.org/plugins/native-lazyload/
● Cache
● Bildoptimierung
● https://wordpress.org/plugins/tags/performance/
Plugins gibt es für fast alle Shop-Systeme/
Redaktionssysteme. Dies sollte jedoch gut abgewägt
werden, da zu viele Plugins auch die Ladezeit wieder
schwächen können.

24. 5. So kannst du starten

25. Wie kann ich starten?

26. 1. Wie ist meine Seite jetzt?
2. Habe ich die Skills dies zu tun?
3. Wo will ich hin?
4. ...
Wir freuen uns auf dein Ergebnis!

27. Kostenlos: IT-Spezialist unterstützt lokale Online Händler
mit Lösung für schnellere und sichere Webseiten
Der IT-Spezialist Avenga stellt seinen CloudService wao.io für
die Dauer der Corona-Krise sowie die Zeit des anschließenden
Wiederanlaufs der Wirtschaft und des öffentlichen Lebens
kostenlos bereit. Profitieren können von der Aktion
Einzelhändler, Gastronomen und Gesundheitsdienstleister,
die die Plattform bislang noch nicht in Anspruch nehmen und
wegen der aktuellen Situation ihre Online-Aktivitäten
intensivieren beziehungsweise sogar gerade erst mit diesen
beginnen. Der Webdienst hilft ihnen, die Geschwindigkeit und
Sicherheit ihrer Website zu optimieren und somit deren
Sichtbarkeit im Netz zu erhöhen, ohne dass hierfür eine
Änderung an deren Code notwendig wäre.
Interessierte Unternehmen können bis zum 15. Mai unter der
E-Mail-Adresse zusammen@wao.io einen Zugang
beantragen.

28. 6. So bleibst du informiert

29. Bleib immer up to date -
hier bekommst du deine Infos
1. https://wao.io/ → alles rund um Performance & Security
2. https://www.thinkwithgoogle.com/intl/de-de/
→ aktuelle Studien, Einblicke & Inspiration von Google
3. https://www.smashingmagazine.com/category/performance
4. Konferenz Perfnow (November 12 & 13, 2020), https://perfnow.nl/
5. https://calendar.perfplanet.com/ → jährlich 24 Artikel alle im Dezember

30. Fragen?

31. Bis zum nächsten Mal!
https://www.meetup.com/cologne-germany-high-performance-website-optimization-group/events/268706547/