Breeze v1.2 veröffentlicht: Ein Blick auf die neuen Funktionen dieses großen Updates
Veröffentlicht: 2021-05-11
Cloudways hat Breeze v1.2 mit dem Schwerpunkt auf die Verbesserung Ihrer Core Web Vitals-Kompatibilität veröffentlicht und bietet letztendlich einen besseren PageSpeed Insights-Score für Ihre Websites.
Falls Sie es immer noch nicht gehört haben, wird Google diesen Monat sein neues Update für die Seitenerfahrung veröffentlichen. Wir haben vor kurzem einen kostenlosen Google Page Experience Checker eingeführt, mit dem Sie die Leistung Ihrer Website und andere Faktoren für die Seitenerfahrung im Vergleich zum Update messen können. Tatsächlich haben wir uns seit Anfang 2021 stark auf die Verbesserung unseres Produkts und die Einführung von Updates konzentriert, die das Beste rund um die Google-Seitenerfahrung bieten.
Bevor Sie Breeze auf die neueste Version aktualisieren, wird jedoch dringend empfohlen, Ihre gesamte WordPress-Site zu sichern oder die neue Version in einer Staging-Umgebung zu testen. Die Inkompatibilität neuerer Versionen mit anderen Plugins kann manchmal zu Problemen und zufälligen Fehlern führen. Wenn Sie also ein Backup bereit haben, können Sie Ihre WordPress-Site schnell wiederherstellen.
Was ist neu in Breeze v1.2?
Werfen wir nun einen kurzen Blick darauf, welche aufregenden neuen Funktionen Breeze in Version 1.2 mit sich bringt.
Cross-Origin-sichere Links
Wenn Sie mit SEO-Praktiken vertraut sind, werden Sie die Bedeutung von „noopener noreferrer“-Attributen verstehen. Dieses Mal kommt Breeze mit einer neuen Funktion, die automatisch ein „noopener noreferrer“-Attribut zu den Links hinzufügt, die einen „_blank“-Zielwert haben.
Hinweis: Fügen Sie sie nicht im WordPress-Editor hinzu, da der Editor automatisch noopener noreferrer hinzufügt; Fügen Sie die Links in Ihren Designdateien hinzu. Nachdem Sie die Links hinzugefügt haben, gehen Sie zurück zu wp-admin und speichern Sie die Breeze-Einstellungen oder leeren Sie den Cache.
– Cross-Origin-sichere Links in Breeze
Einige Anwendungsfälle
- _blank Zielwert und kein rel- Attribut, fügt die Funktion direkt das rel=“ noopener noreferrer ” hinzu.
- _blank, aber das rel- Attribut enthält nur den noopener- Wert, dann wird noreferrer hinzugefügt. Der Link enthält beispielsweise nur das Attribut noopener : noreferrer Die Funktion fügt auch das Attribut noreferrer hinzu: <a href =”https://example.com” target =”_blank” rel=”noopener noreferrer _blank, aber die rel enthält den noreferrer- Wert, dann wird auch noopener hinzugefügt.
- _blank Zielwert und das rel enthält sowohl noopener noreferrer , es wird keine Änderung geben.
- href enthält # Link (ID), er wird ignoriert, d. h. keine Änderung.
Gebe den Code ein:
– Code im Theme-Editor eingeben
Ausgabe des Codes:
– Ausgabe des Codes
Schriftart bleibt während des Ladens sichtbar
Schriftarten werden geladen, wenn Sie eine Site besuchen, und der Text ist während der Ladezeit nicht sichtbar. Um die Benutzererfahrung zu verbessern, sollten Sie eine Technik verwenden, die Ihren Textinhalt anzeigt (Fallback-Schriftart), während Ihre Schriftart heruntergeladen wird (Schriftladedauer). Breeze hat jetzt eine neue Funktion, die Ihnen dabei hilft.
Diese Funktion ist sichtbar, wenn Sie die CSS-Minifizierung überprüfen und funktioniert nur für CSS-Minifizierungs- und CSS-Gruppenoptionen. Um das Attribut font-display:swap an CSS-Klassen anzuhängen, müssen wir den Inhalt ändern.
– Minimierung in Breeze
Um diese Funktion zu testen, können Sie die .css-Dateien im Quelltext der Ansichtsseite überprüfen und nach @font-face suchen. Das Attribut font-display wird hinzugefügt. Wenn diese font-face-Definition bereits ein Attribut font-display hat, wird nichts geändert.
– Schriftdarstellung in CSS
Lazy-Load-Bilder
Lazy Loading ist eine Technik zur Geschwindigkeitsoptimierung, bei der nur sichtbare Bilder auf dem Bildschirm geladen werden, anstatt die Bilder der gesamten Seite auf einmal zu laden. Dies kann die Ladezeiten und das Benutzererlebnis erheblich verbessern.
Die neue Version von Breeze bietet die Funktion „ Lazy Load Images“ in den erweiterten Optionen. Wenn Sie diese Option aktivieren, werden die Bilder durch transparente Dummy-Bilder als Platzhalter ersetzt, und wenn es Zeit für die Anzeige ist, wird das Originalbild geladen.
– Lazy Load Bilder in Breeze
Der Code erkennt Datengrößen und data-srcset-Attribute, die zum Anzeigen der richtigen Bildgröße basierend auf der Auflösung verwendet werden. Die folgenden Attribute ersetzen die ursprünglichen Attribute:
data-breeze= src
data-brsrcset= data-srcset
data-brsizes= data-sizes
Wenn Sie überprüfen möchten, ob Lazy-Load-Bilder funktionieren oder nicht, drücken Sie „STRG + Umschalt + I“ → Netzwerk → wählen Sie das Bild aus → scrollen Sie auf der gesamten Seite nach unten.
– Überprüfen Sie Lazy Loading in Ihrem Browser
Links vorab laden
Links vorab laden ist eine weitere neue Funktion, die wir dem Menü " Erweiterte Optionen" hinzugefügt haben, um die Leistung Ihrer Website zu beschleunigen und die Ergebnisse der Seitengeschwindigkeit zu verbessern. Wenn Sie mit der Maus über einen Link fahren, erstellt diese Funktion einen Cache und die Seite wird schneller geladen, wenn Sie diesen Link erneut öffnen oder besuchen.
Wenn die Option im Backend aktiviert ist, wird eine JavaScript-Datei im Frontend geladen, die nicht von anderen Bibliotheken abhängig ist.
Wenn ein Benutzer länger als 150 ms auf einem Link verweilt, wird ein Prefetch für diesen Link aktiviert und der Seitencache wird erstellt. Wenn der Benutzer also auf den Link klickt, ist die Seite bereit, den Inhalt sofort anzuzeigen.
– Links in Breeze vorladen
Diese Funktion speichert nicht die gesamte nächste Seite beim Hover. Stattdessen wird die Anfrage zwischengespeichert, um die Website-Geschwindigkeit ein wenig zu erhöhen.
Hinweis: Standardmäßig ist die Link-Hover-Verzögerungszeit auf 150 ms eingestellt. Die URLs, die in Never Cache diese URLs enthalten sind, werden vom Preload-Laden ausgeschlossen.
Laden Sie Ihre Webfonts vor
Die Funktion Webfonts vorab laden ist in den erweiterten Optionen verfügbar und einfach zu verwenden. Sie müssen lediglich die lokale Schriftart-URL oder CSS-Datei (URL) angeben, die nur Schriftarten lädt . Sehr oft verlangsamen Webfonts die Geschwindigkeit Ihrer Website und verursachen Verzögerungen, daher wird empfohlen, eine bessere Lösung zu wählen, die Ihnen hilft, dieses Problem zu lösen.
Mit diesem Update bringen wir die Funktion Preload Your Web Fonts , die Ihnen dabei hilft, die Leistung Ihrer Website zu verbessern und das Problem mit den Anforderungen für das Vorladen von Schlüsseln zu beseitigen.
– Laden Sie Ihre Webfonts in Breeze vor
Diese Funktion lädt bestimmte Schriftarten (im Feld hinzugefügt) frühzeitig, anstatt die Schriftarten am Ende zu laden, sodass Sie eine bessere Site-Performance und gute Web Vital-Ergebnisse erzielen können.
JS-Inline-Skripte verzögern
Das Delay JS Inline Scripts ist eine neue Funktion, die in den erweiterten Optionen verfügbar ist. Dies wurde entwickelt, um Ihr Inline-JS am Ende zu laden, sodass Ihr Benutzer- und Site-Geschwindigkeitstester keine Ladezeit sieht.
Das Konzept dahinter ist Lazy Loading, bei dem Ihr Inline-js-Skript angezeigt wird, wenn Sie mit Ihrer Website interagieren (nach unten scrollen, den Cursor bewegen usw.). Dies ist eine großartige Technik, um die Leistung Ihrer Website und die Web Vital-Ergebnisse zu verbessern.
– Verzögern Sie JS-Inline-Skripte in Breeze
Hier müssen Sie das Schlüsselwort für Ihr Inline-js-Skript wie Google Ads angeben, und es wird am Ende automatisch ein bestimmtes Skript geladen.
Zusammenfassung!
Das Cloudways-Team arbeitet rund um die Uhr daran, Breeze zu Ihrem Cache-Plugin zu machen. Dies ist die erste Hauptversion, die sechs neue aufregende Funktionen bietet, die Ihnen helfen, Ihre Seitengeschwindigkeit und Web Vital-Ergebnisse zu verbessern.
Wenn Google diesen Monat sein Page Experience-Update einführt, ist Ihre Website hoffentlich bereit, das neue Update zu nutzen.
Wenn Sie Fragen oder Feedback zu Breeze v1.2 haben, teilen Sie uns dies im Kommentarbereich mit.