Die Verbesserung der Funktionalität deiner Website ist ein wichtiger Teil beim Erstellen und Pflegen von Websites. Die Richtlinien in diesem Artikel können dazu beitragen, die Erfahrung deiner Besucher zu verbessern und Aspekte wie Reaktionsfähigkeit, Schnelligkeit und Ladezeit zu verbessern.
Ladezeiten verstehen
Die Ladezeit deiner Website misst, wie schnell deine Website vollständig geladen wird, nachdem ein Besucher Zugriff angefordert hat, indem er entweder auf einen Link klickt oder die Seiten-URL eingibt. Viele Faktoren können sich auf die Ladezeit einer Seite auswirken. Einige sind Website-spezifisch und andere sind von dem Gerät und der Internetverbindung deines Besuchers abhängig.
Optimierte und angepasste Websites laden schneller als solche, die inhaltslastig sind. Die
Optimierung deiner Website kann eine verbesserte Ladezeit sowie eine bessere Punktzahl bei Leistungs-Tools wie Google PageSpeed Insights gewährleisten.
Wie Wix die Ladezeit misst
Wix überwacht und sammelt Daten für verschiedene Metriken. Dazu gehören die Core Web Vitals von Google und zusätzliche Vitals wie FCP, TTFB und TTI. Du kannst die
Geschwindigkeitsmetriken deiner Website in deiner Website-Verwaltung ansehen.
Wix sammelt diese Funktionalitätsdaten automatisch in Echtzeit auf unserer gesamten Plattform, um die Geschwindigkeit deiner Website zu überwachen und zu verbessern. Wir empfehlen dir, die folgenden bewährten Verfahrensweisen zu befolgen, um eine reibungslose und schnelle Ladezeit für deine Website zu gewährleisten.
Ladereihenfolge der Elemente
Wenn du deine Website erstellst oder aktualisierst, empfehlen wir dir, die
Ladereihenfolge der Elemente im Hinterkopf zu behalten, da sie die Funktionalität deiner Website beeinträchtigen können.
So werden Elemente, die interaktiv oder inhaltsreich sind, zum Beispiel Videos und Apps von Drittanbietern, in der Regel langsamer geladen als statische oder leichtere Elemente wie Text und Buttons.
Elemente auf deiner Website optimieren
Optimiere die Startseite und Elemente wie Text, Animation und Bilder für eine bessere Website-Funktionalität. Klicke unten auf eine Option, um weitere Informationen zu erhalten:
Inhalte, die sich Above-The-Fold deiner Website befinden, werden vor dem Rest deiner Seite geladen. Achte darauf interessanten, relevantem und leichten Inhalt zu diesem Abschnitt deiner Seite hinzuzufügen, damit Website-Besucher nützliche Informationen entdecken können, während der Rest der Seite lädt.
Wir empfehlen die Verwendung von statischen Elementen wie Text, Formen und Buttons in deinem Above-the-Fold-Abschnitt. Da diese Elemente zuerst geladen werden, verbessert dies die Ladezeit und Leistung deiner Website.
Was ist „Above the Fold“ (Über der Falz)?
Dies ist der Abschnitt deiner Website, den Besucher zuerst sehen, bevor sie nach unten scrollen.
Bilder, die auf Websites von Wix hochgeladen werden, werden in ihrer Größe automatisch für die bestmögliche Leistung angepasst. Wir empfehlen die Verwendung von AVIF-Bildern anstelle von PNG-Bildern, es sei denn, du benötigst einen transparenten Hintergrund. AVIF-Bilder sind besser für Ladezeiten und Performance der Website optimiert.
Mehr über Bilder und deine Website-Performance erfahren.
Hinweise:
- Wo immer möglich, konvertiert Wix Bilder automatisch in moderne Formate wie AVIF. Dieses Format reduziert die Downloadgröße, während die Bildqualität beibehalten wird.
- Es ist nicht möglich, Bilder mit mehr als 25 MB auf deine Website von Wix hochzuladen.
Videos eignen sich besonders, die Interaktion und das Interesse von Besuchern zu fördern. Wir empfehlen, beim Hinzufügen von Videos die Ladezeit im Auge zu behalten, da sie in der Regel eine hohe Auflösung haben und das Laden länger dauert als bei statischen Elementen.
Drittanbieter-Apps und iFrames
Der in Drittanbieter-Apps und iFrames angezeigte Inhalt wie eingebettete Videos oder Feeds aus Social-Media-Kanälen wird von externen Servern und nicht von den Servern von Wix bereitgestellt.
Das bedeutet, dass Wix sie nicht optimieren kann und daher möglicherweise Overhead (Verwaltungsdaten) für die Ladezeit deiner Website erzeugt.
Wir empfehlen, Videos auf sekundären Seiten zu platzieren, mit einem Button auf der Homepage, der deine Website-Besucher zu ihnen weiterleitet.
Wir empfehlen, nicht mehr als 3 oder 4 Schriftarten auf deiner Website zu verwenden, da das die Optik deiner Website verbessern und ihr einen professionellen Charakter verleihen kann.
Wenn du weniger als 4 Schriftarten verwendest, kann dies auch die Funktionalität der Website verbessern, da dies die Ladezeit verkürzt.
Darüber hinaus empfehlen wir, die Verwendung benutzerdefinierter Schriftarten nach Möglichkeit zu vermeiden. Systemschriftarten werden schneller geladen, was die Funktionalität deiner Website verbessern kann.
Mehr über Schriftarten und deine Website erfahren.
Spezialeffekte wie Animationen und Diashows können deine Website zum Leben erwecken.
Effekte laden allerdings häufig langsamer als statische Elemente, und wir empfehlen, sie nach Möglichkeit nicht im „Above the Fold“-Bereich deiner Website zu platzieren.
Hinweis: Animierte GIFs müssen vollständig heruntergeladen werden, bevor sie abgespielt werden können. Wir empfehlen, animierte GIFs in ein Video umzuwandeln.
Lightboxen werden absichtlich später geladen als andere Elemente deiner Website. Wir empfehlen daher, die Verwendung von Lightboxen auf deiner Website zu beschränken und sie nicht als Hauptinhalt deiner Seite zu nutzen.
Die DOM Order deiner Website ist die Reihenfolge, in der Besucher, die assistierende Technologien wie Screenreader verwenden, durch deine Elemente navigieren.
Um diesen Besuchern ein reibungsloses Erlebnis zu bieten und die richtige Reihenfolge der Elemente sicherzustellen, empfehlen wir, die visuelle Reihenfolge der Elemente manuell an die im Ebenen-Panel angezeigte Reihenfolge anzupassen.
Den Inhalt deiner Mobile-Website optimieren
Im Allgemeinen sind Mobilgeräte nicht so stark oder schnell wie Desktop-Computer und verfügen in der Regel über eine langsamere Internetverbindung. Daher kann es länger dauern, bis deine Website auf einem Mobilgerät angezeigt wird.
Wenn deine mobile Website langsam lädt, empfehlen wir, die folgenden Richtlinien zu befolgen, um die Leistung zu optimieren.
Klicke unten auf eine Option, um mehr über folgende Themen zu erfahren:
Den Mobile/Editor verwenden
Verwende den Mobile-Editor, um deine Website für Mobilgeräte zu optimieren. Du kannst Elemente ausblenden und anpassen und sogar einen Willkommensbildschirm hinzufügen.
Mobilfreundliche Seiten sehen anders aus als die Desktop-Version, daher empfehlen wir, sie an deine Wünsche und Bedürfnisse anzupassen.
Um auf den Mobile-Editor zuzugreifen:
- Öffne deinen Editor.
- Klicke in der oberen Symbolleiste auf das Symbol für Mobile-Editor
.
Unnötige Elemente ausblenden
Einige Elemente sind möglicherweise nicht für deine Mobile-Website relevant und haben erhebliche Auswirkungen auf die Ladezeit.
Wir empfehlen, auf diese Elemente zu achten. Verwende Elemente wie Lightboxes und Apps von Drittanbietern nicht häufiger als unbedingt notwendig, und biete nur relevante Inhalte auf deiner Mobile-Website an.
Um Elemente auf deiner Mobile-Website auszublenden:
- Klicke auf das Element, das du ausblenden möchtest.
- Klicke auf das Symbol für Element ausblenden
.
Tipp: Ausgeblendete Elemente können angezeigt und wieder zu deiner Mobile-Website hinzugefügt werden, indem du links im Mobile-Editor auf
Ausgeblendet auf Mobile klickst.
Bilder zuschneiden oder skalieren
Große Bilder können eine Weile brauchen, um auf deiner mobilfreundlichen Website zu laden. Wir empfehlen, das Bild zuzuschneiden oder zu verkleinern, damit die Ladezeit deiner Mobile-Website nicht beeinträchtigt wird.
Um ein Bild zuzuschneiden:
- Klicke im Editor auf das Bild.
- Klicke auf das Symbol für Zuschneiden
. - Ziehe die Griffe, um das Bild zuzuschneiden.
- Klicke auf Übernehmen.
Tipp: Bilder können durch Klicken auf das Bild in der Größe geändert werden. Ziehe dann die Griffe, um es zu vergrößern oder zu verkleinern.
Elemente in Galerien und Repeatern verkleinern
Galerien und Repeater sind eine tolle Möglichkeit, Bilder und Informationen auf deiner Website anzuzeigen, sie werden jedoch in der Regel langsamer geladen als andere Elemente wie Text oder einfache Formen.
Als beste Vorgehensweise empfehlen wir, die Anzahl der Elemente in einer Galerie oder einer Reihe von Repeatern zu reduzieren. Zeige nur relevante und wichtige Elemente und Medien an, und verteile diese gleichmäßig auf deiner Website.
Einen Willkommensbildschirm hinzufügen
Willkommensbildschirme sind eine tolle Möglichkeit, die Marke deiner Mobile-Website vorzustellen. Dies ist das Erste, was Website-Besucher sehen, während deine Website im Hintergrund vollständig geladen werden kann.
Um einen Willkommensbildschirm hinzuzufügen:
- Klicke links im Mobile-Editor auf Mobile-Funktionen
. - Klicke auf Willkommensbildschirm.
- Passe deinen Willkommensbildschirm mit den verfügbaren Optionen an.
- Klicke auf OK.
Ein unterstütztes System und einen unterstützten Browser verwenden
Websites von Wix werden auf verschiedenen mobilen Betriebssystemen und Browsern unterstützt. Wenn Besucher Probleme beim Anzeigen deiner für Mobilgeräte optimierten Website haben, müssen sie möglicherweise ihr System oder ihren Browser aktualisieren.
Drittanbieter-Code
Der Code von Drittanbietern kann wichtige Einblicke bieten und Tools und Funktionen auf deiner Website zur Verfügung stellen. Es kann sich jedoch auch auf die Ladezeit und Funktionalität deiner Website auswirken, wenn er nicht optimiert wird.
Häufig gestellte Fragen (FAQ)
Klicke unten auf eine Frage, um mehr zu erfahren.
Warum ist der Score der Largest Contentful Paint (LCP) meiner Website so niedrig und wie kann ich ihn verbessern?
LCP misst, wie schnell der größte sichtbare Inhalt auf deiner Seite geladen wird.
Um den Wert zu verbessern:
- Optimiere Bilder mit leichteren Formaten wie AVIF oder WebP und komprimiere sie vor dem Hochladen.
- Minimiere die Größe von „Above the Fold“-Inhalten wie Bannern oder Videos.
- Verwende Text oder kleine Bilder „Above the Fold“, um das Laden zu beschleunigen.
- Aktiviere die Zwischenspeicherung für deine Seiten in der Website-Verwaltung von Wix.
- Beschränke benutzerdefinierten Code oder Apps von Drittanbietern, die deine Seite verlangsamen können.
Wie kann ich die Total Blocking Time (TBT) meiner Website reduzieren?
TBT misst, wie lange der Haupt-Thread deiner Website von Skripten blockiert wird.
Um die TBT zu verbessern:
- Stelle nicht unbedingt erforderliches JavaScript zurück und minimiere JavaScript-Dateien.
- Entferne nicht verwendete JavaScript- und CSS-Dateien von deiner Website.
- Beschränke die Verwendung von Animationen und Übergängen, insbesondere von denen, die beim Laden der Seite ausgelöst werden.
- Verwende die integrierten Tools von Wix, um die Performance deiner Website im Editor zu optimieren.
Was kann ich tun, wenn meine Website langsam ist, obwohl ich die Optimierungstipps befolgt habe?
Wenn deine Website immer noch langsam ist, nachdem du die Medien optimiert und unnötige Elemente reduziert hast:
- Überprüfe die Website-Geschwindigkeits-Verwaltung in deinem Konto bei Wix auf bestimmte Daten.
- Überprüfe deine Internetverbindung und Browsereinstellungen auf lokale Probleme.
- Wende dich an das Support-Team von Wix, um das Problem zur weiteren Untersuchung an das Ladezeit-Team zu eskalieren.
Kann ich mehrere Bilder auf meiner Website gleichzeitig optimieren?
Wix optimiert Bilder automatisch beim Hochladen, wenn du jedoch zusätzliche Komprimierung benötigst:
- Verwende externe Tools, um Bilder zu komprimieren, bevor du sie auf Wix hochlädst.
- Ersetze große Bilder auf deiner Website durch optimierte Versionen.
- Verwende für Pro Gallerys die Option „Qualität anpassen“, um alle Galeriebilder gleichzeitig zu optimieren.
Wie kann ich die Ladegeschwindigkeit meiner mobilen Website verbessern?
Mobile Websites werden aufgrund kleinerer Geräte und langsamerer Internetverbindungen oft langsamer geladen.
Um die Ladegeschwindigkeit auf Mobilgeräten zu verbessern:
- Blende nicht mehr benötigte Elemente auf dem Mobilgerät mit dem Mobile-Editor aus.
- Verwende leichtere Bildformate wie AVIF und komprimiere große Dateien.
- Platziere Videos oder Animationen nicht oberhalb der Falz.
- Aktiviere die manuelle Zwischenspeicherung für Seiten mit umfangreichem Inhalt.
Warum werden meine Bilder auf Mobilgeräten verschwommen angezeigt?
Verschwommene Bilder werden oft dadurch verursacht, dass hochauflösende Bilder für kleinere Bildschirme verkleinert werden.
Um dies zu beheben:
- Verwende die Medienverwaltung von Wix, um die Bildmaße an Mobilgeräte anzupassen.
- Ersetze große Bilder durch optimierte Versionen mit weniger als 1 MB.
- Achte darauf, dass Bilder sich nicht mit Videos oder anderen Elementen im Editor überschneiden.
Können Animationen meine Website verlangsamen? Wie kann ich sie optimieren?
Ja, Animationen können die Leistung der Website erheblich beeinträchtigen. Um diese zu optimieren:
- Verwende einfache Übergänge anstelle komplexer Animationen.
- Beschränke Animationen auf den oberen Bereich der Seite (above the fold).
- Verwende Nutzerinteraktionen als Trigger für Animationen, nicht das Laden der Seite.
Was ist langsames Laden (Lazy Loading) und wie wirkt sich das auf meine Website aus?
Langsames Laden (Lazy Loading) verzögert das Laden von Bildern und Videos, bis sie in den Viewport des Nutzers gelangen. Danach verbessern sich die Erstladezeiten der Seiten. Wix aktiviert für Bilder und Videos standardmäßig das Lazy Loading.
Um die Ladezeit weiter zu optimieren:
- Sorge dafür, dass wichtige Inhalte zuerst geladen werden.
- Minimiere „Above the Fold“-Elemente oberhalb der Falz. Dann werden Inhalte schneller sichtbar.
Kann ich dynamische Seiten verwenden, um die Leistung meiner Website zu verbessern?
Dynamische Seiten sind ideal für Websites mit viel Inhalt, da sie Daten aus einer CMS-Sammlung abrufen. Dies reduziert den Bedarf an mehreren statischen Seiten und kann die Ladezeiten wie folgt verbessern:
- Das CMS optimieren.
- Die Anzahl der statischen Seiten, die gleichzeitig geladen werden müssen, reduzieren.
- Ermöglichen, Inhalte dynamisch, basierend auf Benutzerinteraktionen anzuzeigen
