Komplette Perfmatters Anleitung mit den besten Einstellungen für ein schnelles WordPress. + 20% Gutschein
Perfmatters ist aus meiner Sicht, das beste Performance Plugin, wenn es um die Optimierung der Ladezeiten einer WordPress Website geht.
Außer Caching und Bildoptimierung bietet das Plugin alle Maßnahmen der Optimierung an, um die Leistung von WordPress Webseiten zu steigern. Perfmatters kann wunderbar neben jedem Caching Plugin wie; WP Rocket, Flying Press und LiteSpeed Cache etc. eingesetzt werden.
Ich nutze Perfmatters schon lange auf all meinen Websites und auch auf denen meiner Kunden. Daher werde ich in diesem Beitrag genau beschreiben, wie man das Plugin einrichtet und welche Einstellungen für die meisten Websites am besten sind.
Videoanleitung zu Perfmatters:
Lizenz – Perfmatters Preise & 20% Rabatt
Um Perfamtters nutzen zu können benötigen wir zunächst die entsprechende Lizenz. Hier kann man zwischen folgenden Optionen wählen:
- Personal – Eine Website = $24.95 pro Jahr
- Unlimited Sites – Beliebig viele Websites = $124.95 pro Jahr
- Business – Drei Websites = $54.95 pro Jahr
Zu diesen Preisen kommt noch die Umsatzsteuer hinzu, in Deutschland aktuell 19%. Ich habe mit Brett, dem Co-Founder von Perfmatters, einen Rabatt von 20% auf alle Tarife vereinbart. Der Rabatt-Code lautet WEBGENERAL.
Dieser Rabatt-Code kann eingegeben werden, indem man im Bestellvorgang auf Enter a discount code klickt. Im Anschluss schmälert sich der Betrag automatisch um 20%.
Perfmatters Rabatt-Code für Lizenz-Verlängerung (Renewals)
Dieser Rabatt-Code funktioniert auch zum Verlängern einer bestehenden Perfatters Lizenz! Wenn man in seinem Account eingeloggt ist, geht man einfach auf Pricing -> dann den Tarif auswählen -> Enter a discount code -> WEBGENERAL -> Renew An Existing Licence -> Lizenz-Schlüssel einfügen -> Apply Licence Renewal.
Perfmatters bei WordPress einrichten
Sobald man eine Lizenz erworben hat, muss zunächst das Perfmatters Plugin heruntergeladen werden. Den Download findet man in seinem Account unter View Details and Downloads -> ganz unten links.
Im Anschluss kann das Plugin bei WordPress hochgeladen und aktiviert werden.
Den Lizenz-Schlüssel findet man in seinem Perfmatters Account unter View Licenses -> Manage Sites. Hier kann der Lizenz-Schlüssel kopiert werden, um ihn dann bei WordpPress einzufügen.
Auch die Domain der entsprechenden Website muss hier eingetragen werden. Einfach nach ganz unten scrollen, die Domain eintragen, auf der Perfmatters genutzt werden soll und auf Add Site klicken.
Zum Einfügen der Lizenz klickt man einfach in der Admin-Top-Bar auf Perfmatters und dann im Sidebar-Menü auf Lizenz. Hier kann der Lizenzschlüssel eingefügt und gespeichert werden.
Bitte beachte:
Sofern du auf deiner WordPress Installation bereits ein Caching Plugin verwendest, könnte es vorkommen, daß sich einige Performance-Maßnahmen überlappen. Du solltest niemals die selbe Funktion doppelt aktivieren! Wenn eine Funktion von beiden Plugins angeboten wird, muss zwischen einer der beiden entschieden werden. Ggf. durch A/B Testing.
Allgemein – Performance Einstellungen
Um sowohl den First Contentful Paint (FCP) als auch den Largest Contentful Paint (LCP) zu verbessern, sollte die Funktion aktiv sein.
- Es verhindert, dass andere die Website einbetten können und dass man selbst Websites einbetten kann
- oEmbed-spezifisches JavaScript wird entfernt
- Das Filtern von oEmbed-Ergebnissen wird deaktiviert
- Entfernt oEmbed-discovery links
- Schaltet die automatische Erkennung von oEmbed aus
- Entfernt alle Rewrite-Regeln für die Einbettung
Das bedeutet nicht, dass man keine YouTube Videos oder andere iFrames mehr einbinden kann. Diese Funktion bezieht sich nur auf das Einbetten von Websites.
Achtung:
Wenn Page Builder wie Divi, Elementor, Thrive Architect oder WP Bakery auf der Website verwendet werden, sollte jQuery Migrate aktiv bleiben. Die meisten klassischen Page Builder benötigen jQuery-Migrate immer noch.
- Im Sinne der Sicherheit ist es ratsam diese Information zu verbergen. Sollte z.B. eine WordPress Version genutzt werden, die nicht 100 prozentig sicher ist, da die Plugin-Update-Testings noch nicht abgeschlossen sind, möchte man das ja nicht an die große Glocke hängen.
- Da die Info über die WP-Version eh keinen Nutzen hat, kann die Website von dieser Codezeile befreit werden, um somit ein klein wenig zur Performance-Steigerung beizutragen.
https://deine-domain/feed/
https://deine-domain/feed/rss
https://deine-domain/feed/rss2
https://deine-domain/feed/rdf
https://deine-domain/feed/atom
https://deine-domain/comments/feed
Sofern du einen Blog betreibst würde ich die RSS-Feeds nicht deaktivieren, da RSS-Feeds von einigen genutzt werden, um sich über neu veröffentlichte Inhalte informieren zu lassen.
- Standard (aktiviert) – Standardmäßig ist die REST-API aktiv
- Für Nicht-Administratoren deaktivieren – Deaktiviert die REST-API für alle Benutzer-Rollen außer Administratoren
- Deaktivieren, wenn abgemeldet – REST-API ist nur für angemeldete Benutzer aktiv
ACHTUNG! Diese Einstellung ist zwar sehr gut für die Performance, setzt jedoch intensives Testing voraus!
Ich nutze zum Beispiel auf all meinen Websites das Real Cookie Banner Plugin. Damit das Plugin anständig funktioniert, muss der Zugriff auf die WordPress REST-API für jeden verfügbar sein, auch für nicht eingeloggte Benutzer! Wenn das nicht der Fall ist, wird das Cookie Banner auf jeder Unterseite erneut angezeigt, auch wenn der Benutzer bereits zugestimmt hat.
Damit das Real Cookie Banner Plugin trotz dieser Einstellung anständig funktioniert, muss eine entsprechende Ausnahme eingerichtet werden.
Das geht am einfachsten, indem du diesen Codeschnipsel in die functions.php
Datei deines Child Themes einfügst. Alternativ zum Child Theme empfehle ich das FluentSnippets Plugin zum Einfügen des Codeschnipsels zu nutzen.
add_filter('perfmatters_rest_api_exceptions', function($exceptions) {
$exceptions[] = 'real-cookie-banner';
return $exceptions;
});
Sofern du auf deiner WP-Installation weitere Applikationen nutzt, die uneingeschränkten Zugriff auf die REST-API benötigen, müssen auch für diese Dienste entsprechende Ausnahmen eingerichtet werden. Teste deine Website ausgiebig, auch auf die Funktionalität
Weitere Plugins, die auf die REST-API zugreifen sind zum Beispiel:
- Independent Analytics
- Yoast SEO
- SureCart
- Customer Reviews for WooCommerce
- Jetpack
- Wordfence
- JetMenu
- Verschiedene Formular Plugins
Eine Anleitung zum Einrichten dieser Ausnahmen, findest du in diesem Artikel von Perfmatters.
Da ich z.B. das Independent Analytics Plugin auf vielen Installationen nutze, musste ich die entsprechende Ausnahme in das Snippet aufnahmen.
Ich habe also den entsprechenden Endpoint (iawp
) in das Snippet aufgenommen. Und da ich auch mit SureCart arbeite, habe ich auch dafür die entsprechende Ausnahme (surecart
) eingerichtet. Am ende sah der Codeschnipsel dann so aus:
add_filter('perfmatters_rest_api_exceptions', function($exceptions) {
$exceptions[] = 'real-cookie-banner';
$exceptions[] = 'iawp';
$exceptions[] = 'surecart';
return $exceptions;
});
Auch wenn das Tracking von Independent Analytics nach dem Einrichten der Ausnahme wieder anständig funktioniert, wird weiterhin im Dashboard der Hinweis angezeigt, dass Perfmatters die REST-API blockiert.
Dummerweise wird der Warnhinweis von Independent Analytics auch noch angezeigt, nachdem der Weg zur REST-API wieder frei ist. Diesen Hinweis kann man mit folgendem Codeschnipsel verschwinden lassen:
add_action('admin_head', 'remove_dashboard_ads');
function remove_dashboard_ads() { echo '<style> .iawp-notices {
display: none!important; } </style>';
}
Fazit:
Die WordPress REST-API für abgemeldete Benutzer zu deaktivieren, wirkt sich zwar positiv auf die Ladezeiten der Website aus, setzt aber auch viel Testing und technische Versiertheit voraus. Für Websites mit viel Technik und Funktionalität, müssen sehr wahrscheinlich diverse Ausnahmen eingerichtet werden. Für diese Websites empfehle ich diese Einstellung bei Standard (aktiviert) zu belassen.
Sofern du Google Maps auf deiner Website einbindest, kannst du einfach eine Ausnahme für die entsprechende Seite einrichten. Das geschieht anhand der Post ID (Beitrags ID). Um die Post ID zu finden, rufst du dir einfach dein WordPress Seitenverzeichnis auf und hoverst über den Seitentitel jener Seiten, bei denen Google Maps verwendet werden. Links unten erscheint daraufhin ein Link, der die Post ID beinhaltet. In meinem Beispiel post=290
.
Diese ID’s müssen nun bei Beitrags-ID’s ausschließen eingegeben werden. In meinem Fall betrifft es nur eine Seite, bei mehreren Seiten müssen die ID’s mit Kommata getrennt werden.
Sobald die Kommentarfunktion deaktiviert ist, verschwindet der Menüpunkt Diskussion unter den Einstellungen. Sowohl aus Gründen der Performance, als auch des Datenschutzes, empfiehlt es sich, zuvor den Haken aus der Option Avatare anzeigen zu entfernen!
Einstellungen -> Diskussion -> Avatare
Aufgepasst:
Produktbewertungen sind auch Kommentare, z.B. bei Shop-Installationen nimmt man den Kunden die Option, Produkte bewerten zu können, wenn man hier die Kommentare deaktiviert!
Ein Großteil der 196 Zeilen CSS und 115 Zeilen SVG-Code enthalten !important;
Tags, was ebenfalls nicht optimal ist!
Wenn man ein FSE Theme (Block-Theme) verwendet, sollte nach dem Deaktivieren der Globalen Stile das Design der Website auf Fehler geprüft werden.
Das verbessert die Ladezeiten, da weniger CSS auf der gesamten Website geladen wird. Bei kleineren Websites hat Perfmatters festgestellt, dass dadurch die Menge des verwendeten CSS um bis zu 17 % verringert wird.
Perfmatters bietet uns hier folgende Möglichkeiten:
- Standard – Heartbeat bleibt aktiv
- Überall deaktivieren – Erklärt sich selbst
- Nur bei Bearbeitung von Beiträgen/Seiten zulassen
Ich würde ich die Heartbeat-API liebend gern auf Nur bei Bearbeitung von Beiträgen/Seiten zulassen stellen, um zu vermeiden, dass WordPress in regelmäßigen Abständen (alle 15 Sekunden) POST-Anfragen an diese Datei sendet, schon allein wenn ich mein Dashboard geöffnet habe.
Allerdings macht mir hier das Real Cookie Banner Plugin wieder einen Strich durch die Rechnung, da das Banner mal wieder auf jeder Unterseite erneut angezeigt wird, wenn die Heartbeat-API nicht aktiv ist.
Sofern du für das Cookie Consent eine andere Lösung nutzt, kannst du versuchen, ob du damit durch kommst, die Heartbeat-API auf das Bearbeiten von Seiten und Beiträgen zu beschränken. Website-Tests im Inkognito-Modus helfen dir dabei, das herauszufinden.
Das Problem ist, dass es für die Anzahl erstellter Revisionen kein Limit nach oben gibt und man als Benutzer gar nicht mitbekommt, wieviele dieser Dinger WordPress bereits erstellt hat…
Beim Optimieren der Datenbank, stellt man dann mit Erschrecken fest, welch hohe Zahl an Beitrags-Revisionen sich hier angesammelt hat. Ich würde daher die Beitrags-Revisionen auf 3, oder max. 5 limitieren.
Anmelde-URL
Diese Attacken gefährden nicht nur die Sicherheit einer WordPress Website, sondern sie belasten auch ihre Leistung, da bei jedem gescheiterten Anmeldeversuch mit der Datenbank kommuniziert wird.
Dem kann man entgegenwirken, indem man die URL zur Login-Seite ändert.
Hier wird dann wp-admin
durch die eigene Endung ersetzt. Selbstverständlich darf man bei der Vergabe dieser Link-Endung kreativ sein. Der neue Link führt dann ausschließlich zum Benutzer-Login.
Beispiel: https://deine-domain.de/meinlink
Wichtig! Nur Zeichen hinzufügen, keine Schräg- oder Spiegelstriche. Es empfiehlt sich, die neue Login-URL irgendwo zu vermerken!
WooCommerce
Mit dieser Funktion können die Skripte auf allen Seiten deaktiviert werden, mit folgenden Ausnahmen:
- Product Pages
- Cart Page
- Checkout Page
Sofern du WooCommerce Produkte auf deiner Startseite anzeigst, sollte diese Funktion theoretisch nicht aktiviert werden, sondern der Skript Manager stattdessen genutzt werden, auf den wir später noch zu sprechen kommen werden.
Warum sage ich theoretisch? Nun, ich habe die Erfahrung gemacht, dass es abhängig vom Page Builder ist, der die Produkte auf der Startseite einbindet, ob die Skripte benötigt werden, oder nicht. Kurz gesagt, ich nutze dafür z.B. das Kadence Shop Kit Plugin und die Produkte werden auch bei deaktivierten Skripten angezeigt.
Diese ständigen Anfragen können der Leistung der Website ganz schön zu schaffen machen. Ich habe Waterfall Charts gesehen, die einen einzigen riesigen Balken neben dem ?wc-ajax=get_refreshed_fragments
Request anzeigten.
Daher würde ich diese Cart-Fragmente immer deaktivieren. Sofern es Probleme mit dem Theme gibt, besteht eine Alternative darin, das Skript cart-fragments.min.js
einfach zu verzögern, zu dieser Funktion kommen wir später noch.
Beispiele:
- Neueste Produkte
- Mini-Warenkorb
- Produkte nach Attribut
- Nach Preis filtern
- Nach Bewertung filtern
- Produkte nach Kategorien
- Produkte im Angebot
- Produkte nach Schlagwort
- Bestbewertete Produkte
- Einzelnes Produkt
Die meisten Page Builder verfügen über Query-Loop Elemente, mit denen sich diese Funktionen ersetzen lassen. Sofern man für diese Widgets keine Verwendung hat, können sie hier mit einem Mausklick deaktiviert werden.
Änderungen speichern klicken!
Der Skript Manager
Ein klassisches Beispiel dafür ist das Formular-Plugin, dass auf jeder Seite geladen wird, obwohl es nur auf der Kontakt-Seite zum Einsatz kommt.
Skripte mit dem Skript-Manager deaktivieren
Schritt 1
Sobald der Skript-Manager von Perfmatters aktiv ist, kann man ihn für jede Seite oder Beitrag im entsprechenden Verzeichnis aufrufen.
Auch im Frontend von Wordpress ist der Skript-Manager für jede Seite in der Admin Tool-Bar verfügbar.
Schritt 2
Der Skript-Manager von Perfmatters zeigt uns folgendes an:
1 Plugins, das Skripte einbindet
2 Die einzelnen Dateien
3 Dateityp (CSS- oder JavaScript)
4 Jeweilige Dateigröße
Schritt 3
Betätigt man die Schaltfläche unter Status, wird die Datei auf der aktuellen Seite deaktiviert. Sofern dieses Skript auch für andere Bereiche deaktiviert werden soll, kann das hier bestimmt werden.
Zusätzlich kann die Deaktivierung des Skripts auf z.B. eingeloggte oder ausgeloggte Benutzer eingeschränkt werden. Genauso kann man das Skript auch nur für bestimmte Gerätetypen deaktivieren.
Schritt 4
Mit dieser Schaltfläche kann das Laden des gesamten Plugins deaktiviert werden. Auch hier kann bestimmt werden, wo es genau deaktiviert werden soll.
Auch Benutzer und Gerätetypen können bestimmt werden.
Schritt 4
Dach dem man Skripte deaktiviert hat, sollte der Cache geleert, und dann die entsprechende Seite im Inkognito-Modus auf intaktes Design und Funktionalität geprüft werden.
JavaScript
Defer
Die JavaScript Dateien befinden sich ganz unten im Waterfall.
Dieser Vorgang hat mit Kodierungsprozessen zu tun und kann sich daher auf verschiedenen Websites unterschiedlich auswirken.
Auf meiner Seite war z.B. der Domain Check nach dem Aktivieren dieser Funktion nicht mehr sichtbar.
Dieses Problem habe ich folgendermaßen gelöst:
1.
JS-Datei mit Skript-Manager finden
Auch hier kann mit Hilfe des Skript-Managers von Perfmatters ganz leicht jene JavaScript Datei identifiziert werden, die für das Laden des Domain Checkers zuständig ist. Der Pfad zur Datei muss kopiert werden.
2.
JS-Datei vom Aufschub ausschließen
Nun muss der Pfad nur noch in dem Feld eingefügt werden.
Nachdem ich die Einstellungen gespeichert, und dann den Cache gelöscht hatte, lief alles wieder:
Da Tools wie Google PSI nicht mit einer Website interagieren, sind die JS-Dateien für das Tool auch nicht sichtbar. Man versteckt sie sozusagen.
Auch bestimmte Plugins und Page-Builder haben Skripte im Gepäck, die von dieser Optimierung ausgeschlossen werden müssen. Besonders, wenn man einen schweren Page-Builder, w.z.B. Elementor oder WP Bakery, verwendet.
Für Plugins, die ich nutze und auch bereits empfohlen habe, können folgende Scripts für die Ausnahmen genutzt werden, sollten sie nach dieser Optimierung nicht mehr anständig funktionieren:
Calculated Fields Form:
jquery.min.js
/wp-content/plugins/calculated-fields-form/
cp_calculatedfields
Presto Player:
/presto-player/dist/components/web-components/web-components.esm.js
/presto-player/src/player/player-static.js
var player
/wp-includes/js/dist/vendor/regenerator-runtime.min.js
/wp-includes/js/dist/api-fetch.min.js
/wp-includes/js/dist/hooks.min.js
/wp-includes/js/dist/i18n.min.js
Real Cookie Banner:
jquery.js
jquery.min.js
gtm.js
analytics.js
/wp-content/plugins/vendor-banner.pro.js
/wp-content/plugins/banner.pro.js
realCookieBanner
real-cookie-banner-pro-banner-js-before
Minify
CSS
Unused
Vor dem Aktivieren dieser Funktion sollte folgendes sichergestellt werden:
- Ungenutztes CSS wird mit keinem anderen Plugin bereits entfernt
- Sofern bereits CSS vorgeladen wird, sollten diese Preloads entfernt werden. (mit Ausnahme der Stylesheets von lokalen Google Fonts)
- Es wird nicht versucht CSS-Dateien zu kombinieren. Ich rate allgemein davon ab, CSS zusammenzufügen, da es seit HTTP/2 für die meisten Websites keinen Sinn mehr macht.
Wer einen hohen Score bei Google-PSI erzielen möchte, kann das CSS inline laden, damit Google es nicht als Render-Blocking einstuft. Für echte Benutzer der Website, ist die Seite seit HTTP/2, mit der Datei-Methode deutlich schneller!
- Verzögern (Standard): Alle ursprünglichen CSS-Stylesheets (nicht verwendete CSS) werden verzögert und erst bei Benutzerinteraktion geladen. Ich nutze diese Option bei allen Websites.
- Asynchron: Alle Original-CSS-Stylesheets (ungenutzte CSS) werden per
async
geladen. Diese Methode kann für einige Websites vorteilhaft sein, da durch das asynchrone Laden der Stylesheets, alle Elemente im Above-The-Fold Bereich geschmeidig geladen werden. - Entfernen: Alle ursprünglichen CSS-Stylesheets (nicht verwendete CSS) werden entfernt. Dies ist die aggressivste Methode und sehr wahrscheinlich müssen Ausnahmen eingerichtet werden. Ich empfehle diese Methode nicht.
Für die meisten Websites ist das verzögerte Laden der Stylesheets die beste Option. Sofern es im Above-The-Fold Bereich zu einem Pop-in Effekt kommt, nachdem der Benutzer mit der Seite interagiert, sollte eine Ausnahme für die Stylesheets der entsprechenden Elemente eingerichtet werden.
Wer es genau wissen möchte, kann die Leistungsunterschiede zwischen Verzögert und Asynchron durch A/B-Tests ermitteln. Logischerweise müssten diese Tests durchgeführt werden, nachdem alle Ausnahmen eingerichtet wurden.
Das Entfernen der Stylesheets kann schnell das Design zerstören, ich würde niemandem raten diese Option zu nutzen, der nicht genau weiß was er tut!
Minify
Änderungen speichern klicken!
Vorladend – Preload Optionen
Das Vorladen bestimmter Assets ist eine sehr wirkungsvolle Methode, um vor allem den Largest Contentful Paint (LCP) zu verbessern.
Diese Funktion verbessert die wahrgenommene Ladezeit für einen Benutzer. Auf die Werte von Speed-Testing-Tools hat sie jedoch keine Auswirkung.
Das Vorladen der Linkziele erhöht zwar die CPU-Auslastung, trägt aber enorm zu einer guten Benutzererfahrung bei. Daher würde ich diese Option immer aktivieren!
In diesem Waterfall-Chart ist zu sehen, dass Logo und Hero-Image von Perfmatters an den Anfang des DOM’s, bzw. der Lade-Reihenfolge platziert wurden.
Da das Vorladen von Assets immer die CPU-Auslastung erhöht, würde ich es damit nicht übertreiben.
Hier ein kleines Beispiel:
Ich habe für meine Blog Beiträge ein Hero-Element erstellt, das über jedem Beitrag dynamisch eingebunden wird. Da ich das jeweilige Bild in dieser Hero-Sektion, global vorladen möchte, habe ich dem Bildelement die CSS-Klasse hero-image
zugewiesen.
Diese CSS-Klasse habe ich bei Abrufpriorität eingetragen und die Priorität auf High gestellt. Da einige Page Builder die CSS-Klasse nicht direkt dem Bild-Element zuweisen, sondern einem Container, der das Bild beherbergt, sollte hier noch das Zahnrädchen geklickt werden, um die Checkbox Search by Parent Selector zu aktivieren.
Es ist nämlich so, dass nicht jeder Page Builder die CSS Klasse dem tatsächlichen Bild (<img>
-Tag) zuordnet, sondern auch gern mal einem Container oder Wrapper, der das Bild beherbergt.
Bei Elementor z.B., findet man die CSS Klasse weder im Bild-Element (<img>
), noch in dem äußeren Container (<div>
), sondern erst in dem Container (<div>
) dadrüber. Und damit unser hero-image
auch unter diesen Umständen vorgeladen werden kann, lassen wir Perfmatters nach dem Parent Selector suchen.
Da bei diesem Verfahren alle Bilder mit der zugewiesenen CSS-Klasse vorgeladen werden, betrifft das auch die srcset-Bildgrößen.
Die Links zu den jeweiligen Diensten können hier Zeile für Zeile eingefügt werden.
//fonts.gstatic.com
Auch hier werden die Links in das Feld eingefügt. Immer ein Link pro Zeile.
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
Anmerkung:
Einige Assets sollten besser lokal gehostet werden, anstatt sie extern einzubinden und dann mit Preconnect eine frühzeitige Verbindung zu ihnen herzustellen. Ein Beispiel dafür sind die Google Fonts.
Dann gibt es Dienste wie YouTube, die per iFrame eingebunden werden. Hier ist es besser die iFrames durch ein Vorschaubild-Bild zu ersetzten, als sie zu prefetchen. Ich nutze dafür das Presto-Player Plugin.
Änderungen speichern klicken!
Lazy-Loading
Lazy-Loading bewirkt, dass Bilder erst dann geladen werden, wenn sie im sich im sichtbaren Bereich des Bildschirms befinden. Nicht sichtbare Bilder werden vorerst nicht geladen.
Zuvor hatten wir ja bereits mit der Funktion, Laden Sie wichtige Bilder vor, die Anzahl an Bildern bestimmt, die grundsätzlich vorgeladen werden sollen, um so den LCP zu verkürzen. Es empfiehlt sich, hier die selbe Zahl einzutragen.
Nur aktivieren, wenn für diese Funktion nicht bereits ein anderes Tool genutzt wird. Ich binde z.B. alle Videos mit dem Presto Player ein, da er noch weitere Vorteile bietet. Somit muss ich die Vorschaubilder kein zweites mal aktivieren.
Beispiel Pfad:
/wp-content/uploads/2024/02/logo.png
/wp-content/uploads/2024/03/above-the-fold-bild.webp
Beispiel Selector (CSS-Klasse):
profil-bild
profil-img
Wenn man es jedoch vorzieht, die Bilder laden zu lassen, bevor sie den sichtbaren Bereich erreichen, dann kann man hier diesen Wert erhöhen. Dadurch wirkt das Scrollen etwas flüssiger und man hat keinen Pop-In von Bildern, wenn die Seite nach unten gescrollt wird.
Der Schwellenwert kann in px oder % eingegeben werden. Ich persönlich belasse es grundsätzlich bei dem Standardwert von 0px und aktiviere den Einblend-Effekt (dazu kommen wir gleich).
Folgende Selektoren werden unterstützt:
div
section
figure
footer
Änderungen speichern klicken!
Schriftarten
Beispiel:
cdn.deine-domain.com
Änderungen speichern klicken!
CDN
In diesem 1,5 minütigen Video erkläre ich kurz das Content Delivery Network:
Änderungen speichern klicken!
Analytik
Achtung!
Sofern die Zustimmung des Nutzers für Google Analytics mit dem Real Cookie Banner Plugin eingeholt wird, muss die zuvor aktivierte Funktion, JavaScripts verzögert laden, deaktiviert sein, damit das lokale Tracking funktioniert.
Diese ID wird dann im dem Tracking ID Feld eingefügt.
Im Footer wird das Script auch ohne Dateioptimierung später geladen als im Header. Das bedeutet zwar, dass die Datenerhebung ein paar Millisekunden später stattfindet, aber der geschmeidige Aufbau unserer Website hat nunmal Vorrang.
Sofern Google Analytics zuvor auf dem regulären Weg mit der Website verbunden war, kann das ursprüngliche Skript von der Seite entfernt werden, nachdem das Google Analytics Skript lokal läuft. Im Anschluss am besten noch den Cache löschen.
Änderungen speichern klicken!
Kode
Auch wenn es mir nicht leicht fiel, das Wort Code mit „K“ zu schreiben, hab ich es im Sinne einer guten Zuordnung mal so übernommen…
Besonders wenn es um das Anbinden von Drittanbieter-Tools geht, kann es sein, dass man aufgefordert wird, ein Skript in der <head>
Sektion seiner Website einzufügen. Ein klassisches Beispiel dafür ist Google Analytics.
Es gibt diverse Plugins, die einem diese Funktion zur Verfügung stellen, allerdings geht mit jedem zusätzlichen Plugin, auch immer ein kleiner Leistungsverlust einher. Aus diesem Grund bietet Perfmatters die Funktion direkt mit an.
Änderungen speichern klicken!
Werkzeuge
Accessibility Mode:
- Defer jQuery
- Disable click delay (delay JS)
- Disable core fetch (preloading)
- Enable FastClick (delay JS)
- Exclude by parent selector (lazy loading)
- Load local Google Fonts asynchronously
- Unused CSS CDN URL
Änderungen speichern klicken!
Datenbank
Achtung:
Bereinigungen und Optimierungen der Datenbank sind nach der Ausführung nicht mehr rückgängig zu machen. Bevor man diese Aktionen durchführt, sollte in jedem Fall ein Backup der Datenbank erstellt werden!
Damit sich hier zukünftig nicht mehr so viel anhäuft, hatten wir diese Revisionen in den Allgemeinen Einstellungen bereits auf 3 pro Beitrag limitiert.
Ich persönlich bin kein Freund von automatisierten Optimierungen der Datenbank. Für mehr Kontrolle ziehe ich es vor, den Vorgang regelmäßig (ca. 1x pro Monat) manuell durchzuführen.
Änderungen speichern klicken!
Support
Der Support wird von Brian und Brett persönlich übernommen und ist herausragend gut! Die Ticket werden so gut wie immer binnen 12 Std. beantwortet und in der Regel bleibt kein Problem ungelöst.
Der daraus entstehende Erfahrungsschatz fließt direkt in die Weiterentwicklung des Perfmatters Plugin ein.