Geschwindigkeit in großem Maßstab: Was gibt es Neues bei der Webleistung?

Hier erfahren Sie mehr über drei neue Funktionen zur Leistungsoptimierung im Web, die auf der I/O 2019 vorgestellt wurden.

Katie Hempenius
Katie Hempenius

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.

Ein LightWallet-Bericht, aus dem hervorgeht, welche Assets das Dateigrößenbudget überschreiten.

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.

Lazy Loading auf Browserebene, das nicht sichtbare Inhalte hervorhebt, die auf Anfrage geladen werden

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.

Google Fonts-Code mit „font-display“ als Abfrageparameter in der URL einbetten

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.