Perfmatters Einstellungen – so richtest du Perfmatters ein, verwendest den Skript Manager und vermeidest Probleme mit deinem Caching Plugin

Hier zeige ich dir wie du die Perfmatters Einstellungen richtig einrichtest.

Neben den „Standard Funktionen“ zeige ich die wie du den Skriptmanager verwendest um nicht verwendetes CSS/JavaScript zu blockieren und was du tun musst, falls dein Cache Plugin und Perfmattters überlappende Funktionen hat.

Auf das Perfmatters Plugin bin ich durch einen Blogartikel von meinem bevorzugten Hostingprovider kinsta* gestoßen. Das Plugin selbst wird durch ehemalige Kinsta Mitarbeiter betrieben und hat eines im Sinn, deine Webseite so schnell wie möglich zu machen.

Perfmatters hat einige Funktionen welches andere Caching-Plugins nicht haben. So kannst du mit dem Skriptmanager den sogennanten Bloat minimieren, also Skripte die nur auf bestimmten Seiten integriert sein müssen, aber von Haus aus auf allen Seiten ausgeführt werden (z.B.: WooCommerce). Es lässt dich außerdem Google Fonts lokal einbinden, JavaScript verzögern, Analytics lokal einbinden, unbenutztes CSS entfernen und vieles mehr.

Wie man Google Fonts schnell und einfach lokal einbindet [unter 5 Minuten]

1) Generelle Perfmatters Einstellungen

Als Empfehlung, aktiviere die einzelnen Elemente Schritt für Schritt und checke immer ob dies deine Seite zerschießt. Dann weißt du sofort welche Einstellung dafür verantwortlich ist.

