So optimieren Sie die Webleistung und das Endergebnis

Geduld ist keine Tugend für Website-Besucher und Online-Shopper. Jeder Bruchteil einer Sekunde zählt, wenn es darum geht, einen Besucher auf Ihrer Website zu halten – oder zu verlieren.

Laut Kissmetrics ist die Ladezeit ein wichtiger Faktor für den Seitenabbruch. Da der durchschnittliche Webbesucher keine Geduld mit einer Seite hat, die zu lange zum Laden braucht, steigt der Abbruch prozentual mit jeder Sekunde Ladezeit. Fast 40 % der Benutzer verlassen eine Seite nach 10 Sekunden, stellte der Blog fest. Benutzer des mobilen Internets sind wahrscheinlich am frustrierendsten über dieses Problem – 73 % gaben an, dass sie auf eine Website gestoßen sind, die viel zu langsam zum Laden war.

Das Seitenladeproblem wirkt sich direkt auf das Einkaufsverhalten der Website-Besucher aus. Die Kissmetrics stellten außerdem fest, dass 79 % der Käufer, die mit der Leistung der Website unzufrieden waren, mit geringerer Wahrscheinlichkeit erneut auf derselben Website einkaufen. Fast die Hälfte der Verbraucher erwartet, dass Seiten in 2 Sekunden oder weniger geladen werden, und eine Verzögerung von 1 Sekunde verringert die Kundenzufriedenheit um 16 %.

Die Folgen dieser Verzögerungen schlagen sich in echtes Geld nieder. Der E-Commerce-Riese Amazon gab bekannt, dass eine Verlangsamung des Seitenaufbaus von nur 1 Sekunde ihn 1,6 Milliarden US-Dollar an Verkaufserlösen kosten würde. In ähnlicher Weise stellte Google fest, dass eine Verlangsamung der Suchergebnisse um nur vier Zehntelsekunden zu einem Verlust von 8 Millionen Suchanfragen pro Tag führen würde, was zu Millionen weniger Online-Werbung führt.

Zum Kern des Problems vordringen

Die größten Einflussfaktoren auf die Ladezeit sind Bilder, Videos und Grafiken. Heutige Websites enthalten mehr visuelle Elemente und weniger Text, um Besucher anzuziehen. Laut HTTP Archive sind fast 64 % des durchschnittlichen Gewichts einer Website Bilder, während Videos weitere 8 % ausmachen.

Da diese Arten von Medien fast drei Viertel der Websitegröße ausmachen, ist es wichtig, dass Sie Bilder und Videos auf Ihrer Website effizienter verwalten, um die Leistung und die Konversionsraten zu verbessern. Sehen wir uns einige Schritte an, die Sie ergreifen können, um die Auswirkungen von Bildern und Videos auf die Leistung Ihrer Website zu reduzieren.

Verwenden Sie effizientere, modernere Bildformate

Google hat Chrome-Browsern Unterstützung für sein WebP-Bildformat hinzugefügt, und Microsoft hat dasselbe für JPEG-XR in den meisten seiner Internet Explorer- und Edge-Browser getan. Aber viele Entwickler haben diese Änderungen immer noch nicht angenommen und bleiben bei den gleichen JPG- und PNG-Formaten, anstatt die Möglichkeiten zu nutzen, wie die modernen Formate ihre Websites optimieren können.

Idealerweise sollten Sie Bilder gegebenenfalls in WebP und JPEG-XR konvertieren und die Komprimierungsqualität anpassen, um ein Gleichgewicht zwischen den Formaten herzustellen. Es ist auch wichtig, den spezifischen Browser zu erkennen, der auf jedes Bild zugreift, und eine für den jeweiligen Browser optimierte Version des Bildes bereitzustellen. Auf diese Weise können Sie sicherstellen, dass die Benutzer die bestmöglichen Bilder in Bezug auf die visuelle Qualität und die Optimierung der Dateigröße erhalten, ohne Ihre Website zu verlangsamen.

Eliminieren Sie verschwenderische browserseitige Größenanpassungen

