Tutorials
Webflow
Pagespeed

Webflow Pagespeed Guide für Fortgeschrittene (2023)

Webflow Pagespeed Guide für Fortgeschrittene (2023)
Autor
Max Frings
Veröffentlicht
3.6.2024
Inhaltsverzeichnis
Gastautor
Webflow Cloneable
100% free to use
In Webflow bearbeitbar
Clients First CSS ready
Relume Library ready
Befähige dein Team im Umgang mit Webflow
Eine Vorschau auf den Webflow Kurs für interne Teams von Virtual Entity
6h Videokurs
Webflow SEO
Editor und Designer
Webflow Pagespeed
Inkl. Kontrollchecklisten

Erhöhe den Pagespeed deiner Webflow Website mit 5 advanced Steps

Du hast unsere 5 Pagespeed Tipps für Beginner umgesetzt aber noch nicht die gewünschten Ergebnisse erreicht? Kein Problem! Hier findest du 5 weitere Performance Tipps, für die du allerdings ein gewisses Grundwissen mit Webflow brauchst.

Dein Guide zum optimierten Pagespeed in Webflow

Warum, und das Pagespeed wichtig für die User Experience und dein Ranking bei Google und anderen Suchmaschinen ist, haben wir dir in unserem ersten Beitrag: Webflow Pagespeed Guide für Einsteiger bereits gezeigt.

Wenn du die Tipps aus dem ersten Beitrag dieser Reihe bereits umgesetzt hast, allerdings noch mehr aus deiner Seite herausholen möchtest, haben wir hier weitere 5 Tipps zusammengestellt. Aber Achtung, die Tipps lassen sich mit ein wenig Vorkenntnissen einfach anwenden, als Beginner können gewisse Passagen aber verwirrend wirken.

1. Optimiere dein Font-Set

Fonts (Schriftarten) werden auf jeder Website verwendet. Zumeist sind diese in den Design-Guidelines eines Unternehmens festgelegt und sollen daher auch auf der Website Anwendung finden. Das Problem: Jedes Font-Weight ist eine einzelne Datei, die beim Seitenaufruf geladen werden muss.

Daher solltest du einerseits alle Fonts und auch einzelne Font-Weights löschen, die nicht verwendet werden. Springe hierzu in die Page Settings / Fonts und klicke den kleinen “Mülleimer” neben den Fonts, die du nicht mehr brauchst. Andererseits solltest du alle verwendeten Fonts in ihrer komprimierten Form (WOFF oder noch besser WOFF2) hochladen. Solltest du deine Fonts nicht bereits in diesem Format haben, gibt es eine Vielzahl an Anbietern im Internet, die das Komprimieren für dich übernehmen.

2. Unterscheide zwischen Eager & Lazy Loading

Du kannst direkt in den Einstellungen eines Elements festlegen, wann dieses geladen werden soll. Um eine optimale Experience bei reduzierter Ladeintesität zu liefern, sollten alle Elemente “Above-the-Fold” (also alle Elemente oberhalb der Bildschirmkante, wenn ein User das erste Mal auf deine Seite kommt und noch nicht gescrolled hat) auf “Eager Loading” und alle anderen auf “Lazy Loading” gestellt werden. Hierdurch garantierst du, dass alle Elemente above the fold direkt mit der Seite geladen werden und keine unschönen Verzögerungen entstehen. Alle anderen Elemente unterhalb des “Fold”, werden aber erst geladen, wenn ein User anfängt zu scrollen.

Um die Ladeeigenschaften von Elementen zu manipulieren, klickst du ein Element (z.B. ein Bild) an und navigierst in dessen Einstellungen:

In den Bildeinstellungen kannst du entscheiden, ob ein Bild eager oder lazy laden soll

3. Vermeide das Preloading von Unterseiten

Über das Preloading hast du Kontrolle einen Browser anzuweisen, Inhalte vorab zu laden, die in näherer Zukunft benötigt werden. In einem Checkout-Prozess kann es beispielsweise sinnvoll sein, alle Schritte des Checkouts vorab zu laden, um eine nahtlose Navigation zwischen den Schritten zu ermöglichen.

Auf der anderen Seite führt das Preloading dazu, dass mehr Inhalte geladen werden, als ein User zur Zeit konsumiert. Das gepaart mit der Annahme, dass alle User anders navigieren, ist Grund genug, auf Preloading zu verzichten. Diese Einstellung ist auch der Default Mode für Links im Webflow Editor. Solltest du dennoch gewisse Links auf Preload oder Prefetch gestellt haben, empfehlen wir, das rückgängig zu machen, wenn es nicht unbedingt sein muss.

In den Link-Einstellungen kannst du das Preloading von Unterseiten festlegen

4. Vermeide (große) Animationen

Animationen sind genial. Sie hauchen einer Website Leben und einen gewissen Grad der Interaktion ein. Allerdings sind sie auch einer der größten Pagespeed-Killer. Aufgrund der hohen Ladeintensität von Animationen, solltest du versuchen so wenige wie möglich zu verwenden. Vermeide insbesondere Animationen, die mit dem Scroll-Fortschritt eines Users interagieren. Da ein Browser jeden State dieser Animationen rendern muss, verlangsamen diese deinen Pagespeed enorm.

5. Delay von nicht-essentiellen Skripten

Im ersten Beitrag dieser Reihe, haben wir schon darüber geschrieben, dass externe Skripte so gut es geht vermieden werden sollten. Sind diese dennoch notwendig, macht es Sinn, diese zu delayen, bis sie benötigt werden. Insbesondere bei Conversion-Pixeln und ähnlichen Skripten macht es Sinn, diese erst auf einer Checkout / Conversion Page zu laden. Hierzu eignet sich die Delay Funktion des Google Tag Managers. Zudem kannst du über defer und async Skripte asynchron oder nachgelagert laden. Wie das geht kannst du in diesem Cloudflare Blog Artikel lesen.

Wir hoffen, dass diese 5 Tipps dir schnell und hoffentlich nicht zu kompliziert helfen, deinen Pagespeed zu erhöhen. Wenn du alle Tipps (Einsteiger und Fortgeschritten) nochmal komprimiert als Checkliste haben möchtest, schreibe uns gerne eine Email an hello@virtual-entity.com.