Probleme mit Datei-Optimierung lösen

Du hast Optionen für Minifizierung, Zusammenfassung, Query-Strings entfernen, oder „render-blocking“ CSS und JavaScript aktiviert, und deine Website ist Bruch? Kaputtes Layout? Verschobene Elemente? Links oder Formulare funktionieren nicht mehr?

Der folgende einfache Schritt löst all diese Probleme auf einmal:

1. Deaktiviere ALLE Optionen!

Yup, echt jetzt. Entferne alle Häkchen bei Minifizierung, Zusammenfassung, Query-Strings entfernen, „render-blocking“ CSS/JS. Deine Seiten werden hinterher immer noch (fast) so schnell wie vorher laden, und deine Website im gewohnten Glanz erstrahlen.

Achtung! Falls dein Problem an diesem Punkt NICHT gelöst sein sollte, wird es von etwas anderem verursacht als Datei-Optimierung. In diesem Fall brauchst du dieser Anleitung nicht weiter zu folgen.

2. Erste Hilfe

Deaktiviere „Query-Strings entfernen“ zuerst!

Die Funktion „Query-Strings entfernen“ verändert Datei-URIs, aber du benötigst die originalen URIs für die weitere Fehlersuche. Deaktiviere daher diese Option auf jeden Fall, bevor du weitermachst.

Welche Option genau verursacht das Problem?

Reaktiviere deine zuvor aktivem Optionen eine nach der anderen und prüfe deine Website nach jedem Schritt (anonymes Browser-Fenster!). Sobald das zuvor beobachtete Problem wieder auftaucht, weisst du, welche Option genau es verursacht. Jetzt kannst du die betreffende Option einfach deaktiviert lassen – oder mit der Fehlersuche weitermachen.

Befindet sich deine Website zur Zeit im Wartungsmodus und zeigt eine „Coming soon“-Seite für Besucher/-innen an?

Falls ja, funktioniert Datei-Optimierung grundsätzlich nicht. Du kannst die Optionen für Datei-Optimierung weiter konfigurieren, sobald deine Website für nicht eingeloggte Besucher/-innen zugänglich ist.

Funktionieren Datei-Minifizierung und -Zusammenfassung grundsätzlich?

Wir gehen hier davon aus, dass die notwendigen Prozesse zur Datei-Optimierung (z.B. das Generieren von minifizierten, zusammengefassten Dateien) auf deinem Server grundsätzlich funktionieren wie sie sollten. Falls das nicht der Fall ist, etwa wenn du keine generierten Dateien im entsprechenden Verzeichnis deiner Installation findest, solltest du hier weiterlesen:
Seiten werden nicht gecacht, oder CSS/JS nicht minifiziert

Lerne die Grundbegriffe, um „PageSpeed“ richtig deuten zu können!
Bevor du mit der Fehlersuche weitermachst, empfehlen wir dringend, dass du dich darüber informierst, wie der „Performance Grade“ von Google PageSpeed Insights, GT Metrix und anderen Tools zu verstehen ist.

Lies dazu diese beiden Artikel, bevor du weitermachst:
Google PageSpeed: Ergebnis verbessert sich nicht
[Englisch] How to correctly measure your website’s page load time

Wenn du diesen Schritt überspringst, wirst du wahrscheinlich kostbare Zeit, Energie, oder sogar Geld verschwenden.

3. Fehlersuche

Bis hierhin hast du folgende Schritte vervollständigt:

  • Du hast andere mögliche Fehlerquellen für das Problem, das du siehst, ausgeschlossen.
  • Du weisst, durch welche Option(en) genau das Problem verursacht wird.
  • Du hast dich entschieden, auf Fehlersuche zu gehen, anstatt einfach die betreffenden Optionen deaktiviert zu lassen.

Dann geht’s jetzt los!

Wir setzen voraus, dass du eine prinzipielle Vorstellung von den folgende Dingen hast:

  • was „Minifizierung“ ist;
  • was „Concatenation“ (Datei-Zusammenfassung) ist;
  • was das „HTML-Dokument“ ist und wie du es liest (zumindest grundlegend);
  • was eine „Datei-URI“ ist und wie du sie im Browser findest;
  • was die „Entwicklungswerkzeuge“ (oder “Dev Tools”) in den Browsern Chrome oder Firefox sind und wie du sie öffnest.

Bist du sicher, dass du das hier tun solltest? Wenn irgendeiner der gerade aufgelisteten Begriffe dir komplett neu sein sollte, bist du vielleicht nicht die Person, die sich um eine Fehlersuche sorgen sollte – es sei denn, du hast gerade Lust und Zeit, dich mit einigen der technischen Aspekte von Websites auseinanderzusetzen.
Keine der in diesem Artikel behandelten Theme sind wirklich erforderlich, um eine schnellere Website zu haben. Falls du dich jedoch entscheidest, hier weiterzumachen, sei sicher, dass dir die entsprechenden technischen Grundbegriffe vertraut sind.

