▸ Security WordPress und Plugins aktuell halten – ein Muss? ▸ Performance Geschwindigkeit & WP als eierlegende Wollmilchsau – ein Widerspruch? ▸ Qualitäts-Offensive für SEO und bessere UX PNG, JPG und SVG richtig verwenden

1. WORDPRESS PROFESSIONAL III
SEBASTIAN BLUM
SEBASTIAN EGGERSBERGER

2. WORDPRESS PROFESSIONAL III
SEBASTIAN BLUM
▸ Lead Developer
Diplom Wirtschaftsinformatiker
▸ Geschäftsführer
Gründung der Sebastian Blum GmbH 2009

3. WORDPRESS PROFESSIONAL III
SEBASTIAN EGGERSBERGER
▸ Online-Produktmanager
B. Eng. Druck- und Medientechnik

4. WORDPRESS PROFESSIONAL III
AGENDA WORDPRESS PROFESSIONAL III
▸ Security
WordPress und Plugins aktuell halten – ein Muss?
▸ Performance
Geschwindigkeit & WP als eierlegende Wollmilchsau – ein
Widerspruch?
▸ Qualitäts-Offensive für SEO und bessere UX
PNG, JPG und SVG richtig verwenden

5. WORDPRESS SECURITY
TEIL 1

6. „Ihre Seite ist kompromittiert: ein Layer mit
‚Checking your browser – Continue‘ liegt
vollflächig über der Seite und leitet dann auf
fremde Websites weiter.“
Besorgter Nutzer einer WordPress-Seite
WORDPRESS SECURITY

7. WORDPRESS SECURITY
ANGRIFFE

8. WORDPRESS SECURITY: AKTUELLE LAGE
WORDPRESS LÄUFT AUF 27% ALLER INTERNETSEITEN
▸ Oftmals …
▸ … kein HTTPS für Backend-Login (WP-Admin)
▸ … Standardbenutzer und einfache Passwörter
▸ … (zu viele) Plugins aktiviert
▸ … Core, Theme und Plugins nicht aktuell gehalten

9. WORDPRESS SECURITY: AKTUELLE LAGE
WORDPRESS SCHNELL UND EINFACH – UND OHNE IT
▸ Website-Betreiber hatten ein Bedürfnis (mehrere hundert
Studierende über Stundenplan-Änderungen informieren)
▸ Die Zentrale IT der Hochschule stellt eine Lösung bereit,
die umständlich und UX-unfreundlich ist (kein RWD)
▸ Billigen Strato-Server gemietet, WordPress aufgesetzt und
eine Lösung für das Problem geschaffen – an der IT vorbei
▸ WordPress nicht gewartet, Seite kompromittiert

10. WORDPRESS SECURITY: WP KOMPROMITTIERT

11. WORDPRESS SECURITY: WP KOMPROMITTIERT

12. WORDPRESS SECURITY: WP KOMPROMITTIERT
TLD .pw – Palau (Inselstaat im Pazifischen Ozean)

13. WORDPRESS SECURITY: WP KOMPROMITTIERT

14. WORDPRESS SECURITY: WP KOMPROMITTIERT

15. „Vielen Dank für die Info.
Das Problem ist mir bereits bekannt. Leider
ist WordPress sehr anfällig für Angriffe.
Die Seite wird in Kürze auf ein anderes CMS
umgestellt.“
WordPress-„Administrator“
WORDPRESS SECURITY

16. WORDPRESS SECURITY
AUTOMATISCHE UPDATES

17. AUTOMATISCHE WORDPRESS UPDATES
MALWARE ÜBER UPDATES
▸ Plugins können auch
Malware über Auto-Update
installieren
▸ Fluch und Segen zu gleich
▸ Auch Plugins und Themes
können geraubt werden!
BACKDOOR
Quelle: https://blog.sucuri.net/2016/03/when-wordpress-plugin-goes-bad.html

18. AUTOMATISCHE WORDPRESS UPDATES
MALWARE ÜBER UPDATES
PASSWORT
LOGGER

19. WIR EMPFEHLEN NUR MANUELLE
UPDATES MIT WP-CLIENT OHNE
SCHREIBRECHTE FÜR WEB-SERVER

20. WORDPRESS SECURITY: AUTOMATISIERTE UPDATES
LÖSUNG
▸ Unix-Rechteverwaltung sinnvoll nutzen
Standardwerte: Ordner = 755, Dateien = 644
▸ 7 6 4
rwx rwx rwx
Besitzer Gruppe Sonstige
▸ Live-Modus
▸ Rechte Ordner (chmod 555), Rechte Dateien (444)
→ PHP kann keine Dateien / Ordner schreiben

21. WORDPRESS SECURITY: AUTOMATISIERTE UPDATES
LÖSUNG
▸ Update-Modus
▸ Rechte Dateien / Ordner (777)
→ PHP kann Dateien / Ordner schreiben und ausführen
▸ Vorgehen
▸ Rechte werden nur für die Zeit der Updates gesetzt
▸ Benutzer können zusätzlich angepasst werden, jedoch
▸ Einschränkungen beim Shared Hosting
▸ PHP-CGI-Prozesse laufen oftmals mit Standardbenutzer

22. WORDPRESS SECURITY: AUTOMATISIERTE UPDATES
UMSETZUNG
▸ Update-Modus aktivieren
▸ Live-Modus aktivieren
cd /var/www
chmod -R 0777 ./wordpress
cd /var/www
find ./wordpress -type d -exec chmod 0555 {} ;
find ./wordpress -type f -exec chmod 0444 {} ;
find ./wordpress/wp-content/cache -type d -exec chmod 0755 {} ;
find ./wordpress/wp-content/cache -type f -exec chmod 0655 {} ;
find ./wordpress/wp-content/uploads -type d -exec chmod 0755 {} ;
find ./wordpress/wp-content/uploads -type f -exec chmod 0644 {} ;

