PageSpeed HTTP 1

Beitrag hat drei Seiten:

  1. Vorworte
  2. Aktuell PageSpeed
  3. Plug-ins …

Aktuell




In Zeiten von SSL und HTTP/2 (Hinweis inhaltlichen Begreifen des Sachverhalts) hat sich der Hinsicht etwas geändert und lässt somit Modernisierungen SSL den Schluss: das Thema PageSpeed neu zu überdenken. O-Ton Host bplacedGenerell bringt in der heutigen Zeit serverseitiges Caching nur in den seltensten Fällen einen Vorteil und das in der Regel mit Nebenwirkungen.

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 und grundlegend der Empfehlung für Studium von FastWP, im Motto: Eine Linie.

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.

Bemerkung: Beispiels diesen Artikels sind die Bildchen online von 50 KB auf 17 KB reduziert. Ebd. anzumerken ist, für WordPress Bildeditor, dass 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 (Kompression „lossless“) der in WordPress hochgeladenen Medien: Behandelte Bilder verändern sich optisch in keiner Weise.
Anmerkungen:

Nach den normalen Einstellungen, Dashboard/Einstellungen/Optimus, befindet sich hierzu auch in Dashboard/Werkzeuge/Bilder optimieren die Optimierung für die Bilder. – Bemerkung: Es kann bei Arbeitsablauf der Optimierung mehrere vorhandene Bilder (Hunderte), zu Unterbrechungen kommen, welche durch Aktualisierung im Webbrowser die Optimierung wieder aufgenommen wird. Weiters sind zur gesamten Abarbeitung der Bilder womöglich mehr Socket-Zugriffe gefordert, als man vom Server für die Stunde zur Verfügung hat (Warnung im Headerbereich) und daher mit Unterbrechung zu rechnen ist („Bilder optimieren“, im Raster roter Fortschrittsbalken). Nach Ablauf der Einschränkung vom Server ist für verbleibende Bilder der Vorgang 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

Die functions.php betreffende Codeschnipsel vornehmlich im Plug-in Code Snippets abspeichern: Sowohl Protektion und Verwaltung als auch Erhaltung der Codes bei Theme-Update.

↑ Inhalsverz.

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' );

… weil eingebettete Links nicht entsprechender Darstellung sind. 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.

Obwohl Smileys und Emoji beide „Smileygesichter“ und so etwas anzeigen können, sind Emoji eine 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

Bild, OpenClipart-Vectors

Im gleichen Hinblick andreas-hecht.com, 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.

↑ Inhalsverz.

Style.css auf Performance optimieren

fastwp.de

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 nicht erwünschten Update Aufforderung, weil es ja kein natürliches Update ist, kann man vorbeugen, indem man oberhalb der nun komprimierten style.css den selbigen Code der Versionsnummer einfügt, wie er in der Original Datei vorhanden ist, also z. B:

/*
Version: 1.9
 */

… und der überflüssige Hinweis fällt somit weg und für echtes Update ist man nicht irritiert.

Erstmal:

… doch die original style.css belassen, weil es bald mal zu fehlerhaften Darstellung gereichte. 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).

Aber siehe selber: Inline CSS schneller als CSS-Datei? S. fastwp.de

Folgendes: ein Versuch

Hingegen könnte hier des Themes die style.css  auch reduziert werden – dachte ich: Diese meine 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.

↑ Inhalsverz.

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) mit Hinweis über fastwp.de „Scripte direkt vom Google CDN laden“ zum Plug-in Use Google Libraries – nach Aktivierung funktionell.

HTTP Verbindungen blocken

fastwp.de empfiehlt zur Kontrolle evtl. das Plug-in Snitch.

Vernünftige Überlegung (s. Kommentar): … und wie bekomme ich die Benachrichtigungen über Updates, wenn die HTTP Verbindungen blockiert sind?

For German users für Plug-in Snitch: Beschreibung und Dokumentation in Deutsch (s. re. Seitenleiste dessen Website).

Relative URL’s in WordPress

fastwp.de

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.

↑ Inhalsverz.

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.

Egal ob es ein paar Punkte Abzug in irgendwelchen Tools gibt. Schlussendlich kommt es auf die tatsächlich Leistung an. FastWP

↑ Inhalsverz.

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  regelmäßig ausgeführt werden. 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. WordPress kann nur regelmäßig Aufgaben ausführen, 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. Des Weiteren eigenen Cronjob via Server zu erstellen ein anderes Kapitel wäre. Dessen Kapitel erst mal der Web-Host-Server ermöglichen müsste und sicherlich für normales Webspace oder Webhosting nicht in Frage kommt.

Aber auch interessant folgenden Version, die Abfragen der chron.php einschränken, toscho.de  (WordPress Cron begrenzen).

Somit in die 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 genau 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 obligaten 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 den Teiler anstatt 10 auf 8 eingestellt, das sind etwa 2 … 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. Also mit den Zeitplänen können andere Zeitpläne als die vorgegebenen definiert werden.

Werkzeuge: Cron Events sind die Cronjops aufgelistet und können geändert werden.

Bitteschön über Suchmaschinen einlesen: u. a. How to View and Control WordPress Cron Jobs.

↑ Inhalsverz.

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 (lesen!)

Im Versuch des Plug-ins hatte ich die Einstellung Pre-render 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.

Des Hinweises zur Überlegung vom Einsatz des Plug-ins kann dessen Gebrauchs hier nicht relevant sein – nicht zuletzt des unerwünschten „pre-renderns“ der „Seiten“.

Nächst hatte ich das relativ schlanke Plug-in Auto Load Next Post installiert:

WIE FUNKTIONIERT ES?

Am Ende jeder einzelnen Post ist es 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 dann den Beitrag, indem er den Inhalt über eine spezielle Vorlage einfügt, die der Themenstruktur für einen einzelnen Beitrag entspricht und den Inhalt unter dem übergeordneten Beitrag innerhalb des Hauptpostcontainers platziert.

Das JavaScript erkennt, wenn Sie den nächsten Beitrag lesen und aktualisiert Ihre 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. Benötigt Google Analytics, um auf Ihrer Website zuerst für diese Arbeit zu arbeiten.
  • Überschreibbare Vorlagenschleifen-Datei.
  • Support.
  • WordPress Network / Multisite Unterstützung.

↑ Inhalsverz.

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 kurzfristig aktivieren, wenn wieder mal gereinigt werden soll – einmal im Monat, oder gar wöchentlich. – Die Golden Regel: Egal, was ihr an der Datenbank von WordPress ändert, optimiert oder anpasst, 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 Finesse ist, dass die Animation weniger störend empfunden wird, als eine sich aufbauene Seite. – Für alle die vernünftigerweise auf das Framework jQuery verzichten wollen, ist folgende Version des Preloaders bestens geeignet. Sie setz auf einfaches Javascript und ist somit deutlich minimalistischer angelegt, als die gleiche Fassung mit jQuery.

Also vornehmlich den Code ohne jQuery, auch, weil wie hier mit jQuery Accordeon Menü, Preloader mit jQuery das Menü geöffnet dargestellt würde. Der Code wird einfach direkt unter das schließende </head> in der header.php des Themes gesetzt:

GitHub: Preloader (ohne jQuery)

Theme Updates muss dieser Coder evtl. erneuert werden.

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.

Fazit: Preloader ist für Website, welche nach Optimierung dennoch da und dort längere Ladezeit beanspruchen, sei es von wegen Ladung mehrerer Bilder etc. – wirkt  Finesse …

↑ Inhalsverz.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

DSGVO: Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. – und nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.