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? Mit unserem experimentellen Leistungsbudget-Rechner können Sie eine LightWallet-kompatible Budgetkonfiguration generieren.
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 der Nutzer scrollen muss, um sie zu sehen.
Bisher mussten Sie Lazy Loading für Bilder mit einer JavaScript-Bibliothek durchführen. Das wird sich aber 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 hinter Flags implementiert. Sie können diese Demo in Chrome 75 und höher mit den aktivierten Flags about://flags/#enable-lazy-image-loading und about://flags/#enable-lazy-frame-loading 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 unterstützt eine Reihe von Werten, 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 DevTools-Netzwerkemulation 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.