Schnelligkeit versus Design beim Onlineshop

Optik versus Performance: Hintergründe der kniffligen Kombination

Es gibt in der digitalen Welt eine feste Regel: Je besser etwas ausschaut, je vielfältiger es funktioniert, desto wahrscheinlicher ist es, dass seine Darstellung Ressourcen „frisst“. Ganz ähnlich wie ein Auto, da braucht ein 500-PS-Motor auch mehr Kraftstoff als einer mit 75 PS.

Insbesondere bei Onlineshops ist es jedoch von zentraler Wichtigkeit, dass du beides gleichermaßen bedienen kannst. Just auf solchen Websites ist das jedoch mit besonderen Schwierigkeiten verbunden.

Was eine Shop-Website in Sachen Tempo ausmacht

Ein Onlineshop bedeutet, dass im Zweifelsfall die ganze Welt voller potenzieller Kunden ist – erst recht in einer Zeit, in der die wichtigsten digitalen Zahlungsdienstleister globale Akzeptanz haben.

Damit einhergehend muss dir folgendes bewusst sein:

• Es ist kaum zu vermeiden, dass du zumindest einen Konkurrenten hast. Wahrscheinlich eher noch mehr.
• Die allermeisten Websites sehen gleichermaßen gut aus, weil die dahinterstehenden Standards längst breit akzeptiert sind.
• Ein erheblicher Teil aller Kunden – Neu- wie Bestandskunden – gelangt über eine Suchmaschine auf eine Shop-Seite. Sie geben also nicht direkt die URL ein, wodurch alle anderen Konkurrenten ausgeklammert würden.
• Nach wie vor ist das wichtigste Werkzeug, um Kunden von einem Online-Kauf zu überzeugen, eine umfassende grafische Aufbereitung mit möglichst vielen, zudem hochauflösenden Bildern und Videos.

Vor allem letzteres ist im Online-Business der große Knackpunkt. Denn prinzipiell sorgt jedes grafische Element dafür, dass deine Seite länger zum Aufbau benötigt. In Verbindung mit dem vorletzten Punkt ergibt dies eine wichtige Maxime:

Je länger deine Seite braucht, um sich vollständig aufzubauen, desto größer ist die Absprungrate deiner Kunden. Schon bei drei Sekunden steigt dieser Wert um ein Drittel gegenüber einer schneller ladenden Seite.

Ganz wichtig für weiteres Hintergrundverständnis ist eine Benchmark-Studie, die Google 2018 zu dem Thema durchgeführt hat. Merke dir deshalb, dass deine Seite zwingend so schnell wie möglich sein muss. Allerdings wird das auch jenseits der grafischen Aufbereitung erschwert.

Mehr zum Thema

Bildquelle: Pexels / bongkarn thanyakij

Konkurrenzanalyse: So analysierst du deine Wettbewerber

Eine Konkurrenzanalyse ist wichtig, da sie dir hilft deine Wettbewerber besser zu verstehen. Wie du sie erstellst, erklären wir dir hier.

Lea Minge

0

WordPress Ladezeiten optimieren und so deine Absprungrate senken

Deine WordPress Ladezeiten sind zu langsam? Mit diesen Tipps kannst du dein WordPress boosten und die Absprungrate deiner Seite ganz einfach reduzieren.

Diana tor Horst

0

Webseiten-Ladezeiten optimieren: Die 7 einfachsten Basics

Du möchtest deine Webseiten-Ladezeiten optimieren, weißt aber nicht wie? Mit diesen 7 Basics kannst du deine Seite schneller machen. ?

Sven Graf

0

Das Thema Bandbreiten

Es ist gut und schön, wenn jemand, der deinen Shop von einem festverdrahteten Endgerät über eine ununterbrochene Glasfaserleitung aufruft, einen wirklich rasanten Seitenaufbau erlebt. Allerdings ist dies ein Optimalzustand, auf den du für den Alltag einfach nicht setzen kannst.

Dazu haben schlicht zu wenige potenzielle Kunden einen solchen 1A-Glasfaseranschluss. Bei den meisten sind irgendwo Kupferleitungen zwischengeschaltet; sehr viele nutzen auf den letzten Metern WLAN; es gibt unterschiedlich schnelle Datentarife; das Netz ist je nach Uhrzeit unterschiedlich ausgelastet. Hinzu kommen obendrein noch mobile Verbindungen mit allen für den Funk negativen Beeinträchtigungen.