Minifizierung: HTML

  • Kann die Seitengröße reduzieren.
  • Entfernt alle (oder die meisten) Zeilenumbrüche und überflüssigen Leerzeichen aus dem HTML-Dokument.
  • ⚠️ Kann manchmal dazu führen, dass CDATA-Kommentare entfernt werden.
  • Falls du Problem mit Google Analytics oder anderen CDATA-gestützten Skripten bemerkst, probiere, ob die Deaktivierung von HTML-Minifizierung das Problem löst.

Minifizierung: CSS/JS

  • Kann die Seitengröße reduzieren.
  • Entfernt alle (oder die meisten) Zeilenumbrüche und überflüssigen Leerzeichen aus CSS- und JS-Dateien.
  • Keine bekannten generellen Probleme.
  • Du kannst bestimmte Datei-URIs vom Prozess für Minifizierung/Zusammenfassung ausschließen, indem du in die entsprechenden Textfeld-Option kopierst.
  • Wenn du Dateien ausschließt, stelle sicher, dass es die originalen Datei-URIs sind und nicht die von WP Rocket generierten! Die Datei-URI, die du in das Ausschluss-Feld eingibst, darf nicht „/cache/min“ oder „/cache/busting“ enthalten.

Zusammenfassung: CSS/JS

  • Kann die Anzahl von HTTP-Requests verringern.
  • Fasst alle CSS- und JavaScript-Dateien in wenige (größere) Dateien zusammen.
  • ⚠️ Kann Probleme verursachen, wenn Themes/Plugins keine korrekten Abhängigkeiten für „enqueued“ Skripte oder Stylesheets deklariert haben.
  • ⚠️ Kann noch wahrscheinlicher Probleme verursachen, wenn zusammen mit den Optionen „in so wenige Dateien wie möglich zusammenfassen“ genutzt.
  • Du kannst bestimmte Datei-URIs vom Prozess für Minifizierung/Zusammenfassung ausschließen, indem du in die entsprechenden Textfeld-Option kopierst.
  • Wenn du Dateien ausschließt, stelle sicher, dass es die originalen Datei-URIs sind und nicht die von WP Rocket generierten! Die Datei-URI, die du in das Ausschluss-Feld eingibst, darf nicht „/cache/min“ oder „/cache/busting“ enthalten.
  • Folge dieser Anleitung, um die auszuschließenden Datei-URIs zu identifizieren:
    Problematische Dateien finden und von Datei-Optimierung ausschließen

Achtung! Deine Website lädt möglicherweise Skripte von externen Diensten. Diese werden nicht zusammengefasst, aber manchmal innerhalb des HTML-Dokuments verschoben. Um Probleme mit externem JavaScript zu verhindern, schließe es vom Optimierungsprozess aus wie hier beschrieben:
Externe JavaScript-Dateien und Datei-Verknüpfung

Query-Strings entfernen

  • Kann den „Performance Grade“ verbessern (wenngleich ziemlich kosmetisch).
  • Entfernt den Standard-WordPress-Query-Parameter ?ver= von Datei-URIs, schreibt seinen Wert in den Dateinamen speichert die neue Datei in einem speziellen Cache-Verzeichnis („/cache/busting“).
  • Du kannst bestimmte Datei-URIs von diesem Prozess ausschließen, indem du ein kleines Helfer-Plugin einsetzt:
    Dateien von der Einstellung „Query-Strings entfernen“ ausschließen

„Render-blocking“ CSS/JS

  • Kann Ladezeiten und den „Performance Grade“ verbessern.
  • Verringert die Anzahl initialer HTTP-Requests.
  • ⚠️ Kann zahlreiche Probleme verursachen, wenn nicht korrekt ausgeführt. Lies auf jeden Fall diesen Artikel, bevor du die Option aktivierst:
    PageSpeed: JavaScript- und CSS-Ressourcen, die das Rendering blockieren
  • Erfordert Profi-Wissen in Website-Entwicklung. Ressourcen, die das Rendering blockieren, können auf jeder Seite deiner Website variieren. Daher kann die Anwendung dieser Optionen eine hochgradig komplexe Aufgabe darstellen, während das Ergebnis deine Website nicht unbedingt schneller laden lassen wird. Diese Optionen zu überspringen könnte deine beste Wahl darstellen, insbesondere wenn du nicht erfahren in Webentwicklung bist und keine prinzipielle Vorstellung davon hast, wie render-blocking Skripte generell gehändelt werden sollten.