Meine eigene Praxis-Website existiert seit 2007. Ich arbeite jedoch ständig an der Optimierung – vor allem, um die Ladezeiten zu verringern, aber auch die mobile Navigation, die auf einem Smartphone einen Großteil des Bildschirms einnahm, zu ändern.

Die Suche nach einer Website wird ganz wesentlich von deren Ladezeit beeinflusst. So wirkt sich beispielsweise eine hohe Performance positiv auf das Google-Ranking, also die Reihenfolge der bei der Benutzung der Suchmaschine ermittelten Ergebnisse, aus.
Eine Lösung bestand zunächst darin, eine Übersicht über einige Parameter zu verschaffen sowie verschiedenen Geschwindigkeitstests vorzunehmen; denn Bilder benötigen oft den meisten Speicherplatz – d. h., größere Bilddateien benötigen höhere Ladezeiten.
- www.webpagetest.org
- developers.google.com/speed/pagespeed/insights
- tools.pingdom.com
- testmysite.withgoogle.com/intl/de-de

Je größer eine Bilddatei, desto länger wird sie geladen.
Die Bilder wurden deshalb durch einen Online Bild-Optimierer (z. B. https://compressjpeg.com/de oder https://imagecompressor.com/de) bearbeitet, der sie komprimiert, jedoch das erforderliche Qualitätsniveau beibehält.

Eine weitere Aufgabe bestand darin, unterschiedliche Bildgrößen für unterschiedliche Ausgabegeräte zu generieren. Das dafür erforderliche Hochladen der Bilder erfolgte mit dem Tool "Responsive Image Breakpoint Generator" mit dem Ergebnis, dass die zu den eigenen Design-Anforderungen passende Bilddimensionen und sog. Breakpoints (Bruchstellen) erzeugt wurden.

In der Regel erfolgt die Navigation auf großen Bildschirmen horizontal und vertikal. Wie jedoch geht man damit auf kleinen Bildschirmen um? Der amerikanische Webdesigner Brad Frost stellt dazu in seinem Artikel "responsive design patterns" verschiedene Lösungsansätze vor. In meinem Fall entschied ich mich für die sog. Footer-Navigation mit Anker. Sie besteht darin, dass man auf kleinen Bildschirmen von einem Menü-Link zu einem festen Punkt im Fußbereich der Webseite springt, wo sich die entsprechenden Menüpunkte befinden.

