So steigern Sie die Medienleistung mit kleinem Budget

Dieser Artikel wurde freundlicherweise von unseren lieben Freunden bei Cloudinary unterstützt, die der Community helfen, ihre digitalen Erlebnisse schnell und einfach über jeden Browser, jedes Gerät und jede Bandbreite zu erstellen, zu verwalten und bereitzustellen. Danke!

Der amerikanische Gelehrte Mason Cooley beschrieb geschickt eine harte Tatsache des Lebens: „Ein Budget nimmt dem Geld den Spaß.“ Zweifellos beleben Medien Websites, indem sie ihnen Anziehungskraft, Aufregung und Faszination verleihen, ganz zu schweigen von der Verlockung, auf einer Seite zu bleiben und sie häufig erneut zu besuchen. Genauso wie unkontrollierte Ausgaben auf lange Sicht nichts Gutes verheißen, dezimieren nicht im Budget vorgesehene digitale Medien die Leistung der Website.

Ein typisches Beispiel: Eine Verlangsamung des Seitenladevorgangs um nur eine Sekunde könnte Amazon 1,6 Milliarden US-Dollar an Jahresumsatz kosten. Von den vielen Faktoren, die sich auf die Seitenladegeschwindigkeit auswirken, sind die Medien ein wichtiger Faktor. Daher die dringende Notwendigkeit, die Optimierung von Medien zu priorisieren. Indem Sie Ihr Geld direkt für diese Aufgabe ausgeben und Ihre Medien budgetieren, werden Sie auf lange Sicht erhebliche Einsparungen und Vorteile erzielen.

Leistungsbudgets

„Ein Leistungsbudget ist '... genau das, wonach es sich anhört: Sie legen ein 'Budget' auf Ihrer Seite fest und erlauben der Seite nicht, dieses zu überschreiten. Dies kann eine bestimmte Ladezeit sein, aber es ist normalerweise einfacher, ein Gespräch zu führen, wenn Sie das Budget in die Anzahl der Anfragen oder die Größe der Seite aufschlüsseln.“

– Tim Kadlec

Ein Leistungsbudget als Mechanismus zur Planung eines Weberlebnisses und zur Verhinderung von Leistungsabfall kann aus folgenden Maßstäben bestehen:

• Gesamtseitengewicht,
• Gesamtzahl der HTTP-Anfragen,
• Seitenladezeit in einem bestimmten Mobilfunknetz,
• Erste Eingangsverzögerung (FID)
• First Contentful Paint (FCP),
• Kumulative Layoutverschiebung (CLS),
• Größte zufriedene Farbe (LCP).

Vitaly Friedman hat eine ausgezeichnete Checkliste, die die Komponenten beschreibt, die sich auf die Webleistung auswirken, zusammen mit nützlichen Tipps zu Optimierungstechniken. Wenn Sie sich mit diesen Komponenten vertraut machen, können Sie Leistungsziele festlegen .

Mit klar dokumentierten Leistungszielen können verschiedene Teams sinnvolle Gespräche über die optimale Bereitstellung von Inhalten führen. Ein Budget kann ihnen beispielsweise bei der Entscheidung helfen, ob eine Seite fünf Bilder – oder drei Bilder und ein Video – enthalten und dennoch innerhalb der geplanten Grenzen bleiben soll.

Ein Leistungsbudget als eigenständige Metrik ist jedoch möglicherweise nicht sehr hilfreich. Deshalb müssen wir die Leistung mit den Unternehmenszielen in Beziehung setzen.

Geschäftsleistung

Wenn Sie viele Bytes für nicht optimale Videos und Bilder verschwenden, wird das Rich-Media-Erlebnis nicht mehr so ​​reichhaltig sein. Eine Organisation existiert, um Ergebnisse zu erzielen, z. B. Menschen zum Kauf zu verleiten, sie aufzuklären, sie zu motivieren oder Hilfe und Freiwillige zu suchen. Jeder mit einer Webpräsenz würde die Beziehung zwischen den Auswirkungen verschiedener Leistungskennzahlen auf Geschäftskennzahlen zu schätzen wissen.

