Andreas Busche leitet die Dragon & Tiger Kampfsportschule in Neufahrn bei Freising. Für das Redesign habe ich die Kurse nach Alter und Disziplin geordnet, jedem Kurs eine eigene Unterseite gegeben und das Probetraining so eingebunden, dass Anmeldungen direkt bei der Schule ankommen.
Eine Kampfsportschule für Kinder, Jugendliche und Erwachsene
Die Schule liegt in der Bahnhofstraße in Neufahrn, ihre Mitglieder kommen auch aus Eching, Hallbergmoos, Garching und Freising. Trainiert wird Karate, Kickboxen, Krav Maga, Selbstverteidigung und Sport-Chanbara, in kleinen Gruppen und ab vier Jahren. Bei Google steht die Schule mit 5,0 Sternen aus 20 Rezensionen.
Weil die Kurse ab vier Jahren beginnen, hat die Webseite zwei Zielgruppen. Eltern suchen einen Kurs für ihr Kind, Erwachsene einen für sich selbst. Dazu kommt ein Kursplan mit vielen Gruppen und Altersstufen, und am Ende soll möglichst jeder Besucher beim kostenlosen Probetraining landen.
Warum die Webseite auf Astro läuft
Die Webseite sollte schnell laden und bei Google gut gefunden werden. Deshalb habe ich sie mit Astro umgesetzt. Astro erzeugt beim Bauen fertiges HTML, beim Aufruf muss der Server nichts mehr berechnen.
Für die komplette Startseite fallen nur 14 HTTP-Anfragen an, also nur 14 Dateien, die der Browser holen muss. Deshalb steht die Seite auch im Mobilfunknetz schnell da. Schriften und Bilder liegen auf demselben Server. Die Besucherstatistik kommt ohne Cookies aus, deshalb braucht die Webseite keinen Cookie-Banner. Auch die Google-Bewertungen stehen direkt in der Seite statt in einem fremden Widget, das bei jedem Aufruf nachladen müsste.
Für jeden Kurs eine eigene Unterseite
Damit Besucher genau den Kurs finden, den sie suchen, hat jeder Kurs eine eigene Unterseite bekommen: Karate für Kids, Teenager und Erwachsene, Kickboxen für Kinder und Jugendliche und für Erwachsene, Krav Maga, Selbstverteidigung für Erwachsene und für Kids und Teenager, Kinderprävention, Sport-Chanbara und das Deeskalationstraining. Auf der Startseite teilt sich das Angebot in die zwei Einstiege „Kids & Teenager“ und „Erwachsene“.
Eine Mutter, die Karate für ihren Sechsjährigen sucht, will keine Seite lesen, die auch Krav Maga für Erwachsene erklärt. Jede Unterseite nennt deshalb die passende Altersgruppe und führt direkt zum Probetraining für genau diesen Kurs.
Kursplan und Termine auf einen Blick
Im Kursplan stehen alle Trainingszeiten der Woche. Am Desktop steht er als Wochentabelle mit Uhrzeiten, Altersgruppen und Halle. Auf dem Handy wäre so eine Tabelle zu breit, dort stehen die Kurse deshalb nach Wochentagen untereinander.
Anstehende Termine wie eine Schwarzgurt-Prüfung oder die Halloween-Party stehen in einer Leiste ganz oben auf jeder Seite und in einem eigenen Abschnitt auf der Startseite. Zusätzlich sind sie als Veranstaltungen in den strukturierten Daten hinterlegt, damit Google sie als Termin erkennt.
In zwei Minuten zum Probetraining
Das Ziel der Webseite ist die Anmeldung zum kostenlosen Probetraining, einem Pass für zwei Trainingstage. Jede Kursseite führt dorthin, und der Button sitzt auch im Kopf der Webseite. Die Anmeldung habe ich so eingebunden, dass sie direkt in der Software ankommt, mit der die Schule ihre Mitglieder verwaltet. Niemand muss eine E-Mail abtippen, und keine Anfrage geht in einem Postfach verloren.
Lokales SEO für Neufahrn und den Münchner Norden
Die Webseite ist für lokales SEO optimiert. Die Daten, die für Suchmaschinen wichtig sind, habe ich per Schema.org hinterlegt: die Schule als Sportstätte und als Sportorganisation, mit Adresse, Geokoordinaten, Telefonnummer und den angebotenen Sportarten.
Dazu kommen Andreas Busche als Schulleiter und die Orte im Münchner Norden, aus denen die Mitglieder kommen. Damit kann Google die Schule Neufahrn und den umliegenden Orten eindeutig zuordnen.
Die Webseite auf dem Handy
Viele Eltern suchen am Handy nach einem Kurs für ihr Kind. Dort steht das Foto aus dem Training zuerst, damit sie sofort sehen, wie das Training aussieht. Darunter folgen Überschrift und die beiden Buttons für Probetraining und Kursplan.
Auf dem Handy muss niemand seitlich wischen, um den Kursplan zu lesen.
Was die Webseite messbar leistet
PageSpeed Insights bewertet die Startseite am Desktop mit 100 Punkten für die Leistung, 100 für Best Practices, 100 für SEO und 96 für Barrierefreiheit.
Die Messwerte dahinter:
| Messwert | Ergebnis | Was es bedeutet |
|---|---|---|
| First Contentful Paint | 0,3 s | Der erste Inhalt ist sichtbar |
| Largest Contentful Paint | 0,5 s | Das größte Element, hier das Foto oben, ist geladen |
| Total Blocking Time | 0 ms | Die Seite reagiert sofort auf Klicks und Tippen |
| Cumulative Layout Shift | 0,002 | Beim Laden verspringt praktisch nichts |
| Speed Index | 0,4 s | So schnell baut sich die sichtbare Seite auf |
Das große Foto oben auf der Startseite ist nach 0,5 Sekunden vollständig zu sehen. Ein Layout-Shift von 0,002 heißt, dass beim Laden praktisch nichts verspringt, auch nicht die Terminleiste ganz oben.
Betreuung der Webseite
Die laufende Betreuung übernehme ich, damit sich das Team auf das Training konzentrieren kann. Bei einer Astro-Webseite gibt es keine wöchentlichen Plugin-Updates und keine Sicherheitslücken in Erweiterungen. Ich pflege die Inhalte, also einen geänderten Kursplan, neue Termine, einen Beitrag in den News oder neue Preise. Außerdem überwache ich, ob die Webseite erreichbar ist, und werte aus, über welche Suchanfragen Besucher kommen.
Die Webseite ansehen
Die fertige Webseite steht unter kampfsport-schule-neufahrn.de. Weitere Projekte sind in den Referenzen gesammelt, die Startpreise für Webseiten und Betreuung stehen auf der Preisseite.
Quellen
Häufige Fragen zur Webseite der Kampfsportschule
Warum eine Webseite für eine Kampfsportschule mit Astro statt mit WordPress?
Astro liefert fertiges HTML aus. Beim Aufruf gibt es keine Datenbankabfrage, kein Theme, das gerendert wird, und keine Plugins, die monatlich aktualisiert werden müssen. Für eine Kampfsportschule mit festen Inhalten wie Kursen, Preisen und Trainingszeiten passt das gut. Die Webseite lädt schnell. Weil es keine Plugins gibt, fallen auch deren Sicherheitslücken und Update-Kosten weg. WordPress bleibt die bessere Wahl, wenn mehrere Leute täglich Inhalte pflegen oder ein Shop dazukommt.
Wie kommen die Anmeldungen zum Probetraining bei der Schule an?
Das Formular für das Probetraining stammt aus der Software, mit der die Schule ihre Mitglieder verwaltet. Wer sich anmeldet, landet dort direkt als Interessent. Niemand muss eine E-Mail abtippen, und das Team sieht alle Anfragen an einem Ort. Ist im Browser JavaScript abgeschaltet, öffnet ein Link das Formular in einem neuen Tab, und die Telefonnummer steht gleich daneben.
Wie werden Termine wie Gürtelprüfungen auf der Webseite sichtbar?
Anstehende Termine stehen in einer Leiste ganz oben auf jeder Seite und in einem eigenen Abschnitt auf der Startseite. Zusätzlich sind sie als Veranstaltungen in den strukturierten Daten hinterlegt, mit Datum und Beschreibung. Google kann sie damit als Veranstaltung erkennen statt als beliebigen Text.
Was kostet eine Webseite wie die der Dragon & Tiger Kampfsportschule?
Eine Unternehmenswebseite beginnt bei 1.999 Euro netto. Was am Ende zusammenkommt, hängt vom Umfang ab, also von der Zahl der Unterseiten, vom Bildmaterial und davon, ob eigene Funktionen wie ein Kursplan oder eine Terminleiste dazukommen. Die aktuellen Startpreise stehen auf der Preisseite.
