Ab Chrome 73 können der Link rel="preload" und responsive Bilder kombiniert werden, damit Bilder schneller geladen werden.
Unterstützte Browser
- 73
- 79
- 78
- 17,2
In diesem Artikel möchte ich auf zwei meiner Lieblingsthemen eingehen: responsive Bilder und das Vorabladen. Als Person, die stark an der Entwicklung dieser beiden Funktionen beteiligt war, freue ich mich sehr, zu sehen, wie sie zusammenarbeiten.
Responsive Bilder – Übersicht
Angenommen, Sie surfen auf einem Bildschirm mit einer Breite von 300 Pixeln und die Seite hat gerade ein Bild mit einer Breite von 1.500 Pixeln angefordert. Diese Seite hat gerade einen Großteil Ihrer mobilen Daten verschwendet, weil Ihr Bildschirm mit dieser zusätzlichen Auflösung nichts anfangen kann. Idealerweise sollte der Browser eine Version des Bildes abrufen, die nur etwas breiter als Ihre Bildschirmgröße ist, z. B. 325 Pixel. Dadurch wird ein hochauflösendes Bild ohne Datenverlust sichergestellt. Das Bild wird sogar schneller geladen. Mit responsiven Bildern können Browser unterschiedliche Bildressourcen an verschiedene Geräte abrufen. Wenn Sie kein Bild-CDN verwenden, müssen Sie mehrere Abmessungen für jedes Bild speichern und im srcset-Attribut angeben. Über den Wert w wird dem Browser die Breite jeder Version mitgeteilt. Je nach Gerät kann der Browser den passenden auswählen:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Vorabladen – Übersicht
Mit Vorabladen können Sie den Browser über kritische Ressourcen informieren, die so schnell wie möglich geladen werden sollen, bevor sie in HTML erkannt werden. Dies ist besonders nützlich für Ressourcen, die nicht leicht zu finden sind, z. B. Schriftarten in Stylesheets, Hintergrundbilder oder aus einem Skript geladene Ressourcen.
<link rel="preload" as="image" href="important.png">
Responsive Bilder + Vorabladen = schnelleres Laden der Bilder
Responsive Bilder und das Vorabladen gibt es schon in den letzten Jahren, aber es fehlte noch etwas: Es gab keine Möglichkeit, responsive Bilder vorab zu laden. Ab Chrome 73 kann der Browser die richtige Variante von responsiven Bildern, die in srcset angegeben ist, vorab laden, bevor das img-Tag erkannt wird.
Je nach Struktur Ihrer Website kann dies bedeuten, dass die Bilder deutlich schneller angezeigt werden. Wir haben Tests auf einer Website durchgeführt, auf der responsive Bilder mithilfe von JavaScript per Lazy Loading geladen werden. Durch das Vorabladen wurden die Bilder 1,2 Sekunden schneller geladen.
imagesrcset und imagesizes
Damit responsive Bilder vorab geladen werden können, wurden dem <link>-Element vor Kurzem neue Attribute hinzugefügt: imagesrcset und imagesizes. Sie werden mit <link rel="preload"> verwendet und entsprechen der Syntax von srcset und sizes, die im Element <img> verwendet wird.
Wenn Sie beispielsweise ein responsives Bild vorab laden möchten, das mit Folgendem angegeben wird:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Dazu können Sie Folgendes in die <head> des HTML-Codes einfügen:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Dadurch wird eine Anfrage mit derselben Logik zur Ressourcenauswahl gestartet, die srcset und sizes anwenden.
Anwendungsfälle
Dynamisch eingefügte responsive Bilder vorab laden
Angenommen, Sie laden Hero-Images im Rahmen einer Diashow dynamisch und wissen, welches Bild zuerst angezeigt wird. In diesem Fall sollten Sie wahrscheinlich nicht auf das Skript warten, bevor das betreffende Bild geladen wird, da dies den Nutzer verzögern würde.
Sie können sich das Problem auf einer Website mit einer dynamisch geladenen Bildergalerie ansehen:
Öffnen Sie diese Beispielwebsite in einem neuen Tab.
Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus.
Deaktivieren Sie das Kästchen Cache deaktivieren.
Lade die Seite neu.
Die Verwendung von preload ist hier hilfreich, da das Bild vorzeitig geladen wird und wahrscheinlich schon da ist, wenn der Browser es anzeigen muss.
Um zu sehen, was das Vorabladen ausmacht, können Sie dieselbe dynamisch geladene Bildergalerie prüfen, jedoch mit vorab geladenem ersten Bild. Gehen Sie dazu wie im ersten Beispiel beschrieben vor.
Hintergrundbilder mit Image-Set vorab laden
Wenn Sie unterschiedliche Hintergrundbilder für unterschiedliche Bildschirmdichten haben, können Sie sie in Ihrem CSS-Code mit der Syntax image-set angeben. Der Browser kann dann basierend auf dem DPR für den Bildschirm auswählen, welcher angezeigt werden soll.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Das Problem bei CSS-Hintergrundbildern besteht darin, dass sie vom Browser erst erkannt werden, nachdem er den gesamten CSS-Code im <head> der Seite heruntergeladen und verarbeitet hat. Das kann eine Menge CSS-Code sein.
Sie können sich das Problem auf einer Beispielwebsite mit einem responsiven Hintergrundbild ansehen.
Mit responsivem Vorabladen lassen sich diese Bilder ganz einfach ohne Hacking laden.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Wenn Sie das Attribut href ausschließen, sorgen Sie dafür, dass Browser, die imagesrcset im <link>-Element nicht unterstützen, aber image-set in CSS unterstützen, keine falsche Quelle herunterladen. Allerdings profitieren sie in diesem Fall auch nicht von der Vorabladefunktion.
Sie können prüfen, wie sich das vorherige Beispiel mit einem vorab geladenen responsiven Hintergrundbild verhält.
Responsive Bilder in Aktion vorab laden
Das Vorabladen Ihrer responsiven Bilder kann sie theoretisch beschleunigen, aber was macht das in der Praxis?
Um zu antworten, habe ich zwei Kopien eines Demo-PWA-Shops erstellt: eine, bei der Bilder nicht vorab geladen werden, und eine, die einige davon vorab lädt. Da die Website Bilder mit JavaScript per Lazy Loading lädt, ist es wahrscheinlich von Vorteil, die Bilder im ersten Darstellungsbereich vorab zu laden.
Dadurch habe ich die folgenden Ergebnisse für kein Vorabladen und Vorabladen von Bildern erhalten. Bei den unbearbeiteten Zahlen sehen wir, dass der Start Render unverändert geblieben ist und der Geschwindigkeitsindex leicht verbessert wurde (273 ms, da Bilder schneller ankommen, aber nicht einen großen Teil der Pixelfläche einnehmen). Der wirkliche Messwert, der den Unterschied erfasst, ist der Messwert Last Painted Hero, der um 1,2 Sekunden verbessert wurde. 🎉🎉
Natürlich gibt nichts den visuellen Unterschied so einfach wie ein Filmstreifenvergleich:
Vorabladen und <picture>?
Wenn Sie mit responsiven Bildern vertraut sind, fragen Sie sich vielleicht „Was ist mit <picture>?“.
In der Arbeitsgruppe zur Webleistung wird empfohlen, ein Äquivalent zum Vorabladen für srcset und sizes hinzuzufügen, nicht jedoch das <picture>-Element, das den Anwendungsfall „Art Direction“ behandelt.
Warum wird dieser Anwendungsfall „vernachlässigt“?
Zwar besteht das Interesse an der Lösung dieses Anwendungsfalls, aber es gibt noch eine Reihe technischer Probleme, die eine Lösung mit erheblicher Komplexität bedeuten würden. Darüber hinaus scheint es, als ob der Anwendungsfall heute größtenteils abgedeckt werden kann, auch wenn es sich um eine komplizierte Methode handelt (siehe unten).
Aus diesem Grund hat die Web Performance-WG beschlossen, zuerst srcset zu veröffentlichen, um zu sehen, ob die Nachfrage nach entsprechendem picture-Support steigt.
Wenn Sie <picture> vorab laden können, können Sie das folgende Verfahren als Behelfslösung verwenden.
Nehmen wir das folgende Szenario:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
Die Logik des <picture>-Elements (oder genauer die Logik der Bildquellenauswahl) besteht darin, die media-Attribute der <source>-Elemente der Reihe nach durchzugehen, das erste übereinstimmende Element zu finden und die angehängte Ressource zu verwenden.
Da das responsive Vorabladen keinen Begriff von „Reihenfolge“ oder „erste Übereinstimmung“ hat, müssen die Haltepunkte in etwa so umgewandelt werden:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Vorabladen und type
Das <picture>-Element unterstützt auch den Abgleich im ersten type, sodass unterschiedliche Bildformate bereitgestellt werden können und der Browser das erste unterstützte Bildformat auswählt. Dieser Anwendungsfall wird derzeit nicht durch Vorabladen unterstützt.
Für Websites, die diese Methode verwenden, ist es die beste Option, das Vorabladen zu vermeiden. Stattdessen sollte der Preload Scanner diese von den Elementen <picture> und <source> erfassen. Dies ist sowieso eine Best Practice, insbesondere aufgrund der Unterstützung von Priority Hints, durch die das entsprechende Bild besser priorisiert werden kann als nur durch das Vorabladen.
Auswirkungen auf Largest Contentful Paint (LCP)
Da Bilder Kandidaten für den Largest Contentful Paint (LCP) sein können, kann das Vorabladen den LCP Ihrer Website verbessern. Mit den oben genannten Verfahren können Sie auch dafür sorgen, dass Ihre responsiven Bilder schneller geladen werden.
Unabhängig davon, ob das vorab geladene Bild responsiv ist, sollten Sie beachten, dass Vorabladevorgänge besonders gut funktionieren, wenn die Bildressource in der anfänglichen Markup-Nutzlast nicht sichtbar ist. Bei Websites, die vollständiges Markup vom Server senden, ist dir vielleicht kein großer Vorteil erkennbar. Wenn Ihre Website jedoch Markup auf dem Client rendert, was den Preload-Scanner des Browsers umgeht, besteht die Möglichkeit, potenzielle LCP-Bilder vorab zu laden, um die Leistung zu verbessern.
Zusammenfassung
Das Vorabladen responsiver Bilder bietet uns neue und spannende Möglichkeiten, responsive Bilder auf eine Weise vorab zu laden, die zuvor nur mit Hacks möglich war. Das ist eine wichtige Ergänzung zu den geschwindigkeitsorientierten Tools für Entwickler und ermöglicht uns, dafür zu sorgen, dass die wichtigen Bilder, die wir unseren Nutzern so schnell wie möglich präsentieren möchten, genau dann verfügbar sind, wenn wir sie brauchen.