WPOStats hebt buchstäblich Hunderte von Fallstudien hervor, die zeigen, wie ein Leistungsabfall – von einigen Hundert Millisekunden auf Sekunden – zu einem massiven Rückgang des Jahresumsatzes führen kann. Das Zeichnen dieser Art von Beziehung hilft sehr dabei, die Auswirkungen der Leistung auf das Geschäft zu verfolgen und letztendlich eine Leistungskultur für Organisationen aufzubauen.

Ebenso können langsame Websites einen dramatischen Einfluss auf die Konversion haben. Eine schwierige Herausforderung für Online-Unternehmen besteht darin, das richtige Gleichgewicht zwischen der Einbindung des Publikums und der Einhaltung des Leistungsbudgets zu finden.

Es ist daher nicht verwunderlich, dass optimierte visuelle Medien eine entscheidende Komponente für die Einbindung des Publikums sind, z. B. ein fesselndes Video, das eine Geschichte über Ihr Produkt oder Ihre Dienstleistung mit relevanten, interessanten und ansprechenden visuellen Elementen verknüpft.

Laut MIT-Neurowissenschaftlern kann unser Gehirn visuelle Medien in weniger als 13 Millisekunden aufnehmen und verstehen, während der durchschnittliche Leser über 3,3 Minuten braucht, um Text zu verstehen, oft nach erneutem Lesen und Querverweisen auf andere Stellen. Kein Wunder also, dass Mikrovideoinhalte (normalerweise nur 10–20 Sekunden lang) oft große Interaktionen und Konversionsgewinne liefern.

Anziehungskraft von Videos

Beim Online-Shopping erwarten wir detaillierte Produktbilder . Seit Jahren bevorzuge ich es, Produkte zu durchstöbern, die durch Videos ergänzt werden, die beispielsweise zeigen, wie man das Produkt verwendet oder vielleicht wie man es zusammenbaut, oder die Anwendungsfälle aus dem wirklichen Leben demonstrieren.

Abgesehen von meiner persönlichen Erfahrung bestätigen viele Untersuchungen die Bedeutung von Videoinhalten:

• 96 % der Verbraucher finden Videos hilfreich, wenn sie Online-Kaufentscheidungen treffen.
• 79 % der Online-Käufer sehen sich für Informationen zu einem Produkt lieber ein Video an, als den Text auf einer Webseite zu lesen.
• Das richtige Produktvideo kann die Conversions um über 80 % steigern.

Apropos Bereitstellung von Videos im Web,

„Die durchschnittliche Videogröße nimmt jedes Jahr dramatisch zu, mehr auf Mobilgeräten als auf Desktops. Das mag in einigen Fällen gerechtfertigt sein, da Mobilgeräte oft hochauflösende Bildschirme haben, aber es kann auch an der fehlenden Fähigkeit liegen, unterschiedliche Videogrößen allein über HTML anzubieten. Viele große Videos im Web werden von Hand auf Marketingseiten platziert und verfügen nicht über ausgeklügelte Medienserver, um angemessene Größen bereitzustellen. Ich hoffe daher, dass wir in Zukunft ähnliche einfache HTML-Funktionen für die Videobereitstellung sehen werden, die wir in responsiven Bildern sehen. ”

– Scott Jehl

Dasselbe Gefühl wurde von Convivas Q4 2020 State of Streaming (Registrierung erforderlich) vermittelt, in dem festgestellt wurde, dass Mobiltelefone 20 % mehr Pufferprobleme , 19 % häufigere Videostartfehler und 5 % längere Startzeit als andere Geräte hatten.

Abgesehen von Rendering-Problemen kann die Videobereitstellung auch die Bandbreitenkosten erhöhen, insbesondere wenn Sie die optimalen Formate des Browsers nicht bereitstellen können. Wenn Sie kein Content Delivery Network (CDN) oder mehrere CDNs verwenden, um Benutzer für reduzierte Latenzen den nächstgelegenen Edge-Regionen zuzuordnen – eine Praxis, die als suboptimales Routing bezeichnet wird –, können Sie den Start des Videos verlangsamen.

