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.

WordPress Professional III

525 views

Published on

▸ 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

Published in: Software
  • Be the first to comment

WordPress Professional III

  1. 1. WORDPRESS PROFESSIONAL III SEBASTIAN BLUM
 SEBASTIAN EGGERSBERGER
  2. 2. WORDPRESS PROFESSIONAL III SEBASTIAN BLUM ▸ Lead Developer Diplom Wirtschaftsinformatiker ▸ Geschäftsführer Gründung der Sebastian Blum GmbH 2009
  3. 3. WORDPRESS PROFESSIONAL III SEBASTIAN EGGERSBERGER ▸ Online-Produktmanager B. Eng. Druck- und Medientechnik
  4. 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. 5. WORDPRESS SECURITY TEIL 1
  6. 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. 7. WORDPRESS SECURITY
 ANGRIFFE
  8. 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. 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. 10. WORDPRESS SECURITY: WP KOMPROMITTIERT
  11. 11. WORDPRESS SECURITY: WP KOMPROMITTIERT
  12. 12. WORDPRESS SECURITY: WP KOMPROMITTIERT TLD .pw – Palau (Inselstaat im Pazifischen Ozean)
  13. 13. WORDPRESS SECURITY: WP KOMPROMITTIERT
  14. 14. WORDPRESS SECURITY: WP KOMPROMITTIERT
  15. 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. 16. WORDPRESS SECURITY
 AUTOMATISCHE UPDATES
  17. 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. 18. AUTOMATISCHE WORDPRESS UPDATES MALWARE ÜBER UPDATES PASSWORT
 LOGGER
  19. 19. WIR EMPFEHLEN NUR MANUELLE UPDATES MIT WP-CLIENT OHNE SCHREIBRECHTE FÜR WEB-SERVER
  20. 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. 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. 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. 23. PAGESPEED TEIL 2
  24. 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. 25. ÜBEROPTIMIERUNG ▸ Browser-Cache für Ressourcen ist sinnvoll und darf nicht ausgehebelt werden
  26. 26. LIVE- CHAT
 TRACKING REMARKETING
 ASYNCHRONE RESSOURCEN EFFIZIENTES BROWSER- CACHING
  27. 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. 28. MIT HILFE DER JAVASCRIPT-BIBLIOTHEK TOAST RESSOURCEN ASYNCHRON LADEN ▸ 
 
 VOLLSTÄNDIGE
 CSS-DATEI EINFÜGEN SKELETTON STYLES ENTFERNEN JAVASCRIPT- DATEI EINFÜGEN
  29. 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. 30. QUALITÄTSOFFENSIVE
 JPG, PNG, SVG TEIL 3
  31. 31. Wann verwende ich JPG wann PNG wann SVG? und wie? Content-Produzenten WORDPRESS SECURITY
  32. 32. BILDER IM WEB ANSICHT BEI 100% VERWENDEN KOMPRIMIERUNG INDIVIDUELL NICHT GRÖSSER ALS NÖTIG ONLINE NUR SRGB UND KEINE PROFILE NOTWENDIG
  33. 33. 1
  34. 34. 2
  35. 35. 100% 2,8 MB 5% 0,17 MB
  36. 36. BILDFORMATE IM ÜBERBLICK DER LETZTE SCHLIFF – IMAGEOPTIM.COM
  37. 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. 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. 39. BILDFORMATE IM ÜBERBLICK JPG – 8,2 KB PNG – 5,5 KB
  40. 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. 41. BILDFORMATE IM ÜBERBLICK VEKTOR VS. PIXEL ▸ Rendern im Browser ▸ eine Datei, alle Bildschirmgrößen ▸ wirklich responsive
  42. 42. SCALABLE VECTOR GRAPHICS ERSTELLEN VON VEKTORGRAFIKEN ▸ Adobe Illustrator nutzen ▸ Farbfelder verwenden ▸ Formen vereinfachen ▸ Ankerpunkte reduzieren ▸ verdeckte Elemente löschen
  43. 43. FÜR WORDPRESS
  44. 44. SCALABLE VECTOR GRAPHICS DARSTELLUNGSGRÖßE BEZUGSGRÖßE DER XY-KOORDINATEN
  45. 45. SVG ERGEBNISSE VEKTOR UND PIXEL VEREINT
  46. 46. SVG ERGEBNISSE VEKTOR UND PIXEL VEREINT
  47. 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. 48. SVG-OPTIMIERUNG MIT GULP & SVGMIN SVG AUTOMATISIERT KOMPRIMIEREN
  49. 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

×