Entwickler verwenden häufig die Browser-seitige Größenänderung von Bildern als Abkürzung, anstatt die Größe von Bildern auf der Serverseite zu ändern. Während das Endergebnis auf modernen Browsern genau gleich aussieht, sind die Auswirkungen auf die Bandbreite ganz anders. Durch die browserseitige Größenänderung verschwenden Website-Besucher wertvolle Zeit mit dem Herunterladen eines unnötig großen Bildes und Sie verschwenden Bandbreite mit der Bereitstellung.

Bei älteren Browsern ist das Problem noch ausgeprägter, da ihre Größenanpassungsalgorithmen normalerweise unterdurchschnittlich sind. Sie müssen sicherstellen, dass Ihre Bilder perfekt zu den erforderlichen Abmessungen der Website passen. Es lohnt sich, verschiedene Thumbnails desselben Bildes zu erstellen, anstatt ein großes Bild zu liefern und sich darauf zu verlassen, dass der Browser die Größe ändert. Es stehen einige Tools zur Verfügung, die dabei helfen können, z. B. ein Open-Source-Image-Resizer wie ImageMagick oder eine Cloud-basierte Lösung wie Cloudinary.

Verwenden Sie die richtigen Bilddateitypen

JPEG, PNG und GIF sind die gängigsten Dateiformate, die heutzutage auf Websites verwendet werden, aber jedes hat sehr unterschiedliche Rollen. Verwenden Sie das falsche Format und verschwenden Sie die Zeit Ihrer Besucher und Ihr eigenes Geld. Ein häufiger Fehler ist die Verwendung von PNGs zur Übermittlung von Fotos. Es gibt ein weit verbreitetes Missverständnis, dass PNGs als verlustfreie Formate die höchstmögliche Reproduktion der Fotos liefern.

Während dies im Allgemeinen zutrifft, ist dies auch eine ziemlich unnötige Optimierung. Es ist wichtig zu beachten, welches Bildformat für die angezeigten Inhalte verwendet werden soll. PNG sollte für computergenerierte Bilder (Diagramme, Logos usw.) verwendet werden oder wenn Sie Transparenz in Ihrem Bild benötigen (Bildüberlagerungen); JPEG, wenn Sie ein aufgenommenes Foto zeigen; und GIF, wenn eine Animation erforderlich ist (Ajax-Ladeanimation usw.).

Verwenden Sie nicht eine einzige Bildgröße für alle Bereitstellungsmedien

Ihre Website wird auf vielen verschiedenen Geräten angesehen, insbesondere da Smartphones, Tablets und Smartwatches von den Verbrauchern bevorzugt werden. Häufig bieten Entwickler die gleichen Bilder für alle Geräteauflösungen an, indem sie eine clientseitige Größenanpassung für die Bilder verwenden. Die Bilder sehen vielleicht toll aus, aber Besucher verschwenden Zeit damit, unnötig große Bilder auf ihre Geräte zu laden, und Sie zahlen für redundante Bandbreitennutzung.

Dies ist besonders unfair gegenüber 3G-Benutzern und Roaming-Benutzern, die einen großen Aufpreis zahlen, um die nutzlos extra hochauflösenden Bilder herunterzuladen. Um diese Probleme zu vermeiden, sollten Sie die Mobilgeräte und die Auflösung der Besucher mithilfe ihres Benutzeragenten identifizieren. Rufen Sie mit der richtigen Auflösung das am besten passende Bild von Ihren Servern ab. Dazu müssen Sie für jedes Ihrer Originalbilder eine Reihe von Miniaturansichten zur Verfügung stellen. Es sind hervorragende Javascript-Pakete verfügbar, die diesen Prozess automatisieren.

Responsive Design nutzen

Jedes Gerät, mit dem ein Besucher auf Ihre Website zugreift, hat eine andere Auflösung. Das Markup einer Website muss sich anpassen, um auf allen verschiedenen Geräten und in verschiedenen Auflösungen, Pixeldichten und Ausrichtungen der Mobilgeräte perfekt auszusehen. Das Verwalten, Bearbeiten und Bereitstellen von Bildern ist eine der größten Herausforderungen des responsiven Designs, mit denen Webentwickler konfrontiert sind.

