WordPress Professional III

WORDPRESS PROFESSIONAL III

SEBASTIAN BLUMSEBASTIAN EGGERSBERGER


SEBASTIAN BLUM

▸ Lead Developer Diplom Wirtschaftsinformatiker

▸ Geschäftsführer Gründung der Sebastian Blum GmbH 2009


SEBASTIAN EGGERSBERGER

▸ Online-Produktmanager B. Eng. Druck- und Medientechnik


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

WORDPRESS SECURITYTEIL 1

!

„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 ANGRIFFE

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

WORDPRESS SECURITY: WP KOMPROMITTIERT


TLD .pw – Palau (Inselstaat im Pazifischen Ozean)

„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

WORDPRESS SECURITY AUTOMATISCHE UPDATES

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

https://blog.sucuri.net/2016/03/when-wordpress-plugin-goes-bad.html

AUTOMATISCHE WORDPRESS UPDATES

MALWARE ÜBER UPDATESPASSWORT

LOGGER

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

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


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


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{}\;

PAGESPEEDTEIL 2

"

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

ÜBEROPTIMIERUNG

▸ Browser-Cache für Ressourcen ist sinnvoll und darf nicht ausgehebelt werden

LIVE-CHAT

TRACKING REMARKETING

ASYNCHRONE RESSOURCEN

EFFIZIENTES BROWSER-CACHING

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

QUALITÄTSOFFENSIVEJPG, PNG, SVG

TEIL 3

#

Wann verwende ich JPG wann PNG wann SVG?

und wie?

Content-Produzenten

WORDPRESS SECURITY

BILDER IM WEB

ANSICHT BEI 100% VERWENDEN

KOMPRIMIERUNG INDIVIDUELL

NICHT GRÖSSER ALS NÖTIG

ONLINE NUR SRGB UND KEINE PROFILE NOTWENDIG

100% 2,8 MB

5% 0,17 MB

BILDFORMATE IM ÜBERBLICK

DER LETZTE SCHLIFF – IMAGEOPTIM.COM


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


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


JPG – 8,2 KB PNG – 5,5 KB


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


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

FÜR WORDPRESS

SCALABLE VECTOR GRAPHICS

DARSTELLUNGSGRÖßE BEZUGSGRÖßE DER XY-KOORDINATEN

SVG ERGEBNISSE

VEKTOR UND PIXEL VEREINT

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

SVG-OPTIMIERUNG MIT GULP & SVGMIN

SVG AUTOMATISIERT KOMPRIMIEREN


DANKE FÜR DIE AUFMERKSAMKEIT

▸ Sebastian Blum [email protected]

▸ Sebastian [email protected]

▸ Präsentation auf unserer Webseite$ https://www.sblum.de/seocampixx

mailto:[email protected]

mailto:[email protected]

https://www.sblum.de/seocampixx

WordPress Professional III

Software

Transcript of WordPress Professional III