Wie du selber deine Website verbessern kannst
Hast du Lust das Potential deiner Website auszuschöpfen, um auf ansprechende und respektvolle Weise mehr Kunden zu gewinnen?
In diesem Artikel bekommst du einen Blumenstrauß an Impulsen, wie du mit meist wenig Aufwand einen großen Effekt erzielen kannst.
Zum Start erstmal ein Überblick über die Themen, die wir uns anschauen werden:
Alles Wichtige in einer Minute:
Überblick
Mobile First
Bildkompression
Beschreibungstexte deiner Bilder
Kontrast / Leserlichkeit / Barrierefreiheit
Auf die Plätze, fertig, Website Upgrade!
1. Mobile First
“Im Jahr 2015 meldete Google, dass erstmalig mehr Suchanfragen über Mobilgeräte als über Desktopgeräte erfolgten. “ schreibt IONOS in diesem Artikel.
Heutzutage (Stand Januar 2022) werden Websites zu 60-70% über Smartphones angeschaut. Daraus ergibt sich eine ganz klare Devise: Mobile First im Webdesign!
Ich selber habe hier erstmal schlucken müssen, denn ich war es gewohnt an Websites immer im Großformat auf dem Desktop zu denken. Hier musste ich einen richtigen “Mind Shift” vollziehen.
Praktisch bedeutet Mobile First, dass man erst die mobile Version der Seite erstellt und danach die Desktop-Version. So rum ist es deutlich einfacher, denn wir können uns von den eher limitierten Gestaltungsmöglichkeiten auf Smartphone-Bildschirmen leicht “hoch bewegen” auf große PC- und Laptopscreens. Andersrum (von großem Bildschirm runter auf kleinen Bildschirm) kann es sehr frustrierend sein die Seite umzuwandeln.
Mobile First hat in meiner Erfahrung einen enormen Vorteil: es zwingt mich dazu eine klare Struktur, Reihenfolge und Fokussierung in meine Seite zu bringen. Dadurch, dass die Inhalte nacheinander erscheinen, ist es deutlich einfacher einen logischen Aufbau zu gestalten, als auf dem Desktop, wo man sich durch die endlosen Möglichkeiten gerne mal verzettelt. Zumindest ging mir das immer wieder so.
2. Bildkompression
Ein nicht-so-besonders-Fun Fact:
Bilder mit großen Datenmengen machen deine Seite langsam.
Eine langsame Seite finden Nutzer nervig und auch Google bewertet dies schlecht, da es die Nutzererfahrung deutlich verschlechtert. Das geht soweit, dass hier nur wenige Sekunden einen massiven Einfluss auf deine Bounce Rates haben. Ein Bounce bedeutet, dass jemand auf deine Seite kommt und direkt wieder geht. Die häufigsten Gründe dafür sind, dass nicht sofort klar ist, was genau du anbietest oder das deine Seite zu lange lädt.
Langsame Seite = Weniger Umsatz
Hier noch ein paar (in meinen Augen ziemlich schockierenden) Statistiken zum Thema Seitenladegeschwindigkeit aus einem Artikel von Hubspot:
Die ersten fünf Sekunden der Seitenladezeit haben den größten Einfluss auf deine Conversion Rate. (Portent, 2019)
Conversion Rates von Websites fallen im Durchschnitt 4,42% pro zusätzlicher Sekunde Ladezeit (zwischen 0-5 Sekunde) (Portent, 2019)
Die durchschnittliche mobile Webseite braucht 15,3 Sekunden um zu laden. (Google Research, 2018)
Um es mal drastisch (in den Worten von meinem Webmentor zu sagen): langsame Ladezeiten deiner Website kosten dich Umsatz!
Stell dir vor, dass jemand deine Seite anschauen möchte, aber grad auf dem Land ist und nur eine 3G Verbindung: hier ist es nicht ungewöhnlich, dass es 30 Sekunden oder mehr (manchmal Minuten!) braucht, damit deine Seite endlich geladen ist. Die meisten Menschen haben dafür keine Zeit bzw. Geduld. Besonders, wenn sie dich noch nicht kennen und zum allerersten Mal auf deine Seite kommen.
Tipp: So kannst du deine Seite schneller machen
Ein einfacher Weg die Ladegeschwindigkeit deiner Seite zu verbessern, ist es die Datenmengen deiner Bilder zu verringern. Dies kannst du tun, in dem du z.B. einfach die Pixelgröße des Bildes verringerst. Ein kleines Portraitbild muss sicher nicht 6000x4000 Pixel haben und 10MB groß sein :-)
Ein Anfang ist es die die Pixelzahl so anzupassen, dass sie niemals größer als die maximale Bildschirmgröße deiner Nutzer. Als Richtwert kannst du dir merken, dass deine Bilder niemals 2560x1484px überschreiten sollten.
Die Fotos in diesem Post haben übrigens eine Breite von 640px (und die entsprechenden Höhe), einfach weil wir sie hier nicht größer brauchen. Die durchschnittliche Dateigröße liegt bei ca. 20kb.
Ich selber verwende gerne Compressor.Io und Squoosh. Auf beiden Websites kannst du sofort loslegen, musst dich nicht registrieren und bekommst sehr solide Ergebnisse. Oft lassen sich 50-95% der Dateigrößte einsparen, was für deine Besuchererfahrung und Google-Ranking Gold wert ist.
3. Beschreibungstexte deiner Bilder
Jedes Bild auf deiner Website kann mit einem Beschreibungstext versehen werden. Diese Möglichkeit bietet eine grandiose Gelegenheit deine Seite barrierefrei zu gestalten und “Punkte” bei Google zu sammeln.
Das funktioniert so: Wenn Bilder entweder nicht geladen werden können, z.B. wegen schlechter Internetverbindung oder anderen technischen Problemen, dann erscheint statt dem Bild der Beschreibungstext. Das hilft dem Nutzer zu verstehen, was du kommunizieren willst.
Ein anderer wichtiger Fall ist, wenn ein Mensch mit Sehbehinderung deine Seite besucht. Hier haben viele Browser mittlerweile die Fähigkeit deine Seite vorzulesen. Dadurch können auch Menschen, die deine Seite visuell nicht (vollständig) wahrnehmen können auch die Gelegenheit deine Inhalte zu erfahren.
Google schätzt dies auch sehr, da es für alle seine Nutzer eine optimale Erfahrung gestalten will. Hier wäre es fatal, wenn jemand deine Seite besucht und auf Grund von körperlichen Einschränkungen deine Seite nicht zugänglich ist.
Zu guter Letzt helfen Beschreibungstexte deiner Bilder auch den Google-Robotern (die deine Seite scannen und bewerten) dabei zu erkennen, welche Themenbereiche du abdeckst und für welche Suchbegriffe sie dich als relevant einstufen können.
Ich hoffe ich konnte dich dafür neugierig machen deine Bilder zu beschriften. Viel Spaß beim Umsetzen!
4. Barrierefreiheit: Kontrast & Leserlichkeit
Wie schon im letzten Punkt beschrieben, ist Barrierefreiheit extrem wichtig, um allen Menschen deine Seite zugänglich zu machen. Mit dem Bonus, dass Google dies auch für dein Ranking belohnt!
Ein gravierender Fehler, den ich selber in Vergangenheit ständig begangen habe, ist folgender: schlecht leserlicher Text!
Oft dachte ich einfach nur an die “Coolness” und Ästhetik meiner Seite, aber nicht daran, dass es Menschen geben wird, die meine Seite einfach nicht lesen werden können, wenn ich mit Grau auf Weiß schreibe.
Die Lösung ist hier ganz klar: hohe Kontrastwerte zwischen Textfarbe und Hintergrundfarbe. Dazu eine angemessener Schriftgröße (unter 16px würde ich nicht gehen) sorgt dafür, dass alles gut lesbar ist.
Das geniale Tool ContrastChecker hilft hier sehr.
Außerdem kann ich dieses kostenlose Tool für Kontrast und Barrierefreiheit Tests empfehlen. Du kannst hier deine gesamte Website, inkl. aller Unterseiten auf einmal scannen und kriegst klare Handlungsanweisungen. Hätte ich selber gerne schon früher gefunden :-)
Fazit
Priorisiere mobile Geräte in der Entwicklung deiner Website, komprimiere deine Bilder, Beschrifte deine Bilder mit alternativen Texten und sorge für eine gute Leserlichkeit deiner Seite.
Das Resultat: bessere Nutzererfahrung, besseres Ranking und wenn alles klappt: mehr Kunden und mehr Umsatz :-)
Ich hoffe, dass du aus diesen Tipps etwas für dich mitnehmen konntest. Wenn du mal Fragen hast, melde dich einfach unter info@sichtbaer.com oder telefonisch unter 01573-2702606.
Viel Freude beim Verbessern deiner Website!
Jakob & Stefan