Beitrag hat drei Seiten:
Hinweis zur Masche PageSpeed, Seite 1
Die sog. ultimative .htaccess
.htaccess-Datei separater Beitrag.
Plug-in „Cache Enabler“ WordPress Cache
… dessen Zusammenfassung in separaten Beitrag Cache Enabler.
Bitte Merke: Die Abfassungen speziell Beitrag PageSpeed sind meiner Website ein Merkzettel in Erfahrung zu gewissen Funktionsrelationen.Bilder optimieren
fastwp.de, WordPress Bilder optimieren
fastwp.de Bildausgabe in WordPress perfektionieren
Alt- und Title-Tag bei Bildern automatisch setzten,
function add_alt_tags($content)
Filter: add_filter('post_thumbnail_html', 'add_alt_tags', 99999) ;
Bemerkung meiner Website: Anstatt Bild ist teils Text angezeigt.
Filter: add_filter('the_content', 'add_alt_tags', 99999);
Bemerkung meiner Website: Visuelle Darstellung der Website teils falsch und Menüs teils nicht sichtbar.
Bemerkung: Hier meiner Website ist das Snippet nicht geeignet, da zum einen in Bildern von „pixabay.com“ Zeichenfolge (Text) anstatt der Bilder angezeigt ist und andererseits die Darstellung der Website behindert.
Ungenutzte CSS-Klasse von Bildern entfernen,
function remove_class($output)
Filter: add_filter('post_thumbnail_html', 'remove_class'); und
add_filter('the_content', 'remove_class'); ohne Einschränkung funktionell.
Unnötige Width- und Height-Tags von Bildern entfernen,
function remove_width_attribute($html) +
function remove_thumbnail_dimensions( $html )
Filter: add_filter('the_content', 'remove_width_attribute') + der Filter add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 ); ausgeschlossen, weil hier dadurch z. B. gefloatetes Bild nicht funktioniert und eingetteter Link schmaler dargestellt sind. Siehe zu „eingebettete Links“ auch Snippet Embeds deaktivieren ↓
Bemerkung: Das Snippet Width- und Height-Tag und Attribute von Bildern entfernen ist hier ungeeignet, weil gewisse Bilder nicht so Positioniert wie erwünscht und eingebettete Links sind schmaler dargestellt sowie das Titelbild teils falsch übertragen wird.
Compress JPEG & PNG Images
Das Plug-in „Compress JPEG & PNG Images“ erfüllt das Ergebnis, wie auch dessen Onlinetool tinyjpg.com, oder iloveimg.com/de, oder compressor.io.
Bemerkung: Beispiels diesen Artikels sind die Bildchen online von 50 KB auf 17 KB reduziert. Anzumerken ist für WordPress Bildeditor: Eine kleine Äderung derselben Bilder, wie Seitenverkehrt, die Bildgröße auf 40 KB hochfährt.
Compress JPEG, PNG, GIF und SVG
Formate, siehe Beitrag.
compressor.io Kommentar: Dr.Web.
Weiters nach FastWP das Plug-in Optimus, welches die Bilder beim Hochladen verlustfrei optimiert, also nicht in Kompression wie Beispiels Plug-in Tiny „Compress JPEG & PNG Images“:
Das Plug-in Optimus
Siehe: fastwp.de
Optimus originär: optimus.io
- Optimus setzt auf die verlustfreie Optimierung im Namen „lossless“).
Anmerkungen:
Nach den Einstellungen, Dashboard/Einstellungen/Optimus, befindet sich hierzu auch in Dashboard/Werkzeuge/Bilder optimieren die Optimierung für die Bilder.
Im Arbeitsablauf der Optimierung mehrere vorhandene Bilder (Hunderte) kann es zu Unterbrechungen kommen. Dieser Unterbrechungen wird durch Webbrowsers Aktualisierung die Optimierung wieder aufgenommen.
Vom Server ist bestimmte Anzahl von Socketzugriffen vorgegeben. Womöglich sind zur gesamten Abarbeitung der Bilder mehr Socket-Zugriffe gefordert, als man zur Verfügung hat. Somit erfolgt eine Warnung im Headerbereich. Also, mit Unterbrechung ist zu rechnen (s. „Bilder optimieren“, im Raster roter Fortschrittsbalken). Nach Ablauf der Einschränkung ist der Vorgang für die verbleibenden Bilder erneut zu starten.
| Warnung: curl_exec () [function.curl-exec]: Leider wurde der Socket-Zugriff verweigert. Das Kontingent für diese Stunde wurde überschritten, in /users/[…]/www/wordpress/wp-includes/Requests/Transport/cURL.php auf Zeile 162 |
[codesnippets]
Deaktivieren von XML-RPC + XML-RPC aus dem HTTP-Header entfernen
Siehe bitte separaten Beitrag WordPress absichern.
Embeds und Responsive Images deaktivieren
Embeds + Responsive Images deaktivieren fastwp.de
Bemerkung: Meiner Website hier ungeeignet …
function block_wp_embed() {
wp_deregister_script('wp-embed'); }
add_action('init', 'block_wp_embed');
remove_filter( 'the_content', 'wp_make_content_images_responsive' );
… eingebettete Links sind nicht entsprechender Darstellung. S. hier auch Snippet „Bilder optimieren“ (s. Unnötige Width- und Height-Tags von Bildern entfernen ↑).
Emojis in deaktivieren
Emoji-Support deaktivieren: fastwp.de … aber die Smileys sind im Editor vorhanden, weil Smileys sind keine Emoji.
Smileys und Emoji sind „Smileygesichter“. Emoji sind neuere Entwicklung und haben eine größere Auswahl an Bildchen … , s. codex.wordpress.org
Nebeneffekt: Durch deaktivieren des Emojis-Support ist Plug-in Info Button (Text aus- einklappen) anklick‘ die sich wechselnde „on/off“ Funktion wieder da!
Unnötige Links im Header entfernen
Links im Wp-Head fastwp.de – funktionell.
Anmerkung WP absichern: Dies ist auch WordPress Absicherung, siehe Pkt. 7 fastwp.de
Scripte in den Footer – jQuery im Footer laden
Scripte gehören in den Footer fastwp.de
Im gleichen Hinblick Andreas Hecht und meiner Nachfrage im Zusammenhang Plug-in AH Footer Scripts, die gefällige Antwort: Der Code auf meiner Seite bringt nur jQuery in den Footer des Themes. Nützlich, wenn Dein Theme die anderen Scripte bereits im Footer lädt. – Mein Plugin-Code (AH Footer Scripts) jedoch soll hingegen ALLE Scripte in den Footer verfrachten.
Bemerkung zum Plug-in AH Footer Scripts: In Verwendung des jQuery Accordion Menü muss die Zeile /* remove_action('wp_head', 'wp_print_head_scripts', 9); */ auskommentiert sein, da sonst keine korrekte Darstellung des Menüs erfolgt.
Style.css auf Performance optimieren
wp.content/themes/twentyfourteen/style.css
Nach Theme Update wäre die komprimierte style.css zu erneuerm.
Dieser Aktion von Komprimierung weist Dashboard/Aktualisierungen auf Theme Update hin und möchte aktualisiert sein. Der unerwünschten Update Aufforderung kann mann ändern. Der komprimierten style.css die aktuelle Versionsnummer einfügen, z. B.:
/* Version: 1.9 */
… und der überflüssige Hinweis fällt weg. Für echtes Update ist man nicht irritiert.
Erstmal:
… habe ich die original style.css belassen, da es der Editierung zu fehlerhaften Darstellung kam. Die Website hatte beiderseits einen Rand und ähnliches, der Menüs Texte waren eingerückt. Nachvollziehbar war dies nach Benützung des CSS Stylesheet Editor – wie auch immer …
Erfolg brachte die Komprimierungen sodann des Tools von cleancss.com/css-minify/ sowohl der style.css als auch im Customizer (wobei dieses als „Inline CSS“ arbeitet) oder wie hier mit Child-Theme (als CSS-Datei).
S. Inline CSS schneller als CSS-Datei? S. fastwp.de
Folgendes: ein Versuch
„Des Themes könne die style.css reduziert werden“ – dachte ich: Diese Webseite bedient sich des Plug-ins „jQuery Vertical Accordion Menü“, also: nicht verwendete Navigation in der style.css, die .site-navigation entfernen, außer:
.site-navigation ul {
margin: 0;
}
… weil dadurch die Höhe des Headers normal dargestellt bleibt, und die .secondary-navigation entfernen. Aber wieder zurück gesetzt, weil es mit richtiger visueller Übertragung doch nicht richtig klappte – Anfänger eben.
HTML Minify ohne Plugin
fastwp.de Eingabe über Plug-in Code Snippets: Erst provozierte das Snippet ein Error, danach blieb es aber aktiviert und funktioniert so weit!
Durch HTML Minify wird die HTML-Ansicht Browsers Formatierung der Code zusammengefügt dargestellt. Der Vorteil liegt bei etwa 5%.
In Verwendung Plug-in Cache Enabler und der Einstellung unter „Cache Minimierung“: HTML oder HTML & Inline JS ist das Snippet HTML Minify nicht anzuwenden, weil dies vom Plug-in Cache Enabler selbst ausgeführt wird. – HTML Minify bringt der Website nur erstmaligen aufrufe, wenn noch ohne Caching durch Plug-in Cache Enablers den Vorteil.
CDN
Content Delivery Network (CDN) „Scripte direkt vom Google CDN laden“ zum Plug-in Use Google Libraries.
HTTP Verbindungen blocken
Das Plug-in Snitch. – kann man sich ja mal ansehen.
Vernünftige Überlegung (s. Kommentar): Die HTTP Verbindungen sind blockiert, wie bekomme ich die Benachrichtigungen über Updates?
For German users für Plug-in Snitch: Beschreibung und Dokumentation in Deutsch (s. re. Seitenleiste dessen Website).
Relative URL’s in WordPress
Für die relativen URL’s ist anzumerken: Bei Weiterleitung von Artikel auf mehrere Seiten, d. h. Paginierung:
<!--nextpage-->
OT Anmerkung: <!--nextpage--> wird über Text Editor eingefügt und im Visuellmodus als -----PAGE BREAK----- angezeigt.
Bemerkung: … hier zufällig des Beispiels (s. unten, Seite 1, 2 und 3), muss zur Funktioalität für „Beitragstyp“ der Filter /add_filter( 'post_link', 'root_relative_permalinks'); sowie für „Seitentyp“ / add_filter( 'page_link', 'root_relative_permalinks'); auskommentiert bzw. gelöscht sein, weil ansonsten, die Buttons zwar dargestellt sind, aber keine Weiterleitung nächsten Seite besteht.
Heartbeat API
fastwp.de empfiehlt Plug-in Heartbeat Control.
Beschreibung Plug-in Heartbeat Control siehe hier bitte Seite 3, nächst Tab-Menü.
Weitere Infos: Interessantem Hinweis folgend zu jener Information in den Kommentaren.
Remove Query Strings From Static Resources
Originär: Dieses Plug-in entfernt Abfragezeichenfolgen aus statischen Ressourcen wie CSS- und JS-Dateien und verbessert Ihre Geschwindigkeitsscores in Services wie PageSpeed, YSlow, Pingdoom und GTmetrix.
Ressourcen mit einem „?“ Oder „&“ in der URL werden nicht von einigen Proxy-Caching-Servern zwischengespeichert, und das Verschieben der Abfrage-String und Verschlüsselung der Parameter in die URL erhöht Ihre WordPress Website Leistung signifikant.
Ein paar Punkte Abzug in irgendwelchen Tools ist egal. Schlussendlich kommt es auf die tatsächlich Leistung an. FastWP
wp-cron.php abschalten
Eine superplausible Info zum Verständnis des WP-Cronjob-Systems bietet diese Seite: wlabs.de (WordPress auf echten Cronjob umstellen).
Kopieauszug in Variation (Merkzettel) obigen Links von Artur Weigandt:
WordPress hat ein Cronjob-System mit dem Aufgaben auszuführen sind. WordPress prüft zum Beispiel zwei Mal am Tag, ob es neue Updates für WordPress, die Plugins oder die Themes gibt.
Das Cronjob-System hat eine kleine Schwäche: Es ist genau genommen gar keins. WP-Cron führt Aufgaben aus, wenn die Seite besucht wird. Jedes Mal, wenn ein Besucher die Webseite aufruft, überprüft WordPress, ob Aufgaben erledigt werden müssen.
Wenn kein Besucher die Seite aufruft, werden auch keine Aufgaben erledigt. Das kann ärgerlich sein, wenn ein Plugin regelmäßige Daten lesen und abspeichern soll (zB. Twitter-Statistiken oder ähnliches) oder man die WordPress-Funktion „Via E-Mail schreiben“ verwendet …
In Linie fastwp.de die wp-cron.php abgeschaltet, durch wp-config.php des Codes define('DISABLE_WP_CRON', true);
wp-config.php:
define('DB_COLLATE', '');
define('DISABLE_WP_CRON', true);
… und ist so weit funktionell. Echten Cronjob am Host erstellen ist anderes Kapitel.
Aber auch interessant folgenden Version, die Abfragen der chron.php einschränken, toscho.de (WordPress Cron begrenzen).
wp-config.php:
define('DB_COLLATE', '');
if ( 0 < (time() % 10) )
{
define('DISABLE_WP_CRON', TRUE);
}
Der Autor „toscho.design“ Thomas Scholz:
Wenn sich der aktuelle, in Sekunden gemessene UNIX-Timestamp nicht durch 10 teilen läßt, verzichte ich auf WP-Cron.
Damit funktionieren noch die Kontrollen auf neue Plugin- oder WordPress-Versionen, doch die Menge der Requests schrumpft dramatisch. Wer noch weniger Aufrufe haben möchte, der erhöhe einfach den Teiler.
Mein Test zur Reaktionszeit z. B. durch Anzeige eines Beitrags nach der Planung von Veröffentlichung.
Die Anzahl von Neuladungen hängt von konkreter Teilbarkeit der aktuell in Sekunden gemessene UNIX-Timestamp des gegebenen Teilers und somit von Wahrscheinlichkeit ab. Die unterschiedlichen Werte des Teilers finden zur Synchronisierung WP-Cron überlappend statt. Der Teiler, Wert 1, bedingt eine weitere Neuladung, Teiler Wert 2 ist 1:2 (gerade oder ungerade Zahl). Je höher der Wert des Teilers, dessen Wahrscheinlichkeitsgrad sind mehr Neuladungen geboten. Wobei die Anzahl von Neuladungen bei größeren Teilern sehr unterschiedlich ausfallen kann – logo wie Glücksspiels. Dreistelliger Teiler, wie 100, ist wenig sinnvoll, weil Abruf WP-Cron durch die Anzahl der erforderlichen Neuladungen kaum eingrenzbar sind, von sogleich bis ? Wie auch immer, da ich mich in Mathematik sowieso schwertu, nur so als Merkzettel ...
In praxi hatte ich hier der Teiler anstatt 10, auf 8 eingestellt. Das sind etwa 2 bis 12 oder paar mehr Neuladungen der Website bis WP-Cron erfolgt – no denn – und mir scheint! – mit der Abspeicherung der Beiträge und nochmaligen Edit klappt es nicht so richtig, weil mitunter ältere Version des Beitrags erscheint, als auf der Website dargestellt ist.
Andersrum: Das Plug-in WP Crontrol
WP Crontrol zur Kontrolle, fastwp.de
Grundlegendes:
Einstellungen: Cron Schedules. Den Zeitplänen können andere Zeitpläne definiert werden.
Werkzeuge: Cron Events sind die Cronjops aufgelistet und können geändert werden.
Fortgeschritten: Bitteschön über Suchmaschinen einlesen, u. a. How to View and Control WordPress Cron Jobs.
Prerender, DNS prefetch, Subresources und Link prefetch
… derlei Konfigurierungen bietet das Plug-in WordPress Instant Articles, Hinweis und Kommentar betreffs Instant Artikel von fastwp.de sowie beste techn. Erklärung der Begriffe auf OnPage.org (les_____pagination links aktiviert (das ist jenes in „Beiträgen“, das vorhergehenden und nächsten Beitrag vorlädt) – allerdings werden auch die „Seiten“ nach Datum der Veröffentlichung „pre-rendert“, welches grundlegend nicht erwünscht ist, weil hier bei individuellen Menü keine Logik vorhanden ist. – Weiters der Einstellungen habe ich mal unter Link prefetch die Startseite(n) und die /beitrags-blogseite/ abgespeichert.
Nächst hatte ich das relativ schlanke Plug-in Auto Load Next Post installiert:
WIE FUNKTIONIERT ES?
Am Ende jeder einzelnen Post ist eine Post-Navigation, die verwendet wird, um zu erkennen und zu sammeln die vorherige Post-URL für den nächsten Beitrag zu laden. JavaScript lädt den Beitrag, indem er den Inhalt über eine Vorlage einfügt. Die Themenstruktur für einzelnen Beitrag entspricht dem Inhalt unter dem übergeordneten Beitrag innerhalb des Hauptpostcontainers.
Das JavaScript erkennt, wenn Sie den nächsten Beitrag lesen und aktualisiert die Browser-URL-Adressleiste und Seitentitel zu diesem Beitrag. Sollten Sie den Browser aktualisieren, wird die Post, die Sie gerade lesen, als neuer Anfangsposten geladen.
Alle vorherigen Beiträge des Blogs bleiben in Ihrem Browserverlauf erhalten.
EIGENSCHAFTEN
- Aktionshooks zum Laden von Inhalt in die Loop-Datei.
- Entwicklerfreundlich.
- Kommentare ausblenden
- Verfolgen Sie Beiträge mit Google Analytics. Braucht Google Analytics für diese Arbeit.
- Überschreibbare Vorlagenschleifen-Datei.
- Support.
- WordPress Network / Multisite Unterstützung.
Datenbank aufräumen und sauber halten
Hervorragend beschrieben im Titel Großreinemachen: So optimieren Sie Ihre WordPress-Datenbank
WordPress reinigen in 7 Schritten, fastwp.de
Merkzettel: Punkt 5, Plug-in WP Crontrol.
Hinweis zum Punkt 6 (WordPress reinigen in 7 Schritten), Plug-in WP-Optimize. FastWP empfiehlt aber inzwischen das Plug-in WP-Sweep, s. im Zuge „WordPress auf Speed Teil 5“ fastwp.de sowie extra Artikel „WP-Sweep: Das bessere WP-Optimize“ fastwp.de.
Anmerkung zum Plug-in WP-Sweep: Mit Post Sweeps sind die Revisionen gelöscht. Hiermit ist das Plug-in Better Delete Revision obsolet (nicht mehr erforderlich).
… die Plug-ins nach der Reinigung WordPress nicht aktiviert lassen. Plugins zur Reinigung nur kurzfristig aktivieren – wenn wieder mal gereinigt werden soll. – einmal im Monat, oder gar wöchentlich. – Die Golden Regel: Egal, was an der Datenbank geändert, optimiert oder anpasst wird, bitte immer ein Backup der Datenbank anlegen.
Preloader
Der vollständigkeitshalber, David Keulert (FastWP) schreibt im Taschenbuch „WordPress Performance“:
Mit einem Preloader lässt sich die virtuelle Wartezeit beeinflussen. Die Animation wirkt weniger störend, als eine sich aufbauene Seite. – Für alle die vernünftigerweise auf das Framework jQuery verzichten wollen: Javascript ist deutlich minimalistischer angelegt, als die gleiche Fassung mit jQuery.
Besser, Code ohne jQuery – auch – da mit jQuery Accordeon Menü mit Code jQuery das Menü geöffnet dargestellt ist. Der Code wird einfach direkt unter das schließende </head> in der header.php des Themes gesetzt:
GitHub: gist.github.com/…/643bf79d1649f52bef0cf2cc475d7f16 Dieser Link gilt nicht mehr!
Aufzeichnung nach obigen Link
Mit diesem Code ist auch eine sanfte Wiedergabe in Neuladung der Website bewerkstelligt. – Die Farben des Preloaders lassen sich einfach anpassen: Backgroung über: #preloader ... background: #fff wie die Animation;.loader>div{background-color:#ececec; ... und wenn der weiche Seitenübergang störend ist: ... style.transition=".5s"; auf style.transition=".0s"; editieren.
Die Ladezeit einer Website nicht konform ist, kann eine Preloader von Vorteil sein. Sei es mehrerer Bilder etc. – wirkt Finesse ...
Nun, Seite 3 u. a. der Anfang zum PageSpeed, welche sich hier auf die Website bezogen. Dem interssierten Leser gewidmet, seinen Horizont von Funktionsrelationen zu erweitern.