Unterm Strich: Allein, wenn wir die Internetverbindung betrachten, kommt praktisch jeder deiner Seitenbesucher auf unterschiedliche Geschwindigkeiten. Dein Ziel muss es sein, dass so wenig Menschen wie möglich hierbei benachteiligt werden. Das geht nur, indem du deinen Onlineshop so optimierst, dass er für möglichst jeden gleichermaßen schnell funktioniert.

Die Vielfalt möglicher Endgeräte

Ähnlich wie bei den Verbindungen sieht es bei den Geräten aus, von denen aus man deinen Shop aufrufen wird. Der eine tut es per High-End-PC, der andere mit einem recht neuen Tablet, der dritte hat vielleicht nur ein älteres Smartphone mit wenigen Gigabyte Arbeitsspeicher.

Es wird sich zwar in der Praxis kaum vermeiden lassen, dass manche Menschen hier den Kürzeren ziehen; ähnlich wie bei den Verbindungsgeschwindigkeiten. Das sollte dann aber nicht durch deine Website verursacht werden, sondern ausschließlich durch Dinge, die nicht in deiner Macht liegen.

Look lockt, Geschwindigkeit verkauft – warum beides die Waage halten muss

Hast du dir die weiter oben verlinkte Google-Studie durchgelesen? Falls nicht, musst du neben der Absprungrate noch einen Nachteil einer langsamen Site kennen: Google prüft für sein Ranking unter anderem auch die Geschwindigkeit. Heißt, je langsamer dein Onlineshop von sich aus aufbaut, desto schlechter für sein Standing in den Suchergebnissen.

Heißt das also, dass du kompromisslos auf „Need for Speed“ setzen solltest? Nein, das wäre wieder gefährlich. Denn wie bereits beschrieben benötigst du die grafische Komponente (mit der größte einzelne „Bremsklotz“ für die Ladegeschwindigkeit), damit deine Kunden sich umfassend über deine Produkte informieren können.

Es führt also tatsächlich kein Weg an dem eingangs angesprochenen Spagat vorbei: Deine Seite muss sowohl fix laden wie sie ebenso gut mit Medien und anderen Annehmlichkeiten angereichert sein muss. Allerdings ist es kein Hexenwerk, alles zu gewährleisten.

Tempo ohne andere Einbuße: Das kannst du tun

Deine Site muss fix sein, aber ohne Nachteile hinsichtlich ihrer Optik. Hierzu stehen dir mehrere „Stellschrauben“ zur Verfügung, die du kennen und beherrschen solltest. Im zweiten Teil unseres Textes geht es deshalb an die Praxis der gekonnten Tempo-Optimierung.

Sorge für ein professionell abgerundetes Gesamtwerk

Wenn du zur angepeilten Leserschaft dieses Artikels gehörst, bist du wahrscheinlich kein Mensch, der in Sachen IT mit allen Wassern gewaschen ist. Nicht schlimm, als Shop-Betreiber ist es schließlich zunächst wichtiger, ein guter Kaufmann, eine gute Kauffrau zu sein.

Das bedeutet jedoch, dass es für dich schwierig und teuer ist, ganz allein einen Onlineshop zu erstellen, der von sich aus schnell ist und gut aussieht. Unter diesem Aspekt kann es die für dich beste Möglichkeit sein, zumindest für die erste Zeit einen Teil der Leistungen outzusourcen.

Das heißt, du setzt auf ein externes Gesamtpaket aus Domain, Webspace und einer Software, die bereits auf Tempo hin optimiert wurde, sich aber trotzdem von Einsteigern gut bedienen lässt. Und falls dein Unternehmen in einer Gegend mit bestenfalls mittelmäßiger Internetgeschwindigkeit sitzt und/oder du nicht das Geld für leistungsstarke Server ausgeben möchtest, könnte es sogar besser sein, wenn du wirklich alles extern hostest – das wäre übrigens selbst dann noch gut, wenn du deine IT-Fähigkeiten mit steigender Erfahrung geschärft hast.

