Cologne Web Performance Meetup 29.04.2020
Als PPTX, PDF herunterladen1 gefällt mir267 aufrufe
Das Meetup zur Web-Performance-Optimierung betont die Bedeutung einer schnellen Ladezeit für die Benutzererfahrung und den Umsatz, wobei 53% der Nutzer Seiten verlassen, die länger als 3 Sekunden laden. Es werden verschiedene Tools zur Performance-Messung und -Optimierung vorgestellt, einschließlich der kostenlosen Plattform wao.io, die es Unternehmen ermöglicht, die Geschwindigkeit ihrer Webseiten ohne Code-Änderungen zu verbessern. Teilnehmer werden ermutigt, sich über aktuelle Trends und Techniken in der Web-Performance zu informieren und Tools effizient zu nutzen.
Cologne Web Performance Meetup 29.04.2020
- 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
- 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/
Hinweis der Redaktion
- #4: Handy bitte lautlos schalten Wer nicht spricht, schaltet sein Mikro auf stumm Probleme mit Sound / Bild bitte im Chat melden Fragen bitte im Chat stellen
- #5: Zu Beginn sollte man sich erstmal die Frage stellen, sollte ich überhaupt meine Performance der Seite optimieren. Zudem Ist es wichtig herauszufinden, wenn ich es noch nicht weiß, WIE ist mein Status Quo und wie gehe ich hier am Besten vor? Es gibt Verschiedene Möglichkeiten um einen ersten Status Quo zu generien.
- #7: Quellen: https://www.smarketer.de/blog/mobile-webseiten-ladezeit-verbessern/ Quellen: https://www.seo-suedwest.de/3318-studie-durchschnittliche-ladezeit-webseiten-dreieinhalb-sekunden.html
- #8: 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/
- #10: Dass Aspekte wie die Ladegeschwindigkeit von Seiten und auch Suchmaschinenoptimierungen wichtig sind, ist bekannt. Übersehen wird oftmals allerdings die Barrierefreiheit und die Optimierung für mobile Nutzer. Viele Seiten werden mittlerweile nicht mehr am Heim-PC, sondern auch am Smartphone aufgerufen. Mobilen Nutzern eine angenehmere Erfahrung auf der Seite zu bieten, wird sich positiv auf die allgemeine Performance auswirken. Auch für beeinträchtigte Personen, wie im Falle von eingeschränktem Sehvermögen, ist dies sehr wichtig und kann neue Nutzer locken. Es könnte sich demnach rentieren, auf extravagante Schriftarten und Farbkontraste zu verzichten. Sofern man Wert auf die hier besprochenen Kategorien legt und die eigene Seite dementsprechend anpasst, sollte ein besseres Ranking schnell bevorstehen. Quelle für “53% der Nutzer”: https://www.thinkwithgoogle.com/data/mobile-page-speed-new-industry-benchmarks-load-time-vs-bounce/ Schnelle Ladezeiten an mobilen Geräten verbessern die User-Experience. Doch nur 5,4 Prozent aller deutschen Websites halten mit einer mobilen Ladezeit von bis zu einer Sekunde die Google -Empfehlung ein. Bei den 250 meistbesuchten mobilen Websites Deutschlands sind es lediglich 3,2 Prozent.
- #11: Hier wurde bei einer Seite, die wao.io nutzt, knapp 80% weniger Daten vom Server angefragt. D.h. knapp 800 Gibibyte ( entsprechen 858 Gigabyte) statt 3,8 Tebibyte (entspricht ca. 3,6 Terrabyte). Die Menge bezeiht sich auf 23 Tage. Und bedeuted, dass man entweder seine eigenen Server kleiner dimensionieren kann oder z.B. den freigwordene Last für performantere Ausliefergeschwindigkeit nutzt. wao.io verbessert ja nicht nur Frontend-Performance, sondern entlastet auch die Backend-Server. Das ist schwer messbar, vor allem im Live-Demo. In den Wao-Analytics sieht man wie viel wir geschätzerweise sparen. Die Kunden sollten den Effekt in ihrem eigenen Monitoring auch sehen, auch das kann bares Geld sparen (Betriebskosten). Sollten wir in den Folien zumindest erwähnen.
- #14: ggf. noch Google Site Kit erwähnen, das alle für Webmaster relevanten Google-Tools im WordPress-Admin bündelt. Die Google-Analysen sollten inzwischen alle dieselbe Engine (Lighthouse) verwenden, Unterschied ist nur noch der verwendete Server und ob Real User Metrics (sofern vorhanden) einbezogen werden? Sehr bekannt, einfaches Ampelsystem Teilweise fragwürdige Bewertung von einzelnen Messfaktoren
- #17: Sehr genaue Testmöglichkeiten (Serverstandort, Browser, Gerät) Eigene Scripts hinzufügbar Unabhängig durch wechselnde sponsoren Kann kompliziert wirken Sehr umfangreich Altes User Interface
- #18: Einfach zu bedienen Ergebnisse plakativ (Ampelsystem) Serverstandort Kanada Teilweise sehr oberflächlich
- #19: Live Demo und Diskussion siehe Folie “Ideen”: Mit den Teilnehmern zusammen konkrete Analyse und Optimierung durchführen Diskussion Feedback
- #21: Web Performance Optimierung bisher vor allem ein “technisches Thema” Techniker dominieren bislang die Diskussion über das Thema Auch CGNwebPerf traditionell eher ein Technikerstammtisch, das soll jedoch nicht so bleiben, sondern zukünftig zusätzlich auch Experten aus anderen Bereichen angesprochen werden (E-Commerce / Shopbetreiber, Marketing, Content Management / Redakteure, Blogger, Influencer) Wissen vermitteln, Erkennen was ohne Programmierung möglich ist => Unabhängigkeit, Time to Market Verstehen, worum es geht => Kompetenz, um Dienstleister / Mitarbeiter besser zu steuern Analysemöglichkeiten und Kennzahlen => Erfolg kontrollieren und nachweisen können
- #22: Programmcode komplexer oder umfangreicher Nutzergerät (iPhone 6 vs. iPhone X)
- #23: Zusammenfassung und Feedback Was wollten wir heute erreichen? Was haben wir erreicht? Welche weiteren Fragen und Ideen kamen auf? Feedback der Teilnehmer Ausblick Meetup CGNwebPerf soll zukünftig breitere Teilnehmerkreise ansprechen, d.h. Einerseits einsteigerfreundliche Veranstaltungen ohne große Vorkenntnisse außerdem wollen wir weiterhin technologische Themen vertiefen und diskutieren In den Ankündigungen auf den jeweiligen Schwerpunkt bzw. Zielgruppe hinweisen
- #24: Zusammenfassung und Feedback Was wollten wir heute erreichen? Was haben wir erreicht? Welche weiteren Fragen und Ideen kamen auf? Feedback der Teilnehmer Ausblick Meetup CGNwebPerf soll zukünftig breitere Teilnehmerkreise ansprechen, d.h. Einerseits einsteigerfreundliche Veranstaltungen ohne große Vorkenntnisse außerdem wollen wir weiterhin technologische Themen vertiefen und diskutieren In den Ankündigungen auf den jeweiligen Schwerpunkt bzw. Zielgruppe hinweisen
- #26: Zu Beginn sollte man sich erstmal die Frage stellen, sollte ich überhaupt meine Performance der Seite optimieren. Zudem Ist es wichtig herauszufinden, wenn ich es noch nicht weiß, WIE ist mein Status Quo und wie gehe ich hier am Besten vor? Es gibt Verschiedene Möglichkeiten um einen ersten Status Quo zu generien.
- #27: Zusammenfassung und Feedback Was wollten wir heute erreichen? Was haben wir erreicht? Welche weiteren Fragen und Ideen kamen auf? Feedback der Teilnehmer Ausblick Meetup CGNwebPerf soll zukünftig breitere Teilnehmerkreise ansprechen, d.h. Einerseits einsteigerfreundliche Veranstaltungen ohne große Vorkenntnisse außerdem wollen wir weiterhin technologische Themen vertiefen und diskutieren In den Ankündigungen auf den jeweiligen Schwerpunkt bzw. Zielgruppe hinweisen
- #30: Es ist gar nicht so einfach, up to date zu bleiben.Gerade da sich auch sehr viel schnell ändert. Daher empfehlen wir eine Software. Schwierig zu verstehenund noch schwieriger umsetzen, Gerade wenn man nicht das KnowHow dafür hat