Zum Inhalt springen
Erstgespräch
Menü

Webdesign

Webdesign-Optimierung für eine bestehende Website

Bei der Webdesign-Optimierung baust du eine bestehende Website so um, dass Besucher schneller verstehen, was du anbietest, und leichter anfragen. Dazu gehören Ladezeit, eine Navigation ohne Umwege, eine Seite, die auf dem Smartphone funktioniert, und auf jeder Seite ein klarer nächster Schritt.

Michael FeikeVeröffentlicht aktualisiert 5 Minuten Lesezeit

Ein Webdesigner sitzt am Esstisch und prüft eine Website.
KI-generiert
Inhalt

Deine Website steht, sie sieht ordentlich aus, aber es kommen kaum Anfragen darüber rein. Bevor du sie komplett neu bauen lässt, lohnt sich ein genauer Blick, woran es hakt. Manchmal sind es ein paar Stellen, die Besucher kurz vor der Anfrage abspringen lassen.

Was klärst du vor der Webdesign-Optimierung?

Zwei Dinge. Zum einen, was ein Besucher auf deiner Website tun soll, also anrufen, ein Formular ausfüllen oder einen Termin buchen. Zum anderen, wer überhaupt kommt, Privatkunden vom Handy aus oder Einkäufer am Schreibtisch. Erst dann weißt du, worauf du optimierst.

Danach schaust du dir an, wie die Seite heute genutzt wird. Die Google Search Console zeigt dir, über welche Suchbegriffe Leute kommen und auf welchen Seiten sie landen. PageSpeed Insights misst, wie schnell die Seite auf dem Smartphone lädt. Und am meisten lernst du, wenn du jemanden, der deine Website nicht kennt, bittest, bei dir ein Angebot anzufragen, und zuschaust, wo er hängen bleibt.

Ein Mitarbeiter prüft eine Website im Großraumbüro.

Was optimierst du, und in welcher Reihenfolge?

  1. Ladezeit. Bilder komprimieren und in der Größe ausliefern, in der sie gebraucht werden, unnötige Skripte und Plugins rauswerfen. Eine langsame Seite kann Besucher verlieren, bevor sie überhaupt etwas sehen.
  2. Navigation. Wenige Menüpunkte mit klaren Namen. Wer bei dir eine Leistung sucht, soll sie ohne Umwege finden.
  3. Der nächste Schritt auf jeder Seite. Ein sichtbarer Knopf oder Link, der sagt, was als Nächstes passiert, zum Beispiel “Angebot anfragen” oder “Termin buchen”.
  4. Texte. Schreib, was du für wen machst und was der Kunde davon hat, mit den Begriffen, die er bei Google eintippt.
  5. Interne Links. Verlinke Ratgeber und Leistungsseiten untereinander, damit Besucher und Google den Zusammenhang sehen.
  6. Barrierefreiheit. Alt-Texte für Bilder, genug Kontrast, lesbare Schriftgrößen. Guter Kontrast hilft zum Beispiel auch, wenn jemand das Handy in der Sonne liest.

Infografik zu den Grundlagen der Webdesign-Optimierung

Die Reihenfolge hat einen Grund. Ladezeit und Navigation betreffen jede Seite und jeden Besucher. Texte und Links kommen danach, weil sie Seite für Seite Arbeit sind.

Warum zählt die Smartphone-Version?

Google bewertet Websites anhand ihrer Smartphone-Version. Was auf dem Handy fehlt oder langsam lädt, schadet dem Ranking, auch wenn die Desktop-Version tadellos funktioniert.

Ein typisches Problem auf Websites kleiner Betriebe sind Inhalte, die auf dem Handy in Klapp-Elementen versteckt oder ganz ausgeblendet sind. Prüf deshalb vier Dinge:

  • Gleicher Inhalt. Alles, was auf dem Desktop steht, muss auch auf dem Handy vollständig da sein.
  • Strukturierte Daten. Das Schema-Markup gehört auch in die mobile Version.
  • Core Web Vitals. Ladezeit (LCP), Reaktionszeit (INP) und Layout-Verschiebungen (CLS) zählen für das Ranking in der Smartphone-Messung.
  • Canonical-Tags. Mobile und Desktop-Version zeigen auf dieselbe Adresse.

In der Search Console kannst du unter “URL-Prüfung” eine deiner wichtigsten Seiten eingeben und dir anzeigen lassen, was Google auf dem Smartphone sieht. Ist das kürzer als deine Desktop-Seite, hast du ein konkretes Problem.

Was hält Besucher auf dem Handy von der Anfrage ab?

  • Zu kleine Schaltflächen. Was mit der Maus gut klickbar ist, trifft man mit dem Daumen schwer.
  • Formulare mit zu vielen Feldern. Auf dem Handy tippt keiner gern zehn Felder aus. Wie kurz ein Formular sein kann, steht bei den Landingpages.
  • Verschachtelte Menüs. Drei Ebenen tief auf einem kleinen Bildschirm sind mühsam.
  • Riesige Bilder. Sie machen die Seite langsam und kosten Datenvolumen.
  • Kontakt erst ganz unten. Wer erst lange scrollen muss, fragt seltener an.

