Hier erfahren Sie mehr über drei neue Funktionen zur Leistungsoptimierung im Web, die auf der I/O 2019 vorgestellt wurden.
Während des Vortrags Speed at Scale auf der Google I/O 2019 haben wir drei Dinge angekündigt, mit denen wir die Webleistung im kommenden Jahr verbessern möchten.
Lighthouse unterstützt jetzt Leistungsbudgets
LightWallet ist eine neue Funktion in Lighthouse, die die Unterstützung für Leistungsbudgets hinzufügt. Mithilfe von Leistungsbudgets werden Standards für die Leistung Ihrer Website definiert. Noch wichtiger ist, dass sie es ermöglichen, Leistungseinbrüche vor der Markteinführung zu erkennen und zu beheben.
LightWallet ist in der neuesten Version der Lighthouse-Befehlszeile verfügbar und die Einrichtung dauert nur wenige Minuten. Weitere Informationen finden Sie in dieser Anleitung.
Sie sind sich nicht sicher, wie hoch Ihre Budgets sein sollten? Probieren Sie unseren experimentellen Leistungsbudget-Rechner aus, mit dem eine LightWallet-kompatible Budgetkonfiguration generiert werden kann.
Lazy Loading für Bilder und iFrames auf Browserebene im Web
Webseiten enthalten oft eine große Anzahl von Bildern, was zu einer höheren Datennutzung, einer unnötigen Größe der Seite und einem langsameren Seitenaufbau beiträgt. Viele dieser Bilder sind nicht auf dem Bildschirm zu sehen, sodass Nutzer scrollen müssen, um sie zu sehen.
Bisher mussten Sie das Lazy-Loading von Bildern mit einer JavaScript-Bibliothek implementieren. Das könnte sich bald ändern. Im Sommer wird in Chrome das Attribut loading eingeführt, das standardisiertes <img>
- und <iframe>
-Lazy-Loading im Web ermöglicht.
Mit dem Attribut loading
kann ein Browser das Laden von nicht sichtbaren Bildern und Iframes verzögern, bis Nutzer in ihre Nähe scrollen. loading
unterstützt drei Werte:
lazy
: eignet sich gut für Lazy Loading.eager
: ist kein geeigneter Kandidat für das Lazy Loading. werden sofort geladen.auto
: Der Browser bestimmt, ob die Lazy-Ladefunktion verwendet werden soll.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Die genauen Heuristiken für „wenn der Nutzer in der Nähe scrollt“ sind dem Browser überlassen. Im Allgemeinen hoffen wir, dass Browser mit der Abrufung verzögerter Bilder und Iframe-Inhalte beginnen, kurz bevor sie in den Viewport gelangen.
Das Attribut loading
ist in Chrome Canary über Flags implementiert. Sie können diese Demo in Chrome 75 und höher mit aktivierten about://flags/#enable-lazy-image-loading
- und about://flags/#enable-lazy-frame-loading
-Flags ausprobieren.
Weitere Informationen finden Sie in unserem Artikel zur Lazy-Loading-Funktion.
Google Fonts unterstützt jetzt „font-display“ als Abfrageparameter
Wir haben angekündigt, dass die Unterstützung für font-display jetzt in der Produktion für alle Google Fonts über den Abfragestring-Parameter „display“ verfügbar ist:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Mit dem font-display
-Deskriptor können Sie festlegen, wie Ihre Webfonts gerendert oder auf einen Ersatz zurückgegriffen wird, je nachdem, wie lange das Laden dauert. Es werden verschiedene Werte unterstützt, darunter auto
, block
, swap
, fallback
und optional
.
Bisher war die einzige Möglichkeit, font-display
für Webschriften aus Google Fonts anzugeben, die Selbsthostung. Durch diese Änderung ist das nicht mehr erforderlich.
Die Google Fonts-Dokumentation wurde aktualisiert, um font-display
in die Standard-Code-Embeddings aufzunehmen (siehe unten). Wir hoffen, dass diese Neuerung noch mehr Entwickler dazu anspornt, sie auszuprobieren.
Hier ist eine Demo von Glitch, in der ein Display mit mehreren Schriftfamilien verwendet wird. Probieren Sie es mit der Netzwerkemulation in den DevTools aus, um die Auswirkungen von font-display: swap
zu sehen.
Weitere Informationen
Außerdem haben wir mehrere Produktionsfallstudien zur Verwendung erweiterter Leistungsmuster zur Verbesserung der Nutzerfreundlichkeit vorgestellt. Dazu gehörten Websites, die Bild-CDNs, die Brotli-Komprimierung, intelligentes JavaScript-Ausliefern und Prefetching nutzen, um ihre Seiten zu beschleunigen. Sehen Sie sich den Vortrag an, um mehr zu erfahren.