Webdesign Tutorials

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing


Page Speed 101: Grundsätzliches für mobile UI-Designer!

Ahadesign Tutorials

pagespeed40 Prozent der Besucher verlassen eine Website, wenn sie mehr als drei Sekunden lädt. Seit dem Einzug von responsivem Webdesign erwarten die Besucher jedoch eine vernünftige Performance und Sites, die auf ihrem Gerät perfekt funktionieren. Die Besucher wünschen eine einfache Navigation und ein intuitives Design sowie eine Ladezeit von unter einer Sekunde. Damit ist eine große Hürde gelegt, welche aber jeder Designer mit den richtigen Optimierungen in den Griff bekommen kann. Nachfolgend werden alle Tipps und Tricks aus dem englischen Original-Artikel unseres US-Partners Toptal.com gezeigt, welche die Geschwindigkeit von mobilen Websites verbessern helfen.

Bilder anpassen

Oft sind Bilder größer, als sie benötigt werden und verlangsamen unnötig die Site. Anstelle einfach die Bilder mit den maximalen Abmessungen hochzuladen, sollte auf die korrekten Dimensionen geachtet werden. Einfache Software wie Squash Image Compression hilft dabei, Bilder exakt zu verkleinern und die Dateigröße in wenigen Sekunden auf ein vernünftiges Maß zu reduzieren.

bilder-verkleinern

Bildquelle: Toptal.com

Funktionalität einschränken

Umso schneller eine Seite lädt, desto besser ist die Nutzererfahrung. Für eine mobile Website muss nicht alles geladen werden, was für die Desktop-Site nötig bzw. gewünscht ist. Eine Optimierung könnte darin bestehen, Sidebars, Werbung usw. für das mobile Gerät einfach wegzulassen. Man konzentriert sich auf die nur für mobile Geräte wichtigen Dinge.

Inhalte reduzieren

Es ist oft eine gute Idee, ein Budget für die Leistung zu setzen, welches nicht überschritten werden soll. Übersteigt ein neues Bild, Video oder Plugin, das Budget, schaut man sich nach vorhandenen Inhalten um, welche eventuell entfernt oder noch optimiert werden können, um die Ladegeschwindigkeit der Seiten zu maximieren.

HTTP-Requests reduzieren

Es gibt viele Möglichkeiten, um Serveranfragen zu vermeiden, wobei aber auch vieles falsch gemacht und die Qualität der Site verringert werden kann. Mit der richtigen Vorgehensweise können jedoch HTTP-Requests ohne Nachteile verringert werden. So wäre es möglich, CSS-Sprites anstelle von Daten-URI´s zu verwenden und das CSS-Stylesheet für jede Seite an erster Stelle kommen zu lassen. Auch das Caching sollte genutzt werden. Dazu weiter unten noch mehr.

Responsive Design verwenden

Responsive Designs werden von den Seitenbesuchern heute erwartet. Solche Designs stellen den Inhalt und das gesamte Layout je nach Gerät in der jeweils optimalen Größe auf dem Display dar. Für richtig sauberen Code und damit schnellere Ladezeiten, empfiehlt sich die Nutzung eines responsiven Templates.

responsive-design

Bildquelle: Toptal.com

Verwendung eines CDN

Ein Content Delivery Network kann das Herzstück einer Website bilden, wenn man sich für das Richtige entscheidet. Es ist nützlich für Geschwindigkeit und Zuverlässigkeit.

cdn

Bildquelle: Toptal.com

Reduzieren der Server-Antwortzeiten

Man sollte versuchen, die Anwortzeiten des Servers auf unter 200 Millisekunden zu begrenzen. All die hier beschriebenen Tipps sollten dabei helfen, dieses Ziel zu erreichen. Man sollte die Anwortzeiten mit einem der vielen kostenlos verfügbaren Tools auf Probleme überprüfen. Lösungen lassen sich dann gezielt über eine gute Suchmaschine finden.

Alles komprimieren

Die Komprimierung von Websites kann man sich vorstellen wie das Verpacken als Zip-Datei. Die Komprimierung reduziert die benötigte Bandbreite der Seiten und verkleinert die Anzahl der HTTP-Requests. Der einfachste Weg zu komprimieren ist sicher Gzip.

Browser-Cache aktivieren

Der Zwischenspeicher bietet den Besuchern den Vorteil, das sich deren Geräte an die besuchten Seiten erinnern. So müssen beim ersten Besuch vielleicht mehr als 30 Komponenten geladen werden, um die Site anzusehen. Mit aktiviertem Cache schrumpft der Wert bei künftigen Besuchen auf wenige Komponenten, womit die Site wesentlich schneller ausgeliefert wird.

Visuelle Verbesserungen

