Informationen zu drei neuen Web-Leistungs-Launches von der I/O 2019.
Während des Vortrags „Speed at Scale“ auf der Google I/O 2019 haben wir drei Dinge angekündigt, die die Webleistung im kommenden Jahr verbessern sollen.
Lighthouse unterstützt jetzt Leistungsbudgets
LightWallet ist eine neue Funktion in Lighthouse, die Unterstützung für Leistungsbudgets bietet. Leistungsbudgets legen Standards für die Leistung Ihrer Website fest. Vor allem können Sie damit Leistungsregressionen erkennen und beheben, bevor sie veröffentlicht werden.
LightWallet ist in der neuesten Version der Lighthouse-Befehlszeile verfügbar und lässt sich in wenigen Minuten einrichten. In dieser Anleitung finden Sie weitere Informationen.
Sie sind sich nicht sicher, wie hoch Ihre Budgets sein sollten? Probieren Sie unseren experimentellen Leistungsbudget-Rechner aus, mit dem Sie eine LightWallet-kompatible Budgetkonfiguration generieren können.
Lazy Loading für Bilder und iFrames auf Browserebene im Web
Webseiten enthalten oft viele Bilder, die zur Datennutzung, Seitenüberfrachtung und langsameren Seitenaufbauten beitragen. Viele dieser Bilder befinden sich außerhalb des Bildschirms, sodass Nutzer scrollen müssen, um sie zu sehen.
Bisher mussten Sie das Lazy Loading von Bildern mit einer JavaScript-Bibliothek lösen, aber das könnte sich bald ändern. Diesen Sommer wird Chrome die Unterstützung für das Attribut loading einführen, das standardisiertes Lazy Loading für <img> und <iframe> ins Web bringt.
Mit dem Attribut loading kann ein Browser das Laden von nicht sichtbaren Bildern und iFrames verzögern, bis Nutzer in die Nähe scrollen. loading unterstützt drei Werte:
lazy: ist ein guter Kandidat für Lazy Loading.eager: ist kein guter Kandidat für Lazy Loading. Sofort laden.auto: Der Browser entscheidet, ob Lazy Loading verwendet wird oder nicht.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Die genaue Heuristik für „wenn der Nutzer in die Nähe scrollt“ wird dem Browser überlassen. Im Allgemeinen hoffen wir, dass Browser damit beginnen, zurückgestellte Bilder und iFrame-Inhalte abzurufen, kurz bevor sie im Darstellungsbereich angezeigt werden.
Das Attribut loading ist in Chrome Canary hinter Flags implementiert. Sie können diese Demo in Chrome 75 oder höher mit aktivierten Flags about://flags/#enable-lazy-image-loading und about://flags/#enable-lazy-frame-loading ausprobieren.
Weitere Informationen zur Lazy-Loading-Funktion finden Sie in diesem Artikel.
Google Fonts unterstützt jetzt „font-display“ als Suchparameter
Wir haben angekündigt, dass die Unterstützung für font-display jetzt für alle Google Fonts über den Abfragestring-Parameter „display“ verfügbar ist:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Mit dem Deskriptor font-display können Sie festlegen, wie Ihre Webschriftarten gerendert oder ersetzt werden, 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 Webschriftarten von Google Fonts anzugeben, sie selbst zu hosten. Mit dieser Änderung ist das nicht mehr erforderlich.
Die Google Fonts-Dokumentation wurde aktualisiert und enthält jetzt font-display in den Standardcode-Einbettungen (siehe unten). Wir hoffen, dass dies mehr Entwickler dazu ermutigt, diese spannende Ergänzung auszuprobieren.
Hier ist eine Demo auf Glitch, in der „display“ mit mehreren Schriftfamilien verwendet wird. Probieren Sie es mit der Netzwerkemulation in den Entwicklertools aus, um die Auswirkungen von font-display: swap zu sehen.
Mehr ansehen
In unserem Vortrag wurden auch mehrere Fallstudien zur Verwendung fortschrittlicher Leistungsmuster zur Verbesserung der Nutzerfreundlichkeit behandelt. Dazu gehörten Websites, die Bild-CDNs, Brotli-Komprimierung, intelligente JavaScript-Bereitstellung und Prefetching nutzten, um ihre Seiten zu beschleunigen. Sehen Sie sich den Vortrag an, um mehr zu erfahren.