Zum Hauptinhalt springen




 

Ab Chrome 73 können der Link rel = "Preload" und reaktionsfähige Bilder kombiniert werden, um Bilder schneller zu laden.

Dieser Artikel gibt mir die Möglichkeit, zwei meiner Lieblingssachen zu diskutieren: reaktionsschnelle Bilder. y Vorspannung. Als jemand, der sehr an der Entwicklung beider Funktionen beteiligt war, freue ich mich sehr, dass sie zusammenarbeiten!

Responsive Imaging-Übersicht

Angenommen, Sie surfen auf einem 300 Pixel breiten Bildschirm im Internet und die Seite fordert ein 1500 Pixel breites Bild an. Diese Seite hat nur eine Menge Ihrer Mobilfunkdaten verschwendet, weil Ihr Bildschirm mit all dieser zusätzlichen Auflösung nichts anfangen kann. Idealerweise sollte der Browser eine Version des Bildes erhalten, die nur eine ist wenig breiter als Ihre Bildschirmgröße, sagen wir 325 Pixel. Dies gewährleistet ein hochauflösendes Bild, ohne Daten zu verschwenden. Und das Beste ist, dass das Bild schneller geladen wird. Mit reaktionsschnellen Bildern können Browser auf verschiedenen Geräten nach verschiedenen Bildressourcen suchen. Wenn Sie kein Image-CDN verwenden, müssen Sie für jedes Image mehrere Dimensionen speichern und in der angeben srcset Attribut. das w value teilt dem Browser die Breite jeder Version mit. Je nach Gerät kann der Browser das entsprechende auswählen:

 

< img src = " small.jpg " srcset = " small.jpg 500w, medium.jpg 1000w, large.jpg 1500w " alt = " ... " >

 

Übersicht vorladen

Durch das Vorladen können Sie den Browser so schnell wie möglich über wichtige Ressourcen informieren, die Sie laden möchten, bevor sie in HTML erkannt werden. Dies ist besonders nützlich für Ressourcen, die nicht leicht zu erkennen sind, z. B. Schriftarten in Stylesheets, Hintergrundbildern oder aus einem Skript geladenen Ressourcen.

 

< link rel = " pretoad " as = " image " href = " important.png " >

 

Reaktionsschnelle Bilder + Vorladen = schnelleres Hochladen von Bildern

Responsive Images und das Vorladen waren in den letzten Jahren verfügbar, aber gleichzeitig fehlte etwas: Es gab keine Möglichkeit, Responsive Images vorzuladen. Ab Chrome 73kann der Browser die richtige Variante der in angegebenen angegebenen reaktionsfähigen Bilder vorladen srcset bevor ich das entdecke img Etikette!

Abhängig von der Struktur Ihrer Website kann dies zu einer deutlich schnelleren Bildanzeige führen! Wir testen eine Site, die Javascript verwendet, um reaktionsschnelle Bilder zu laden. Das Vorladen führte dazu, dass Bilder 1,2 Sekunden schneller geladen wurden.

imagesrcset y Bildgrößen

Um reaktionsschnelle Bilder vorab zu laden, wurden dem kürzlich neue Attribute hinzugefügt Element: imagesrcset y Bildgrößen. Sie werden mit verwendet und passt zum srcset y Größen Syntax verwendet in Element.

Wenn Sie beispielsweise ein responsives Image vorladen möchten, das mit Folgendem angegeben ist:

 

<Img src = "wolf.jpg" srcset = "wolf_400px.jpg 400w, 800w wolf_800px.jpg, wolf_1600px.jpg 1600w" Größen = "50vw" alt = "Ein rad Wolf">

 

Sie können dies tun, indem Sie Ihrem HTML-Code Folgendes hinzufügen :

 

< link rel = " pretoad " as = " image " href = " wolf.jpg " imagesrcset = " wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w " imagesizes = " 50vw " >

 

Dadurch wird eine Anforderung mit derselben Ressourcenauswahllogik wie gestartet srcset y Größen wird gelten.

Anwendungsfälle

Dynamisch injiziertes Responsive Image Preload

