Ladezeitoptimierung in Wordpress - Make User & Google happy WordCamp Vienna 2020

Ladezeitoptimierung in Wordpress
          Make User & Google happy 

            WordCamp Vienna 2020
            Christian Kaiser | gotonet.at

1                   WordCamp Vienna 2020    Christian Kaiser, MSc | gotonet.at

Warum ist Ladezeitoptimierung wichtig

     bessere Nutzererfahrung („User Experience“)
     geringere Absprungrate
     längere Verweildauer, mehr besuchte Seiten
     höhere Conversionsrate
     besseres Google Ranking
     höherer Qualitätsfaktor bei Google Ads und
      damit geringere Werbekosten

https://www.seo-suedwest.de/3318-studie-durchschnittliche-ladezeit-webseiten-dreieinhalb-sekunden.html

2                                                         WordCamp Vienna 2020                           Christian Kaiser, MSc | gotonet.at

Was bedeutet schnell
3-Sekunden-Regel
 Aufmerksamkeit lässt über 3 Sekunden stark nach 1)

https://royal.pingdom.com/page-load-time-really-affect-bounce-rate/
1) Heinz Holling: Psychische Beanspruchung durch Wartezeiten in der Mensch-Computer Interaktion, Springer-Verlag, 1989

3                                                         WordCamp Vienna 2020                                       Christian Kaiser, MSc | gotonet.at

Wichtige Kennzahlen

 Time to First Byte (TTFB)                                         First Contentful Paint (FCP)
 First Meaningful Paint (FMP)                                      Time to Interactive (TTI)
https://de.ryte.com/magazine/page-speed-richtig-messen

4                                                        WordCamp Vienna 2020              Christian Kaiser, MSc | gotonet.at

Durchschnittliche Ladezeiten
Mobile Ladezeiten in Industriestaaten 2019 (FCP/First Contentful Paint)

https://www.heise.de/newsticker/meldung/Google-Ranking-Ladezeiten-von-mobilen-Webseiten-stark-verbesserungswuerdig-4454068.html
https://www.thinkwithgoogle.com/intl/de-de/marketingressourcen/mobile-werbung/verpasste-chancen-nur-5-der-deutschen-mobilen-websites-
laden-innerhalb-einer-sekunde

5                                                       WordCamp Vienna 2020                                    Christian Kaiser, MSc | gotonet.at

Je schneller, desto mehr Umsatz & Konversions

https://norisk.group/pagespeed-guide-fuer-ecommerce-13-fakten-aus-der-agenturpraxis
https://www.findologic.com/zusammenhang-von-conversion-rate-und-ladezeit

6                                                       WordCamp Vienna 2020          Christian Kaiser, MSc | gotonet.at

Was die Ladezeiten beeinflusst
Verbesserungen möglich
 Server: Shared Host vs. Dedicated Server, CPU, Speicher (RAM, SSD/HDD)
 WP-Installation: Caching, Plugins, Bilder, PHP-Memory, PHP-Version
   Performance-Steigerung von PHP 5.6 auf 7.x über 150% 1)
Keine Beeinflussung möglich
 Datenverbindung: 3G, 4G/LTE, 5G, ADSL/xDSL (Kupfer), Glasfaser
 Endgerät: Mobile, Desktop, CPU, Datenspeicher, Auslastung
 Browser: IE, FF, Chrome, Safari … JavaScript-Engine

1) https://kinsta.com/blog/php-benchmarks/

7                                            WordCamp Vienna 2020   Christian Kaiser, MSc | gotonet.at

