Auf der I/O 2019 erfahren Sie mehr über drei neue Funktionen zur Leistungssteigerung im Web.
Beim Vortrag „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, mit der Leistungsbudgets unterstützt werden. Leistungsbudgets sind Maßstäbe für die Leistung Ihrer Website. Und was noch wichtiger ist: Sie machen es einfach, Leistungsabfälle zu erkennen und zu beheben, bevor sie ausgeliefert werden.
LightWallet ist in der neuesten Version der Lighthouse-Befehlszeile verfügbar und dauert nur wenige Minuten. Diese Anleitung enthält weitere Informationen.
Sie sind sich nicht sicher, wie hoch Ihr Budget sein soll? Sie können unseren experimentellen Leistungsbudgetrechner ausprobieren, der eine mit LightWallet kompatible Budgetkonfiguration generieren kann.
Lazy Loading von Bildern und iFrames auf Browserebene jetzt im Web
Webseiten enthalten oft eine große Anzahl von Bildern, was zu einer Datennutzung, einem aufgeblähten Seiten und einem langsameren Seitenaufbau führt. Viele dieser Bilder sind nicht auf dem Bildschirm zu sehen und der Nutzer muss scrollen, um sie zu sehen.
Bisher musste das Lazy Loading von Bildern mithilfe einer JavaScript-Bibliothek behoben werden. Das wird sich aber bald ändern. Diesen Sommer wird Chrome das Attribut loading unterstützen, wodurch standardisiertes <img>- und <iframe>-Lazy Loading im Web verfügbar ist.
Mit dem Attribut loading kann ein Browser das Laden von nicht sichtbaren Bildern und iFrames aufschieben, bis Nutzer zu ihnen scrollen. loading unterstützt drei Werte:
lazy: eignet sich gut für Lazy Loading.eager: eignet sich nicht für Lazy Loading. Sofort laden.auto: Der Browser bestimmt, ob Lazy Loading ausgeführt wird.
<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“ bleibt dem Browser überlassen. Im Allgemeinen hoffen wir, dass Browser verzögerte Bilder und iFrame-Inhalte abrufen, bevor sie in den Darstellungsbereich gelangen.
Das Attribut loading ist in Chrome Canary hinter Flags implementiert. Sie können diese Demo in Chrome 75 und höher ausprobieren. Dabei müssen die Flags about://flags/#enable-lazy-image-loading und about://flags/#enable-lazy-frame-loading aktiviert sein.
Es ist ein Bericht zur Lazy Loading-Funktion mit weiteren Details verfügbar.
Google Fonts unterstützt jetzt die Anzeige von Schriftarten als Suchparameter
Wie angekündigt, wird die Unterstützung für font-display jetzt in der Produktion für alle Google Fonts über den Parameter „display query-string“ verfügbar:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Mit dem Deskriptor font-display können Sie festlegen, wie Ihre Webschriftarten gerendert oder als Fallback verwendet werden, je nachdem, wie lange das Laden dauert. Eine Reihe von Werten wird unterstützt, darunter auto, block, swap, fallback und optional.
Bisher war es nur möglich, font-display für Webschriftarten von Google Fonts festzulegen, indem Sie sie selbst hosten. Durch diese Änderung ist dies jedoch nicht mehr erforderlich.
Die Google Fonts-Dokumentation wurde aktualisiert und enthält jetzt font-display in den Standardcodeeinbettungen (wie unten dargestellt). Wir hoffen, dass dadurch mehr Entwickler dazu angeregt werden, diese aufregende Ergänzung auszuprobieren.
Hier ist eine Demo zu Glitch zur Verwendung der Anzeige mit mehreren Schriftfamilien. Probieren Sie es mit der Entwicklertools-Netzwerkemulation aus, um die Auswirkungen von font-display: swap zu sehen.
Mehr ansehen
Außerdem haben wir mehrere Fallstudien zur Verwendung erweiterter Leistungsmuster zur Verbesserung der Nutzerfreundlichkeit behandelt. Dazu gehörten Websites, die Image-CDNs, Brotli-Komprimierung, intelligente JavaScript-Bereitstellung und Prefetching nutzten, um ihre Seiten zu beschleunigen. Sehen Sie sich den Vortrag an, um mehr zu erfahren.