23. PAGESPEED
TEIL 2

24. PAGESPEED
WAS BESCHLEUNIGT DEN PAGESPEED WIRKLICH?
▸ Kurze Zeit bis DOM-Content-Load
▸ Vor allem keine blockierenden Ressourcen
▸ Mini-CSS für First-Screen & vollständiges CSS nachladen
▸ JavaScript asynchron laden und reduzieren
▸ Schriftarten bewusst einsetzen

25. ÜBEROPTIMIERUNG
▸ Browser-Cache für Ressourcen ist sinnvoll und darf
nicht ausgehebelt werden

26. LIVE-
CHAT
TRACKING
REMARKETING
ASYNCHRONE
RESSOURCEN
EFFIZIENTES
BROWSER-
CACHING

27. SKELETON STYLES
MINI-CSS FÜR FIRST-SCREEN
▸ Einfachste Grund-Styles für ersten Eindruck
▸ Preload für CSS & Javascript
▸ Server-Header wegen HTTP2-Push bevorzugt!

28. MIT HILFE DER JAVASCRIPT-BIBLIOTHEK TOAST
RESSOURCEN ASYNCHRON LADEN
▸
VOLLSTÄNDIGE
CSS-DATEI
EINFÜGEN
SKELETTON
STYLES
ENTFERNEN
JAVASCRIPT-
DATEI
EINFÜGEN

29. PAGESPEED
JAVASCRIPT IN WORDPRESS
▸ Asynchrones JavaScript benötigt richtige Reihenfolge!
jQuery muss vor jQuery-Plugins geladen sein
▸ Custom-Themes & Child-Themes einfach möglich
bei Plugins schwieriger Eingriff (Child-Plugins)
▸ Immer nur 1 Version von jQuery verwenden!
Plugins bringen oft eigenes jQuery zusätzlich mit
▸ Riesen Pagespeed-Potenzial aber komplex &
aufwendig umzusetzen

30. QUALITÄTSOFFENSIVE
JPG, PNG, SVG
TEIL 3

31. Wann verwende ich JPG
wann PNG
wann SVG?
und wie?
Content-Produzenten
WORDPRESS SECURITY

32. BILDER IM WEB
ANSICHT BEI
100% VERWENDEN
KOMPRIMIERUNG
INDIVIDUELL
NICHT
GRÖSSER
ALS NÖTIG
ONLINE NUR SRGB UND
KEINE PROFILE NOTWENDIG

33. 1

34. 2

35. 100%
2,8 MB
5%
0,17 MB

36. BILDFORMATE IM ÜBERBLICK
DER LETZTE SCHLIFF – IMAGEOPTIM.COM

37. BILDFORMATE IM ÜBERBLICK
JPG IST SUPER!
▸ für Fotografien / Fotorealismus (viele Farben, viele Details)
▸ keine Transparenz
▸ Anti-Aliasing
▸ verlustbehaftete Komprimierung
▸ hohe Qualität möglich durch variable Quantisierung

38. BILDFORMATE IM ÜBERBLICK
PNG AUCH.
▸ für Grafiken und schematischen Darstellungen
▸ bei homogenen Farbflächen
▸ variable Bit-Tiefe
▸ Transparenz
▸ 1-Bit oder 8-Bit Alpha-Kanal (256 Transparenz-Stufen)
▸ verlustfreie Komprimierung

39. BILDFORMATE IM ÜBERBLICK
JPG – 8,2 KB PNG – 5,5 KB

40. BILDFORMATE IM ÜBERBLICK
DA GEHT DOCH NOCH MEHR!
▸ JPG und PNG sind pixelbasierte Grafiken
▸ Vektorgrafiken sind mathematisch beschriebene Geraden
und Kurven
▸ Farbverläufe möglich (da mathematisch beschrieben)
▸ Oft Basis für PNG-Dateien bei der Erstellung

41. BILDFORMATE IM ÜBERBLICK
VEKTOR VS. PIXEL
▸ Rendern im Browser
▸ eine Datei, alle Bildschirmgrößen
▸ wirklich responsive

42. SCALABLE VECTOR GRAPHICS
ERSTELLEN VON VEKTORGRAFIKEN
▸ Adobe Illustrator nutzen
▸ Farbfelder verwenden
▸ Formen vereinfachen
▸ Ankerpunkte reduzieren
▸ verdeckte Elemente löschen

43. FÜR WORDPRESS

44. SCALABLE VECTOR GRAPHICS
DARSTELLUNGSGRÖßE BEZUGSGRÖßE DER
XY-KOORDINATEN

45. SVG ERGEBNISSE
VEKTOR UND PIXEL VEREINT

46. SVG ERGEBNISSE
VEKTOR UND PIXEL VEREINT

47. SVG-OPTIMIERUNG
SVG AUFBEREITEN
▸ Bilder verlinken statt einbetten
▸ Text einbinden und über CSS Stylen
▸ Werte runden, Dezimalstellen reduzieren
▸ Styles auf Gruppen anwenden
▸ wiederkehrende Elemente über ID aufrufen

48. SVG-OPTIMIERUNG MIT GULP & SVGMIN
SVG AUTOMATISIERT KOMPRIMIEREN

49. WORDPRESS PROFESSIONAL III
DANKE FÜR DIE AUFMERKSAMKEIT
▸ Sebastian Blum
sb@sblum.de
▸ Sebastian Eggersberger
se@sblum.de
▸ Präsentation auf unserer Webseite
lj https://www.sblum.de/seocampixx