Ebenso waren nicht optimierte Bilder die Hauptursache für aufgeblähte Seiten. Laut Web Almanac ist der Unterschied in Bildbytes, die an mobile oder Desktop-Geräte gesendet werden, sehr gering, was zu einer weiteren Verschwendung von Bandbreite für Geräte führt, die nicht wirklich alle zusätzlichen Bytes benötigen.

Zweifellos schadet es den Geschäftszielen, mit ansprechenden, aber nicht optimierten Inhalten über Bord zu gehen, und hier kommt die hohe Kunst des Ausgleichs ins Spiel.

Die Kunst, Leistung mit Medieninhalten in Einklang zu bringen

Auch wenn Rich Media das Nutzerengagement fördern kann, müssen wir die Kosten für deren Bereitstellung mit der Leistung Ihrer Website und Ihren Geschäftszielen in Einklang bringen. Eine Alternative besteht darin, Videos über einen Drittanbieter wie YouTube oder Vimeo zu hosten und bereitzustellen.

Trotz Bandbreiteneinsparungen ist dieser Ansatz jedoch mit Kosten verbunden. Als Inhaltseigentümer können Sie kein vollständig angepasstes Markenerlebnis erstellen oder Personalisierung anbieten. Und natürlich müssen Sie Ihre Bilder hosten und bereitstellen.

Sie müssen Ihre Inhalte nicht auslagern. Es sind auch andere Optionen verfügbar. Erwägen Sie, Ihr System für eine optimale Medienbereitstellung zu überarbeiten, indem Sie Folgendes tun:

Verstehen Sie Ihre aktuelle Nutzung

Untersuchen Sie das Gewicht Ihrer Webseiten und die Größe ihrer Medieninhalte. Die Web-Research-Expertin Tammy Everts empfiehlt sicherzustellen, dass Seiten für Mobilgeräte weniger als 1 MB und für alles andere weniger als 2 MB groß sind. Identifizieren Sie außerdem die Ressourcen, die auf kritischen Seiten angezeigt werden.

Können Sie beispielsweise einen Textabschnitt und die dazugehörigen Bilder durch ein kurzes Video ersetzen? Wie würde sich diese Entscheidung auf Ihre Geschäftsziele auswirken? In dieser Phase müssen Sie möglicherweise Ihr Real User Monitoring (RUM) und Analytics überprüfen und die kritischen Seiten identifizieren, die zu höheren Conversion- und Engagement-Raten führen.

Stellen Sie außerdem sicher, dass Sie die Core Web Vitals (CWVs) von Google als Teil Ihres Toolkits mit Tools wie LightHouse synthetisch verfolgen. Sie können CWVs auch durch Real-User-Monitoring (RUM) wie CrUX messen. Da die CWVs auch ein Signal für Google an Crawler sein werden, ist es sinnvoll, diese Metriken zu überwachen und zu optimieren: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).

Servieren Sie das richtige Format

Stellen Sie Bilder oder Videos in dem am besten geeigneten Format in Bezug auf Größe und Auflösung für das Anzeigegerät oder den Browser bereit. Möglicherweise benötigen Sie zu diesem Zweck ein Image-CDN. Alternativ können Sie Varianten wie WebM, AVIF, JPEG-XL, HEIC usw. erstellen und basierend auf den anfordernden User-Agent- und Accept-Headern selektiv den richtigen Inhaltstyp bereitstellen.

Für einmalige Konvertierungen können Sie Tools wie Squoosh.app oder avif.io ausprobieren. Eine verwandte Praxis besteht darin, animierte GIFs in Videos umzuwandeln. Weitere Informationen finden Sie in diesem Web.dev-Artikel. Möchten Sie versuchen, einen Workflow für die Videoveröffentlichung einzurichten? Sehen Sie sich die großartigen Tipps im Artikel Optimieren von Videos für Größe und Qualität an.

Servieren Sie die richtige Größe

Über 41 % der Bilder auf Mobilgeräten haben eine falsche Größe. Anstatt also eine feste Breite bereitzustellen, schneiden Sie Ihre Bilder und Videos mit Tools wie Lazysizes auf die Containergröße zu. Besser noch, KI-Tools, die interessante Bereiche erkennen können, während Sie Bilder zuschneiden, könnten Ihnen eine Menge Zeit und Mühe ersparen. Sie können auch natives Lazy-Loading für Bilder nutzen, die sich unterhalb der Falte befinden.