Für die Größe von Schaltflächen gibt es eine klare Vorgabe. Die Richtlinien für barrierefreie Webinhalte nennen für Touch-Ziele mindestens 24 × 24 CSS-Pixel (WCAG 2.2, Kriterium 2.5.8) und als höhere Stufe 44 × 44 CSS-Pixel (Kriterium 2.5.5). Die tippbare Fläche kann dabei kleiner sein, als das Element aussieht.

Mobile-First oder Responsive Design?

Responsive Design heißt, dass sich eine Website an verschiedene Bildschirmgrößen anpasst. Wird sie aber zuerst für den Desktop gebaut und danach fürs Handy zurechtgestutzt, bleibt die mobile Version ein Kompromiss. Inhalte werden versteckt statt weggelassen, Skripte laden trotzdem, Bilder bleiben zu groß.

Mobile-First dreht das um. Gebaut wird zuerst für den kleinsten Bildschirm, größere Bildschirme bekommen Erweiterungen. Das zwingt dazu, Unnötiges zu streichen.

Ansatz Ausgangspunkt Typisches Ergebnis
Mobile-First Smartphone schlanke, schnelle Seite
Responsive Design Desktop angepasstes Layout, mobil ein Kompromiss
Mobile-Friendly kein fester Ausgangspunkt grundlegende Darstellbarkeit

Sobald ein Team anfängt, Mobile-First zu denken, werden Fragen gestellt, die vorher niemand gestellt hat. Brauchen wir diesen Slider wirklich? Warum haben wir fünf Navigationspunkte auf der Startseite? Kleinere Bildschirme decken auf, was auf dem Desktop unter dem Teppich lag.

Michael Feike

Was bremst Anfragen auf der Website?

  • Die Website erzählt nur von dir. Geschichte, Werte, Team, und erst ganz unten, was du für den Kunden tust. Dreh die Reihenfolge um.
  • Textwände. Lange Absätze ohne Zwischenüberschriften sind auf dem Handy mühsam zu lesen.
  • Mehrere Ziele auf einer Seite. Newsletter, Social Media, Kontakt, Karriere, alles gleich groß. Dann weiß der Besucher nicht, was er tun soll.
  • Relaunch ohne Weiterleitungen. Alte Adressen laufen ins Leere, und was bei Google gut stand, kann verloren gehen.

Woran siehst du, ob sich die Arbeit gelohnt hat?

Leg vorher fest, woran du Erfolg erkennst, und schreib die Ausgangswerte auf. Die wichtigste Zahl sind die Anfragen über die Website, dazu die Besucher über Google, die Ladezeit auf dem Smartphone und auf welchen Seiten Besucher abspringen.

Einmal im Monat reinschauen reicht. Wenn sich nach einer Änderung etwas verschlechtert, weißt du dann auch, woran es lag.

Ist die Technik dahinter so alt, dass Optimieren nicht mehr reicht, bau ich dir die Seite neu, mehr dazu unter Webdesign für Unternehmen. Und wenn die Website steht, aber Anfragen liegen bleiben, hilft das Anfrage-System mit KI.

Häufige Fragen

Was bedeutet Mobile-First-Indexing bei Google?

Google nimmt für die Bewertung einer Website ihre Smartphone-Version als Grundlage. Inhalte, die nur auf dem Desktop zu sehen sind, fließen dann schwächer oder gar nicht ein.

Was ist ein Alt-Text?

Eine kurze Beschreibung eines Bildes im Code der Seite. Screenreader lesen sie blinden Besuchern vor, und Google versteht darüber, was auf dem Bild zu sehen ist. Ein guter Alt-Text beschreibt das Bild in einem Satz, ohne Suchbegriffe hineinzustopfen.

Muss ich für eine Optimierung die Website neu bauen?

Nein, nicht unbedingt. Ladezeit, Navigation, Texte und Kontaktwege lassen sich an einer bestehenden Website verbessern. Ein Neubau lohnt sich, wenn die Technik dahinter das nicht mehr hergibt.

Was gehört auf die Startseite?

Gleich oben, was du machst, für wen und in welcher Region, dazu der Weg zur Anfrage. Danach die wichtigsten Leistungen mit Link auf ihre eigene Seite und etwas, das Vertrauen schafft, etwa Bewertungen. Deine Firmengeschichte kann weiter unten stehen.

Wie prüfe ich, ob meine Website auf dem Handy richtig funktioniert?

Klick dich auf deinem eigenen Handy einmal bis zur Anfrage durch, am besten auch auf einem älteren Gerät. Am Rechner zeigt die Geräteansicht in den Entwicklertools des Browsers verschiedene Bildschirmgrößen, und die URL-Prüfung der Search Console zeigt, was Google auf dem Smartphone sieht.

Wie mache ich meine Website schneller?

PageSpeed Insights listet unter „Diagnose“ auf, welche Dateien bei dir bremsen, das ist deine Arbeitsliste. Helfen können moderne Bildformate wie WebP oder AVIF, ein Caching für die Seiten und ein Hosting, das schnell antwortet.

Passende Artikel