So schnell lädt eine Webflow Website – Google Pagespeed optimieren

Google liebt schnelle Websites. Deshalb werden Websites mit einem guten PageSpeed von dem Suchmaschinenriesen auch mit einem guten Ranking belohnt. Ein Grund mehr, die Ladegeschwindigkeit seiner Website zu beschleunigen.

Hier kommen einige Tipps, wie du deiner Webflow Website ganz easy den nötigen Push in Sachen Ladezeit gibst. Und damit ganz nebenbei dein Google Ranking aufwertest.

Tipp 1: CSS und JavaScript Code minifizieren

Dazu gehst du in deinem Webflow Dashboard auf Publish und wählst unter 'Advanced Options' alle Minify-Optionen aus.

Tipp 2: Lazy Loading bei Bildern im sichtbaren Bereich deaktivieren

In Webflow sind standardmäßig alle Bilder auf Lazy Loading eingestellt. Das bewertet Google für Bilder im sichtbaren Bereich nicht positiv. Wähle dein Logo an, gehe auf das Zahnrädchen und wähle unter Load 'Auto: Defaults to browser' aus.

Tipp 3: Sichtbaren Bereich priorisieren

Befindet sich im sichtbaren Bereich ein großes Bild oder Video, vergib eine fest definierte Höhe und Breite oder wähle 'Fit cover'.

Tipp 4: Bilder in modernen Formaten bereitstellen

Wähle in Webflow unter Images die Bilder aus und klicke auf 'Compress'. Die Bilder werden in ein WebP-Format umgewandelt.

Tipp 5: Logos & kleine Grafiken dimensionieren

Unter den Image Settings immer Breite und Höhe festlegen. Besonders bei SVG.

Tipp 6: Große Netzwerk Nutzlast durch Background Videos vermeiden

Integriere Background Videos über ein HTML Embed statt direkt in Webflow, damit nur eine Quelle geladen wird.

Tipp 7: CMS Bilder im WebP Format hochladen

Alle Bilder im CMS solltest du im WebP-Format hochladen.

Tipp 8: Viele Animationen und damit mehr JavaScript vermeiden

Viele Animationen bedeuten längere Ladezeiten. Hier muss von Projekt zu Projekt bewertet werden, wie wichtig individuelle Animationen sind.

Tipp 9: CSS-Styles wiederverwenden

Nutze immer wieder die gleichen CSS-Styles für funktionsgleiche Elemente. Google liebt logisch aufgebaute Websites.

Tipp 10: Nicht verwendete Interaktionen und CSS Styles entfernen

Klicke im Bereich Interactions auf 'Clean up'. Dann werden alle Klassen-Namen gelöscht, die nicht in Verwendung sind.

Tipp 11: Deine Font selber hosten

Integriere Google Fonts DSGVO konform in dein Webflow Projekt. Lade die Schriftfamilie herunter und binde sie als Custom Font ein. Damit vermeidest du zusätzliche Google-Skripte.

Tipp 12: Lottie Files wenn möglich vermeiden

Große Lottie Files können deinen Score drastisch nach unten ziehen.

Tipp 13: Wenn möglich CSS Animationen einsetzen

Für einfache Hover Animationen kann man häufig mit CSS alleine zum Ziel kommen, ohne JavaScript-Code zu generieren.