Der Grund für diese Vorgehensweise ist, dass du auf diese Weise beim Onlineshop Erstellen zumindest einige sehr typische Fehler vermeidest, die archetypisch für langsam aufbauende Websites sind. Einfach, weil das Erstellen und Betreiben technisch deutlich einfacher ist, wenn du auf derartige Paketlösungen setzt.

Nebenbei spart dir das viel Zeit und sorgt obendrein dafür, dass du auch in Sachen Look keinen wirklich „schlechten“ Onlineshop erstellen kannst. Im Ergebnis bekommst du einen Onlineshop, der sich leichter bearbeiten lässt, von Haus aus gut aussieht, Produkte optimal präsentiert und dir zwischen Zahlungsmethoden und Sicherheit weitere Vorteile bietet.

Außerdem werden dadurch automatisch eine ganze Reihe von „Tempovergehen“ verunmöglicht, weil diese Komplettlösungen von echten IT-Profis vorgefertigt und supportet werden. Denn ebenso, wie viel zu viele, zu große Grafiken deine Seite einbremsen, kann es beispielsweise ein fehlerhaft konfiguriertes Skript oder etwas ähnliches sein, das einem leichter unterläuft, wenn man alles allein macht.

Überlege, ob das Nutzen eines CDN sinnvoll ist

Strecke braucht Zeit. Was auf der Autobahn gilt, gilt auch im Web: Je größer die Distanz, die die Datenpakete zurücklegen müssen, desto länger dauert es. Zwar wird jedes Paket mit Lichtgeschwindigkeit übertragen, aber da jedes durch die Struktur des Internets einen anderen Weg nimmt, kann es dennoch (deutlich) länger dauern – zumal ein digitales Signal erst dann vollständig ist, wenn alle Pakete als „Bausteine“ vollständig eingetroffen sind.

Hier kommt nun das Content Delivery Network ins Spiel. Ein durch dich buchbarer Dienst, der weltweit auf Servern verschiedene Daten deiner Website in Caches näher an den aufrufenden Kunden speichert. Der Vorteil: Besuchen diese deinen Shop, müssen nur veränderliche Daten von dem Ort gesendet werden, an dem er gehostet ist. Alles andere befindet sich auf den Caches des CDN.

Allerdings kostet dies Geld. Außerdem gibst du die Kontrolle über Daten an einen externen Anbieter ab. Wäge den Nutzen deshalb gut ab und beobachte, woher die meisten Menschen auf deinen Shop zugreifen. Gerade, wenn sich dein Kundenstamm weitgehend auf das kleine Mitteleuropa beschränkt, ist der Tempovorteil eines CDN wahrscheinlich nicht kostenneutral.

Mehr zum Thema

Die perfekte URL erstellen! 6 einfache SEO-Tipps für besseres Ranking

Eine perfekte URL erstellen und dein Ranking verbessern! Erfahre hier alles zur Definition der URL und 6 Tipps zur perfekten URL-Struktur ✓

Luisa Färber

0

Bildquelle: stnazkul - stock.adobe.com

SEO-Trends 2024: Das ist dieses Jahr wichtig

Die SEO-Trends 2024 gehen wie im Vorjahr sehr stark in Richtung User Experience. Wir sagen dir, auf welche Trends du 2024 Wert legen solltest.

Andreas Fricke

0

Prüfe immer wieder die Performance aus unterschiedlichen Blickwinkeln

Natürlich wirst du im täglichen Betrieb regelmäßig deinen Shop aufrufen. Wenn du das allerdings immer wieder von demselben Rechner am selben Ort tust, kann es rasch passieren, dass du eine verzerrte Wahrnehmung der Dinge bekommst. Du kannst also suggeriert bekommen, dass deine Site sowohl schneller wie langsamer ist, als sie sich für die Masse deiner tatsächlichen Kunden präsentiert.

Dagegen helfen drei Mittel:

