Sehen Sie die Warnung „combine external CSS” („Kombiniere externes CSS“) in Pingdom, GTmetrix oder Google PageSpeed Insights? Du bist nicht alleine, da dies für viele Besitzer einer WordPress-Website ein sehr häufiger Fehler ist. Diese Warnung wird normalerweise angezeigt, wenn 10 oder mehr CSS-Dateien von einem CDN und / oder einer Subdomain (externe Domain) geladen werden. Du kannst dies beheben, indem du deine CSS-Dateien verkettest oder kombinierst, sodass sie in einer einzigen Anforderung geladen werden.
Wenn du immer noch über HTTP läufst und noch nicht nach HTTP/2 migriert wurdest, kannst du der nachfolgenden Anleitung zum Kombinieren externer CSS-Dateien folgen. Auch hier ist die Verkettung eine Technik, die allgemein als veraltet gilt. Über 77% der Browser unterstützen jetzt HTTP / 2, wenn sie über HTTPS laufen, sowie viele CDN- und Webhosting-Anbieter, einschließlich Kinsta. Es ist auch wichtig zu beachten, dass Pingdom HTTP / 2 noch nicht unterstützt, da es eine ältere Version von Chrome verwendet.
Combine External CSS in WordPress
Die Warnung zum Kombinieren externer CSS-Codes wird normalerweise angezeigt, wenn du ein CDN verwendest, weil du deine CSS-Dateien in einer externen Domain wie cdn.domain.com hostest. Du kannst einfach deine CSS-Dateien auf deinem Webserver verketten. Sobald sie kombiniert werden, wird diese Warnung nicht mehr angezeigt, da sie in einer einzelnen Anforderung geladen wird. Eine der einfachsten Möglichkeiten dies zu tun, ist ein kostenloses WordPress-Plugin wie Autoptimize, entwickelt von Frank Goossens.
Dieses Plugin ist ziemlich leicht, nur 176 KB, um genau zu sein. Derzeit sind es über 1.000.000 aktive Installationen mit einer Bewertung von 4,7 von 5 Sternen. Das Plugin hilft dir bei der Verkettung deiner Skripte, beim Minimieren, beim Auslaufen von Kopfzeilen und bei der Möglichkeit, Stile in deine Kopfzeile und Skripte in deine Fußzeile zu verschieben.
Du kannst es aus dem WordPress-Repository herunterladen oder im WordPress-Dashboard unter „Add New“ („Neu hinzufügen“)-Plugins suchen. Nach der Installation solltest du in die Einstellungen gehen und die Option „Optimize CSS Code” („CSS-Code optimieren“) aktivieren. Dadurch werden deine CSS-Dateien verkettet (kombiniert). Wenn du ein CDN verwendest, gib unbedingt deine CDN-URL ein. Auf diese Weise werden deine CSS-Dateien als eine einzige Anforderung in dein CDN geladen.
Kinsta-Kunden haben direkten Zugriff auf die Code-Minifizierungsfunktion, die direkt in das MyKinsta-Dashboard integriert ist. Mit dieser Funktion können Kunden die automatische CSS- und JavaScript-Minifizierung mit einem Klick aktivieren.
Nachdem du die obigen Einstellungen aktiviert hast, werden deine CSS-Dateien nun in einer Datei „autoptimize_xxxxx.css“ angezeigt.