Server und Serverkonfiguration
Wichtige Serverparameter
 Shared Host vs. Dedicated Server
 PHP-Version: mind. 7.2
 Speicher (PHP-Memory): mind. 256MB RAM, für Shop mind. 384MB
 HTTP/2: ermöglicht den parallelen Datenversand vom Server zum
   Client, Voraussetzung: SSL (https://)
 RAM-Caching: z.B. OP-Cache, Varnish, Redis, Memcached, APCu
   Plugin für Einrichtung in WP erforderlich

8                          WordCamp Vienna 2020       Christian Kaiser, MSc | gotonet.at

Optimierungsmöglichkeiten in Wordpress
   Caching von Seiten (Page Cache), Datenbank, Objekten
   Minifizierung & Zusammenfassung
   Bildkomprimierung
   „moderne” Bildformate verwenden
   CDN einrichten
   Schriften lokal einbinden: DNS-Abfragen minimieren
   Tracking minimieren

9                            WordCamp Vienna 2020          Christian Kaiser, MSc | gotonet.at

Caching & Cache Plugins
W3 Total Cache
 Grundfunktionen: Pagecache, Minifizierung & Zusammenfassen von HTML, JS
  und CSS-Dateien, Browsercache, serverseitige Komprimierung (GZIP/Deflate)
 weitere Funktionen: Objektcache, Datenbank-Cache, Lazy Load, Precaching
  mittels Cronjob
 unterstützt RAM-Cache (APCu, Redis, Memcache)
WP Fastest Cache
 Pagecache, Minifizierung & Zusammenfassen, GZIP/Deflate, Browsercache
 ohne RAM-Cache-Unterstützung
 einfache Einrichtung

10                             WordCamp Vienna 2020           Christian Kaiser, MSc | gotonet.at

Minifizieren & Zusammenfassen von HTML, CSS, JS
Autoptimize
 Minifizierung, Zusammenfassung, Inlining von CSS- und JavaScript-
   Dateien, Lazy Load von Bildern sowie Auslieferung über CDN, Laden
   von Google Fonts
 sehr starke Verbesserungen bei HTML, CSS und JavaScript
 Ausführliche Tests bei Verwendung von Lazy Load und CDN

11                          WordCamp Vienna 2020         Christian Kaiser, MSc | gotonet.at

Bilderkomprimierung
Reduzierung der Dateiabmessung
 für Header oder Slider: max. 1500 bis 2000 Pixel Breite
 für Beitragsbilder oder im Content: max. 1200 Pixel Breite
Auswahl des Bildformats
 JPG: Fotos
 PNG, GIF: Grafiken, Logos, für Animationen GIF
Verlustbehaftete Dateikomprimierung bei JPG
 mittlere oder stärkste Komprimierungsstufe
 max. 150–200kB bei Bildern

12                            WordCamp Vienna 2020             Christian Kaiser, MSc | gotonet.at

Tools zur Bildkomprimierung
Bearbeitung am PC mit z.B. Photoshop, Lightroom, Gimp (kostenlos)
 Reduzierung der Abmessung auf die Zielgröße
 Test und Vergleich der Komprimierungsstufen und Dateiformate mit
   „Für Web speichern“
Serverseitige Komprimierung in WordPress mit z.B. Imagify
 Bilder bereits beim Hochladen optimieren
 Wichtig: Backup der Original-Bilder erstellen
 alternativ zu Imagify: ShortPixel, Optimole, Smush, Robin Image
   Optimizer, EWWW Image Optimizer

13                          WordCamp Vienna 2020        Christian Kaiser, MSc | gotonet.at

Umwandlung der Bilder in WebP
Was zeichnet WebP aus?
 Reduzierung der Dateigröße um 25–35% bei gleicher Qualität
 Unterstützung durch alle aktuellen Browser, aber nicht durch IE
Umwandlung erfolgt in Wordpress
 z.B. kostenloses Plugin WebP Express
 alternativ zu WebP Express, meist kostenpflichtig ab einer bestimmten
  Menge: Imagify, ShortPixel, EWWW

14                           WordCamp Vienna 2020          Christian Kaiser, MSc | gotonet.at

Weitere Möglichkeiten der Optimierung
 Auswahl des Themes aus Optimierungssicht: selektives Laden von JS
  und CSS, kompatibel zu aktuellen PHP-Versionen
 Auswahl der Plugins: „so viel wie nötig, so wenig wie möglich“,
  Einfluss des Plugins auf die Performance prüfen
 CDN/Content Delivery Network: sinnvoll bei internationaler Zielgruppe
  und zum Ausgleich von Lastspitzen, bei lokaler ZG oft langsamer
 DNS-Abfragen reduzieren: Fonts (Google vs lokal), CDN, JS-Code
 Lazy Load (verzögertes Laden): auf nicht angezeigte Bilder achten
 Tracking minimieren: Facebook-Pixel, Hotjar

15                           WordCamp Vienna 2020         Christian Kaiser, MSc | gotonet.at

Analyse- & Test-Tools
Google Pagespeed Insights

16                          WordCamp Vienna 2020   Christian Kaiser, MSc | gotonet.at

Analyse- & Test-Tools
GTmetrix

alternative Tools: uptrends.de, webpagetest.org, pingdom.com

17                          WordCamp Vienna 2020         Christian Kaiser, MSc | gotonet.at

Analyse- & Test-Tools
GTmetrix, Wasserfall-Darstellung

18                           WordCamp Vienna 2020   Christian Kaiser, MSc | gotonet.at

Reale gemessene Seitenladezeiten
Reale Ladezeiten mit Google Analytics auswerten
 Auswertbar nach
   Geräte, Land und
   Seiten
 Serverausfälle erkennen
 Standardwert: 1% Zugriffe,
   änderbar mittels GTM
   (siteSpeedSampleRate)

19                           WordCamp Vienna 2020   Christian Kaiser, MSc | gotonet.at

Ladezeitoptimierung in 7 Schritten

1.   Webserver prüfen: PHP-Version, PHP-Memory, HTTP/2 aktiviert
2.   Dateikomprimierung am Server aktivieren (GZIP, Deflate)
3.   Caching einrichten: Pagecache, Object-Cache, Browsercache
4.   HTML, CSS und JavaScript minifizieren und zusammenfassen
5.   Bildgröße anpassen und Bilder komprimieren, WebP verwenden
6.   Lazy Load verwenden, Fonts lokal, bei internationaler ZG CDN
7.   JavaScript-Code minimieren: z.B. Facebook-Pixel, Hotjar

20                           WordCamp Vienna 2020         Christian Kaiser, MSc | gotonet.at

Christian Kaiser, MSc
    E: christian.kaiser@gotonet.at
    T: +43 1 319-52-62
    W: gotonet.at
        kontext.at