Facebook und Medium erstellen visuelle Platzhalter-Inhalte und zeigen nicht nervige Lade-Animationen. Dies bringt zwar nicht wirklich mehr Geschwindigkeit, aber es macht einen besseren Eindruck.

visuelle-verbesserungen

Bildquelle: Toptal.com

Medium macht es mit Bildern.

fake-platzhalter

Bildquelle: Toptal.com

Facebook lädt Fake-Platzhalter-Inhalte anstatt Ladegrafiken zu zeigen.

Code bereinigen

Jeder nicht benötigte Code sollte entfernt werden. Extra Code bedeutet auch Extra-Ladezeit. Um HTML zu minimieren, kann PageSpeed Insights Chrome Extension genutzt werden. Für CSS empfiehlt sich YUI Compressor oder cssmin.js. Auch für JavaScript gibt es Helfer wie Closure Compiler, JSMin oder YUI Compressor.

Optimales Bild-Format

Zusätzlich zur richtigen Bildgröße, sollte man auch auf das richtige Format achten. JPEG´s sind am besten, PNG´s sind in Ordnung und GIF´s sollten nur für kleine, einfache Grafiken verwendet werden, die idealerweise kleiner als 10x10 Pixel sind.

Optimaler Code für Bilder

Das HTML für Bilder sollte aussehen wie <img src="/"> mit dem Namen der Datei zwischen den Anführungszeichen. Wird für Bilder nicht der korrekte Code verwendet, braucht die Site länger, die richtigen Bilder auszugeben. Das verlangsamt die Seiten-Geschwindigkeit.

Externes CSS verwenden

Das CSS beinhaltet die Stil-Anweisungen für die Site. Es kann aus einer externen Datei kommen oder als Inline-Style geschrieben sein. Inline CSS befindet sich also innerhalb des HTML-Codes einer jeden Seite und das kann Verzögerungen zur Folge haben. Die Verwendung von externem CSS vereinfacht außerdem den Code nicht unerheblich.

Above-the-fold Content den Vorzug geben

Above the fold meint den Bereich der Website, den die Besucher ganz ohne Scrollen sofort sehen. Der Begriff kommt ursprünglich aus dem Zeitungswesen, lässt sich aber sehr gut auch für Website-Design verwenden. Der obere Bereich sollte also bevorzugt werden und schneller laden, als andere Bereiche. Das hält die Besucher länger auf der Seite. Erreichen kann man das durch Aufteilen des CSS in zwei Teile, einen Inline-Teil für den Above-the-fold-Content und einen externen Teil für alles andere.

above-the-fold

Bildquelle: Toptal.com

Plugins entfernen

Kommen zu viele Plugins zur Anwendung, bremst das den Server aus und es können unnötige Sicherheitsrisiken entstehen. Oft werden Plugins gar nicht verwendet und sollten dann entfernt werden. Ist man sich nicht sicher, kann man Plugins nacheinander deaktivieren und beobachten, ob noch alles funktioniert. So lässt sich auch ermitteln, welches Plugin die meiste Ladezeit verbraucht.

Umleitungen reduzieren

Werden die Seitenbesucher über Redirects von der Hauptseite zu einer mobilen Seite geleitet, kann das die Geschwindigkeit verringern. Man kann einen HTTP-Redirect nutzen, um wiederkehrende Umleitungen von der Desktop-Site zur mobilen Site zu reduzieren. In die Desktop-Seiten kann auch das Markup <link rel="alternate"> eingefügt werden. Dadurch entdecken die Google-Crawler die mobilen Seiten.

Vermeiden von Popups

Nochimmer kommen nervende Popups recht häufig zur Anwendung. Auf mobilen Websites funktionieren sie aber nicht besonders gut und nerven noch mehr. Jeder der schon einmal von so einem Popup während des Lesens eines interessanten Artikels heimgesucht wurde, weiß, was gemeint ist. Die Alternative ist eine Conversion Box am Ende des Artikels bzw. der Seite.

conversion-box

Bildquelle: Toptal.com

Warum Seitengeschwindigkeit so wichtig ist

Wer sich bisher noch nicht viel Gedanken um die Seitengeschwindigkeit gemacht hat, sollte das unbedingt ändern. All die Zeit und Energie, die man in seine Inhalte und das Layout gesteckt hat, sind nichts wert, wenn die Site zu lange lädt.

Die Aberdeen Group hat herausgefunden, dass bereits eine Verzögerung von nur einer Sekunde zu 11% weniger Page Views, zu 16% weniger Kundenzufriedenheit und zu einem Verlust von 7% in der Kundengewinnung führt. Braucht eine Seite gar drei oder mehr Sekunden zum Laden, wird es wirklich problematisch für den Seitenbetreiber.

Kommentar schreiben