Webflow Performance verbessern: So wird deine Website schneller
Eine langsame Website kostet dich Besucher, Rankings und am Ende Kunden. Ich habe mir das offizielle Tutorial von Webflow angesehen, meine eigenen Projekte durchleuchtet und daraus eine Liste gebaut, die ich bei jedem Kundenprojekt abarbeite.
Das lernst du in diesem Artikel:
- Wie du Bilder und Videos in Webflow richtig komprimierst
- Welche Einstellungen im Site Setup wirklich Tempo bringen
- Wie du dein CMS und Drittanbieter Skripte im Griff behältst
Wenn du deine Seite gerade neu aufsetzen lässt, achte ich als Webflow Spezialist von Anfang an auf diese Punkte. Für bestehende Seiten reicht oft schon ein gezielter Check.
1. Bilder im Assets Panel komprimieren
Bilder machen meist den größten Teil des Datenvolumens einer Seite aus. Im Assets Panel wähle ich einzelne oder alle Bilder aus und klicke auf Compress. AVIF ist mein Standard, WebP die Alternative, wenn ein Browser AVIF noch nicht unterstützt.
Nach der Kompression ersetzt Webflow die Dateien auf der ganzen Seite automatisch. Du musst danach nur noch veröffentlichen, damit die Live Seite die schlanken Dateien ausliefert.
- Reihenfolge: AVIF vor WebP vor JPEG
- Nach jeder Kompression neu veröffentlichen
- Alte GIFs durch MP4 oder Lottie ersetzen, statt sie zu behalten
2. Bilder in CMS Collections komprimieren
Auch in CMS Collections stapeln sich oft viele Bilder. Ich öffne die Collection, klicke oben auf die drei Punkte und wähle Compress Assets. Gleiche Optionen wie oben: AVIF oder WebP.
Bei Blogartikeln, Produktseiten oder Galerien mit vielen Einträgen macht das oft den größten Unterschied bei der Ladezeit.
3. Hintergrundvideos richtig optimieren
Hintergrundvideos wirken stark, sind aber echte Bandbreitenfresser. Mein Richtwert: unter 5 MB pro Video. Wenn möglich, re-encode ich in AV1, prüfe vorher aber den Browser Support auf Can I Use.
Frag dich außerdem, ob ein Hintergrundvideo auf mobil lastigen Seiten überhaupt nötig ist. Oft reicht ein kurzer Loop mit geringer Auflösung oder ein einzelnes Bild mit dezenter Animation.
4. HTML, CSS und JavaScript minifizieren
Im Site Setup unter Publishing aktiviere ich drei Schalter: Minify HTML, Minify CSS und Minify JavaScript. Das entfernt unnötige Leerzeichen und Zeilenumbrüche und macht jede Datei kleiner.
Zusätzlich lade ich JavaScript, wenn möglich, asynchron. Der Browser kann dann mit dem Rendern beginnen, während Skripte parallel im Hintergrund laden. Teste vorher, ob dein Custom Code das mitmacht.
5. Unbenutzte Styles und Interaktionen bereinigen
Über die Zeit sammeln sich in jedem Projekt Klassen und Interaktionen an, die niemand mehr braucht. Im Style Selector nutze ich das Besen Symbol, um ungenutzte Klassen zu finden. Im Interactions Panel gibt es dasselbe Symbol für alte Animationen.
Ein Punkt zur Vorsicht: Klassen, die du nur im Custom Code ansprichst, erkennt Webflow oft nicht als benutzt. Die prüfe ich manuell nach. Für einfache Hover oder Übergangseffekte setze ich außerdem lieber auf CSS statt auf JavaScript, weil CSS leichter und schneller ist.
6. Responsive Design mit den richtigen Bildgrößen
Eine der besten Optimierungen: dem Browser erlauben, die passende Bildgröße zu laden. Webflow liefert automatisch kleinere Varianten aus, wenn du relative Größen wie Prozent oder vw statt fester Pixelwerte verwendest.
Statt ein Bild fest auf 600px zu setzen, gebe ich ihm 50% des umgebenden Containers. So bekommt ein Smartphone nur die kleine Version, nicht die Desktop Datei.
7. Hintergrundbilder gegen Inline Bilder abwägen
Ein Punkt, den viele übersehen: Hintergrundbilder werden nicht lazy geladen. Sie laden immer mit, auch wenn sie außerhalb des sichtbaren Bereichs liegen. Inline Bilder dagegen, also normale Bildblöcke, können lazy laden und sparen so Bandbreite für Besucher, die nicht ganz nach unten scrollen.
Für Kundenlogos, Teamfotos oder Galerien setze ich deshalb auf Inline Bilder. Hintergrundbilder nutze ich nur noch gezielt, etwa bei rein dekorativen Elementen.
8. Fonts lokal hosten und reduzieren
Google Fonts sind bequem, aber lokales Hosting ist schneller und aus Datenschutzsicht die bessere Wahl. Ich binde nur die Schriftschnitte ein, die ich wirklich brauche, meist Regular und Bold, und setze auf das Format WOFF2.
Über Tools wie einen Font Subsetter kannst du zusätzlich nicht benötigte Zeichensätze entfernen und die Dateigröße weiter senken.
9. Preload und DNS Prefetch gezielt einsetzen
Mit gezielten Link Tags im Header sagst du dem Browser, was er vorab laden soll. Das lohnt sich vor allem für Fonts, das Hero Bild und wichtige CSS oder JavaScript Dateien.
Ein Beispiel für einen Font:
html
<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Und für einen externen Dienst wie Analytics:
html
<link rel="dns-prefetch" href="//www.google-analytics.com">
Mit dem Tool web.dev/measure siehst du genau, was sich bei deiner Seite zum Preload eignet.
10. Das CMS bewusst einsetzen
Bei umfangreichen Webflow Projekten wird das CMS schnell zur Bremse, wenn du es nicht sauber konfigurierst. Auf Start oder Landingpages begrenze ich die Anzahl der angezeigten Collection Items, zum Beispiel auf drei Einträge. Bei vielen Beiträgen nutze ich Pagination, und Filter aktiviere ich nur, wenn sie wirklich gebraucht werden.
Kombiniert mit komprimierten CMS Bildern aus Schritt 2 sparst du hier oft am meisten Ladezeit.
11. Skripte von Drittanbietern gezielt laden
Jedes externe Skript, ob Google Maps, Tracking Tool oder Chat Widget, bremst deine Seite. Ich binde nur ein, was wirklich gebraucht wird, lade Skripte asynchron oder mit defer, und aktiviere Tracking Tools wenn möglich erst nach Zustimmung über ein Consent Tool.
Schlanke Alternativen wie Plausible oder Simple Analytics sind zudem datenschutzfreundlicher als klassisches Google Analytics, was auch deiner SEO Strategie hilft, wenn Nutzer wegen Cookiebannern abspringen.
12. Caching verstehen und nutzen
Webflow cached viele Inhalte automatisch, du kannst den Effekt aber verstärken. Nach CMS Änderungen veröffentliche ich bewusst neu, große Assets wie Videos oder PDFs hoste ich extern über ein CDN mit eigener Cache Steuerung, und ich teste regelmäßig mit WebPageTest, wie sich Time to First Byte und Cache Header verhalten.
Was du aus diesem Artikel mitnimmst
Bilder und Videos optimieren, Minify aktivieren, JavaScript asynchron laden, unbenutzte Styles löschen, mit relativen Einheiten arbeiten, Fonts lokal hosten, Drittanbieter Skripte reduzieren und das CMS bewusst begrenzen. Zusammen verbessern diese Schritte Ladezeit, SEO und Nutzererfahrung, gerade auf mobilen Geräten mit schwacher Verbindung.
Die technischen Basics sind der Anfang. Wer wirklich schnell sein will, hinterfragt zusätzlich, welche Inhalte und Features eine Seite überhaupt braucht. Weniger ist oft mehr: schneller, günstiger und einfacher zu pflegen.
Du willst die Performance deiner Website in Webflow verbessern?
Ich helfe dir als Webflow Spezialist, ohne Agentur Overhead, mit Fixpreis. Jetzt kostenlos anfragen →
Häufige Fragen zur Webflow Performance
Wie schnell sollte eine Webflow Website laden?
Als Richtwert gilt eine Ladezeit unter 2,5 Sekunden für den größten sichtbaren Inhalt (Largest Contentful Paint). Werte darüber wirken sich messbar auf Absprungrate und Google Ranking aus.
Welches Bildformat ist in Webflow am schnellsten?
AVIF liefert bei gleicher Qualität meist die kleinste Dateigröße, gefolgt von WebP. JPEG nutze ich nur noch, wenn ein Browser beide modernen Formate nicht unterstützt.
Verlangsamt das CMS meine Webflow Seite?
Nicht automatisch, aber unbegrenzte Collection Listen, zu viele Filter und unkomprimierte CMS Bilder bremsen die Seite spürbar. Begrenzte Listen und Pagination lösen das meist vollständig.
Bremsen Hintergrundvideos meine Website wirklich?
Ja, besonders auf mobilen Geräten. Halte sie unter 5 MB, encode sie effizient und prüfe, ob ein kurzer Loop oder ein einzelnes Bild denselben Effekt erzielt.
Was bringt Minifying von HTML, CSS und JavaScript konkret?
Minifying entfernt überflüssige Zeichen aus dem Code und verkleinert dadurch jede Datei. Bei größeren Projekten macht das oft mehrere Zehntel Sekunden bei der Ladezeit aus.
