Frontend-Optimierungen im Speed Optimizer
Dieses Tutorial behandelt die folgenden Themen:
Auf dieser Seite finden Sie verschiedene Optimierungen für die CSS-, JavaScript- und HTML-Teile Ihrer Website.
HTML, JS, CSS verkleinern
Durch die Aktivierung aller drei Funktionen wird die Ladegeschwindigkeit Ihrer Website erheblich verbessert, da alle unnötigen Zeichen aus Ihren CSS- und JS-Dateien sowie der HTML-Ausgabe Ihrer Website entfernt werden. Sie können auch die Ausschlussfunktion verwenden, wenn Sie bestimmte Skripte von der Minifizierung ausschließen möchten.
Die einzelnen Funktionen finden Sie auf den jeweiligen Tab:
CSS und JS Dateien kombinieren
Die Kombination von CSS- und JS-Dateien reduziert die Anfragen an Ihre Website und verbessert so die Ladegeschwindigkeit. Das Plugin behält die Skripte und Stile nach der Kombination an ihrem ursprünglichen Speicherort, um die beste Kompatibilität mit anderen Plugins zu gewährleisten.
Das Kombinieren von JavaScript-Dateien kann Probleme mit Skripten verursachen, die eine bestimmte Ausführungsreihenfolge erfordern. Aus diesem Grund raten wir Ihnen, das Frontend Ihrer Website zu überprüfen, nachdem Sie diese Optimierung aktiviert haben.
Sie können der kombinierten CSS-Datei auch einen Preload-Wert hinzufügen, der angibt, dass es sich um eine wichtige Ressource handelt, die für die korrekte Darstellung der Seite unbedingt erforderlich ist. Verwenden Sie diese Option, wenn Ihre Website nach der Kombination der CSS-Dateien nicht richtig aussieht.
Render-blockierende JS verzögern
Diese Option ermöglicht es Ihnen, JS-Dateien, die das Rendern Ihrer Website bei ersten Besuchen verzögern, zu verschieben. Die JS-Funktionalität Render-Blockieren verzögern wird Browser anweisen, Ressourcen zu laden und anzuzeigen, die sofort auf Ihren Webseiten sichtbar sein sollten.
Das Aufschieben von Rendering-Blocking-JavaScript kann zu Problemen mit Skripten führen, die eine bestimmte Reihenfolge der Ausführung erfordern. Sobald diese Funktion aktiviert ist, wird empfohlen, das Frontend Ihrer Website gründlich zu überprüfen. Wenn Sie dabei Probleme bemerken, verwenden Sie die Option „ Asynchrones Laden von JS-Dateien ausschließen “.
Optimierung von Webfonts aktivieren
Mit der Optimierung von Web-Fonts ändern wir die Standardmethode, um Google-Fonts zu laden, um HTTP-Anfragen zu speichern. Darüber hinaus werden alle anderen Schriftarten, die Ihre WordPress-Website verwendet, ordnungsgemäß vorgeladen, so dass die Browser so wenig Zeit wie möglich zum Zwischenspeichern und Rendern benötigen.
Wenn Sie es aktivieren, fügen wir den so genannten “Preconnect”-Link zu fonts.gstatic.com hinzu, damit wir die DNS-Suche, TLS-Verhandlung und den TCP-Handshake machen, was zu einem schnelleren Download der Schriftart führt, wenn Sie es anfordern es. Wenn die Optimierung aktiviert ist und ordnungsgemäß funktioniert, können Sie den Preconnect-Link im Head-Tag der Webseite sehen
Vorladen von Schriftarten
Mit ihm können Sie die Schriften, die Sie verwenden, vorladen, für schnelleres Rendering und bessere Website-Performance. Stellen Sie sicher, dass Sie nur die Schriften vorladen, die Sie tatsächlich verwenden. In den meisten Fällen finden Sie diese Schriftarten, wenn Sie eine PageSpeed test und Sie werden aufgefordert, diese Assets vorzuladen. Sie können es hier tun.
Dies wird einen Preload-Link im Kopfbereich Ihrer Website hinzufügen, um ein schnelleres Laden für diese Ressourcen zu gewährleisten. Wenn Sie Schriften zum Vorladen hinzufügen, stellen Sie sicher, dass Sie die vollständige URL der Schriftart einfügen.
Abfrage-Strings aus statischen Ressourcen entfernen
Die Standardfunktionalität des Ladens von WordPress Skripten ist das Anhängen einer geladenen Version des Skripts. Das Entfernen dieser Versionsparameter verbessert das Caching Ihrer Seiten sowohl durch ein CDN, das Sie verwenden können, als auch durch den Browser Ihrer Besucher.
Emojis deaktivieren
Standardmäßig lädt WordPress Skripte, um Emojis in Ihren Inhalten automatisch zu erkennen und zu generieren. Das Deaktivieren dieser Option stoppt das Laden des Skripts und spart wertvolle Zeit. Beachten Sie, dass die meisten modernen Browser Symbole wie ; ) immer noch automatisch in einen Smiley umwandeln.