Aufgrund dieser Herausforderungen werden viele Websites mit den Bildern mit der höchsten Auflösung erstellt, die möglicherweise benötigt werden, und je nach Haltepunkt einfach clientseitig herunterskaliert. Dieser Prozess ist ineffizient und beeinträchtigt die Leistung. Aber es gibt Optionen, wie das Open-Source-Tool Responsive Breakpoints, das Ihnen helfen kann, alle benötigten Bildgrößen sowie den entsprechenden HTML-Code zu generieren.

Nutzen Sie Content Delivery Networks (CDNs)

CDNS verfügt in der Regel über Server, die strategisch auf der ganzen Welt bereitgestellt werden, um die Hin- und Rücklaufzeiten von Inhalten zu verkürzen. CDNs ermöglichen eine schnellere Bereitstellung von Bildern für Benutzer und verringern die Wahrscheinlichkeit von Abstürzen, verbessern die SEO-Leistung und verbessern die Benutzererfahrung. Wenn Sie sich für ein CDN entscheiden, müssen Sie den Grad der globalen Abdeckung, die Caching-Rate, die Fähigkeit, logische Operationen am Rand auszuführen, die durchschnittlichen Reaktionszeiten und andere Metriken wie die durchschnittlichen Invalidierungszeiten berücksichtigen.

Die Auswirkungen des Wandels

Durch die Anwendung dieser Best Practices können Sie die Benutzererfahrung wirklich verbessern und Besucher dazu ermutigen, länger zu bleiben, mehr zu stöbern, sich zu engagieren und Einkäufe zu tätigen. Betrachten Sie die Ergebnisse dieser Unternehmen:

Apartment List, eine Online-Ressource, die Einzelpersonen bei der Suche nach Mietwohnungen hilft, musste sich mit einer Vielzahl unterschiedlicher Bildformate und Auflösungen auseinandersetzen, als es Daten-Feeds von Bildern aus den verschiedenen auf seiner Website vorgestellten Apartmentgemeinschaften aufnahm. Durch die Umwandlung all dieser Bilder in optimale Bilder für die Präsentation auf Mobilgeräten unterschiedlicher Größe sowie auf Desktops und durch die Nutzung von Responsive-Design-Techniken verzeichnete das Unternehmen eine Steigerung seiner Konversionsraten um fast 20 %.

KartRocket, eine SaaS-basierte E-Commerce-Plattform, die ein transparentes und vollständiges E-Commerce-Ökosystem bietet, mit dem KMUs schnell und einfach Online-Shops erstellen können, musste einen Weg finden, die Qualität der Bilder sicherzustellen, ohne die Ladezeit oder die Websiteleistung zu beeinträchtigen Kunden. Es nutzte Tools zur dynamischen Steuerung von Bildern, sodass sie für kleine Miniaturansichten, große Bannerbilder und Hauptproduktbilder optimiert wurden. Dieser Ansatz ermöglichte es KartRocket, die Reaktionszeit für das Laden von Bildern um das 100-fache zu erhöhen.

Das Endergebnis

Wenn Zeit Geld ist, können es sich Websitebesitzer nicht leisten, nicht alle notwendigen Schritte zu unternehmen, um das Erlebnis ihrer Besucher zu verbessern. Selbst eine Verzögerung von einem Bruchteil einer Sekunde beim Laden einer Seite kann zu Umsatz- und Vertrauensverlusten auf Seiten des Verbrauchers führen.

In Anbetracht dessen, dass Bilder und Videos die größten Bandbreitenfresser auf den meisten Websites sind, müssen Sie Ihr Webdesign und Ihre Bildformate ernsthaft prüfen und dann die notwendigen Schritte unternehmen, um sicherzustellen, dass die Medien so optimiert sind, dass Ihre Website – ganz zu schweigen von Ihren Einnahmen und Kundenwahrnehmung – darunter nicht leiden.