• Greife immer wieder (nicht nur, aber auch nach größeren Änderungen) mit verschiedenen Endgeräten, Verbindungsmöglichkeiten und möglichst von unterschiedlichen Orten auf deinen Shop zu. Animiere überdies Freunde und Verwandte, dich dabei zu unterstützen – ganz besonders, wenn sie sich weit entfernt aufhalten.
• Wenn du Kunden um Feedback bittest, dann bitte sie bei der Gelegenheit darum, das Tempo deines Shops zu bewerten. Das gibt dir ein zwar naturgemäß etwas subjektives, aber sehr breitgefächertes Bild.
• Verlasse dich auf die Unbestechlichkeit der Technik. Google selbst hat mit PageSpeed Insights ein Tool, mit dem du die Geschwindigkeit bewerten kannst. Es gibt zudem noch ähnliche Werkzeuge von anderen Anbietern. Nutze sie regelmäßig und nimm die Ergebnisse als Anlass, um ständig Verbesserungen vorzunehmen.

Wichtig ist zudem, dass du niemals aufhörst, deine Seite zu optimieren. Falsch wäre es, sich darauf zu verlassen, dass die Internetverbindungen und Geräteleistungen ohne dein Zutun größer werden – selbst wenn das eine Tatsache ist.

Setze Code-basierte Details und Skripts nur mit Bedacht ein

Denn diese beiden Faktoren zwingen dich dazu, deinen Shop immer wieder in Sachen Optik zu verbessern. Damit schließt sich dann wieder der Kreis, denn ein optimierter Look sorgt eben wiederum für einen langsameren Aufbau.

Je komplizierter und detailreicher eine einzelne Seite ist, desto mehr Datenpakete müssen versendet werden und desto länger benötigt das Gerät eines Kunden, diese zu einem funktionierenden Ganzen zusammenzusetzen.

Ein weiterer wichtiger Schritt, um deinen Shop ohne optische Einbuße schneller zu machen, ist es deshalb, alles, was irgendwie auf Skripten, HTML- und sonstigen Codes basiert, nach der Maxime „so wenig wie möglich, so viel wie nötig“ zu verwenden.

• Setze Sharing- und ähnliche Buttons nur zu Diensten, die erwiesenermaßen von deinen Kunden genutzt werden.
• Lass Codes durch ein Checker-Tool laufen, damit unnötige Umbrüche, Semikolons und ähnliches aufgezeigt und gelöscht werden können. Dadurch wird jeder Code etwas schlanker und somit schneller – bedenke hier immer, dass sich selbst kleinste Verbesserungen in Kombination zu etwas sehr Wirkungsvollen aufsummieren.
• Prüfe immer wieder, was nötig ist, was deine Kunden verwenden und was nicht. Zögere deshalb nie, Unbenutztes rigoros zu löschen – mache das aber so, dass dabei keine Code-Schnipsel verbleiben.

Dieses Denken und Handeln solltest du übrigens von Tag 1 an pflegen. Baue also nur das in deinen Shop ein, was erwiesenermaßen nötig ist. Nicht das, wovon du nur annimmst, dass Kunden es gut fänden. Zögere hierbei zudem nie, den Support deiner Paketlösung zu kontaktieren. Auch das gehört zum Service dazu.

Versuche, Weiterleitungen zu vermeiden

Ein jeder Shop besitzt meist mehrere URLs. Etwa, um von alten auf neue Produkte zu gelangen. Um deine Kunden von einer auf die andere zu lotsen, kommen sogenannte 301-Redirects zum Einsatz.

Das Problem: Diese Weiterleitungen verzögern den Aufbau einer neuen Seite, selbst wenn Kunden sich schon auf deiner Shop-Website befinden. Erneut gilt deshalb: So wenig wie möglich, so viel wie nötig. Wenn eine Weiterleitung nicht wirklich vorteilhaft für die Customer Experience ist, solltest du sie schlicht nicht verwenden.

Optimiere deine mediale Anreicherung

Schon mehrfach konntest du in diesem Text lesen, welche Auswirkungen Bilder und Videos auf die Geschwindigkeit deiner Seite haben. Das wohl größte Dilemma, denn hier ist Verschlankung durch Verzicht einfach nicht möglich, ohne die Qualität deiner Seite erheblich zu beeinträchtigen.

Was also tun? Ganz einfach:

• Lade die Bilder nur in der Größe und Auflösung hoch, die tatsächlich benötigt und angezeigt werden. Stellt dein Shop ein Produktbild beispielsweise nur maximal 1200 Pixel breit dar, würde ein 2400 Pixel breites Bild die Ladezeit unnötig verlängern. Bevor du Bilder hochlädst, solltest du sie zudem immer Web-tauglich komprimieren. Dafür gibt es neben Adobe Photoshop eine ganze Reihe von kostenlosen Tools.
• Wenn du Produktvideos nutzt, dann lade sie nicht auf dem Shop hoch, sondern auf YouTube oder einem anderen Video-Hoster und setze auf deinem Onlineshop nur einen Einbettungscode. Damit kann der Clip trotzdem dort betrachtet werden. Netter Nebeneffekt: YouTube-Besucher können ebenfalls dein Video sehen; das vergrößert deine Reichweite.
• Falls möglich, überlege, ob du ein Lazy Loading Script beziehungsweise -Plugin nutzen möchtest. Das sorgt dafür, dass nicht schon beim Seitenaufruf alle Medien geladen werden, sondern nur diejenigen, die für den Kunden ohne Scrollen und weitere Aktivitäten sichtbar sind. Das macht zwar die insgesamte Seitennutzung durch notwendiges Nachladen etwas langsamer; das ist aber für die Kunden weit weniger schlimm, als wenn der anfängliche Seitenaufbau länger dauert.

Abermals ist es hier ein machtvolles Schwert, die Gewohnheiten und Bedürfnisse deiner Besucher zu kennen. Betrachte dies deshalb ebenfalls als eine Aufgabe, die du immer wieder erledigen musst.

Wichtig: Verkleinere beziehungsweise komprimiere niemals die Originale deiner kostbaren (Produkt-) Fotos und sonstigen Grafiken, sondern immer nur Kopien. Die Originale sollten sich immer in höchster Qualität auf einem Server oder einer externen Festplatte in deinem Unternehmen befinden, falls du sie nochmals benötigen solltest.

Nutze den Cache deiner Besucher

Erneut sei dir an dieser Stelle für das finale Kapitel der Punkt mit der langen Ladezeit über große Übertragungsdistanzen ins Gedächtnis gerufen. Hier kommt nun hinzu, dass viele Kunden deinen Onlineshop (hoffentlich) regelmäßig besuchen – vom selben Gerät aus.

Das solltest du ausnutzen, um den Cache dieser Geräte beziehungsweise deren Browser heranzuziehen, um dort Daten zwischenzulagern. Dann nämlich muss das Kundengerät diese nur aus dem eigenen Speicher laden, anstatt sie durch das gesamte Internet anzufordern.

Hierzu gibt es zwei Möglichkeiten:

• Beim Browser Caching werden die Daten im Cache des Browsers zwischengespeichert. Da viele User immer denselben Browser nutzen, ist das eine gute Option. Allerdings nutzen neuerdings immer mehr Menschen aus Datenschutzbedenken Funktionen, die gar kein Browser Caching gestatten oder diesen Speicher beim Verlassen der Website bzw. dem Schließen des Browsers automatisch löschen.
• Beim Website Caching hingegen wird gleich ein Großteil der ganzen angefragten Seite auf einem Server bereitgehalten. Dieser Teil ist also statisch statt dynamisch und wird als Ganzes zum Kundengerät gesendet. Sollte sich etwas verändern, wird der Cache automatisch aktualisiert.

In beiden Fällen wird das Laden teilweise erheblich beschleunigt. Insbesondere im Zusammenspiel mit den anderen genannten Maßnahmen kann dein Onlineshop so um teils ganze Sekunden fixer laden – selbst wenn das Kundengerät und dessen Internetverbindung nicht optimal sind.

Fazit

Egal, ob jemand via Google auf deinen Shop zugreift, ob er die URL eingibt oder auf deinem Shop zwischen den Kategorien wechselt: Du möchtest, dass er dabei immer sowohl das größtmögliche Tempo vorlegen kann wie er zudem eine optimale Optik präsentiert bekommt. Denn beides ist für den Verkaufsabschluss von entscheidender Wichtigkeit.

Lasse deshalb niemals zu, dass dein Webshop nach einer der beiden Seiten kippt. Beides wäre für das Kundenerlebnis ausnehmend schlecht. Auch solltest du dich niemals auf deinen Meriten ausruhen. Was heute ein großartig aussehender, pfeilschnell aufbauender Shop ist, kann morgen schon nur noch Mittelmaß sein. Begreife dies deshalb als eine Aufgabe, die dich über dein gesamtes Geschäftsleben ständig begleiten wird.