• Emojis deaktivieren: EIN – entfernt die von Emojis geladene JS-Datei (AUS falls du Emojis auf deiner Seite verwendest)
• Dashicons deaktivieren: EIN – verhindert, dass die Admin-Icon-Schriftart auf dem Frontend geladen wird.
• Einbettungen deaktivieren: EIN – Wenn du eine URL in deinen WordPress-Editor einfügen, lädt diese Funktion eine hübsche Vorschau (von YouTube, Facebook, Tweets usw.). Solltest du die Vorschau dennoch sehen wollen, dann auf „AUS“.
• XML-RPC deaktivieren: EIN – schlecht für Geschwindigkeit und Sicherheit (wird verwendet, um Inhalte von Mobilgeräten zu veröffentlichen).
• Entfernen Sie jQuery Migrate: EIN – wenn Sie einen Seitenersteller verwenden, falls nicht, dann deaktiviere es.
• WP-Version ausblenden: EIN – Verbessert die Sicherheit, indem die WP-Version vor der öffentlichen Anzeige ausgeblendet wird.
• Wlwmanifest-Link entfernen: EIN – du verwendest mit hoher Wahrscheinlich keinen Windows Live Writer, also deaktivieren.
• RSD-Link entfernen: EIN – Wird verwendet, um deine Website in einem Browser anstelle von Blog-Clients zu bearbeiten.
• Shortlink entfernen: EIN – deaktivieren, wenn du die Permalink-Struktur „Beitragsname“ verwenden.
• RSS-Feeds deaktivieren: AUS – aktiviere dies nur, wenn du keinen Blog auf deiner Website hast. – du siehst diese RSS Feed Links auch meisten in der Google Search Console unter „Found not indexed“
• RSS-Feed-Links entfernen: EIN – entfernt unnötige Links in Ihrem RSS-Feed zu Seiten, Beiträgen, Kommentaren, Kategorien, Tags usw. Dadurch wird ein wenig ungenutzter Code auf Ihrer Website entfernt.
• Eigene Pingbacks deaktivieren: EIN – deaktiviert Pingbacks beim Verlinken auf deinen eigenen Blog – einfach unnötig
• REST-API deaktivieren: für Nicht-Administratoren deaktivieren – verbirgt Benutzernamen von allen, die auf Ihrer Website veröffentlicht haben, um die Sicherheit zu verbessern, aber eine vollständige Deaktivierung führt oft zu Fehlern mit Gutenberg und bestimmten Plugins. Daher ist es am sichersten, die Rest-API für Nicht-Administratoren zu deaktivieren.
• REST-API-Links entfernen: EIN – entfernt eine kurze Codezeile, die von der REST-API erstellt wurde.
• Google Maps deaktivieren: AUS – Einige Designs/Plug-ins haben die Google Maps-API integriert, ohne dass dies deaktiviert werden kann. In diesem Fall können Sie Maps deaktivieren, wenn Sie sie nicht verwenden. Google Maps ohne Zustimmung zu aktivieren ist nicht DSGVO konform, schau die das Borlabs Cookie Plugin* an, damit du diese Sachen einfach und schnell DSGVO konform machen kannst.
• Passwortstärkemesser deaktivieren: EIN – entfernt eine Datei, die manchmal auf deiner Website geladen werden kann, wenn sie normalerweise nur auf Konto-, Checkout- und Passwortrücksetzungsseiten geladen werden sollte.
• Kommentare deaktivieren: AUS – Wahrscheinlich möchtest du Blog-Kommentare erhalten, falls dass nicht der Fall sein soll, dann EIN.
• Kommentar-URLs entfernen: EIN – deaktiviert Links zu Kommentarautoren, die oft Spam Links beinhalten.
• Leeres Favicon hinzufügen: AUS – wird nur für Geschwindigkeitstestzwecke bei frischen WP-Installationen verwendet.
• Globale Stile entfernen: EIN – entfernt 311 Zeilen nicht minimierten Codes, die anscheinend versehentlich zum WordPress-Kern hinzugefügt wurden. Es wurde ursprünglich hinzugefügt, um Duotone-Stile zu verbessern.
• Heartbeat: Nur beim Bearbeiten von Beiträgen/Seiten zulassen – empfohlen von Perfmatters. Dadurch wird Heartbeat deaktiviert, es sei denn, Sie bearbeiten Inhalte, und stellen Sie dann die Heartbeat-Frequenz auf 60 Sekunden ein. Dadurch werden Heartbeat-Anforderungen und die CPU-Auslastung reduziert, aber nur bei Bedarf aktiviert.
• Limitiere Beitrags Revisionen 5 – gibt dir einige Beitrags Revisionen, verhindert aber dass zuviele Einträge deine Datenbank aufblasen.
• Autosave-Intervall: 5 Minuten – Erhöhe die Häufigkeit, um die CPU zu reduzieren und Ressourcen zu sparen.
• Anmelde-URL ändern: Eine zusätzliche Sicherheitsfunktion. Dadurch kann wp-login auf eine andere nicht vorhersehbare URL gelegt werden und macht es Bots schwerer Brut Force Attacken zu fahren.

2) WooCommerce Einstellungen (optional)

Falls du einen Woocommerce Shop betreibst werden diese Optionen angezeigt, falls nicht dann musst du nichts machen.

• Skripte deaktivieren: EIN – deaktiviert WooCommerce Skripte/Styles auf allen Seiten außer Produkt/Warenkorb und Checkout Seiten. Wenn du WooCommerce Blocks auf deiner Seite verwendest dann sollte dies hier „AUS“ sein.
• Warenkorb-Fragmentation deaktivieren: EIN – WooCommerce Seiten haben meist das Problem, dass ?wc-ajax=get_refreshed_fragements elends lange lädt.
• Status-Meta-Box deaktivieren: EIN – deaktiviert die Woocommerce Status Meldung im WordPress Dashboard
• Widgets deaktivieren: EIN – standardmäßig kommt WooCommerce mit vielen Widgets die aus eigener Erfahrung selten bis gar nie verwendet werden. Daher kann dies deaktiviert werden.

3) Assets

Hier kurz aufpassen, sollte dein Caching Plugin bereits dein JS deferen oder delayen, dann solltest du dies hier auf AUS lassen.

Für das nicht verwendete CSS empfehlen wir dir, dass du Perfmatters verwendest, anstatt dein Caching Plugin. Perfmatters lädt das CSS nämlich in einer externen Datei (Geschwindigkeitsvorteil) anstatt Inline, wie die meisten Caching plugins.