Fügen Sie Ihren Videos Untertitel hinzu

Fast 85 % der Videos werden ohne Ton abgespielt. Das Hinzufügen von Untertiteln bietet nicht nur ein zugängliches Erlebnis, sondern würde auch die Aufmerksamkeit des Publikums auf sich ziehen und das Engagement steigern. Das Transkribieren von Videos kann jedoch eine mühsame Arbeit sein. Sie können mit einem KI-basierten Transkriptionsdienst arbeiten und ihn stattdessen verbessern, um den Arbeitsablauf zu automatisieren.

Über mehrere CDNs bereitstellen

CDNs können die Latenz auf der letzten Meile verringern, die Startzeit eines Videos verkürzen und potenziell Pufferprobleme reduzieren. Laut einer Studie von Citrix kann eine Multi-CDN-Strategie die Latenz noch weiter reduzieren und bei lokalen Ausfällen in den Edge-Knoten des CDN eine kontinuierliche Verfügbarkeit bieten.

Anstatt mehrere diskrete Tools zu nutzen, könnten Sie ein Produkt wie den Media Optimizer von Cloudinary erkunden, der Medien effektiv und effizient optimiert und das richtige Format und die richtige Qualität über Multi-CDN-Edge-Knoten liefert. Mit anderen Worten, Media Optimizer optimiert sowohl Qualität als auch Größe und bietet hohe visuelle Wiedergabetreue in kleinen Dateien.

Video progressiv rendern

Es hat sich gezeigt, dass die automatische Wiedergabe von Vorschauvideos auf YouTube die Wiedergabezeit von Videos um über 90 % erhöht. Die automatische Videowiedergabe hat wenige Vorteile und viele Nachteile, daher ist es wichtig, darauf zu achten, wann sie verwendet wird und wann nicht. Es ist wichtig, dass Sie mindestens die Möglichkeit haben, das Video anzuhalten.

Eine gute Möglichkeit, das Budget für die Seitengröße auszugleichen, wäre, zunächst nur KI-erstellte Videovorschauen und Posterbilder bereitzustellen und das vollständige Video nur dann zu laden, wenn der Nutzer auf das Video klickt. Auf diese Weise können Sie unnötige Downloads vermeiden und das Laden von Seiten beschleunigen.

Alternativ laden Sie am Anfang ein Vorschauvideo und lassen den Player automatisch die Vollversion abspielen. Sobald die Vorschau abgeschlossen ist, überprüft der Player den Verbindungstyp des Geräts mit der Netzwerkverbindungs-API und wechselt bei guter Konnektivität des Benutzers die Quelle von der Vorschau zum tatsächlichen Video.

Sie können eine Beispielseite für eine Demo überprüfen. Hier ist ein Tipp : Da CDNs Netzwerkverbindungstypen zuverlässiger erkennen können, könnte Ihr Code in Produktionsqualität das CDN nutzen, um die Netzwerkgeschwindigkeit zu erkennen, auf deren Grundlage Ihr Clientcode das Langformvideo schrittweise laden könnte.

Einpacken

In Zukunft werden visuelle Medien dank ihrer bemerkenswerten Fähigkeit, Geschichten auf eine Weise zu erzählen, die es mit Worten nicht kann, weiterhin ein dominierendes Element für Websites und mobile Apps sein. Die Bestimmung der richtigen Inhalte für die Bereitstellung hängt jedoch sowohl von Ihrer Geschäftsstrategie als auch von der Leistung Ihrer Website ab.

„Ein Leistungsbudget leitet Ihre Entscheidungen darüber, welche Inhalte angezeigt werden sollen, nicht. Vielmehr geht es darum, wie Sie diesen Inhalt anzeigen. Wichtige Inhalte vollständig zu entfernen, um das Gewicht einer Seite zu verringern, ist keine Performance-Strategie.“

– Tim Kadlec

Das ist ein guter Ratschlag, den man sich merken sollte.