Im Moment sind Bilder in Bezug auf die Gesamtgröße der Übertragung die größten Assets im Web. und die Anzahl der Anfragen pro Seite. Die durchschnittliche Übertragungsgröße der Webseite beträgt ungefähr 2 MB (Stand: Juni 2022), wobei fast die Hälfte davon nur mit Bildern stammt. Keine Übertreibung dass die Optimierung von Bildanfragen die wichtigste Leistungsoptimierung ist, die Sie vornehmen können.
Später erfahren Sie, wie sich responsive Bilder weiterentwickelt haben, um die Probleme zu lösen, die entstehen, wenn versucht wurde, ein Bild für alle Eventualitäten bereitzustellen. In diesem Abschnitt lernen Sie wichtige Leistungsmesswerte für Bilder kennen und erfahren, wie Sie sie verbessern können.
Image-Anfragen verschieben
Sie lernen verschiedene Methoden kennen, mit denen Sie möglichst kleine und effiziente Bildanfragen erhalten.
wird nie etwas zustande kommen. Ich möchte gleich zu Beginn darüber sprechen, was die
wichtigste Änderung sein könnte,
stellen Sie Ihren Nutzern Bild-Assets bereit: das Attribut loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
Dieses Attribut stellt sicher, dass Bilder erst angefordert werden, wenn sie sich nah am Darstellungsbereich des Nutzers befinden, wodurch sie vom ursprünglichen Darstellungsbereich des Nutzers zurückgestellt werden. Seitenaufbau – also die Zeit, zu der der Browser die höchste Auslastung erreicht hat – und das Entfernen dieser Anfragen aus dem kritischen Rendering-Pfad.
So einfach es in der Praxis auch sein mag, kann die Verwendung dieses Attributs große positive Auswirkungen auf die Leistung haben: Ein Bild, das niemals Der Darstellungsbereich des Nutzers wird nie angefordert und es wird keine Bandbreite für Bilder verschwendet, die der Nutzer nie sehen wird.
Es gibt jedoch einen Haken: Durch das Zurückstellen dieser Anfragen werden die hyperoptimierte Prozesse für das Anfordern von
so früh wie möglich. Wenn loading="lazy" für img-Elemente im oberen Bereich des Layouts verwendet wird – und daher wahrscheinlicher
im Darstellungsbereich des Nutzers erscheinen, wenn die Seite zum ersten Mal geladen wird. Diese Bilder können sich für den Endnutzer erheblich langsamer anfühlen.
Abrufpriorität
Das Attribut loading ist ein Beispiel für eine Initiative mit umfassenderen Webstandards, die Entwicklern mehr Kontrolle darüber geben soll, wie Webbrowser
Anfragen zu priorisieren.
Wahrscheinlich sind Ihnen die grundlegende Ansätze zur Abrufpriorität:
Beispielsweise wird eine Anfrage für eine externe CSS-Datei im <head> eines Dokuments als wichtig genug betrachtet, um das Rendering zu blockieren, während eine Anfrage für eine
externe JavaScript-Datei direkt über </body> werden verzögert, bis das Rendern abgeschlossen ist. Wenn der Wert eines loading-Attributs für <img> „lazy“ ist,
Die zugehörige Bildanforderung wird zurückgestellt, bis der Browser bestimmt, dass sie einem Nutzer angezeigt wird. Andernfalls hat das Bild denselben
Priorität wie jedes andere Bild auf der Seite.
Mit dem Attribut fetchpriority können Sie
Entwicklungsteams genauere Kontrolle über die Priorität von Assets, sodass Sie Ressourcen kennzeichnen können
als 'hoch' und „niedrig“ Priorität im Verhältnis zu Ressourcen desselben Typs. Die Anwendungsfälle für fetchpriority ähneln denen loading
wenn auch viel breiter wird. Sie können beispielsweise fetchpriority="low" für ein Bild verwenden, das nur nach einer Nutzerinteraktion sichtbar ist
(ob dieses Bild in den Darstellungsbereich des Nutzers fällt oder nicht), um sichtbare Bilder an anderer Stelle auf der Seite zu priorisieren, oder fetchpriority="high"
, um ein Bild zu priorisieren, von dem Sie wissen, dass es sofort nach dem Rendern der Seite im Darstellungsbereich sichtbar ist.
Hinweis: fetchpriority unterscheidet sich von loading insofern, als sich das Browserverhalten nicht grundlegend ändert. Der Browser erhält keine Anweisungen,
bestimmte Assets vor anderen zu laden. Stattdessen erhalten sie einen wichtigen Kontext für die Entscheidungen, die in Bezug auf die Anforderung von Assets getroffen werden.
Wirkung von Bildern messen
Bei der Optimierung von Bild-Assets ist die wahrgenommene Leistung oft wichtiger und schwieriger zu messen als die gesamte Übertragung. für die Größe anpassen.
Web Vitals bieten messbare, umsetzbare Messwerte und Hinweise zur Verbesserung der Erfahrungen des Webs und hebt Probleme hervor, wie lange Antwortzeiten eines Webservers, Renderingprobleme und Interaktivitätsverzögerungen. Core Web Vitals sind eine Teilmenge dieser Ziele, insbesondere auf die direkte Erfahrung eines Nutzers mit einer einzelnen Seite. Dabei handelt es sich um eine Reihe technischer Messwerte, die zusammen bestimmen, wie schnell sich eine Erfahrung für einen Nutzer anfühlt.
Cumulative Layout Shift
Cumulative Layout Shift (CLS) ist ein Maß für die visuelle Stabilität. Mit diesem Messwert wird erfasst, Das Layout der Inhalte auf einer Seite verschiebt sich, wenn Assets geladen und die Seite gerendert wird. Alle, die viel Geld ausgegeben haben der Zeit, die das Web nutzt, haben während der langen Textdauer ihren Platz verloren, weil eine Seite "gesprungen" ist. da eine Webfont- oder Bildquelle plötzlich gerendert werden oder ein interaktives Element plötzlich von Ihrem Zeiger wegbewegt ist. Ein hoher CLS-Wert ist im besten Fall ein Ärgernis, Nutzerfehler – im schlimmsten Fall ein „Abbrechen“ Schaltfläche, die sich in einen Bereich verschiebt, in dem zuvor ein „Bestätigen“- Schaltfläche, wie Nutzende auf die Schaltfläche klicken.
Aufgrund der hohen Ladezeiten und des großen Platzes, den sie in einem Layout einnehmen können, liegt es nahe, dass Bilder eine häufige Ursache von hohen CLS-Werten.
Aufgrund der relativ jüngsten Änderungen in modernen Browsern ist es einfacher, als Sie vielleicht denken, hohe CLS-Werte aufgrund von Bildern zu vermeiden.
Wenn Sie seit einigen Jahren am Front-End arbeiten, sind Sie mit den Attributen width und height auf <img> vertraut:
Vor der groß angelegten Einführung von Preisvergleichsportalen waren diese die einzige Möglichkeit, die Größe eines Bildes zu steuern.
<img src="image.jpg" height="200" width="400" alt="…">
Diese Attribute wurden nicht mehr verwendet, um unsere stilistischen Anforderungen von unserem Markup getrennt zu halten. Dies gilt insbesondere für responsive
Aufgrund des Webdesigns war es notwendig, über CSS eine prozentbasierte Größenanpassung zu definieren. In den Anfängen des responsiven Webdesigns
die nicht verwendeten Attribute width und height da die Werte, die wir in unserem CSS angegeben haben – max-width: 100% und
height: auto.
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
Nachdem die Attribute height und width wie im vorherigen Beispiel entfernt wurden, kann der Browser nur noch diese Methode ermitteln.
Die Höhe des Bilds besteht in dieser Situation darin, die Quelle anzufordern, zu parsen und mit dem eigentlichen Seitenverhältnis zu rendern, basierend auf dem
Breite der Fläche, die er im Layout einnimmt, nachdem Stylesheets angewendet wurden. Dieser Vorgang findet größtenteils statt, nachdem die Seite
wobei die neu berechnete Höhe zusätzliche Layoutverschiebungen verursacht.
Ab 2019 wurde das Browserverhalten aktualisiert, um die Attribute width und height unterschiedlich zu verarbeiten. Anstatt die Werte dieser Felder zu verwenden,
Attribute verwenden, um die feste, pixelbasierte Größe eines img-Elements im Layout zu bestimmen, können diese Attribute
Das Seitenverhältnis des Bildes, wobei die Syntax dieselbe ist. Moderne Browser dividieren diese Werte, um
das intrinsische Seitenverhältnis eines img-Elements vor dem Rendern der Seite bestimmen, sodass es den Platz reserviert, den das Bild beim Rendern des Layouts einnimmt.
In der Regel sollten Sie die Attribute height und width für <img> mit Werten verwenden, die der intrinsischen Größe Ihrer Bildquelle entsprechen.
solange Sie sicherstellen, dass Sie height: auto neben max-width: 100% angegeben haben, um die Höhe aus dem HTML-Attribut zu überschreiben.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
Wenn Sie die Attribute width und height für die <img>-Elemente verwenden, können Sie einen hohen CLS-Wert aufgrund von Bildern vermeiden.
Bei diesem Ansatz gibt es keine Nachteile, da er auf dem bewährten Browserverhalten basiert – also in jedem Browser.
mit Unterstützung für einfachen CSS-Code funktioniert wie gewohnt, wobei die Attribute height und width in Ihrem Markup durch Ihre Stile überschrieben werden.
Mit den Attributen width und height lassen sich CLS-Probleme problemlos vermeiden, da der nötige Layoutraum für Ihre Bilder reserviert wird.
Nutzer mit leerer Lücke oder Platzhalter von geringer Qualität, während
und warten, bis ein Bild übertragen wurde,
ist ebenfalls nicht ideal. Es gibt Dinge, die Sie tun können, um das Messbare und
Auswirkungen von langsam ladenden Bildern ist die einzige Möglichkeit, ein vollständig gerendertes Bild einem Nutzer schneller zu präsentieren, indem die Übertragungsgröße reduziert wird.
Largest Contentful Paint
Largest Contentful Paint (LCP) misst die Zeit, die benötigt wird, um das größte „contentful“-Element, das im Darstellungsbereich des Nutzers sichtbar ist, zu rendern: Inhaltselement, das den größten Prozentsatz der sichtbaren Seite einnimmt. Es mag auf den ersten Blick vielleicht wie ein zu spezifischer Messwert erscheinen, -Element dient aus der Perspektive des Nutzers als praktischer Proxy für den Punkt, an dem der Großteil der Seite gerendert wurde. Der LCP ist ein entscheidender ein Maß für die (wahrgenommene) Leistung.
Messwerte wie DOMContentLoaded oder das window.onload-Ereignis können nützlich sein, um zu ermitteln, wann der Ladeprozess der aktuellen Seite erfolgt.
technisch abgeschlossen ist, entsprechen jedoch nicht unbedingt der User Experience der Seite. Eine leichte Verzögerung beim Rendern eines Elements
außerhalb des Darstellungsbereichs des Nutzers würden bei beiden Messwerten berücksichtigt, von echten Nutzern jedoch wahrscheinlich nicht erkannt werden.
Ein langer LCP bedeutet, dass der erste Eindruck des Nutzers von einer Seite – dem wichtigsten Inhalt innerhalb des aktuellen Darstellungsbereichs – ist, dass die Seite langsam ist.
oder komplett aufgeschlüsselt werden.
Die vom LCP erfasste Wahrnehmung der Nutzer wirkt sich direkt auf die Nutzererfahrung aus. Ein Experiment von Vodafone erst letztes Jahr fanden heraus, dass eine Verbesserung des LCP um 31% nicht nur zu 8% mehr Umsatz führte – allein ein starkes Ergebnis –, sondern auch 15 % für die Gesamtzahl der Nutzer verzeichneten. Steigerung der Anzahl der Besucher, die zu potenziellen Kunden wurden („Visitor-to-Lead-Rate“), und eine Verbesserung der Nutzeranzahl um 11 %. die ihren Einkaufswagen besucht haben ("cart-to-visit-Rate").
Auf mehr als 70% der Webseiten ist das größte Element am Anfang
Der Darstellungsbereich beinhaltet ein Bild, entweder als eigenständiges <img>-Element oder als Element mit einem Hintergrundbild. Mit anderen Worten:
70% der Seiten Der LCP-Wert basiert auf der Bildleistung. Warum ist nicht viel Vorstellungskraft, um zu sehen, warum das so ist: groß, Aufmerksamkeit erregt
dass sich Bilder und Logos
mit hoher Wahrscheinlichkeit „above the fold“ befinden.
Es gibt verschiedene Möglichkeiten, LCP-Verzögerungen zu vermeiden: Geben Sie loading="lazy" niemals für „above the fold“ (ohne Scrollen sichtbar) an. Bild,
Das Verzögern der Anfrage bis zu dem Zeitpunkt, zu dem die Seite gerendert wurde, hat wahrscheinlich erhebliche negative Auswirkungen auf den LCP-Wert.
Zweitens kann der Browser durch die Verwendung von fetchpriority="high" darüber informiert werden, dass die Übertragung dieses Bildes über Bildern an anderer Stelle auf der Seite priorisiert werden sollte.
Um den LCP-Wert einer Seite zu verbessern, sollten Sie vor allem die Zeit zum Übertragen und Rendern dieser Bilder dauert. Halten Sie dazu Ihre Bildquellen so klein und effizient wie und sicherzustellen, dass den Nutzern nur die Bild-Assets zur Verfügung stehen, mit denen Sie für ihre Browserkontexte.
Fazit
Bild-Assets entlasten die Nutzer am stärksten. Bandbreite – das ist die Bandbreite, die bei der Übertragung aller anderen erforderlichen Assets um eine Seite zu rendern. Bilder verursachen erhebliche Probleme in Bezug auf die wahrgenommene Leistung, sowohl während als auch nach der sie umgebenden Seite. Layout wurde gerendert. Kurz gesagt: Bild-Assets beschädigen.
So abschreckend das auch sein mag, obwohl „das Web mit weniger Bildern besser wäre“ allein im Hinblick auf die Leistung gilt, würde es seinen Nutzern auch einen enormen Bösservice bereiten. Bilder sind ein wichtiger Bestandteil des Webs und Sie sollten keine Kompromisse bei der Qualität nur um die Leistung zu steigern.
Im weiteren Verlauf dieses Kurses lernen Sie die Technologien kennen, auf denen unsere Bild-Assets basieren, und Sie lernen Techniken kennen, mit denen Sie ohne Einbußen bei der Qualität.