Website-Performance: Eine leistungsoptimierte Website erstellen

Erstelle eine schnelle, ansprechende Website, indem du Designoptionen wählst, bei denen die Performance im Mittelpunkt steht. Wenn du auswählst, was zuerst angezeigt werden soll, wo Bilder und Videos platziert werden sollen und wie du deine Inhalte organisieren möchtest, können deine Seiten schnell geladen werden und Besucher finden einfacher, was sie suchen. Verwende diese Performance-Tipps, um die Geschwindigkeit deiner Website zu verbessern, das Interesse der Besucher zu wecken und auf jedem Gerät für ein reibungsloses, professionelles Erlebnis zu sorgen.

Die Ladereihenfolge von Elementen optimieren

Elemente auf deiner Website werden basierend auf ihrem Typ und ihrer Größe in einer bestimmten Reihenfolge geladen. Wenn du diese Reihenfolge verstehst, kannst du Prioritäten setzen und ein nahtloses Erlebnis gewährleisten.

Statische Elemente: Dazu gehören Text und Grundformen, die am schnellsten geladen werden. Füge sie oberhalb der Falz hinzu, um für eine schnelle Sichtbarkeit zu sorgen.
Fließende Elemente: In diese Kategorie fallen Bilder und Videos. Sie erwecken deine Website zwar zum Leben, beeinträchtigen aber möglicherweise die Funktionalität. Platziere diese, wenn möglich, unter der Falz.
Interaktive Elemente: Elemente wie iFrames, Animationen und Drittanbieter-Apps werden zuletzt geladen. Verwende sie sparsam und strategisch, um lange Ladezeiten zu vermeiden.

Tipp:

Wir empfehlen, der Startseite besondere Aufmerksamkeit zu schenken, da dies in der Regel die erste Seite ist, die deine Besucher sehen.

Einen leistungsstarken „Above the Fold“-Abschnitt gestalten

Der Abschnitt oberhalb der Falz bezieht sich auf den Bereich deiner Webseite, der sichtbar ist, bevor der Nutzer zu scrollen beginnt. Da dieser zuerst geladen wird, ist es wichtig, ihn übersichtlich zu gestalten.

Empfohlene Elemente:

Text: Verwende prägnanten, wirkungsvollen Text, der den Zweck deiner Seite deutlich vermittelt. Halte dich an die Systemschriftarten und vermeide die übermäßige Verwendung von verschiedenen Schriftarten und -stärken.
Calls-to-Action (CTAs): Füge klar erkennbare Buttons oder Links hinzu, um Benutzeraktionen zu leiten, wie zum Beispiel „Jetzt kaufen“ oder „Mehr erfahren“. Vermeide in der Nähe von CTAs Elemente, die die Besucher ablenken.

Elemente, die du sparsam verwenden solltest:

Große Bilder oder Videos
Animationen
Übermäßiger Gebrauch von hochauflösenden Bildern

Tipp:

Verwende Tools wie PageSpeed Insights von Google oder die Website-Geschwindigkeits-Verwaltung von Wix, um sicherzustellen, dass der Content über der Falz für schnelles Laden optimiert ist.

Spezielle Seiten verwenden

Wenn du Seiten zu viele Elemente hinzufügst, beeinträchtigt das die Leistung, insbesondere auf der Startseite. Erstelle stattdessen spezielle Seiten für bestimmte Website-Funktionen oder Apps.

Füge Seiten für Funktionen wie Shops, Blogs oder Videos hinzu und verlinke sie von der Startseite aus mit Buttons oder Menüelementen. Begrenze die Seitenlänge auf unter 8 Bildschirme, indem du Inhalte auf deine Website-Seiten verteilst und nicht benötigte Elemente begrenzt.

Bilder und Videos optimieren

Mediendateien verlangsamen Websites aufgrund ihrer Größe und Auflösungen oft. So kannst du sie effektiv verwalten:

Bilder:

Verwende leichtgewichtige Formate wie WebP oder JPEG.
Komprimiere Dateien vor dem Hochladen auf Wix.
Präsentiere Bilder in einer Pro Gallery für eine integrierte Optimierung.

Videos:

Hoste Videos auf Wix Video, YouTube oder Vimeo, um die Leistung zu optimieren.
Vermeide es, Videos „Above the Fold“ (über der Falz) zu platzieren, um die ersten Seiten schneller zu laden.

Lazy Loading

Lazy Loading verzögert das Laden von Bildern und Videos, bis sie im Viewport des Nutzers angezeigt werden, und verbessert so die ersten Ladezeiten der Seite. Diese Funktion ist bei Wix automatisch aktiviert, funktioniert aber am besten, wenn Bilder und Videos in unterstützten Elementen wie Galerien oder Streifen platziert werden und der Inhalt oberhalb der Falz für eine schnellere Sichtbarkeit minimal gehalten wird.

Weitere Elemente verwalten

Andere Designentscheidungen können sich ebenfalls auf die Geschwindigkeit und Leistung deiner Website auswirken:

Buttons: Erstelle klare und prägnante Buttons, die zu relevanten Inhalten an anderer Stelle auf deiner Website verlinken. Du kannst z. B. „Katalog entdecken“ oder „Weitere Projekte anzeigen“ verwenden.
Benutzerdefinierter Code: Achte darauf, dass jeder benutzerdefinierte Code optimiert ist und Attribute wie „defer“ oder „async“ verwendet, um Verzögerungen zu reduzieren.
Seitennummerierung oder „Mehr laden“-Buttons: Vermeide es, alle Produkte gleichzeitig auf einer einzigen Seite anzuzeigen, insbesondere bei produktlastigen Websites. Implementiere eine Seitennummerierung oder Load-on-Demand-Funktionen, um den Ladevorgang effizient zu gestalten.

Tipps:

Regelmäßig testen: Verwende die PageSpeed Insights von Google und die Website-Geschwindigkeits-Verwaltung von Wix, um die Performance zu überwachen und zu verbessern.
Above-the-Fold-Inhalte priorisieren: Stelle sicher, dass wichtige Inhalte schnell geladen werden, indem du leichtgewichtige und statische Elemente hinzufügst.
Drittanbieter-Apps minimieren: Verwende nur wichtige Apps oder Widgets, um unnötige Verzögerungen zu vermeiden.

Häufig gestellte Fragen (FAQ)

Klicke unten auf eine Frage, um mehr zu erfahren.

Warum lädt meine Website von Wix langsam und wie kann ich die Geschwindigkeit verbessern?

Warum ist meine mobile Website langsamer als meine Desktop-Website?

Wie kann ich den Score meiner Largest Contentful Paint (LCP) verbessern?

Wie kann ich eine große Anzahl von Produkten am besten präsentieren, ohne meinen Shop zu verlangsamen?