• Script Manager: EIN – unbenutztes CSS/JS auf bestimmten Seiten/Beiträgen entfernen (siehe unten).
• Defer JavaScript: AUS – behebt Render-Blocking-Ressourcen in PSI und kann jQuery enthalten.
• JavaScript verzögern: AUS – verwende dies nur, wenn dein Cache-Plugin diese Funktion nicht bereits hat.
• Delay Behavior: (falls JavaScript verzögern EIN) Nur bestimmte Skripte verzögern – bessere Kontrolle darüber, welche Dateien verzögert werden. „Alle Skripte verzögern“ ist aggressiver, kann aber auch Dateien enthalten, die „above the fold“ geladen werden, und andere, die Sie möglicherweise nicht verzögern möchten. In diesem Fall musst du diese Dateien ausschließen.
• Verzögerte Skripte: Während es gängige JS-Dateien gibt, die du verzögern solltest (Google Analytics, Tag Manager, AdSense, Facebook Pixel – die aber bitte über Borlabs* um DSGVO konform zu sein), kann es auch andere unkritische JS-Dateien geben. Diese kannst du hier eingeben – Beispiele findest du in der Perfmatters Doku.
• Delay Timeout: Zeitspanne, um JavaScript zu verzögern. Etwa 5 Sekunden + für das beste Speed Ergebnis.

4) CSS

• Nicht verwendetes CSS entfernen: EIN – Bitte bei deinem CachingPlugin CSS-Preloads zu deaktivieren und CSS combine ebenfalls deaktivieren.
• Verwendete CSS-Methode: Datei – Datei für die Browsing-Geschwindigkeit, Inline für bessere Speed Scores.
• Stylesheet-Verhalten: Verzögerung – Perfmatters empfiehlt dies für besseres LCP/FCP.
• Nicht verwendetes CSS löschen: Falls du dein CSS geändert hast, die Änderungen aber nicht siehst, dann diesen Button klicken, dadurch wird das File neu generiert.

4) Preloading

Preload, Preconnect, Prefetch werden in Web.dev oft empfohlen.

• Enable Instant Page: AUS – lädt Seiten im Hintergrund, wenn Benutzer mit der Maus über einen Link fahren. Dies kann jedoch zu einer hohen CPU-Auslastung führen. Falls du genügende CPU Ressourcen hast, kannst du die auf EIN schalten.
• Vorladen: Nur für Ressourcen die sofort geladen werden müssen, wie Bilder, Schriftarten und CSS welche ohne Scrollen sichtbar sein sollen. Welche Ressourcen dass sind kannst du unter web.dev/measure herausfinden.
• Kritische Bilder vorab laden: 2-3 – Lädt „above the fold“-Bilder vorab und schließt sie gleichzeitig vom Lazy Load aus. Dies sollte auf die Anzahl der Bilder eingestellt werden, die normalerweise „above the fold“ (Screenshot) angezeigt werden, was normalerweise 2-3 ist.
• Preconnect: CDN-URLs und Google Fonts von Drittanbietern (font.gstatic.com) sind normalerweise die einzigen URLs, die du vorab verbinden solltest. Eventuell macht dass schon dein Caching Plugin, bitte checke deren Doku. Du solltest Google Fonts Lokal einbinden – um eine DSGVO Abmahnung zu entgehen.
• DNS Prefetch – Lass deine Seite bei gtmetrix.com analysieren und schau dir im Wasserfall Diagram alle Domains von Drittanbietern an, die auf deiner Website geladen werden. Abgesehen von CDN-URLs und Schriftarten von Drittanbietern sollte der Rest vorab abgerufen werden.

5) Lazy Loading

Dies ist normalerweise eine übliche Einstellung in deinem Caching Plugin. Teste aus ob Perfmatters nicht das bessere Ergebnis liefert.

