Wir empfehlen hier vor allem das Minimieren und Kombinieren von HTML, CSS und JavaScript, da damit schon eine deutliche Verbesserung erzielt werden kann. Dabei wird die Größe der übertragenen Dateien reduziert und die Geschwindigkeit der Seitenaufrufe erhöht. Zu finden sind diese Einstellungen unter LiteSpeed Cache -> Page Optimization.
Wichtig ist, nach jedem Schritt zu überprüfen, ob die Seite noch wie erwartet aussieht. Dazu empfiehlt es sich, sie in einem privaten Browser-Fenster aufzurufen. Unter „Toolbox“ kann der Cache geleert werden, um veraltete gecachte Dateien durch neue zu ersetzen.
CSS, JavaScript und HTML
Minify
Minify kann meistens ohne Probleme aktiviert werden. Dabei werden lediglich unnötige Zeichen aus den Dateien entfernt und so ihre Größe reduziert, am Inhalt der Dateien ändert sich nichts. Diese Option ist in den Tabs für CSS, JavaScript (JS) und HTML verfügbar.
Combine
Combine erfordert etwas mehr Zeitaufwand, da nach dem Kombinieren der Dateien üblicherweise Darstellungsfehler auftreten. Diese Optionen (verfügbar für CSS und JavaScript) sollten deshalb nur aktiviert werden, wenn danach Zeit für die Fehlersuche vorhanden ist. Eine Anleitung dazu findest du weiter unten. Auch nach Updates kann dies erneut nötig werden – Combine kann einen gewissen Wartungsaufwand bedeuten.
Medien
Unter „Media Settings“ findet sich die Option „Lazy Load Images“. Damit werden nur die Bilder geladen, die gerade im sichtbaren Bereich sind. Erst, wenn Besucher_innen weiter scrollen, werden die Bilder für den neuen Bereich geladen.
Damit ist das erste Laden der Seite schneller, und unnötiges Laden von Bildern wird vermieden, wodurch Ressourcen gespart werden. Gleichzeitig bedeutet das, dass beim Weiterscrollen erst einmal Platzhalter zu sehen sind, bis die Bilder geladen werden konnten. Das Aussehen der Platzhalter kann ebenfalls in diesem Tab konfiguriert werden.
Mit „Lazy Load Iframes“ lässt sich das selbe für Iframes aktivieren, also zum Beispiel für eingebettete Videoplayer von Vimeo oder Youtube. Dabei kann es passieren, dass diese Elemente gar nicht mehr angezeigt werden – in diesem Fall muss die Option wieder deaktiviert werden.
Fehlersuche
Grund-Prinzipien: Änderungen einzeln durchführen, danach den Cache leeren („Purge All“ unter „Toolbox“) und die Seite in einem privaten/inkognito Browserfenster öffnen, um zu überprüfen, ob sie wie erwartet dargestellt wird.
Wir empfehlen auch die detaillierte Anleitung von Litespeed: Troubleshooting CSS/JS Issues
Liegt es am Caching-Plugin?
Um die Seite ohne die Effekte des Caching-Plugins aufzurufen, hänge /?LSCWP_CTRL=before_optm an die Adresse an. Also zum Beispiel: www.meinbeispiel.org/?LSCWP_CTRL=before_optm
Wird die Seite nun wieder richtig dargestellt? Dann liegt das Problem in den Einstellungen des Cachings.
Besteht das Problem noch immer? Dann liegt es wo anders, vielleicht in einem anderen Plugin oder im Theme.
Liegt es am CSS/JS Combine?
Stelle JS Combine auf OFF. Leere den Cache. Überprüfe deine Seite.
Sieht wieder gut aus? Dann liegt es am JS Combine.
Keine Veränderung? Stelle CSS Combine auf OFF. Leere den Cache. Überprüfe deine Seite.
Sieht wieder gut aus? Dann liegt es am CSS Combine.
Noch immer keine Veränderung? Obwohl Combine eine häufige Problemquelle ist, kann der Darstellungsfehler auch durch eine andere Einstellung ausgelöst und erst jetzt bemerkt worden sein.
Natürlich kann es auch an mehr als einem liegen – in dem Fall wirst du einfach mehrere Durchgänge brauchen.
Problematische CSS/JS-Dateien aus der Optimierung ausschließen
Wenn du weißt, dass es an JS Combine liegt, holst du dir nun eine Liste aller JavaScript-Dateien, die deine Seite lädt. Wenn es an CSS Combine liegt, eine Liste aller CSS-Dateien.
In Firefox machst du das zum Beispiel so: Du öffnest die Developer Tools, gehst in den Network-Tab und lädst nun deine Seite (idealerweise in einem privaten Fenster). Du klickst auf „JS“ oder „CSS“, um nur Dateien dieses Typs in der Liste zu sehen. Nun kopierst du jede Zeile in eine Textdatei (Strg + C).
Im Plugin unter „Page Optimization“ gehst du nun in den „Tuning“-Tab. Dort findest du die Felder „CSS Excludes“ und „JS Excludes“. Die dort genannten Dateien werden nicht minified oder combined. Kopiere deine Liste in das passende Feld.
Wenn du nun speicherst, den Cache leerst und die Seite lädst, sollte das Problem verschwunden sein. Entferne nun eine Zeile aus der Liste und wiederhole das Prozedere. Wenn alles passt, entferne die nächste. Wiederhole das so lange, bis das Problem wieder auftritt. Dann weißt du, dass die zuletzt entfernte Zeile daran Schuld ist. Füge sie wieder hinzu – die bleibt nun fix darin. Falls weitere Probleme bestehen, überprüfe auch die restlichen Dateien, sonst kannst du die übrig gebliebenen Zeilen einfach löschen und bist fertig.