So reduzieren Sie CSS- / JavaScript-Dateien in WordPress
Möchten Sie Dateien auf Ihrer WordPress-Site minimieren? Durch die Reduzierung Ihrer WordPress-CSS- und Javascript-Dateien können sie schneller geladen und Ihre WordPress-Site beschleunigt werden. In diesem Handbuch zeigen wir Ihnen, wie Sie CSS- / Javascript-Dateien in WordPress minimieren, um die Leistung und Geschwindigkeit zu verbessern.
Was ist Minify und wann brauchen Sie es??
Mit dem Begriff "Minify" wird eine Methode beschrieben, mit der die Dateigröße Ihrer Website verringert wird. Dieses Ziel wird erreicht, indem Leerzeichen, Zeilen und nicht benötigte Zeichen aus dem Quellcode entfernt werden.
Normalerweise wird empfohlen, es nur für Dateien zu verwenden, die an die Browser des Benutzers gesendet werden. Dazu gehören HTML-, CSS- und JavaScript-Dateien. Sie können auch PHP-Dateien minimieren, aber PHP ist eine serverseitige Programmiersprache, und durch Minimieren der Sprache wird die Seitenladegeschwindigkeit für Ihre Benutzer nicht verbessert.
Der offensichtliche Vorteil der Minimierung von Dateien besteht in der verbesserten Geschwindigkeit und Leistung von WordPress. Kompakte Dateien lassen sich schneller laden und die Geschwindigkeit Ihrer Website verbessern.
Einige Experten glauben jedoch, dass die Leistungsverbesserung für die meisten Websites sehr gering ist und die Mühe nicht wert ist. Die Minifizierung reduziert auf den meisten WordPress-Sites nur wenige Kilobytes an Daten. Sie können die Ladezeit reduzieren, indem Sie einfach Bilder für das Web optimieren.
Hier ist ein Beispiel für normalen CSS-Code:
Karosserie
Marge: 20px;
Polsterung: 20px;
Farbe: # 333333;
Hintergrund: # f7f7f7;
h1
Schriftgröße: 32px;
Farbe # 222222;
Rand unten: 10px;
Nach der Minimierung des Codes sieht es so aus:
Körper Marge: 20px; Abstand: 20px; Farbe: # 333; Hintergrund: # f7f7f7 h1 Schriftgröße: 32px; Rand: 10px
Wenn Sie versuchen, mit Google Pagespeed oder GTMetrix 100/100 Punkte zu erzielen, können Sie durch das Minimieren von CSS und JavaScript Ihre Punktzahl erheblich verbessern.
Schauen Sie sich doch an, wie Sie CSS / JavaScript auf Ihrer WordPress-Site einfach reduzieren können.
Reduzieren Sie CSS / Javascript in WordPress
Zuerst müssen Sie das Better WordPress Minify-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung fügt das Plugin Ihrer WordPress-Verwaltungsleiste einen neuen Menüpunkt mit der Bezeichnung "BWP Minify" hinzu. Wenn Sie darauf klicken, gelangen Sie zur Einstellungsseite des Plugins.
Auf der Einstellungsseite müssen Sie die ersten beiden Optionen aktivieren, um JavaScript- und CSS-Dateien auf Ihrer WordPress-Site automatisch zu minimieren.
Sie können jetzt auf die Schaltfläche Save Changes klicken, um Ihre Einstellungen zu speichern.
Es gibt viele weitere erweiterte Optionen auf dieser Seite. Die Standardeinstellungen funktionieren für die meisten Websites. Sie können diese Optionen jedoch von Fall zu Fall überprüfen und ändern.
Als nächstes müssen Sie zu Ihrer Website wechseln. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle und wählen Sie im Browsermenü die Option "Seitenquelle anzeigen".
Sie sehen nun den von Ihrer WordPress-Site generierten HTML-Quellcode. Wenn Sie genau hinschauen, werden Sie feststellen, dass dieses Plugin CSS / JavaScript-Dateien aus dem eigenen Ordner des Plugins lädt, anstatt aus Ihren WordPress-Themes und Plugins.
Dies sind die minimierten Versionen Ihrer ursprünglichen CSS- und JavaScript-Dateien. Besseres WordPress Minify-Plugin speichert sie im Cache und stellt die reduzierten Versionen für Browser bereit.
Wir hoffen, dieser Artikel hat Ihnen geholfen, zu lernen, wie Sie Ihre WordPress-Site minimieren können. Vielleicht möchten Sie auch unseren ultimativen Leitfaden zur Beschleunigung von WordPress für Anfänger sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.