• Bilder: EIN – Wenn diese Funktion aktivieret ist, wird das native Lazy Loading in WordPress deaktiviert und es wird die Option angezeigt Bilder auszuschließen.
• iFrames und Videos: EIN – Lazy lädt iFrames und ersetzt iFrames durch ein Vorschaubild, sodass der YouTube-Player nur geladen wird, wenn darauf geklickt wird. Dies sollte auf jeden Fall an sein, denn dadurch wird erst beim Klick auf das Bild eine Verbindung zum externen Server erstellt. Noch besser ist es Borlabs Cookie Plugin* zu integrieren, da du dadurch DSGVO konform bist. Solltest du dies tun, dann kannst du diese Funktion auf AUS stellen
• Von Lazy Loading ausschließen – Bilder ohne Scrollen sollten von Lazy Load ausgeschlossen werden, was LCP verbessern kann. Kopiere dafür die Bild-URLs und fügen sie hinzu, dadurch werden sich nicht Lazy Loadded.
• Schwellenwert: 0px – eine Erhöhung dieses Werts führt zu einem reibungsloseren Scrollerlebnis, da Bilder geladen werden, bevor sie im Ansichtsfenster angezeigt werden, aber 0px ist die aggressivste Option.
• DOM-Überwachung – AUS nur aktivieren, wenn du unendliches Scrollen verwendest.
• Fehlende Bildabmessungen hinzufügen: EIN – Fügt Breite/Höhe zu Bildern ohne Abmessungen hinzu, um Layoutverschiebungen zu vermeiden, dadurch wird der web.dev/measure Fehler behoben.
• Einblenden: EIN – fügt einen Einblendeffekt für LazyLoaded geladene Bilder hinzu, damit sie nicht plötzlich auftauchen sondern einen Fade-In Effekt haben.
• CSS Background Images: EIN – solltest du Hintergrund Bilder via CSS laden, dann schalte diese Funktion ein und füge den CSS Selektor der Bilder hinzu.

6) Fonts

• Google Fonts deaktivieren: AUS – nur verwenden, wenn du Systemschriftarten oder benutzerdefinierte Schriftarten verwendest und diese deaktivieren werden müssen. Bei EIN werden Google Fonts von deiner Website entfernt.
• Display Swap: EIN – fügt font-display: swap zum Font-CSS hinzu, das „sicherstellen, dass Text während des Ladens von Webfonts sichtbar bleibt“ in web.dev/measure beheben kann.
• Lokale Google-Schriftarten: EIN – lädt fonts.google.com-Schriftarten herunter und hostet sie lokal, hilft bei der Ladegeschwindigkeit und macht deine Seite DSGVO konformer ( siehe auch Google Fonts lokal laden)
• CDN-URL: Fügen Sie Ihre CDN-URL hinzu, um selbst gehostete Schriftarten von Ihrem CDN bereitzustellen, solltest du Cloudflare verwenden, dass ist hier keine Einstellung notwendig.

7) CDN

• CDN-Rewrite aktivieren: EIN – Wenn due eine CDN-URL verwendest, schreibt dies Assets um, die vom CDN bereitgestellt werden sollen . Manchmal kann das hinzufügen deiner CDN-URL zu mehreren Plugins mehr Assets aus dem CDN bereitstellen. Nicht notwendig für Cloudflare
• CDN-URL: Füge deine CDN-URL hinzu. Nicht notwendig für Cloudflare
• Eingeschlossene Verzeichnisse: Nichts ausfüllen, macht Perfmatters automatisch
• CDN-Ausschlüsse: .php, .xml wird empfohlen, wenn SEO-Plugins mit XML-Sitemaps verwendet werden.

8) Analytics

Hier nichts einstellen, wir empfehlen dir Borlabs Cookie Plugin* um deine Tracking Codes DSGVO konform einzubauen.

9) Datenbanken

Dies findest du unter Werkzeuge > Database

Mit diesen Einstellungen kannst du die Größe deiner Datenbank optimieren. Aktiviere „Spam Comments“, „Trashed Comments“, „Expired Transients“ und stelle die Planmäßige Optimierung auf wöchentlich.

Achtung – da du hier in die Datenbank eingreifst solltest du tägliche Backups erstellen. Mit Kinsta* geht dies zum Beispiel automatisch.

Abschließend ist zu sagen, dass Perfmatters kein Caching Plugin ersetzt, sondern beides verwendet werden sollte.

Wie ist es dir mit den Einstellungen ergangen, fehlt etwas, ist etwas unklar? Einfach kommentieren und ich helfe dir weiter.