Zusammenfassung
Die Webflow-Website der Gastroenterologie am Ettlinger Tor erreicht im Google PageSpeed Index stabile 91 auf Mobil und 99 auf Desktop. In diesem Beitrag zeige ich, wie der Score zustande kam, welche strategischen und technischen Entscheidungen den Unterschied gemacht haben und welche Hebel Du für Deine eigene Webflow-Seite mitnehmen kannst.
Vorab: PageSpeed gehört zu den Faktoren, die zählen, ist aber nicht das einzige Kriterium für eine erfolgreiche Website. Lass Dich von den Zahlen nicht verrückt machen, sondern überlege, was Deine Seite leisten soll. Bei der Praxis war Performance von Anfang an ein zentrales Thema, weil die Seite in einem lokal umkämpften Markt besser ranken sollte und mobil zuverlässig laden muss, gerade für Patient:innen, die sich gesundheitlich nicht in bester Form befinden.
Der Google PageSpeed Index ist eines der bekanntesten Werkzeuge, um die Performance einer Website zu bewerten. Er misst, wie schnell eine Seite lädt, wie schnell Nutzer:innen mit ihr interagieren können und wie stabil sich die Inhalte aufbauen. Aus diesen Werten ergibt sich ein Score zwischen 0 und 100, jeweils getrennt für Mobil und Desktop. Google nutzt diese Daten als einen Faktor im Ranking, und gleichzeitig spiegeln sie wider, wie eine Seite in der Praxis erlebt wird.
Damit ist der Score eine Metrik, an der sich viele festbeißen. Erst sind 80 nicht genug, dann müssen es 90 sein, und dann wird enorm viel Zeit reingesteckt, um noch einen Punkt näher an die 100 zu kommen. Dabei verschiebt sich der Wert je nach Tageszeit, Server-Last und Messstation um zehn Punkte nach oben oder unten. Wer nur auf die Zahl starrt, verliert sich in Optimierungen, die im Ranking kaum etwas bringen, und übersieht oft, dass eine inhaltlich starke Seite mit Score 78 erfolgreicher arbeiten kann als eine schwache mit Score 96.
Trotzdem war PageSpeed bei der Gastroenterologie am Ettlinger Tor von Anfang an ein zentrales Thema. Der Markt für Praxis-Websites ist lokal umkämpft, und jeder Faktor, der das Ranking stützt, zählt. Genauso wichtig war aber der zweite Aspekt: Eine Praxis-Website wird oft mobil aufgerufen, häufig von Menschen, die sich gerade nicht wohlfühlen, manchmal von einem älteren Publikum, das mit langen Ladezeiten weniger Geduld hat. Eine Seite, die zwei Sekunden später aufgeht, kostet hier nicht nur Sichtbarkeit, sondern Zugang. Genau deshalb haben wir den Wert nicht nachträglich verbessert, sondern von Anfang an mitgebaut.
Das Projekt und seine Anforderungen
Die Praxis hat ihre Website im Zuge des Relaunchs komplett neu aufgesetzt. Vorher lief sie auf einem anderen System und rankte solide bei Google, war aber für die Praxis selbst nur eingeschränkt pflegbar. Jeder Urlaubshinweis, jede Anpassung am Team und jede Aktualisierung der Praxisinformationen musste über externe Entwickler laufen. Der primäre Anlass für den Relaunch war der Wunsch der Praxis, die Website ohne Programmierkenntnisse selbst betreuen zu können.
Daneben gab es weitere Anforderungen, die ich mit dem Team durchgesprochen habe. Das bestehende Termintool und das CRM der Praxis sollten weiterlaufen, also eingebunden, nicht ersetzt werden. Patient:innen brauchen klare Informationen zu Behandlungen, Vorbereitung, Sprechzeiten und Anfahrt. Die Seite muss mobil zuverlässig laden, weil dort der Großteil der Aufrufe stattfindet. Und sie sollte möglichst barrierearm sein, weil das Publikum altersgemischt ist und viele Patient:innen mit gesundheitlichen Einschränkungen darauf zugreifen.
Wer das Projekt im Ganzen sehen möchte, findet Details auf der Referenzseite zur Gastroenterologie am Ettlinger Tor. Hier geht es um den Performance-Aspekt und darum, wie er entstanden ist.
Die strategische Entscheidung: nüchtern statt verspielt
Die wichtigste Entscheidung für den späteren Score wurde nicht in der Umsetzung getroffen, sondern bereits im Konzept. Eine Arztpraxis ist ein sensibles Thema, und Patient:innen wollen vor allem zwei Dinge: sich orientieren und Vertrauen aufbauen. Animationsreiches Storytelling hilft dabei nicht, es lenkt eher ab und passt nicht zur Erwartungshaltung der Zielgruppe.
Wir haben uns deshalb bewusst für eine ruhige und nüchterne Seite entschieden, ohne Hero-Videos, ohne Scroll-Animationen und ohne schwebende Elemente. Stattdessen klare Texte, gut strukturierte Informationen und großformatige Bilder, die die Praxis und das Team zeigen. Vertrauen entsteht in diesem Kontext durch Echtheit und nicht durch visuellen Effekt. Die Bilder wurden alle von SYD Media direkt in der Praxis aufgenommen, weil professionelle, authentische Aufnahmen genau in diesem Vertrauenskontext den Unterschied machen und kein Stockmaterial das Gefühl vermittelt, hier willkommen zu sein.
Diese strategische Entscheidung hat zwei Folgen, die zusammenspielen. Sie passt inhaltlich zur Praxis und zum Empfinden der Patient:innen, und sie nimmt der späteren Performance-Optimierung einen großen Teil der Last ab, bevor die Umsetzung überhaupt beginnt. Was nicht da ist, muss nicht geladen werden. Genau das ist auch der Grund, warum nicht jede meiner Webflow-Seiten denselben Score erreicht und warum sie es auch nicht muss. Eine Marken-Website mit Storytelling-Anspruch hat andere Aufgaben und braucht andere Mittel. PageSpeed ist immer relativ zur Strategie zu bewerten, nicht absolut.
Was konkret zur Performance in Webflow beigetragen hat
Sobald die strategischen Leitplanken stehen, geht es an die Umsetzung. Hier die Hebel, die im Projekt gegriffen haben, in der Reihenfolge, in der sie wirken.
Lumos als Framework
Bevor in einem Projekt die erste Section entsteht, baue ich auf einer soliden Grundlage auf, und das ist bei mir das Lumos Framework. Lumos ist ein Regelwerk für den Aufbau von Webflow-Projekten, das Klassen, Abstände, Typografie und Komponenten in einem konsistenten System organisiert.
Für die Performance bedeutet das: Der CSS-Output bleibt schlank, weil Combo-Klassen die Anzahl der Klassen klein halten, und die Seite ist von Grund auf sauber strukturiert, statt projektweise neu erfunden zu werden. Daneben bringt das Framework Vorteile bei der Barrierefreiheit, die ohne Mehraufwand mitlaufen. Lumos ist kein direkter PageSpeed-Booster, aber es ist die Grundlage, die alle anderen Maßnahmen tragfähig macht.
Bilder
Auf einer Bild-orientierten Seite wie dieser sind Bilder die größte einzelne Stellschraube für Performance. Ich exportiere die Aufnahmen aus Figma in mittlerer Qualitätsstufe und nutze danach in Webflow die integrierte Funktion zur AVIF-Konvertierung.
Das ist ein Detail, das viele übersehen: Du kannst alle Bilder einer Seite mit einem Klick auswählen und konvertieren lassen, und Webflow rechnet sie auf einen Bruchteil der ursprünglichen Größe herunter, ohne dass die Qualität sichtbar leidet. Lazy Loading ist überall aktiv, außer bei Bildern, die direkt im sichtbaren Viewport stehen. Responsive Varianten erzeugt Webflow ohnehin automatisch, das musst Du nicht selbst übernehmen.
Schriften
Die Schriften liegen direkt in Webflow, nicht extern bei Google Fonts oder einem anderen Anbieter. Das ist erstens DSGVO-konform und spart zweitens eine externe Anfrage beim Seitenaufruf. Verwendet wird das WOFF2-Format, das kleinste verfügbare. Außerdem habe ich die Anzahl der eingebundenen Schriftschnitte bewusst auf das Nötige reduziert, weil jeder zusätzliche Schnitt Ladezeit kostet, ohne dass es jemand merkt.
Skripte und Embeds
Hier wird viel verschenkt, wenn man nicht aufpasst. Auf der Praxis-Seite läuft so wenig Drittanbieter-Code wie möglich. Das Termintool ist über ein iFrame eingebunden, sodass es den Seitenaufbau nicht blockiert. Wo Skripte nötig sind, lade ich sie mit Defer-Tag und nur auf den Seiten, auf denen sie tatsächlich gebraucht werden. Das klingt nach Detail, summiert sich aber spürbar.
Animationen
Wo überhaupt Animation passiert, etwa bei Button-Hovern oder kleinen Reaktionen auf Karten, läuft sie über CSS, nicht über JavaScript. CSS-Animationen sind kleiner, performanter und barrierefreier als ihre JS-Pendants, und für die einfachen Effekte, die hier sinnvoll sind, reicht CSS allemal aus.
Webflow-Einstellungen
In den Site-Settings sind HTML, CSS und JavaScript minifiziert. Das sind drei Häkchen, die viele übersehen, und sie sparen messbar, ohne dass Du irgendetwas am Layout ändern musst. Lazy Loading ist als Default aktiv. Ob man zusätzlich CSS-per-Page einsetzt, hängt vom Layout ab und sollte vorher auf der Staging-Seite getestet werden, weil es in Einzelfällen Darstellungseffekte haben kann.
Strukturelle Sauberkeit
Die Seite arbeitet mit wiederverwendbaren Komponenten. Ein CMS im Hintergrund war nicht nötig, weil der Inhalt das nicht erforderte. Weniger Komplexität bedeutet weniger Last, und auch das wirkt sich auf den Score aus, ohne dass es als einzelne Maßnahme sichtbar wird.
Das Ergebnis ist ein Accessibility-Score von 100 und PageSpeed-Werte, die sowohl mobil also auch auf dem Desktop stabil über 90 liegen.
Tipps zur PageSpeed-Optimierung in Webflow
Wenn Du an einer Webflow-Seite sitzt und den Score nach oben bringen willst, sind das die Hebel mit dem besten Verhältnis von Aufwand zu Wirkung.
Tipp 1: Nutze die Webflow-Bildkomprimierung
Seit einiger Zeit kannst Du in Webflow Bilder mit einem Klick ins AVIF-Format konvertieren. Du wählst alle Bilder einer Seite aus, drückst den Button, fertig. Aufwand: dreißig Sekunden. Effekt: Bilder, die bei guter Qualität nur einen Bruchteil ihrer ursprünglichen Größe haben. Wenn Du nichts anderes machst, mach das. Es ist der einfachste und wirkungsvollste Hebel überhaupt.
Tipp 2: Aktiviere die Minifizierung
In den Site-Settings unter Publishing findest Du drei Häkchen für Minifizierung von HTML, CSS und JavaScript. Setze alle drei. Sie kosten nichts und sparen Ladezeit. Zusätzlich gibt es die Optionen für CSS-per-Page und für asynchrones Laden von JavaScript. Beides kann helfen, kann aber je nach Projekt auch das Layout beeinflussen, deshalb lohnt es sich, das vorher auf einer Staging-Seite zu testen.
Tipp 3: Schau Dir Deine Skripte an
Drittanbieter-Skripte sind häufig der größte Bremsklotz auf einer Webflow-Seite. Frag Dich bei jedem Skript, ob es auf jeder Seite gebraucht wird oder nur auf einer einzigen, und ob es synchron laden muss oder mit einem Defer-Tag warten kann, bis der Rest der Seite steht. Wer hier konsequent ausmistet, findet oft deutliche Reserven.
Wer diese drei Hebel zieht, hat in den meisten Fällen die größte Wirkung erzielt. Alles, was darüber hinausgeht, fällt in den Bereich Feinjustage und ist mit deutlich mehr Aufwand für deutlich kleineren Effekt verbunden.
Was Du beim Messen wissen solltest
PageSpeed-Werte sind nicht so stabil, wie viele denken. Bei der Praxis-Seite habe ich auch schon Messungen gesehen, die mobil bei 68 lagen, kurz darauf wieder bei 91. Server-Last, Tageszeit und die Messstation des PageSpeed-Tools spielen eine Rolle, und das Ergebnis kann je nach Lauf um zehn Punkte schwanken.
Mein Vorgehen ist deshalb: über mehrere Tage messen, eine Tendenz ablesen und sich von Einzelwerten nicht verrückt machen lassen. Ein Wert, der zwischen 85 und 92 schwankt, ist im grünen Bereich. Ein Wert, der konstant bei 45 liegt, hat ein echtes Problem, das angeschaut werden sollte. Alles dazwischen ist eine Frage der Strategie und der Mittel.
Tools, die ich empfehle: Google PageSpeed Insights für den Standardblick, ergänzend Lighthouse direkt im Chrome DevTools. Wer auch SEO breiter prüfen will, kann den kostenlosen Seobility-Check nutzen. Mehr braucht es im ersten Schritt nicht.
Mein Fazit zu Performance-Optimierung in Webflow
Die Seite der Gastroenterologie erreicht ihren PageSpeed-Wert nicht durch ein Geheimnis, sondern durch eine Kombination aus strategischer Klarheit und sauberer Umsetzung. Die Entscheidung gegen Effekte hat den größten Beitrag geleistet, das Lumos Framework hat die Grundlage geschaffen, die technische Umsetzung hat das Ergebnis abgesichert.
Was Du daraus mitnehmen solltest: PageSpeed ist ein wichtiger Faktor unter mehreren. Eine Seite mit Score 75 kann gut ranken, wenn Inhalt und Struktur stimmen. Eine Seite mit Score 95 hilft Dir nicht, wenn niemand findet, was er sucht. Optimiere Performance dort, wo sie zur Aufgabe der Seite gehört. Bei einer Praxis-Website wie dieser gehört sie dazu, weil Geschwindigkeit und Zugänglichkeit das Vertrauen der Patient:innen direkt beeinflussen.
Wenn Du gerade über einen Relaunch nachdenkst und Performance dabei ein Thema sein soll, schreib mir gerne. In einem ersten Gespräch klären wir, was Deine Seite leisten muss, welche Rolle PageSpeed dabei spielt und wie wir das im Projekt von Anfang an mitdenken. Wer mehr darüber lesen möchte, was bei welchem Budget realistisch ist, findet das im Beitrag „Was kostet eine Webflow-Website?".