Angenommen, Sie laden dynamisch Heldenbilder als Teil einer Diashow und wissen, welches Bild zuerst angezeigt wird. In diesem Fall möchten Sie wahrscheinlich vermeiden, auf das Skript zu warten, bevor Sie das betreffende Bild laden, da dies zu einer Verzögerung führen würde, wenn Benutzer es sehen können.

Sie können dieses Problem auf einer Website mit einer dynamisch geladenen Bildergalerie untersuchen:

  1. Geöffnet diese Beispielwebsite in einem neuen Tab.
  2. Drücken Sie Strg + Umschalt + J. (oder Befehl + Option + J. auf Mac), um DevTools zu öffnen.
  3. Klicke auf das Netz Zunge.
  4. Beim Einschnürung Dropdown-Liste auswählen Schnelles 3G.
  5. Ausschalten Cache deaktivieren Box.
  6. Seite neu laden.
Beispiel-1-vor-6341790
Dieser Wasserfall zeigt, dass Bilder erst geladen werden, nachdem der Browser die Ausführung des Skripts abgeschlossen hat. Dies führt zu unnötigen Verzögerungen bei der ersten Anzeige des Bildes für den Benutzer.

Verwenden von Vorspannung Dies ist hilfreich, da das Bild frühzeitig geladen wird und wahrscheinlich bereits vorhanden ist, wenn der Browser es anzeigen muss.

Beispiel-1-nach-5070924
Dieser Wasserfall zeigt, dass das erste Bild gleichzeitig mit dem Skript geladen wurde, wodurch unnötige Verzögerungen vermieden und eine schnellere Bildanzeige erzielt wurden.

Um zu sehen, welchen Unterschied das Vorladen macht, können Sie dieselbe dynamisch geladene Bildergalerie jedoch überprüfen mit dem ersten vorinstallierten Bild Befolgen Sie die Schritte im ersten Beispiel.

Eine alternative Möglichkeit, das Problem zu vermeiden, wäre die Verwendung eines markenbasierten Karussells Browser Preloader Sammeln Sie die notwendigen Ressourcen. Dieser Ansatz ist jedoch möglicherweise nicht immer praktikabel. (Wenn Sie beispielsweise eine vorhandene Komponente wiederverwenden, die nicht markenbasiert ist.)

Vorladen von Hintergrundbildern mit Bilderset

Wenn Sie unterschiedliche Hintergrundbilder für unterschiedliche Bildschirmdichten haben, können Sie diese in Ihrem CSS mit dem angeben Bildmenge Syntax. Der Browser kann dann basierend auf dem auswählen, welches angezeigt werden soll DPR.

 

Hintergrund-Bild: image-Set ( "cat.png" 1x "cat-2x.png" 2x);

 

Die obige Syntax ignoriert die Tatsache, dass für diese Funktion in Chromium- und WebKit-basierten Browsern Herstellerpräfixe erforderlich sind. Wenn Sie diese Funktion verwenden möchten, sollten Sie die Verwendung in Betracht ziehen Autoprefixer um das automatisch anzusprechen.

Das Problem mit CSS-Hintergrundbildern besteht darin, dass der Browser sie erst erkennt, nachdem er das gesamte CSS auf der Seite heruntergeladen und verarbeitet hat. , das kann viel CSS sein ...

Sie können dieses Problem auf einer Beispielwebsite mit überprüfen ansprechendes Hintergrundbild.

Beispiel-2-vor-6150023
In diesem Beispiel beginnt der Bilddownload erst, wenn das CSS vollständig heruntergeladen wurde, was zu einer unnötigen Verzögerung bei der Anzeige des Bildes führt.

Responsive Image Preloading bietet eine einfache, pirateriefreie Möglichkeit, diese Bilder schneller zu laden.

 

< link rel = pretoad href = cat.png as = image imagesrcset = " cat.png 1x, cat-2x.png 2x " >

 

Sie können überprüfen, wie sich das obige Beispiel verhält Vorinstalliertes anpassbares Hintergrundbild.

Beispiel-2-nach-6171228
Hier werden Bild und CSS gleichzeitig heruntergeladen, um Verzögerungen zu vermeiden und das Laden von Bildern zu beschleunigen.

Responsive Bildvorladung in Aktion

