Post on 11-Apr-2017
WORDPRESS PROFESSIONAL III
SEBASTIAN BLUM
▸ Lead Developer Diplom Wirtschaftsinformatiker
▸ Geschäftsführer Gründung der Sebastian Blum GmbH 2009
WORDPRESS PROFESSIONAL III
SEBASTIAN EGGERSBERGER
▸ Online-Produktmanager B. Eng. Druck- und Medientechnik
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
„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
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
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
„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
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
WORDPRESS SECURITY: AUTOMATISIERTE UPDATES
LÖSUNG
▸ Unix-Rechteverwaltung sinnvoll nutzenStandardwerte: Ordner = 755, Dateien = 644
▸ 7 6 4 rwx rwx rwxBesitzer Gruppe Sonstige
▸ Live-Modus
▸ Rechte Ordner (chmod 555), Rechte Dateien (444)→ PHP kann keine Dateien / Ordner schreiben
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
WORDPRESS SECURITY: AUTOMATISIERTE UPDATES
UMSETZUNG
▸ Update-Modus aktivieren
▸ Live-Modus aktivieren
cd/var/wwwchmod-R0777./wordpress
cd/var/wwwfind./wordpress-typed-execchmod0555{}\;find./wordpress-typef-execchmod0444{}\;find./wordpress/wp-content/cache-typed-execchmod0755{}\;find./wordpress/wp-content/cache-typef-execchmod0655{}\;find./wordpress/wp-content/uploads-typed-execchmod0755{}\;find./wordpress/wp-content/uploads-typef-execchmod0644{}\;
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
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!
MIT HILFE DER JAVASCRIPT-BIBLIOTHEK TOAST
RESSOURCEN ASYNCHRON LADEN
▸
VOLLSTÄNDIGECSS-DATEI EINFÜGEN
SKELETTON STYLES
ENTFERNEN
JAVASCRIPT-DATEI
EINFÜGEN
PAGESPEED
JAVASCRIPT IN WORDPRESS
▸ Asynchrones JavaScript benötigt richtige Reihenfolge!jQuery muss vor jQuery-Plugins geladen sein
▸ Custom-Themes & Child-Themes einfach möglichbei 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
BILDER IM WEB
ANSICHT BEI 100% VERWENDEN
KOMPRIMIERUNG INDIVIDUELL
NICHT GRÖSSER ALS NÖTIG
ONLINE NUR SRGB UND KEINE PROFILE NOTWENDIG
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
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
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
BILDFORMATE IM ÜBERBLICK
VEKTOR VS. PIXEL
▸ Rendern im Browser
▸ eine Datei, alle Bildschirmgrößen
▸ wirklich responsive
SCALABLE VECTOR GRAPHICS
ERSTELLEN VON VEKTORGRAFIKEN
▸ Adobe Illustrator nutzen
▸ Farbfelder verwenden
▸ Formen vereinfachen
▸ Ankerpunkte reduzieren
▸ verdeckte Elemente löschen
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
WORDPRESS PROFESSIONAL III
DANKE FÜR DIE AUFMERKSAMKEIT
▸ Sebastian Blum sb@sblum.de
▸ Sebastian Eggersbergerse@sblum.de
▸ Präsentation auf unserer Webseite$ https://www.sblum.de/seocampixx