Das Vorladen Ihrer reaktionsschnellen Bilder kann sie theoretisch beschleunigen, aber was machen Sie in der Praxis?

Um das zu beantworten, habe ich zwei Kopien von a erstellt PWA Demo-Shop: eine, die keine Bilder vorlädty eine, die einige von ihnen vorlädt. Da die Site Bilder träge mit JavaScript lädt, wird es wahrscheinlich von Vorteil sein, die Bilder im ursprünglichen Ansichtsfenster vorab zu laden.

Das gab mir die folgenden Ergebnisse für keine Vorspannung und für Bildvorladung. Wenn wir uns die Rohzahlen ansehen, sehen wir, dass Start Render gleich geblieben ist, der Geschwindigkeitsindex sich leicht verbessert hat (273 ms, da die Bilder schneller ankommen, aber nicht einen großen Teil des Pixelbereichs einnehmen), sondern die tatsächliche Metrik, die erfasst wird Der Unterschied ist der Zuletzt gemalter Held Metrik, die sich um 1,2 Sekunden verbesserte. 🎉🎉

Natürlich erfasst nichts den visuellen Unterschied so gut wie ein Filmstreifenvergleich:

Beispiel-3-3734804
Der Filmstreifen zeigt, dass Bilder beim Vorladen erheblich schneller eintreffen, was zu einer erheblich verbesserten Benutzererfahrung führt.

Vorladen und ?

Wenn Sie mit empfänglichen Bildern vertraut sind, fragen Sie sich möglicherweise: „Was ist mit? ? «.

Die Web Performance Working Group spricht über das Hinzufügen einer Vorlast, die äquivalent zu ist srcset y Größen, aber nicht die Element, das den Anwendungsfall "Art Direction" anspricht.

Warum wird dieser Anwendungsfall "vernachlässigt"?

Obwohl es auch Interesse gibt, diesen Anwendungsfall zu lösen, gibt es immer noch eine Reihe von technische Probleme zu lösen Dies bedeutet, dass eine Lösung hier eine erhebliche Komplexität aufweisen würde. Darüber hinaus scheint es, dass der Anwendungsfall heute größtenteils angegangen werden kann, auch wenn dies auf hackige Weise geschieht (siehe unten).

Angesichts dessen entschied sich Web Performance WG zu senden srcset zuerst und sehen, ob die Nachfrage nach Äquivalent Bild Unterstützung entsteht.

Wenn Sie sich im Vorladezustand befinden Möglicherweise können Sie die folgende Technik als Lösung verwenden.

Angesichts des folgenden Szenarios:

 

< bild > < source src = " small_cat.jpg " media = " (maximale Breite: 400 Pixel) " > < source src = " medium_cat.jpg " media = " (maximale Breite: 800 Pixel) " > < img src = " vast_cat.jpg " >  Bild >

 

das Elementlogik (oder Bildquellenauswahllogik, um genau zu sein) wäre, über die zu gehen Hälfte Attribute der Suchen Sie in der angegebenen Reihenfolge die erste passende und verwenden Sie die angehängte Ressource.

Da die empfangende Vorspannung keine Vorstellung von "Reihenfolge" oder "erste Übereinstimmung" hat, sollten Haltepunkte in Folgendes übersetzt werden:

 

<Link rel = "Vorspannung" href = "small_cat.jpg" as = "image" media = "(max-width: 400px)"> <link rel = "Vorspannung" href = "medium_cat.jpg" as = "image" media = "(min-Breite: 400.1px) und (max-Breite: 800 Pixel)"> <link rel = "Vorbelastung" href = "large_cat.jpg" as = "image" media = "(min-Breite: 800.1px ) " >

 

Zusammenfassung

Das reaktionsschnelle Laden von Bildern bietet uns aufregende neue Möglichkeiten, reaktionsschnelle Bilder auf eine Weise vorzuladen, die bisher nur durch Hacks möglich war. Es ist eine wichtige Neuerung in der Toolbox des geschwindigkeitsbewussten Entwicklers und ermöglicht es uns sicherzustellen, dass die wichtigen Bilder, die wir unseren Benutzern so schnell wie möglich zeigen möchten, dort verfügbar sind, wenn wir sie benötigen.

 

R Marketing Digital