Warum müssen TYPO3 Webseiten optimiert werden?

Es ist durch diverse Studien belegt und mittlerweile fast allgemein bekannt, dass Internetnutzer eine Website mit hoher Wahrscheinlichkeit noch während dem Laden wieder verlassen, wenn die Ladezeit mehr als drei Sekunden beansprucht. Braucht Ihre Seite länger als drei Sekunden, gehen Ihnen durch eine erhöhte Absprungrate unter Umständen wertvolle Leads oder Umsätze verloren.

Darüber hinaus ist für Google und Co. die Ladegeschwindigkeit einer Internetseite (Pagespeed) ein wichtiges Rankingkriterium. Webseiten, die lange Ladezeiten aufweisen, werden in den Suchergebnissen der Google-Suche benachteiligt und herabgestuft. Auch in diesem Fall gilt: Wer bei Google schwer zu finden ist, muss mit Umsatzeinbußen rechnen.

Diese beiden Aspekte verdeutlichen, dass es immer sinnvoll ist, einen Blick auf die Kennzahlen zu werfen und bei Bedarf Zeit und Arbeitsleistung in die Performance-Optimierung der TYPO3 Website zu investieren.

Die Analyse Ihrer TYPO3 Anwendung

Um eine Website effektiv optimieren zu können, muss zunächst konkret festgestellt werden, wie die betreffende Website performt und wo Schwachstellen vorliegen. Das geht am besten mit speziellen Tools. Diese sind online und oft kostenlos verfügbar.

Google stellt bspw. mit den Page Speed Insights ein bekanntes Tool zur Verfügung. Weitere Tools sind bspw. Webpagetest oder Pingdom Tools. Achten Sie bei den letztgenannten alternativen Angeboten bitte unbedingt auf den Standort der Server, die den Test durchführen. Stehen diese beispielsweise in Asien oder in Nord-Amerika, werden die Ergebnisse völlig verfälscht und fallen mit Sicherheit negativ aus. Nutzen Sie den Standort, der Ihnen und Ihren Kunden bzw. Website-Besuchern am nächsten liegt.

Alternativ können Sie für die Ermittlung von Ladezeiten auch die Entwickler-Werkzeuge der Browser nutzen. Alle aktuellen Browser bieten solche Hilfsmittel an.

So optimieren Sie die Performance Ihrer TYPO3 Webseite

TYPO3 Konfiguration

Tipp 1: TYPO3-Cache aktivieren

Ein einfacher Tipp, der zu einer schnelleren Ladezeit der Webseite beiträgt, ist die Aktivierung des internen Caching-Systems von TYPO3. Die gesamte Webseite wird zwischengespeichert, und falls es keine Neuerungen gegeben hat, schnell aus dem Cache zur Verfügung gestellt. Das führt zu einer schnelleren Bereitstellung der Seite.

Achten Sie darauf, dass unerfahrene Entwickler es gelegentlich versäumen, den Cache nach der Fertigstellung der TYPO3 Website wieder zu aktivieren.

Mit diesem einfachen TypoScript-Befehl wird die Seite aus dem Cache geladen anstatt sie komplett neu zu erstellen:

config.no_cache=0

Tipp 2: Optimieren des TYPO3-Caches

TYPO3 wird mit mehreren Caching Systemen ausgeliefert. Die Hauptunterscheidung dieser Systeme besteht darin, wo die Daten zwischengespeichert werden. Caching kann entweder im Dateisystem, in der Datenbank, auf einem separaten Caching Server geschehen. Die schnellsten Caching Systeme haben die Gemeinsamkeit, dass diese Daten im RAM speichern. Dies ist in der Regel der Ort an dem ein Server die höchste Lesegeschwindigkeit aufweist.

Standardmäßig wird TYPO3 mit Datei- und Datenbank Caching-Lösungen ausgeliefert. TYPO3 kann aber auch mit Redis, Memcached oder Elastic Search verwendet werden. Diese Dienste speichern die Daten vorwiegend im RAM des Servers.

Im Gegensatz zu Memcached kann Redis als Hybrid angesehen werden. Es speichert die Daten zusätzlich im Dateisystem ab. Aufgrund der Tatsache, dass der RAM des Servers nach einem Neustart gelöscht wird, kann Redis die Daten so nach einem Neustart direkt wieder ausliefern und auch als persistenter Speicher genutzt werden.

Wird ein Datenbank Basiertes Cache System eingesetzt, besteht weiteres Optimierungspotenzial in der Konfiguration der Caching-Tabellen. Standardmäßig werden alle Caching-Datensätze „für immer“ in den Caching-Tabellen von TYPO3 aufbewahrt. Dies verringert die Leistung der Datenbankabfragen an die Zwischenspeichertabellen, da die Tabellen mit der Zeit wachsen. Die Lösung besteht darin, einen Scheduler-Task zu erstellen und zu aktivieren, der diese Tabelle von alten EInträgen bereinigt.

Tipp 3: Statisches Datei-Caching

Neben dem internen TYPO3-Cache lohnt je nach Anwendungsfall auch der Blick auf die Extension staticfilecache, die als Fork die alte ursprünglich weit verbreitete Extension „nc_staticfilecache” ersetzt.

In TYPO3 geschieht beim Aufruf von Seiten relativ viel unter der Haube. Insbesondere die teils sehr komplexen SQL-Abfragen können die Auslieferung von Seiten verlangsamen. Eine sehr effektive Lösung für dieses Problem bietet die o.g. Extension. Damit werden Seiten als statische Variante in das interne typo3temp-Verzeichnis abgelegt. Über Weiterleitungen werden diese statischen Seiten aufgerufen. Dieses Vorgehen ermöglicht deutlich verkürzte Ladezeiten.

Tipp 4: Bildoptimierung

Eine der Hauptursachen für langsame Webseiten ist die fehlende Komprimierung von großen Bilddateien. Sie können Bilder, die sie in Ihre TYPO3-Website hochladen vorher komprimieren.

Speichern Sie Ihre Bilddateien im Format WebP oder JPG ab. Letzteres ist in den meisten Fällen eines der Formate mit der höchsten Komprimierungsrate. Es gibt Ausnahmen in denen die gleiche Bilddatei als PNG kleiner gerechnet werden kann, primär sollte PNG aber nur dann verwendet werden, wenn Transparenzen mit in einer Grafik abgespeichert werden sollen.

Achten Sie bei WebP in jedem Fall auf die Verbreitung und Browserunterstützung. Vom Komprimierungsgrad bzw. dem Verhältnis von Dateigröße und -Qualität ist WebP dem JPG-Format überlegen. Wenn ältere Browser unterstützt werden müssen, ist WebP nur über mehr oder minder schöne Polyfills nutzbar.

Unabhängig vom Format sollten alle Bilder vor dem Upload optimiert werden. Wir empfehlen hierzu das Tool ImageOptim.

Die Dateien können ebenfalls direkt in TYPO3 auf das gewünschte Format beschnitten werden. Dies geht über die Fluid Template Engine in TYPO3 spielend einfach. Nutzen Sie einfach den Image ViewHelper in Kombination mit Breiten- und Höhenangaben, die zusätzlich mit einem „c“ versehen sind. Das „c“ steht für „crop“ und beschneidet die Bilder auf die gewünschten Abmessungen.

<f:image src="fileadmin/user_upload/bild.jpg" alt="Alt-Text" width="250c" height="250c" />

Eine Alternativ stellt die inline Deklaration dar:

<img src="{f:uri.image(image: file, width: '250c', height: '250c')}" alt="Alt-Text">

Zusätzlich können Sie die Bildqualität auch direkt über das InstallTool bzw. der neuen System Maintenance Area mit folgender Angabe anpassen:

[GFX][jpg_quality] = 70
[GFX][gif_compress] = true

Ein weiteres Feature für die Optimierung von Bildern sind die sog. cropvariants. Hiermit lassen sich in TYPO3 responsive Bilder umsetzen. Die mit den cropvariants fest definierten Bild-Abmessungen können innerhalb von Templates in die entsprechenden HTML picture-Elemente oder srcset-Attribute integriert werden.

Tipp 5: Zusammenführen von CSS- sowie JavaScript-Dateien

Um die Anzahl der zu ladenden Dateien (sogenannte HTTP Requests) zu reduzieren, sollten CSS und JS (JavaScript) Dateien gebündelt werden.

In unserer Agentur setzen wir hierzu auf Webpack. Webpack ist ein Open-Source Build Tool für die moderne Frontententwicklung effektive Workflows. Über die TypoScript-Konfiguration wird dann nur eine kompilierte, minimierte und gebündelte CSS bzw. JS Dateien eingebunden.

Alternativ bietet TYPO3 eine Funktion an um alle CSS- und JavaScript-Dateien automatisiert zusammenzuführen. Dazu müssen folgende TypoScript-Konfigurationen gesetzt werden:

config.concatenateJs = 1
config.concatenateCss = 1

Tipp 6: Bilder in Sprites zusammenfassen

Anders als bei CSS oder JavaScript ist es schwieriger, Bilder in einer einzigen Datei einzufügen. HTML ist dem Grunde nach nicht darauf ausgelegt, viele Bilder aus einer bestimmten Ressource zu beziehen.

Es gibt allerdings zwei Möglichkeiten:

1. Icons oder andere vektorbasierte Grafiken können über sogenannte SVG-Sprites in einem SVG gebündelt werden und zum Einbinden über eine ID referenziert werden.
2. Mittels CSS lässt sich das bei systemrelevanten Grafiken dennoch einfach umsetzen. Beispielsweise können Icons hervorragend zusammengefasst werden. Mit der CSS-Anweisung background-position werden die Daten wieder in einzelne Bilder aufgeteilt. Die Verwendung von CSS-Sprites sollte jedoch stets wohlüberlegt sein, da sich der Aufwand nicht immer lohnt.

Tipp 7: Deaktivieren Sie TYPO3-Logs

Bei der Entwicklung einer Website ist es sehr praktisch, mehrere Protokollierungs- und Debugging-Möglichkeiten zur Verfügung zu haben. Nach dem Livegang sollte dies nicht erforderlich sein, da zuvor alle Fehler aufgespürt und korrigiert werden sollten.

Das Deprecation-Log ist das einzige Log, das in vielen TYPO3-Websites aktiviert ist. Es kann sehr schnell wachsen, insbesondere wenn die Website mit vielen Anfragen konfrontiert wird und Erweiterungen mit veralteten Funktionen verwendet werden.

Jeder Aufruf einer veralteten Funktion führt zu einer Schreibaktion im Dateisystem. Wir haben in der Vergangenheit schlecht gewartete Fremdsysteme im Zuge von Support- und Aktualisierungs-Anfragen gesehen, die abgestürzt sind, weil kein Speicherplatz mehr auf dem Server zur Verfügung stand. In einem konkreten Beispiel TYPO3-System war das Deprecation-Log auf 20GB angewachsen und hatte damit Webhostingpaket ans Limit gebracht. Das sollte nicht passieren und kann mit wenig Aufwand verhindert werden!

Für TYPO3 8.X wurde das Deprecation-Log vollständig neu geschrieben, und die Anforderungen werden jetzt in der Datenbank erfasst. Das macht es weniger sichtbar, aber trotzdem schädlich.

Im InstallTool bzw. der neuen System Maintenance Area können die folgenden Optionen gesetzt werden, um die Protokollierungs- und Debugging-Ausgabe zu reduzieren:

[SYS][exceptionalErrors]=4096
[SYS][belogErrorReporting]=30711
[SYS][systemLogLevel]=3

Tipp 8: Automatisierte Wartung über den TYPO3-Scheduler

DieGröße der Datenbanktabellen „sys_log“ und „sys_history“ können die Ladegeschwindigkeit ebenfalls negativ beeinflussen. Je größer sie werden, desto mehr Zeit benötigen die Anforderungen für diese Tabellen. Wie beim Deprecation-Log und den Caching-Tabellen können diese Tabellen im Hintergrund unbemerkt sehr groß werden. Glücklicherweise gibt es die TYPO3 Scheduler-Tasks, die diese Tabellen bereinigen. Sie werden alle Datensätze löschen, die älter als ein bestimmter Zeitraum sind. Diese Periode wird in der Scheduler-Task selbst festgelegt. Zur Einrichtung des Scheduler-Tasks wird ein Cronjob benötigt. Dieser kann minütlich ausgeführt werden. TYPO3 entscheidet dann ob und welche Aufgabe durchgeführt wird.

Tipp 9: Kompression von TYPO3 Front- und Backend

Durch die Komprimierung der Assets kann die Größe der zwischen dem Server und dem Browser ausgetauschten Daten drastisch reduziert werden.

Der Konfiguration dazu kann über das Install Tool bzw. der neuen System Maintenance Area aufrufen werden oder direkt in der Konfigurationsdatei eingetragen werden:

[BE][compressionLevel] = 9
[FE][compressionLevel] = 9

Möglich sind Werte zwischen 1 und 9 für die Definition des Kompressionsgrades.

Tipp 10: TYPO3 und Extensions regelmäßig updaten

Ein regelmäßig und sorgfältig gewartetes TYPO3-System ist eine weitere Grundvoraussetzung für gute Performance.

Systemaktualisierungen sind innerhalb der LTS (Long-Term-Support) Versionen in der Regel problemlos möglich. Sorgen Sie dennoch für aktuelle Backups und sichern Sie Ihr Dateisystem sowie die Datenbank bevor Sie Updates einspielen.

Durch regelmäßige Updates werden Sicherheitslücken geschlossen, was u.a. der fortwährenden und zuverlässigen Erreichbarkeit der Seite zugutekommt.

Sollten Sie über entsprechende Kenntnisse verfügen, empfehlen wir zudem die Installation und Wartung von TYPO3 über composer. Wenn Sie mit mehreren Personen an der Website arbeiten, empfiehlt sich eine Versionsverwaltung wie bswp. git.

Tipp 11: TypoScript Code-Optimierung

Generell gilt, das TypoScript so einfach wie möglich zu halten und sich an allgemeingültige Konventionen zu halten. Insbesondere „if“-Bedingungen können die Leistung erheblich beeinträchtigen. Sie benötigen viel Zeit zum Rendern und erhöhen die benötigte Cache-Größe exponentiell.

Auch wenn uns als Entwicklern die Rückverfolgbarkeit in git-Commits gefällt, könnte es die bessere Entscheidung sein, die eine oder andere Bedingung in die Datenbank zu schreiben. Beispiele sind PIDinRootline, PIDupInRootline oder TreeLevel.

Die Inhaltsobjekte COA_INT und USER_INT sind als nicht zwischengespeicherte Aktionen oben ungültig. Sie verhindern das Caching über die o.g. statischen Datei-Caches und zwingen TYPO3 in eine zweite Rendering-Runde.

Allgemeine Konfiguration

Tipps 12: HTTP-Requests reduzieren

Die Übersendung weniger HTTP-Anfragen an den Server kann die Ladezeiten Ihrer Website zusätzlich verbessern. Die HTTP-Expire-Header werden in TYPO3 optimiert gesetzt. Außerdem werden die Expire-Header für statische Dateien wie JavaScript, CSS sowie Grafiken auf einen hohen Wert festgelegt. Dies bedeutet, dass Dateien, die eher selten von Änderungen betroffen sind, möglichst lange gecached werden sollen. Google empfiehlt für Grafik-Dateien bspw. einen Wert von einem Jahr.

Nicht erforderliche HTTP Requests werden dadurch vermieden. Sollten Sie das http2-Protokoll verwenden können, spielen vermehrte Requests eine nur noch untergeordnete Rolle, da Anfragen parallel abgearbeitet werden können.

Tipp 13: Prefetch, Preconnect und Preload

Prefetch löst den den Domainnamen zu der dazugehörigen IP Adresse vorzeitig auf und speichert diesen im Zwischenspeicher. Damit können spätere Abfragen auf diese Domain schneller durchgeführt werden können.

<link rel="dns-prefetch" href="//fonts.googleapis.com">

Preconnect ermöglicht es dem Browser, bereits eine Verbindungen aufzubauen. Dies kann u.a. beim Einsatz von CDN Servern sinnvoll sein.

<link rel="preconnect" href="//cdn.beispiel-domain.de">

Preload lädt eine eine Ressource unmittelbar herunter. Dies kann u.a. beim Einsatz von externen Fonts zu einem erheblichen Performance-Gewinn führen.

<link rel="preload" href="https://fonts.googleapis.com/css?family=Font+Name:400,700" as="style">

Wird Preload im Zusammenhang mit Google Fonts verwendet müssen zwei Dinge unbedingt beachtet werden. Zum einen muss das as="style" Attribut zwingend verwendet werden. Des Weiteren darf der Font nicht innerhalb einer CSS Datei über eine @import Anweisung geladen werden sondern sollte als Stylesheet im <head> platziert werden. In mehreren Projekten konnten wir hiermit mehr als 100ms Renderzeit einsparen.

Tipp 14: CSS an den Anfang und JavaScript in den Footer verschieben

JavaScript Dateien können an das Ende einer Seite verschoben werden. Es genügt, wenn sie am Schluss des Ladevorgangs geladen werden Das geht wie folgt:

config.moveJsFromHeaderToFooter = 1

page = PAGE
page.includeJSFooter {
    test = fileadmin/test.js
}

Handelt es sich um eine bestehende TYPO3 Website, sollte nach der Umstellung unbedingt ein Funktionstest, ein Scan von JavaScript Fehlern aller Seiten und Funktionen (Formular etc.) durchgeführt werden. Wurde z.B. im Inhaltsbereich ein Skript verwendet welches erst im Footer eingebunden wird, kann dies zu unerwünschten JavaScript Fehlern und im schlimmsten Fall einem kompletten Ausfall des Frontends führen.

Infrastruktur Konfiguration

Tipp 15: Wählen Sie einen guten Hosting Service

Die Wahl eines guten Hosting-Anbieters ist essentiell für die Geschwindigkeit Ihrer Website. Auch sind einige der in dieser Liste aufgeführten Tipps und Tricks ohne ein geeignetes Hosting nicht realisierbar. Legen Sie also Wert auf einen zuverlässigen sowie schnellen Server bzw. ein ausreichend leistungsfähiges Webspace-Paket. Sparen Sie nicht am falschen Ende, denn gerade die Einsteigerpakete sind nicht dafür ausgelegt, eine performante TYPO3-Website zu hosten. Wir raten Ihnen zu spezialisierten Hosting-Anbietern, die Ihre Pakete entsprechend der technischen Anforderungen zusammenstellen.

Leistungsbestandteile, auf die wir Wert legen sind u.a. ein Shell-Zugang per SSH oder zumindest ein SFTP-Login. Außerdem sollte ein kostenloses SSL-Zertifikat und aktuelle MySQL und PHP-Versionen unterstützt werden. Gerade bei TYPO3-Websites ist es auch sinnvoll, wenn Sie Einfluss auf bestimmte Werte in der PHP-Konfiguration (php.ini) nehmen können (siehe Tipp 22 und 24).

Tipp 16: Verwenden Sie ein Content Delivery Network (CDN)

Content Delivery Networks (CDNs) haben Webhosting in den letzten Jahren revolutioniert. Anstatt das Hosting Ihrer Website auf einem einzigen Server zu betreiben, können Sie die Dateien verteilen und laden diese über mehrere Systeme.

Es gibt eine Reihe von kostenlosen und kostenpflichtigen CDN-Anbietern wie bspw. die Lösungen von Amazon (AWS), Google (Cloud Platform), Microsoft (Azure) und vielen Weiteren. Grundsätzlich haben wir hier die Erfahrung gemacht, dass die Kosten hierfür verschwindend gering sind. Bevorzugt setzen wir bei bei unseren Projekten auf die umfangreichen CDN- und Cloud-Lösungen von Amazon.

Tipp 17: Vermeiden Sie TYPO3-Mountpoints

Mountpoints stellen im TYPO3-Kontext einen Seitentypen dar. Dieser wird dazu verwendet, um einen kompletten Seitenbaum unterhalb einer anderen Seite zu „mounten“. Bei der Darstellung eines Mega Menüs kann dies zu mehreren tausend zusätzlichen MySQL Queries und damit zu erheblichen Performance-Problemen führen. Wenn möglich sollten Sie daher auf den Einsatz von Mountpoints weitestgehend verzichten.

Tipp 18: Vermeiden Sie unnötige Weiterleitungen

Versuchen Sie, unnötige 30x-Weiterleitungen und verkettete Umleitungen aufgrund einer Fehlkonfiguration in der .htaccess-Datei zu vermeiden. Dieser Misstand kann mit Tools wie: httpstatus.io oder Ryte sehr gut getestet werden. Tragen Sie dazu Ihre URL ein und schauen Sie ob es mehrere Weiterleitungen gibt, bis die Seite dargestellt wird. Beim Testen sollten verschiedene Kombinationen ausprobiert werden.

http://beispiel-domain.de
https://beispiel-domain.de
http://beispiel-domain.de/
https://beispiel-domain.de/
http://beispiel-domain.de/index.php
https://beispiel-domain.de/index.php
http://www.beispiel-domain.de
https://www.beispiel-domain.de
http://www.beispiel-domain.de/
https://www.beispiel-domain.de/
http://www.beispiel-domain.de/index.php
https://www.beispiel-domain.de/index.php

Tragen Sie hier Ihre Domain ein und prüfen Sie ob alle Aufrufe keine oder max. eine Weiterleitung aufweisen. Sollten mehrere Weiterleitungen stattfinden, handelt es sich höchstwahrscheinlich um eine nicht optimale Apache- oder NGINX-Konfiguration und sollte geprüft und behoben werden.

Ein Klassiker, der über die Jahre zu einer gängigen (schlechten) Praxis bei TYPO3-Entwicklern wurde, ist das Weiterleiten der Startseite mittels Seitentyp „Verweis” (Shortcut) auf die erste Unterseite, die dann als Startseite gepflegt wird. Dies hat Vorteile bei der Menü-Ausgabe, ist aber mit einem fundamentalen Nachteil verbunden: Jede Seite, die per Shortcut weitergeleitet wird, erhält den Status-Code 307.

Der Status-Code 307 vermerkt eine temporäre Weiterleitung. Es handelt sich hierbei also nur um eine vorübergehende Weiterleitung und keine dauerhafte. Im o.g. Beispiel ist es aber eindeutig eine dauerhafte Weiterleitung und der Status-Code ist somit grundsätzlich falsch gewählt. Dieses aus unserer Sicht schwerwiegende Problem wurde unter TYPO3-Entwicklern häufiger diskutiert, aber nie zufriedenstellend behandelt.

Schwerwiegend ist das Problem vor allem bei der Suchmaschinenoptimierung. Zu den absoluten Basics zählt hier, dass permanente Weiterleitungen mittels Status-Code 301 umgeleitet werden. Dies ist der einzig richtige Status-Code für das o.g. Beispiel und nur auf diese Weise würde auch die sog. Linkkraft (Linkjuice) auf die Zielseite weitergegeben werden.

Verzichten Sie am besten gänzlich auf den Einsatz von Shortcuts als Weiterleitung zur Startseite. Nutzen Sie einfach den Seiten-Einstieg bzw. das Weltkugel-Symbol als Startseite.

Tipp 19: Gzip Komprimierung (.htaccess)

Gzip ist ein Datenkompressions-Algorithmus, der u.a. auf Webservern wie Apache oder Nginx zum Einsatz kommt. In dem Zusammenhang ist der große Vorteil naheliegend: Moderne Browser sind in der Lage, komprimierte Webseiten oder sonstige darzustellende Inhalte während des Renderings zu entpacken.

Mit Gzip-Komprimierung können bis zu 75% der ursprünglichen Dateigröße, in Einzelfällen sogar bis > 80% erreicht werden. Die Ladegeschwindigkeit Ihrer TYPO3 Webseiten kann dadurch erheblich gesteigert werden.

Aktivieren Sie dazu einfach die Gzip-Komprimierung in der .htaccess-Datei.

Tipps 20: Browser-Caching über die .htaccess-Datei nutzen (.htaccess)

Der entsprechende Code ist ab TYPO3 Version 7 standardmäßig in der .htaccess-Datei hinterlegt und muss u.U. nur aktiviert (Kommentarsyntax entfernen) werden.

Tipp 21: TTFB (Time to First Byte)

Google hat in den vergangenen Jahren das Thema Page Speed Optimierung fest in seinen Rankingfaktoren verankert. Dabei gibt es verschiedene Messpunkte beim Laden einer Website, welche im Folgenden kurz erläutert werden.

• Time to First Byte (TTFB): Dieser Wert bezeichnet den Zeitraum zwischen dem Aufruf einer URL bzw. Website und dem ersten vom Webserver geladenen Byte.
• First Contentful Paint (FCP): Dieser Wert gibt an, wann im Browser zum ersten Mal ein Darstellungselement fertig gerendert wurde und angezeigt wurde.
• First Meaningful Paint (FMP): Diese Maßeinheit definiert sich als Zeitpunkt, an dem der Website Besucher das Gefühl hat, dass die Website fertig geladen wurde.
• Time to Interactive (TTI): Definiert den Zeitpunkt, wann die Website vollständig gerendert wurde und alle Funktionen für den Besucher zur Interaktion bereitstehen.

Dieser Artikel beschäftigt sich mit der Optimierung von TYPO3 dabei ist der TTFB Wert die wichtigste Merkmal und sollte am Besten in regelmäßigen Abständen kontrolliert werden.

Die anderen drei Messpunkte sind vorwiegend Optimierungen der Frontend Technologien CSS/JS und anderer Ressourcen wie Bilder etc.. Auf ein paar Maßnahmen wird in den anderen Tipps eingegangen.

Tipp 22: Unterbinden Sie Hotlinking

Damit das Hotlinking, das direkte Einbinden von Grafiken von Webseiten von extern ausgeschlossen wird, muss der folgende Code in die .htaccess-Datei eingebunden werden:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?beispiel-domain.de [NC]
RewriteRule \.(webp|svg|jpg|jpeg|png|gif|zip|pdf|js|)$ - [F]

Die Liste der unterbundenen Dateitypen kann nach belieben angepasst werden.

Alternativ gibt es die Möglichkeit eine alternativen Inhalt für Bilddateien auszuliefern. Dazu kann der folgende Code verwendet werden:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)beispiel-domain.de/.*$ [NC]
RewriteRule \.(webp|svg|jpg|jpeg|png|gif)$ http://www.beispiel-domain.de/fallback.svg [R,L]

Tipp 23: Reverse Proxies

Reverse-Proxys reduzieren die Last des Webservers durch Zwischenspeichern von dynamisch generierten Inhalt. Ein gutes Beispiel für einen Reverse-Proxy-Server ist Nginx.

Tipp 24: Webserver optimieren

Wenn Sie wie eingangs erwähnt, ein gutes Hosting-Paket besitzen, sollte es kein Problem sein, Einfluss auf die PHP-Einstellungen zu nehmen. Schauen Sie hierzu nach der php.ini Datei. Bei manchen Providern können Sie die PHP-Konfiguration auch direkt in der Online-Verwaltung Ihres Webspaces bearbeiten. Folgende Werte sollten in Ihrer Konfiguration mindestens hinterlegt sein:

memory_limit=256M
max_execution_time=40
max_input_vars=1500
post_max_size=50M
upload_max_filesize=50M

[opcache]
opcache.enable=1
opcache.memory_consumption=192
opcache.interned_strings_buffer=16
opcache.max_accelerated_files=10000
opcache.revalidate_freq=0
opcache.validate_timestamps=0
opcache.save_comments=0
opcache.fast_shutdown=1

Die Konfiguration max_accelerated_files ist hierbei auf 10.000 Dateien gesetzt, sollte aber der Anzahl an php Dateien in Ihrem Projekt entsprechen. Über den Befehl folgenden Shell Befehl lässt sich die Anzahl schnell und zuverlässig ermitteln:

find . -type f -print | grep php | wc -l

Tipp 25: Datenbankserver optimieren

Wenn Sie Zugriff auf die MySQL Konfiguration haben, lohnt ein Blick auf folgende Einstellungen.

„innodb_buffer_pool_size“: Dies ist einer der wichtigsten Konfigurationen, die bei fast jeder Installation einer MySQL InnoDB Datenbank zu beachten ist. Diese Einstellung regelt die Größe des Zwischenspeichers, in welchem die Daten und Indizes im RAM ausgelagert werden. Dies ermöglicht einen schnelleren Lesezugriff effizienter Queries. Je größer dieser Wert ist, desto mehr Daten werden dort vorbehalten. Einen Richtwert können wir an dieser Stelle leider nicht geben, da es von der verwendeten Hardware, der anderen Prozesse auf dem Server und Architektur abhängig ist. Handelt es sich um einen separaten Datenbankserver kann man sich jedoch an der „80% Regel“ orientieren. Diese Regel besagt, dass 80% des insgesamt zur Verfügung stehenden RAMs genutzt werden kann.

80% ist aus unserer Sicht ein guter Anfang und eine Faustregel. Sie sollten jedoch sicherstellen, dass der Server über ausreichend RAM für das Betriebssystem und die sonstigen Prozesse verfügt. Ist viel RAM verfügbar, kann dieser Wert jedoch auch auf 90% oder sogar 95% erhöht werden.

„innodb_log_file_size“: Diese Konfiguration definiert die Größe des so genannten Redo-Logs (Wiederherstellungsprotokolle). Dieser besteht in der Regel aus zwei oder mehr vorab zugewiesenen Dateien, in denen alle Änderungen gespeichert werden, die an der Datenbank vorgenommen wurden. Jeder Instanz einer MySQL-Datenbank ist ein Redo-Log zugeordnet, um die Datenbank im Falle eines Fehlers oder Absturzes zu schützen.
Bis zu MySQL 5.5 war die Gesamtgröße für das Redo-Logs auf 4 GB beschränkt (Standardeinstellung: 2 Protokolldateien). Dies EInschränkung wurde jedoch in MySQL 5.6 aufgehoben.

Als Richtwert können Sie mit 512MB starten. Dieser Wert definiert die Größe jeder Datei bei zwei Redo-Logs ist damit der benötigte Platz 1GB. Hat Ihr Server genügend Platz kann dieser Wert auch auf 4GB oder höher gesetzt werden.

„max_connections“: Diese Einstellung Regelt wie viele parallele Verbindungen zur Datenbank aufgenommen werden können. Ein zu geringer Wert führt zu der Fehlermeldung „Too many connections“. bei dieser Einstellung gibt es leider keine Formel. Sie sollten Ihre Datenbank entsprechend den Anforderungen Ihrer Anwendung individuell anpassen.

In der Regel benötigen Server mit Anwendungen, ein paar hundert gleichzeitige Verbindungen. Kleine bis mittlere Websites können mit 100 bis 200 ausreichen gut auskommen.

In unseren Kundenprojekten verwenden wir Werte zwischen 400 und 1000. Dabei müssen wir zudem sicherstellen, dass ein die Serverkonfiguration open_files_limit entsprechend angepasst wird. Unter Linux ist dieser standardmäßig auf 1024 Dateien beschränkt. Dieser sollte deutlich erhöht werden und 8192 kann hier als Richtwert verwendet werden.

„query_cache_size“: Der Query-Cache ist ein weiterer bekannter Engpass von MySQL Datenbanken. Dieser wird auch schon bei moderater Parallelität spürbar. Wir empfehlen hier diesen Wert von Anfang an auf 0 zu setzen. Dies ist seit MySQL 5.6 auch die Standardeinstellung. Die Nachträgliche veränderung dieses Werts kann ejdoch negative Auswirkungen mit sich bringen, daher sollte beim deaktivieren auf einem bestehenden Server Vorsicht geboten sein.

„log_bin“: Ist diese Einstellung aktiviert, wird muss mit einem deutlichen performance Verlust gerechnet werden. Daher sollte diese in den meisten Fällen deaktiviert sein. Aktivieren Sie diese Einstellung nur, wenn die Datenbank als Replikationsmaster verwendet werden soll. Dies ist der Fall, wenn Sie mehrere Datenbankserver in einem Cluster synchron verwenden möchten.

Tipps 26: Skalierungsproblem Datenbank

Im vorherigen Tipp wurden die MySQL EInstellungen optimiert. Auf Seiten von TYPO3 bietet ebenfalls eine wichtige Einstellung gutes Optimierungspotenzial.

Bei vielen parallelen Anfragen auf das TYPO3-System kann es zu Engpässen auf Seiten der Datenbank kommen. Eine Aufstockung bzw. Update der Hardware (CPU und RAM) des separaten Datenbankservers oder des All-In-One Systems bringt dann nur noch bedingt etwas. TYPO3 erlaubt es an dieser Stelle persistente Datenbank Verbindungen zu unterbinden. Dies ist über die folgende Konfiguration im InstallTool bzw. der neuen System Maintenance Area möglich.

[SYS][no_pconnect]=1

Mit dieser Einstellung wird zwar ständig eine neue Verbindung aufgebaut, diese wird jedoch nach der Auslieferung direkt wieder geschlossen.

Tipp 27: Cluster-Architektur

Um die Last, auch bei sehr hohen Zugriffszahlen zu bewältigen, empfiehlt sich die vorzeitige Konfiguration einer Multi Server Architektur (Clusters). Ein Basis Setup könnte für den Start folgt aussehen:

• 1x Reverse Proxy als Load Balancer und SSL Beschleuniger (NGINX)
• 1x TYPO3 Webserver (Apache)
• 1x Datenbank und Cache Server (MySQL und Redis)

Entscheidet man sich für eine solche Konfiguration und erstellt man entsprechende Provisioning Skripte z.B. über Ansible lassen sich bei Besucher-Peeks auch mit geringem Aufwand oder je nach Konfiguration sogar automatisiert weitere Server hinzu schalten.

Tipp 28: Reduzieren Sie die Anzahl der TYPO3-Extensions

Deaktivieren Sie alle TYPO3-Erweiterungen, die auf Ihrer Website nicht erforderlich sind. Dies gibt einen weiteren kleinen Schub und schließt zugleich etwaige Sicherheitslücken durch veraltete Erweiterungen.

Grundsätzlich ist es empfehlenswert, TYPO3-Extensions nur anzuwenden, wenn Sie aktiv gepflegt und regelmäßig gewartet werden. Zudem sollten Sie vorab immer überlegen, ob der Einsatz einer Extension unbedingt notwendig ist. Jede Extension, kann potentiell das System verlangsamen.

Tipp 29: 404-Fehler richtig konfigurieren

In Fällen, wo außergewöhnlich viele Redirects in der Serverkonfiguration abgelegt sind, kann die Performance leiden, da die Liste mit jedem Seitenaufruf interpretiert wird. Dies kann der Fall bei sehr umfangreichen Website-Neuerstellungen sein. Es sollen ja schließlich möglichst alle alten Inhalte auch unter der neuen Website-Struktur gefunden werden können.

Erstellen Sie aus diesem Grund eine gut strukturierte und für den Nutzer hilfreiche 404-Fehlerseite. Diese soll helfen, wenn doch mal ein Inhalt nicht gefunden werden kann. Diese Seite können Sie im TYPO3-System anlegen und verwalten.

Nutzen Sie für die Konfiguration von Fehlerseiten die ab TYPO3 9.0 verfügbaren Funktionen für das Site-Handling. Hier lassen sich über die Funktion Error Handling alle Fehlercodes behandeln und mit entsprechendem Verhalten versehen.

In älteren Installationen oder Alternativ erfolgt die Konfiguration von 404-Fehlerseiten über das InstallTool bzw. der neuen System Maintenance Area. Das geht wie folgt:

['FE'][pageNotFound_handling] = '/404/';

Tipp 30: Defer order Async für JavaScript

JavaScript kann im Template in zwei Varianten vorkommen. Entweder wird JavaScript Inline über ein Script-Tag platziert oder es wird auf eine externe Skriptdatei verweisen. Im zweiten Fall können Script-Inhalte mittels des Attributes „async” im Hintergrund heruntergeladen, ohne den Ladevorgang zu blockieren. Versuchen Sie Ihren Script-Dateien dieses HTML-Attribut anzuheften. Dies ist je nach Aufbau und Inkludierung der Scripte nicht immer möglich. Die Funktionstüchtigkeit sollte im Anschluss immer genau geprüft werden.

<script src="demo.js" async></script>

Anstatt des „async” Attributes kann auch das „defer” Attribut gesetzt werden. Dieses Attribut definiert, dass das Script erst ausgeführt werden soll, wenn die Seite fertig geladen ist.

Es sei zu beachten, dass beide Attribute nur eine Relevanz haben, wenn die Script-Tags imoder mitten im Inhalt eingebunden werden.

Wir haben zu diesem Thema einen separaten Blogbeitrag geschrieben: Quicktip: HTML5 async & defer Script Attribute.

Bonus Tipp: Weitere .htaccess Optimierungen

Das GitHub Projekt HTML5 Boilerplate umfasst eine Reihe an guten weiteren Apache Konfigurationen. Sehen Sie sich dazu am Besten mal die .htaccess Konfigurationsdatei an. Die Kommentare sind sehr aussagekräftig, sodass Sie selbst entscheiden können, welche Maßnahmen für Sie ggf. noch in Frage kommen.

Sollten Sie anstatt Apache einen NGINX Webserver für Ihre TYPO3 Installation einsetzen, gibt es vom gleichen Anbieter auch ein entsprechendes GitHub Repository.

Fazit

Es gibt viele Ansatzpunkte die Performance Ihrer TYPO3 Website deutlich zu steigern. Wir empfehlen sowohl die einmalige Analyse sowie die Einrichtung von Website Performance KPIs und regelmäßigen Checkups.

Wenn Sie Unterstützung bei der Performance-Optimierung für Ihr TYPO3 Website suchen, sind wir als TYPO3 Agentur genau der richtige Ansprechpartner.

The post 30 Tipps und Tricks für die verbesserte Geschwindigkeit Ihrer TYPO3 Website appeared first on mindtwo.de.

Mit der Verwendung von Frameworks können sich Entwickler auf die einzigartige Funktionalität ihrer Anwendung konzentrieren, die diese von anderen Webanwendungen unterscheidet. Dies wird ermöglicht, indem man auf Frameworks zurückgreift, die schnelle Möglichkeiten zum Implementieren von Funktionen auf Foundation-Ebene bereitstellen: Datenbankmanipulation, Benutzerauthentifizierung, und dergleichen. Nicht nur die Verwendung eines Frameworks hilft dabei, schneller zu arbeiten, sondern auch die Verwendung gut strukturierter und Community-getesteter Code-Bibliotheken, die hoffentlich guten Codierungsstandards folgen und für einen effizienten Betrieb optimiert sind. Wir alle wissen, dass die Anzahl und Vielfalt der JavaScript UI-Frameworks überwältigend sein kann und es unglaublich schwierig ist, mit allem Schritt zu halten. Viele Programmierer sind, seit sie zum ersten Mal Web-Komponenten mit dem Versprechen wahrer Interoperabilität und Portabilität ihrer Funktionalität entdeckt und verwendet haben, fasziniert von der Möglichkeit, Web-Komponenten-Sets über ein monolithisches Framework wie AngularJS zu verwenden.

Der Aufbau einer eigenen Bibliothek ist zwar lehrreich und fördert den Überblick über die eigenen Projekte, aber man braucht eben auch viel Zeit, um sie zu entwickeln. Wenn Entwickler etwas brauchen, das mit einer vorhandenen Bibliothek gemacht werden kann, geht es oft schneller (wenn es die richtige ist) wenn man auf diese zurückgreift. Falls es sich dabei um Open Source handelt, können Entwickler tief in die eingesetzte Bibliothek hineinschauen und auch viel lernen – aber das erfordert natürlich ebenfalls Zeit.

Natürlich ist die exakte Antwort auf die Frage, ob wir Frameworks unbedingt benötigen, zunächst „nein“. Es geht immer auch ohne Frameworks. Aber wie bei vielem hängt eine praxistaugliche Antwort auf diese Frage von der jeweiligen Komplexität, der geplanten zukünftigen Unterstützung und anderen Dingen ab. Es ist eine Gratwanderung, aber immer zu denken, dass man besser beraten ist alles selbst zu machen, ist oft eine schlechte Idee. Manchmal bietet es sich auch an, (Open Source) Arbeiten Anderer zu erweitern.

Vorteile von Frameworks

Es ist nach wie vor sehr beliebt, umfangreiche Frameworks zur Verfügung zu stellen und zu verwenden. Es ist, als ob man auch als einzelner Entwickler auf ein ganzes Expertenteam zurückgreifen würde. Framework-Code wurde auf eine Weise geprüft und getestet, die ein einzelnes Unternehmen oder gar ein einzelner Mitarbeiter nur schlecht leisten kann. Framework-Code wurde oft in Millionen verschiedener Szenarien auf Tausenden verschiedener Plattformen verwendet und wurde zudem häufig von erfahrenen Branchenexperten geschrieben.

Ein modernes JavaScript-Framework stellt in der Regel eine API bereit, um die folgenden wichtigen Aspekte der Web-Anwendungsentwicklung zu behandeln:

• Routing & Templates – Verknüpft komplexe URL-Strukturen mit Sichten und / oder Zuständen
• Services – API-Interaktionen über Komponenten via HTTP oder Sockets
• Abhängigkeiten – Die Fähigkeit, Codeabhängigkeiten zu verfolgen und die Wiederverwendung zu vereinfachen
• Helfer – Einfache Funktionen, um gängige Aufgaben mit JavaScript zu erleichtern (z. B. forEach)

Wer ein monolithisches Framework wie AngularJS verwendet, stellt fest, dass diese vier Elemente perfekt zusammen arbeiten und mit umfangreicher Dokumentation bereit gestellt werden, sowohl offiziell und über die Community – was von unschätzbarem Wert ist.

Wenn Entwickler viele Datensätze laden und diese an Felder in mehreren Ansichten gebunden sind, wird ein Framework sehr wahrscheinlich nützlich sein. Ähnlich verhält es sich, wenn Anwendungen eine vielseitige oder hierarchische Navigation haben. Frameworks fügen oft noch anderen Wert auf eine Weise hinzu, die zeitaufwändig und komplex zu implementieren wäre – aber dies hängt stark vom Framework und der Fähigkeit des Entwicklers ab, ihren Nutzen zu realisieren. Solche „Extras“ können so vielfältig sein wie Tests, Gerätekompatibilität oder Metriken.

Wenn wir nicht zu viele Abhängigkeiten und bedingte Zustandsänderungen haben, die Auswirkungen zwischen Datensätzen haben, ist es nicht übermäßig schwierig, diese zu beherrschen, indem man Zustände zunächst via Javascript festhält und dann das DOM und den Server aktualisiert. Entwickler können im Prinzip einfach ein Dictionary mit Feldern durchlaufen, die mit entsprechenden IDs markiert werden. Etwas einfacher funktioniert das mit jQuery oder etwas vergleichbarem. Vielleicht hat man auch nur ein paar Ansichten und keine dynamischen Daten? Man könnte die einfache Navigation sogar fast vollständig mit CSS aktualisieren, um eine DOM-Manipulation zu vermeiden.

Nachteile von Frameworks

Der Nachteil eines monolithischen Frameworks ist, dass man auf ein einziges Pferd setzt. Wenn Anwendungen wachsen, ist man immer stärker auf dieses eine Framework angewiesen und wird oft darauf warten, dass die Entwickler neue Funktionen hinzufügen, um das Framework in Einklang mit neueren Technologien zu bringen.

Die Verwendung eines Frameworks ist potenziell ein Gewinn, und das Potenzial erhöht sich mit der Komplexität der jeweiligen Anwendung. Aber was ist mit der zukünftigen Unterstützung? Wenn in einigen Jahren jemand Änderungen durchführen soll, der mit dem Projekt nicht vertraut ist (was in ein paar Jahren auch den ursprünglichen Entwickler selbst einschließt – dessen Ansätze werden anders sein und er wird sich kaum im Detail erinnern, was er damals getan hat), dann ist der Code umso besser, je einfacher er ist.

Leider ist die Welt der Frameworks recht schnelllebig (insbesondere im Frontend-Bereich), und daher kann es schwierig sein, mit Frameworks und deren Entwicklung Schritt zu halten. Daher kann ein solches Framework die Wartbarkeit im Gegensatz zu einfach selbsterklärendem JS auch verringern. Werden die Frameworks, an die wir uns inzwischen gewöhnt haben künftig bleiben? Oder sind im Laufe der Jahre nicht nur viele Frameworks entstanden und wieder verschwunden, sondern ist es vielleicht an der Zeit, dass das Konzept Framework selbst verschwindet?

Der Kompromiss

In vielen Fällen lohnt es sich wahrscheinlich, einen Kompromiss zu wagen und zu versuchen, die Grundlagen selbst zu implementieren. Wenn man dann auf eine ausreichend harte Wand stößt, ist immer noch Zeit, auf ein Framework zu wechseln. Zumindest wird man dann genau wissen, warum man sich eines Frameworks bedient – und nicht nur einem Trend folgen.

Ein Teil der JavaScript-Community hat inzwischen auch begonnen, sich in Richtung Mikro-Frameworks / Bibliotheken (etwa http://microjs.com/) zu bewegen, die (angeblich) leicht austauschbar sind – das „Pick-and-Mix“ der JavaScript-Welt. Es wäre oft interessant zu erfahren, wie die Kombination mancher Web-Komponenten zusammen mit einigen Mikrobibliotheken in einem realen Szenario im Vergleich mit einem Framework wie AngularJS abschneiden würde.

The post Orientierung im Framework-Dschungel appeared first on mindtwo.de.

Keine gekauften Links

Backlinks bilden noch immer ein wichtigstes Merkmal für die Bewertung einer Webseite. Sie sind quasi die Empfehlung für die Seite und je mehr Links auf Seiten Dritter sind, umso besser wurden sie bewertet. Dies haben allerdings viele ausgenutzt und kauften sich diese Backlinks ein. In den Anfängen des Linkkaufs wurden lediglich einzelne Wortlinks verkauft. Für Suchmaschinen war dies jedoch keine qualitative Empfehlung, da sie diese in dem natürlichen Aufbau von Links sahen. Seit 2012 mit der Einführung des Pinguin-Updates von Google ist damit aber Schluss. Viele Seiten hatten mit einem massiven Einbruch ihrer Bewertungen zu kämpfen, da sie auf gekaufte Backlinks gesetzt haben. Erschwerend kam hinzu, dass diese „Empfehlungsseiten“ zusätzlich noch mit Werbung vollgepackt wurden, was ebenfalls zu einem Qualitätsverlust führe. Mit dem Pinguin-Update wollte Google jedoch nicht bestrafen, sondern Seitenbetreiber motivieren mit für sie relevanten Seiten zu kooperieren. Das rückte sogenannte Influencer in den Fokus, mit denen mittlerweile verstärkt kooperiert wird und wodurch natürlich Empfehlungen und Backlinks entstehen.

Keine zu hohe Keyword-Dichte

Die Anzahl an Keywords, die zu einer relevanten Suchabfrage passten, waren früher ebenfalls eine wichtige Kennzahl für die Bewertung einer Internetseite. Mittlerweile sind Suchmaschinen aber zurückgerudert, vor allem wenn es um die Anzahl an Schlüsselwörtern in einem Text geht. Diese sollte einen Wert von rund zwei Prozent nicht übersteigen, da anderenfalls die Dichte zu hoch ist, was wiederum negativ bewertet wird. Je höher die Dichte umso eher vermuten die Algorithmen von Suchmaschinen, dass sich dahinter kein inhaltlicher Mehrwert für den Nutzer befindet und bewertet die Seite schlechter.

Kein Verzicht auf Meta-Description

Es ist bekannt, dass der Inhalt des Meta-Elements „Description” bei Google nicht mehr für die Relevanzbewertung einer Webseite herangezogen wird. Daher mag man meinen, dass die Meta-Description zu vernachlässigen ist. Dies erscheint jedoch fahrlässig, wenn man bedenkt, dass man mit der Meta-Description die Erscheinung des Suchergebnislisteneintrages beeinflussen kann. Machen Sie sich die Meta-Description doch lieber für die Steigerung der Klickrate (CTR) einer Webseite zu Nutze. Nutzen Sie die Seitenbeschreibung um sich von der Konkurrenz abzugrenzen. Der Erfolg von Änderungen lässt sich ja glücklicherweise mit den diversen, auch kostenfreien Analysetools bewerten.

Kein Fokus auf regionale Suchmaschinenoptimierung

Wer lokal ein Geschäft betreibt und zusätzlich mit einer Website oder einem Onlineshop Kunden im Umkreis ansprechen will, der muss in jedem Fall geografische Informationen in die Seite inkludieren. Dazu gehört beispielsweise der Standort aber auch diverse Kontaktinformation wie die Öffnungszeiten. Auch eine Telefonnummer ist hilfreich. Im Idealfall ist sogar eine Anfahrtsbeschreibung oder eine Karte auf der Webseite zu finden. Auch qualitative Bilder können den Unterschied ausmachen. Seitenbetreiber sollten hier keinesfalls zu begrenzt handeln und etwa nur den Ort angeben. Vor allem wer in einer Nische tätig ist, gewinnt dadurch mehr Kunden.

Kein Chaos bei den Redirects

Wer mit seiner Webseite umzieht oder eine neue Website an den Start bringt, muss sich intensiv mit Weiterleitungen (Redirects) für die bisher bei Google und Co. indexierten Seiten kümmern. Vernachlässigt man dieses Prozedere gefährdet man die Suchmaschinensichtbarkeit der eigenen Website massiv. Denn ist eine Webseite nach einem Umzug oder Relaunch nicht mehr unter der gleichen Adresse auffindbar, so landet ein Besucher auf einer Fehlerseite. Wenn diese Fehlerseite dann nicht zügig mit mit Hilfe eines Redirects beseitigt wird, ist damit zu rechnen, dass die betroffene Seite und das erzielte Ranking verloren geht und aufwendig neu erarbeitet werden muss.

Neben der Nichtbeachtung von Redirects gibt es noch weitere Stolpersteine. So wird bspw. zwischen einer dauerhaften und einer temporären Umleitung etwa für die Dauer einer Wartung unterschieden. Wer diese beiden Redirects verwechselt, der kann später auch Probleme mit Suchmaschinen bekommen. Wird ein sog. 301-Redirect verwendet, dann sieht das die Suchmaschine als dauerhafte Umleitung, selbst wenn es sich nur um eine temporäre Weiterleitung während einer Wartung handelt. Es kann dann dauern, bis die Seite wieder von Suchmaschinen indexiert wird, wodurch sie im Ranking nach hinten rutscht.

Ein Weiteres Problem, das bei sehr vielen Seiten zu beobachten ist, sind sog. Weiterleitungsketten. Diese entstehen meistens durch unsauber erstellte Redirect-Listen oder schlechte Systemwartung. Ein Weiterleitungskette tritt dann ein, wenn eine alte Seite richtigerweise zu einer neuen Seite weiterleitet. Wird diese neue Website jedoch erneut ersetzt und entsprechend weitergeleitet, liegt bereits eine unnötige Aneinanderreihung von Weiterleitungen vor.

Bei größeren Projekten und Websites können diese Weiterleitungsketten schier undurchschaubare Formen annehmen, sodass es sehr viel Aufwand und der Hilfe von professionellen Analysetools bedarf, das Weiterleitungs-Chaos zu beseitigen.

Achten Sie beim anlegen einer Weiterleitung immer darauf, ob nicht ggf. eine bestehende Weiterleitung obsolet wird. Bereinigen Sie regelmäßig nicht mehr benötigte Weiterleitungen und vermeiden Sie in jedem Fall Weiterleitungsketten, da diese auch als Performance-Fresser auftreten.

Benötigen Sie Hilfe oder Beratung bei der Optimierung Ihrer Website für Suchmaschinen? Als Onlineagentur mit einem Schwerpunkt für Suchmaschinenoptimierung sehen wir uns als zuverlässigen Partner für eine nachhaltige Verbesserung Ihrer Suchmaschinenrankings.

The post 5 Dinge, die bei SEO out sind appeared first on mindtwo.de.

Und wir konnten sogar Taylor Otwell, dem Gründer von Laravel, die Hand geben. Dieses Shake Hands ist und war in jedem Fall mit dem Dank für so ein vielseitiges Tool für vergangene, aktuelle und zukünftige Entwicklungen bei mindtwo verbunden.

Das Angebot der Laracon 2018

Das international aufgestellte Event teilte sich in verschiedene, parallel verlaufende Programme auf, in denen technisch in die Tiefe gehende Vorträge und Workshops rund um das PHP Framework Laravel sowie das gesamte dazugehörige Ökosystem stattfanden. Die Laracon vermittelte abermals einen breiten Überblick der Branche und bot auch Gelegenheit mit internationalen Kollegen ins Gespräch zu kommen.

Sprachgesteuerte Apps und Laravel

Sprachsteuerung ist nicht erst seit gestern ein Hot Topic. Somit durfte selbiges also auch nicht auf der Laracon fehlen. Mit Endgeräten wir Alexa von Amazon oder Google Home haben Sprachassistenten bereits Einzug in unser Zuhause gehalten. Ein Showcase wie Applikationen mit Hilfe von Laravel mit der Alexa Schnittstelle kommunizieren können, gab interessante Einblicke, was wie möglich ist. Die Alexa API erledigt in dem Falle nach wie vor die voice-to-text Transkription und die Laravel Applikation kann diese dann verarbeiten und Ergebnisse entsprechend zurücksenden.

Laravel Nova

Besonders spannend auf der Konferenz fanden wir die detaillierte Auseinandersetzung mit Laravel Nova, die neueste Entwicklung im Laravel Ökosystem. Laravel Nova ist eine schlank designte Administrationsoberfläche, die sich dank einfachem PHP Code mühelos konfigurieren und in eine bestehende Laravel Applikation integrieren lässt.

Laravel, PHP und Big Data

Big Data gehört nach wie vor zu den viel diskutierten Themen sowie zu den andauernden Herausforderungen in fast allen Branchen und Industrien. Kein Wunder also, dass auch die Laracon einen Beitrag zu Big Data bereit hielt. Das Zusammenspiel von PHP und Laravel kann zur Erstellung eines Datenkonsolidierung-Frameworks genutzt werden. Im Vergleich zu den naheliegenden Technologien wie Airflow oder auch Spark wurde die Entscheidung und auch die Herausforderung der Lösung mittels PHP und Laravel beleuchtet.

Ein gelungenes Event

Veranstaltungen wie die Laravel-Konferenz in Amsterdam geben uns auf ganz besonders nachhaltige Weise neue Impulse für unsere Entwicklungsarbeit in der Agentur. Außerhalb der täglichen Arbeit an Kundenprojekten oder auch eigenen Projekten bleiben wir in einer schnelllebigen Branche auf dem aktuellen Stand für die Technologien, die wir einsetzen, und auch darüber hinaus mittels einschlägiger Blogs, Fachzeitschriften, Podcasts oder auch Vlogs. Die Atmosphäre und die Möglichkeiten einer so international besetzten Konferenz setzen nochmals wesentlich präsenter und nachdrücklicher spezielle Aspekte und Denkweisen für uns Entwickler in den Fokus. Jede Konferenz oder vergleichbares Event ist also nicht nur Weiterbildung und Austausch, sondern auch ein gutes Stück Inspiration für die Gegenwart und Zukunft unserer Arbeit.

Sie interessieren sich für eine individuelle Lösung auf Basis von Laravel? Sie möchten mehr über die Möglichkeiten der Laravel-Entwicklung erfahren? Kontaktieren Sie unsere auf Laravel spezialisierte Internetagentur in Bonn!

Jetzt Kontakt aufnehmen!

The post Laracon 2018 – die europäische Laravel Konferenz in Amsterdam appeared first on mindtwo.de.

Für das Design und die Konfiguration von Formularen ist es also essentiell, dass diese durch den Website-Besucher so einfach, schnell und problemlos wie nur möglich auszufüllen sein sollten.

Typischer Aufbau für Online-Formulare

Die meisten Online-Formulare beinhalten typischerweise die folgenden Elemente:

• Struktur: Dies meint den generellen Aufbau des Formulars. In welcher Reihenfolge und Positionierung sind die Eingabefelder angeordnet? Wie stehen diese in Relation zueinander? Welche Pflichtfelder werden verwendet? Wie wird das Formular auf der Website aussehen?
• Eingabefelder: Textfelder, Checkboxen, Radiobuttons, Auswahlmenüs, Passwort-Felder etc.
• Titel der Eingabefelder: Der Titel eines Feldes erklärt dem User, was genau in das jeweilige Feld einzugeben ist und warum sie diese ausfüllen.
• Abschluss-Button: Sobald der Nutzer den Button betätigt wird eine Aktion ausgeführt – in den meisten Fällen ist dies das Absenden der Formulardaten.
• Feedback: Nach dem Versenden des Formulars sollte der User ein Feedback erhalten – “erfolgreich versendet” oder aber “folgende Felder enthalten Fehler”.

Zusätzliche Features können “Tool Tips”, kleine Hilfetexte zum Ausfüllen des Formulars, oder eine automatische Validierung der Angabe sowie die optische Visualisierung dessen sein.

Struktur und Design des Formulars

Ein Formular dient der Konversation mit dem User und sollte daher logisch aufgebaut und gut verständlich sein. Ein Formular erscheint auf den ersten Blick wie ein eher wenig komplexes Element, dass auf der Website eingesetzt wird. Allerdings gibt es zahlreiche Details, die es zu beachten gilt und Möglichkeiten zur Gestaltung und Strukturierung, die Sie anwenden können.

Bevor Sie sich mit den Details der Formulargestaltung befassen, prüfen Sie stets, ob Sie wirklich nur die nötigsten Informationen und Daten des Users abfragen. Letztlich gefährdet jede zusätzliche Abfrage die erfolgreiche Conversion.

Logische Gruppierungen von Informationsabfragen

Informationen, die miteinander im Zusammenhang stehen, sollten Sie in einen sinnvollen Block zusammenzufassen, da dies beim Ausfüllen einen gewissen “Flow” entstehen lässt und dies der Struktur einer Konversation folgt. So kann man “Persönliche Informationen” (Name, Vorname Geburtsdatum), “Kontoinformationen” (Email, Benutzername, Passwort) und “Kontakt” (Adresse, Telefonnummer) in Abfrageblöcke gruppieren. Der Nutzer wird so unbewusst und intuitiv durch das Formular geführt und es fällt ihm zudem leichter nachzuvollziehen, welche Information gerade erfragt wird.

Einspaltiger Formularaufbau

In einigen Formularen werden mehrere Spalten nebeneinander verwendet, um das Formular im ganzen kürzer erscheinen zu lassen. Jedoch werden User durch mehrere Spalten oft verwirrt und nehmen das Formular als unstimmig wahr. Wenn zwei Spalten nebeneinander verwendet werden, wird der natürlich Fluss von oben nach unten unterbrochen, denn das Formular muss im Z-Schema gelesen werden. Versuchen Sie daher Ihr Formular in nur einer Spalte zu gestalten, damit der User eine unkomplizierte Bearbeitung von oben nach unten vornehmen kann.

Je weniger Felder, desto besser

Geringer Aufwand beim Ausfüllen des Formulars führt in der Regel auch zu einer verbesserten Conversion Rate. Demnach sollte jedes Eingabefeld kritisch bezüglich der Notwendigkeit hinterfragt werden – das gilt besonders, wenn sehr viele Informationen abgefragt werden. Nach Möglichkeit sollten je Formularschritt nicht mehr als sieben Felder abgefragt werden. Achten Sie also stets darauf dem Website-Besucher so wenig “Arbeit” wie möglich zu machen, indem Sie alle nötigen Fragen und Informationen in so wenige Felder wie möglich zusammenzufassen. Dadurch erscheint das Formular übersichtlicher, der Nutzer kann es einfacher und schneller ausfüllen und so wird es schlussendlich häufiger versendet.

Sparsame Verwendung von optionalen Angaben

Auch im Hinblick auf die Anzahl der Felder sollten Sie optionale Felder nur dann einsetzen, wenn die verlangte Information einen echten Mehrwert bietet. Wenn Sie freiwillige Angaben abfragen, machen Sie kenntlich, dass es sich um freiwillige Angaben handelt. Es hat sich bewährt Pflichtfelder durch einen Sternchen (*) und eine erklärende Fußnote hervorzuheben und optionale Felder durch den Zusatz “optional” zu kennzeichnen. So kann der Nutzer leicht erkennen, welche Formulareingaben freiwillig sind.

Eingabe vs. Vorgabe

Dropdown-Listen die Eingabemöglichkeiten vorgeben, führen sehr häufig zu Fehlern. Oft wird beispielsweise das Herkunftsland des Besuchers erfragt und im Formular wird dann eine Liste aller Länder angeboten. Sehr schnell kann es jedoch passieren, dass sich der Benutzer bei der Auswahl verklickt oder dass sie dieses Feld als schon ausgefüllt überfliegen und somit eine falsche Angabe übermitteln. Eine gute Möglichkeit stellt dagegen ein Automatismus dar: das Formular schlägt automatisch das Land vor, nachdem der User seine Adresse angegeben hat.

Eingabemasken

Eingabemasken können helfen, die Daten im richtigen Format einzugeben. Beim Eingeben einer Telefonnummer wird dann die Vorwahl automatisch in Klammern gesetzt – sprich: das Formular formatiert Daten selbstständig. Bei Seriennummern kann dann einfach die Ziffern- und Buchstabenfolge eingegeben werden und das Formular ergänzt selbständig die korrekten Trennzeichen. Das erleichtert dem Benutzer die Eingabe und Flüchtigkeitsfehler können effektiver vermieden werden.

Bearbeitung mit der Tastatur und Fokusierung

Für Online-User die eine Bedienung am Desktop über die Tastatur bevorzugen und auch im Sinne einer barrierefreien Bearbeitung sollten Sie darauf achten, dass Ihr Formular “tastatur-freundlich” ist. Das Navigieren durch das Formular, der Wechsel zwischen den Eingabefeldern sowie die Eingabe selbst sollte problemlos über die Tastatur möglich sein, ohne eine Maus oder Trackpad zu verwenden.

Eine Fokussierung des Formularfelds, das aktuell ausgewählt und somit ausgefüllt wird, hilft dem Nutzer darüber hinaus – unabhängig davon, wie das Formular bedient wird – den Überblick zu behalten und direkt zu erkennen, welche Information aktuell gefragt ist. Das Eingabefeld kann farblich markiert, durch Zoom hervorgehoben oder durch ein anderes visuelles Signal besonders gekennzeichnet werden.

Formulare auf dem Mobilgerät

Die mobile Online-Nutzung nimmt weiter zu und Websites oder Webanwendungen müssen inklusive der implementierten Formulare deshalb ebenso mühelos mit einem Tablet oder auch Smartphone zu bedienen sein. Eine einfache aber sehr wirkungsvolle Hilfe, die Sie vermutlich aus eigener Erfahrung bestätigen können, ist je nach geforderter Eingabe die automatische Anzeige der passenden Tastatur. Handelt es sich um ein Formularfeld in das Zahlen eingegeben werden, beispielsweise eine Telefonnummer, dann wird automatisch die Zifferntastatur am Mobilgerät angezeigt, denn die Eingabe von Buchstaben wäre in dem Falle nicht von Nutzen. Bei Textfeldern wird dann die Buchstabentastatur angezeigt. Durch die automatische Anzeige und Umstellung ist ein schnelles Ausfüllen des Formulars möglich.

Auto-Vervollständigung

Aufgrund der steigenden Mobilnutzung gilt es bei der Formulargestaltung insgesamt darauf zu achten, nur dort händisches “Eintippen” vorzusehen, wo dies notwendig ist. Dabei kann das Feature der Auto-Vervollständigung helfen. In dem Falle tippt der Besucher zum Beispiel nur die ersten Teile einer Adresse ein und bekommt dann mögliche Adressen zur Auto-Vervollständigung angeboten. Das wird Ihnen der mobile User danken, aber auch am Desktop hilft das Feature beim schnellen und einfachen Ausfüllen des Formulars. Zusätzlicher Vorteil: Durch das automatische Vervollständigen entstehen zudem weniger Eingabefehler.

Aussagekräftige Feldtitel

Der Titel eines Feldes gehört mit zu den primären Elementen des Formulars, die eine intuitive Bearbeitung des Formulars erlauben. Denn ein gut gewählter Titel für das Formularfeld, macht dem Nutzer den Zweck des Feldes klar verständlich, so dass die korrekten Daten eingegeben werden können, es bleibt auch während der Eingabe nützlich und vor allem auch nach Beendigung der Eingabe weiterhin sichtbar.

Die Ausrichtung der Feldtitel

Für die Ausrichtung der der Titel bestehen drei Möglichkeiten:

• Neben dem Formularfeld, linksbündig
• Neben dem Formularfeld, rechtsbündig
• Oberhalb des Formularfeldes

Untersuchungen haben ergeben, dass Formulare im Schnitt am schnellsten ausgefüllt werden können, wenn die Titel sich oberhalb des Formularfeldes befinden. Das Formular kann bei der Positionierung oberhalb durch den Nutzer am einfachsten bearbeitet werden und diese Ausrichtung bietet auch darüber hinaus Vorteile. Unterschiedlich große Formularfelder und auch verschieden lange Titel können auf den diversen Bildschirmgrößen problemlos angezeigt werden, speziell auf dem Mobiltelefon. Auch Übersetzungen der Feldtitel und damit weitere Variationen in der Länge können so leicht vorgenommen werden.

Bei linksbündig ausgerichteten Feldtiteln sind diese je kürzer der Titel ausfällt, um so weiter vom eigentlichen Formularfeld entfernt, so dass dies das Ausfüllen verlangsamt. Diese Leerräume machen diese Art der Anordnung auch für mobile Endgeräte ungeeignet, da sie auf horizontaler Ebene viel Platz beanspruchen.

Die rechtsbündige Ausrichtung positioniert den Titel unmittelbar links vor dem Feld, auf welches es sich bezieht. Dies lässt Bezeichnung und Feld verbunden erscheinen, da keinerlei Leerraum dazwischen besteht. Das funktioniert gut für kurze Formulare. Jedoch ist diese Art der Positionierung für längere Formulare schwierig, da sie für den User schwerer zu lesen sind, da kein einheitlicher linker Rand zur Orientierung besteht.

Länge der Feldtitel

Hier gilt ganz besonders die Devise “Keep it short and simple”. Verwenden Sie klare, kurze und passend beschreibende Feldbezeichnungen. Sind diese gut formuliert, helfen die kurzen Beschreibungen, dem Besucher dabei sich schnell einen Überblick des Formular zu verschaffen, so dass die Orientierung beim eigentlichen Ausfüllen leichter fällt. Durch kurze und bündige Titel kann der Benutzer schnell erfassen, welche Daten verlangt sind und wird nicht durch lange Sätze aufgehalten. Wenn Sie eine E-Mail-Adresse verlangen genügt es “E-Mail” als Label zu verwenden anstatt beispielsweise zu fragen “Wie lautet Ihre E-Mail-Adresse?”.

Übersichtliche Formatierung

Ein beliebtes, aber nicht immer geeignetes Stilmittel, ist die ausschließliche Verwendung von Großbuchstaben. Dies mag auf den ersten Blick als gute Formatierung für die Formularfeldtitel erscheinen. Die fehlende Variation der Buchstabenhöhe erschwert dem Auge jedoch das Lesen. Der Besucher kann das Formular also weniger gut scannen als bei einer Formatierung in regulären Groß- und Kleinbuchstaben. Das wiederum verlangsamt den Bearbeitung und führt somit dazu, dass das Ausfüllen des Formulars mehr Zeit in Anspruch nimmt.

Inline-Labels

Das Verwenden von sogenannten Inline-Labels, sprich einem Text, der innerhalb des Formularfeldes steht und dieses beschreibt, können sinnvoll Platz sparen. Beim Klick in das Feld und dem Beginn des Ausfüllens verschwindet die Bezeichnung und wird mit der Eingabe im Feld überschrieben. Besonders für sehr kurze Formulare kann dies sehr gut eingesetzt werden. Beim Erfragen einer E-Mail-Adresse oder anderen “kurzen” Informationen können Inline-Labels verwendet werden. Wenn es sich jedoch um längere Formulare oder komplexere Informationsabfragen handelt, empfiehlt es sich auf Feldtitel-Positionierungen außerhalb des Formularfelds selbst zurückzugreifen. Auf diese Weise kann der Nutzer jederzeit nachvollziehen, was in einem Feld verlangt wurde und ob er die passende Information eingetragen hat.

Prüfen der Eingaben

Noch während des Ausfüllens sollten Sie die Besucher wissen lassen, ob die gemachten Eingaben gültig sind. Wenn eine Angabe in einem Formularfeld ungültig ist, sollte dies unmittelbar beim Ausfüllen des Feldes schon ersichtlich sein. Der Nutzer kann so direkt sehen, dass er die Daten prüfen muss. Diese “Echtzeit-Validierung” informiert den User unverzüglich, so dass Fehler direkt korrigiert werden können. Dies empfiehlt sich besonders bei langen Formularen. Denn andernfalls nimmt der Besucher sich die Zeit alles auszufüllen, um dann erst beim Versuch, es zu versenden, festzustellen, dass Korrekturen vorgenommen werden müssen.

Sicherung von Eingaben

Häufig kommt es vor, dass während des Ausfüllens die Website neu geladen werden muss, weshalb es von Vorteil ist, wenn die schon eingetragenen Angaben des Users nicht verloren gehen. Solche Sicherungsmechanismen verhindern Frustration beim Besucher, der nun dank der noch vorhandenen Daten möglichst nahtlos mit der Komplettierung des Formulars fortfahren kann.

Formular-Buttons optisch abgrenzen

Eine Schaltfläche, ein Button, in einem Formular dient dazu eine bestimmte Aktion, nach dem vollständigen Ausfüllen auszulösen. In den allermeisten Fällen wird dies die Übermittlung der Daten sein. Wenn auf einer Formularseite mehrere Aktionen (“Weiter”/”Abbruch”) möglich sind, sollten diese deutlich optisch voneinander abgegrenzt werden, so dass der Nutzer einfach die richtige sowie gewollte Aktion ausführen kann und sein gewünschtes Ziel erreicht.

Platzierung der Buttons

Die Position eines Buttons wird oft aus der Gewohnheit heraus mit einer Aktion assoziiert, ohne, dass der Website-Besucher das Label des Buttons gelesen hat. Daher sollten Sie bei der Erstellung des Formulars darauf achten, die Buttons an eine logische und bewährte Position zu setzen. Ein Button der eine bestätigende Aktion, wie “Senden”, “OK” oder “Weiter” ausführt, platzieren Sie üblicherweise rechts unten. Dort wird der User ihn auch erwarten und somit kann vermieden werden, dass eine falsche Aktion ausgelöst wird, die die Formularbearbeitung verzögern würde.

Titel der Formular-Buttons

Auch wenn bei einem einfachen Formular mit dem Button-Titel “Senden” vermutlich klar ist, das bei Klick auf den Button, die Daten gesendet werden, empfiehlt es sich dennoch stets spezifischer zu formulieren. Wählen Sie anstatt dessen einen Titel, der genau das wiedergibt, was der Button auslösen wird: “Formular senden”, “Konto erstellen” “Zum Newsletter anmelden”. Zudem ist so eine Kommunikation direkter und spricht den Nutzer, wenn auch im Detail, persönlich an.

Chat-Bots anstatt Formulare

Da Menschen immer mehr Zeit online verbringen und immer häufiger über verschiedenste Messenger-Dienste kommunizieren, legen sie größeren Wert darauf, dass auch Online-Formulare stärker einer Konversation ähneln. In diesem Zusammenhang können aktuell schon clevere Chat-Bots über ein Frage-Antwort-Algorithmus ein Formular ersetzen.

Formulare – Details entscheiden

Das Formular wird von den Online-Nutzern oftmals als notwendiges Übel empfunden, das aber natürlich in vielen Fällen benötigt wird und sinnvoll ist. Allgemein gilt es aber in jedem Fall die online verwendeten Formulare für den Nutzer so bequem und unkompliziert wie möglich zu gestalten. Die genannten Details für die einzelnen Formular-Komponente sind hilfreich und eine nützliche Orientierung. Tiefere Erkenntnisse erzielen Sie zudem auch mit A/B-Test Ihrer Formulare. Manches mal kann es aber auch schon helfen, einfach eine Kollegin oder einen Kollegen zu fragen, ob er Ihr Formular einmal testet. Auch so erhalten Sie bereits wertvolles Feedback.

Viel Erfolg bei der Gestaltung Ihrer Formulare!

The post Best Practice Website-Formulare: Design und Struktur appeared first on mindtwo.de.

Zusammen mit den grundlegenden Funktionen und der System-Zuverlässigkeit bestimmt die Performance eines Netzwerkes dessen Gesamtnutzen. Benutzer in einer immer schneller werdenden vernetzten Welt erwarten dies auch von den IT-Netzwerken, in denen sie agieren. Teilweise betragen Netzwerkverzögerungen nur wenige Millisekunden und haben kaum einen Einfluss auf die Nutzererfahrung. In anderen Fällen können solche kleinen Verzögerungen aber im Netzwerk zu einer für den Benutzer schwerwiegenden Verlangsamung führen.

Auch für Websites gilt: Schnellere Performance sorgt für eine tiefergehende Beteiligung der Nutzer, ein bessere Nutzerbindung und höhere Conversions.

Typische Szenarien, in denen Benutzer besonders empfindlich auf eine geringe Netzwerkgeschwindigkeit reagieren sind:

• Herstellen einer neuen Verbindung
• Laden einer Webseite
• Download von Dateien
• Streamen von Videoinhalten
• Online-Spiele

Um zu verstehen, welche Faktoren die Geschwindigkeit in einem Computernetzwerk beeinflussen, muss man die beiden kritischen Komponenten näher betrachten: Latenz und Bandbreite.

Latenz
So wird in der Telekommunikation die Zeit genannt, die ein Datenpaket von seinem Ausgangspunkt bis zum Ziel benötigt.

Bandbreite
Die Bandbreite definiert den maximalen Datendurchsatz eines logischen oder physischen Kommunikationswegs.

Die unterschiedlichen Latenzen in einem IP-Netzwerk

Der Begriff Latenz umfasst mehrere Arten von Verzögerungen, wie sie in einem IP-Netzwerk typischerweise bei der Übermittlung von Datenpakten auftreten können. Eine Netzwerkverbindung mi niedriger Latenz erfährt nur kleine Verzögerungszeiten, eine Verbindung mit hoher Latenz weist lange Verzögerungszeiten auf.

In einem IP-Netzwerk sind für die Weiterleitung der Nachrichten zwischen Client und Server die Router zuständig. Die dort am häufigsten auftretenden Verzögerungen sind:

Laufzeitverzögerung: Zeit, die eine Nachricht benötigt, um vom Absender zum Empfänger zu reisen. Dies hängt ab von der Geschwindigkeit, mit der sich ein Signal in einem Medium ausbreitet.

Übertragungsverzögerung: Zeit, die alle Bits eines Pakets benötigen, um durch die Verbindung gepusht zu werden. Dies ist abhängig von der Paket-Größe und der Datenrate der Verbindung.

Verarbeitungsverzögerung: Zeit, die zum Verarbeiten der Paket-Header und zur Suche nach Fehlern auf Bit-Ebene benötigt wird.

Warteschlangenverzögerung: Zeit, die ein Datenpaket auf einem Server oder Router wartet, bis es verarbeitet werden kann.

Obwohl die Wahrnehmung der Netzwerkgeschwindigkeit normalerweise als Bandbreite verstanden wird, ist die Latenz das andere wichtige Schlüsselelement. Auch wenn der durchschnittliche Benutzer mit dem Konzept der Bandbreite vertrauter ist, weil es von den Herstellern von Netzwerkgeräten so beworben wird, spielt die Latenz für die Erfahrung von Endnutzern eine größere Rolle.

Die Summe aller oben aufgelisteten Verzögerungen wird als Gesamtlatenz bezeichnet. Die Ausbreitungszeit wird durch die Entfernung von der Quelle bis zum Ziel und vom Medium bestimmt durch welches das Signal läuft. Die Ausbreitungsgeschwindigkeit liegt gewöhnlich in der Nähe der Lichtgeschwindigkeit. Auf der anderen Seite wird die Übertragungsverzögerung durch die verfügbare Datenrate bestimmt, die wiederum nichts mit der Entfernung von Server und Client zu tun hat.

Lichtgeschwindigkeit und Ausbreitungslatenz

Nach Einstein und seiner speziellen Relativitätstheorie ist die Lichtgeschwindigkeit die maximale Geschwindigkeit, mit der Materie, Energie oder Informationen bewegt werden können. Diese Beobachtung legt eine unumstößliche Grenze für die Laufzeit von Netzwerkpaketen fest.

Im Vakuum beträgt die Lichtgeschwindigkeit 299.792.458 Meter pro Sekunde das entspricht etwa 1079252848,8 km/h. Bewegen sich die Pakete durch ein Medium wie Kupferdraht oder Glasfaserkabel, werden die Signale verlangsamt. Das Verhältnis der Lichtgeschwindigkeit zur Geschwindigkeit in einem Material wird Brechungsindex genannt. Je größer der Brechungsindex ist, desto langsamer ist das Medium.

Optische Fasern, die in den meisten Fällen für Langstreckenübertragungen verwendet werden, haben einen Brechungsindex zwischen 1,4 und 1,6 (je nach Qualität des verwendeten Materials). Bei einem Brechungsindex von 1,5 beträgt die Lichtgeschwindigkeit in der Glasfaser 200.000.000 Meter pro Sekunde, ein erstaunlich guter Wert zur Übertragung von Datenpakten.

Nachdem die Pakete Kontinente und Ozeane überquert haben, kommt es ausgerechnet auf dem letzten Stück zu einer signifikanten Latenz, die auch Last-Mile-Latenz genannt wird. Um das Signal vom Internet-Dienstleister zum Kunden zu transportieren, sorgen Kupferkabel und Routingknoten für Verzögerungen, die ja nach verwendeter Technik und Routing-Methoden mehrere Millisekunden betragen können.

Latenz von Internetdiensten, Software und Geräten

Obwohl die theoretische Spitzenbandbreite einer Netzwerkverbindung gemäß der verwendeten Technologie festgelegt ist, variiert die tatsächliche Datenmenge, die durch ein Netzwerk fließt (Durchsatz genannt), weil sie im Laufe der Zeit von höheren und niedrigeren Latenzzeiten beeinflusst wird. Sobald ein Paket am Router angekommen ist überprüft dieser den Paketkopf um die weitere Route zu bestimmen. Dabei werden noch weitere Prüfungen ausgeführt, was ebenfalls Zeit erfordert. Ein großer Teil der Validierungen wird von der Hardware ausgeführt, so dass die Verzögerungen sehr gering aber trotzdem nicht zu vernachlässigen sind.

Je mehr Instanzen ein Paket in einem Netzwerk durchläuft, desto mehr Zeit wird für die Übermittlung benötigt. Eine große Entfernung zwischen Quelle und Ziel verursacht höhere Übertragungs- und Verarbeitungsverzögerungen. Dabei ist die Wahrscheinlichkeit der Verzögerung für jedes Paket größer, je höher die Verkehrslast entlang des Pfades ist.

Übermäßige Latenz erzeugt Engpässe, die wiederum den Durchsatz verringern und die maximale effektive Bandbreite einer Verbindung begrenzen. Der Einfluss der Latenz auf den Netzwerkdurchsatz kann abhängig von der Quelle der Verzögerungen temporär (einige Sekunden) oder dauerhaft (konstant) sein.

Bei einer DSL- oder Kabel-Internetverbindung beispielsweise sind Latenzen von weniger als 100 Millisekunden (ms) typisch, oft sind es sogar weniger als 25 ms. Bei Satelliten-Anschlüssen und Mobilgeräten wiederum sind durchaus Latenzen von 500 ms und mehr möglich. Ein Internetdienst mit einer Übertragungsgeschwindigkeit von 20 Mbit/s kann zum Beispiel deutlich schlechter arbeiten als ein Dienst mit 5 Mbit/s, wenn er mit hoher Latenz läuft.

Die Satelliten-Internetdienste veranschaulichen den Unterschied zwischen Latenz und Bandbreite in Computernetzwerken sehr gut. Satelliten besitzen zugleich eine hohe Bandbreite und ein hohe Latenz. Die meisten Benutzer erkennen eine deutliche Verzögerung von der Zeit der Adresseneingabe bis zum Zeitpunkt zu dem die Seite geladen wird. Die hohe Latenz ist hauptsächlich auf eine Laufzeitverzögerung zurückzuführen, welche die Nachricht erfährt, wenn sie mit Lichtgeschwindigkeit zur entfernten Satellitenstation und wieder zurück zum Computernetzwerk unterwegs ist. Sobald die Nachricht auf der Erde angekommen ist, wird sie so schnell weitergeleitet, wie es die Bandbreite des transportierenden Mediums zulässt.

Auch ein Fehler oder ein anderes Hardwareproblem kann die Zeit zum Lesen von Datenpaketen verlängern und damit die Latenz erhöhen. Der Grund dafür kann auch in der Netzwerkhardware liegen oder in einer langsamen Festplatte, die zu viel Zeit zum Lesen oder Speichern von Daten benötigt. In einem WLAN kann es durch Spiegel- oder Metallflächen zu Interferenzen kommen, die den Datenverkehr verlangsamen und Latenzen verursachen.

Messung der Netzwerklatenz

Netzwerk-Tools wie Ping und Tracer oder Traceroute können zur Ermittlung der Latenz verwendet werden. Außerdem kann damit die Umlaufzeit bestimmt werden, also der Zeitraum, den eine Nachricht von der Quelle bis zum Ziel und wieder zurück benötigt. Die Ermittlung dieser Round-Trip-Zeit ist nicht die einzige Möglichkeit die Latenz zu messen, sie wird aber am häufigsten angewandt. Quality of Service (QoS) Funktionen in Computernetzwerken dienen dazu Bandbreite und Latenz gemeinsam zu verwalten und konsistente Leistung zu erzielen.

Die Rolle der Bandbreite in der Netzwerkleistung

Neben der Latenz ist die Bandbreite ein wichtiger Schlüsselfaktor bei der Bestimmung der Geschwindigkeit eines Computernetzwerks. Praktisch jeder Anwender kennt die Bandbreitenangaben seines Internet-Routers und Internet-Dienstleisters, weil sie in den Produktanzeigen prominent vertreten sind.

Die Bandbreite in Computernetzwerken bezieht sich auf die Datenrate, die von der Netzwerkverbindung und -schnittstelle unterstützt wird. Der Wert repräsentiert die Gesamtkapazität einer Netzwerkverbindung. Je größer die Kapazität, desto wahrscheinlicher ist zumindest eine hohe Leistung.

Die Bandbreite bezieht sich sowohl auf theoretische Kapazität als auch auf den tatsächlichen Durchsatz. Dabei ist es wichtig, zwischen den beiden Eigenschaften zu unterscheiden. Zum Beispiel bietet eine Verbindung nach dem 802.11g-Standard eine Nennbandbreite von 54 Mbit/s erreicht aber in der Praxis jedoch nur 50% oder weniger dieses Wertes beim tatsächlichen Durchsatz. Herkömmliche Ethernet-Netzwerke unterstützen theoretisch 100 Mbit/s oder 1000 Mbit/s maximaler Bandbreite. Aber diese maximalen Werte werden normalerweise ebenfalls nicht erreicht.

Mobile Netzwerke haben im Allgemeinen keine spezifische Bandbreitenangabe aber auch hier gilt das gleiche Prinzip. Verzögerungen in der Computerhardware, bei den Netzwerkprotokollen und in den Betriebssystemen sorgen für den Unterschied zwischen der theoretischen Bandbreite und dem tatsächlichen Durchsatz.

Bandbreite in Glasfasernetzwerken

Eine optische Faser, etwas dünner als das menschliche Haar, ist dazu ausgelegt, Licht zwischen den beiden Enden des Kabels zu übertragen. Auch Metalldrähte werden dazu verwendet, sie unterliegen jedoch größeren Signalverlusten, elektromagnetischen Störungen und höheren Wartungskosten. Aus diesem Grund werden für alle Fernverbindungen Glasfaserkabel verwendet.

Optische Fasern haben zudem einen eindeutigen Vorteil, wenn es um die Bandbreite geht. Jede Faser kann auf unterschiedlichen Wellenlängen (Kanälen) Licht von einer Quelle zum Ziel transportieren. Daher ist die Gesamtbandbreite einer Glasfaserverbindung das Vielfache der Datenrate pro Kanal und die Anzahl der Kanäle. Bisher werden durch eine Faser gleichzeitig etwa 160 Kanäle genutzt, wobei jeder Kanal eine andere Wellenlänge im Infrarotbereich verwendet.

Moderne Glasfaserkabel haben eine Kapazität von 100 Gbit/s, damit ist die Grenze der Kapazität aber noch nicht erreicht. Verschiedene Störeffekte verhindern derzeit höhere Bandbreiten. Eine Begrenzung ist das Rauschen der Signalverstärker, die etwa alle 100 km erforderlich sind. Zur Erreichung des theoretischen Maximums müssten vor allem das Codierungsverfahren und die Modulation noch verbessert werden. Das absolute Limit liegt bei 150 Tbit/s.

Bandbreite in drahtgebundenen Netzwerken

Auf den großen drahtgebundenen Netzwerken des Internets kommen Glasfaserkabel zum Einsatz die bis zu den Backbones Hunderte von Terabits übertragen können. Allerdings ist die verfügbare Kapazität in den drahtgebundenen Netzwerken deutlich geringer und stark von der verwendeten Technologie abhängig. Einwahl-, DSL-, Kabel- und eine Vielzahl von mobilen Technologien und die Leistung des lokalen Routers haben einen großen Einfluss auf die verfügbare Bandbreite. Die Bandbreite bei mobilen Geräten ist sehr variabel, in der Regel jedoch langsamer als bei Glasfaserkabeln.

Eine hohe Bandbreite zum Internet-Dienstleister ist zwar wünschenswert diese ist jedoch keine Garantie für eine gute Ende-zu-Ende Leistung. Auch wenn die verfügbare Bandbreite hohe Datenraten verspricht, trifft dies meist nicht auf die entfernten Servern zu. Das Netzwerk könnte aufgrund hoher Nachfrage, Hardwarefehlern, eines konzentrierten Netzwerkangriffs oder wegen einer Vielzahl anderer Gründe potentiell an jedem Zwischenknoten überlastet sein. Eine hohe Variabilität des Durchsatzes und der Latenzleistung ist eine inhärente Eigenschaft unserer Datennetzwerke. Die Vorhersage, Verwaltung und Anpassung an den sich ständig ändernden Netzwerkverkehr bleibt eine komplexe Aufgabe.

Die Geschwindigkeit eines Computernetzwerkes überprüfen

Ein hochauflösendes Video erfordert beim Streaming zwischen 2 und 10 Mbit/s. Für einen Endnutzer ist das ausreichend, verbraucht jedoch viel von seiner Verbindungskapazität. Bereits bei zwei gleichzeitigen Benutzern kann es zu Engpässen kommen. Herauszufinden, an welcher Komponente sich der Bandbreitenengpass befindet, ist oft eine wichtige Angelegenheit. Zum Glück gibt es im Internet zahlreiche Dienste, mit deren Hilfe Upstream- und Downstream-Tests durchgeführt werden können. Diese bieten eine gute Möglichkeit, zu überprüfen, ob die angegebenen Geschwindigkeiten des Internet-Anbieters erreicht werden.

Die Methoden zur Überprüfung der Netzwerkgeschwindigkeit sind bei lokalen Netzwerken (LANs) und Wide Area Networks (WAN) wie dem Internet unterschiedlich. Ein Test misst die Leistung eines Netzwerks während eines kurzen Zeitraums. Die Testprogramme senden und empfangen Daten über das Netzwerk und berechnen die Leistung anhand der übertragenen Daten in einem bestimmten Zeitintervall.

Die am meisten verwandte Messung für die Netzwerkgeschwindigkeit ist die Datenrate. Diese wird ermittelt als Anzahl der Bits, die in einer Sekunde über eine Netzwerkverbindung laufen. Moderne Computernetzwerke unterstützen Datenraten von bis zu 1 Milliarden Bits pro Sekunde. Die Geschwindigkeitstests enthalten häufig auch eine separate Messung der Netzwerkverzögerung, die häufig auch als Ping-Zeit bezeichnet wird.

Die Bewertung der Qualität der Netzwerkgeschwindigkeit hängt darüber hinaus von der Verwendung des Netzwerks ab. So erfordert zum Beispiel das Spielen über ein Netzwerk relativ niedrige Ping-Zeiten, die Datenrate ist oft zweitrangig. Die Übertragung eines HD-Videos erfordert dagegen hohe Datenraten, die Netzwerkverzögerung ist hier aber weniger problematisch.

Höhere Bandbreite und niedrige Latenzen

Das die Nachfrage nach einer höheren Bandbreite ständig wächst, ist vor allem dem Video-Streaming geschuldet, das mittlerweile für die Hälfte des Internet Traffics verantwortlich ist. Durch die Integration von mehr Fasern in eine Glasfaserverbindung erhöhen die Dienstleister die Kapazität für die überlasteten Strecken. Außerdem führt die Optimierung der „Wavelength Division Multiplexing“ (WDM) Technik zu einer besseren Ausnutzung der Lichtwellenleiter. Leider ist die Verlegung neuer Kabel aus Kostengründen und politischen Hürden so nicht immer möglich. Um die Leistungen der Netzwerke zu verbessern, müssen Protokolle und Netzwerktechnik deshalb weiter optimiert werden.

Eine niedrigere Latenz kann durch die Verbesserung der optischen Lichtwellenleiter erreicht werden. Leider gibt es keine Möglichkeit, die Gesetze der Physik zu umgehen. Aber bessere Faser-Materialien mit einem niedrigeren Brechungsindex und schnellere Router könnten helfen, sich der Lichtgeschwindigkeit anzunähern.

The post Bandbreite und Latenz in modernen IP-Netzwerken appeared first on mindtwo.de.

A/B-Tests sind eine sehr gute Methode, um die besten Strategien für Ihren Online-Auftritt zu ermitteln. Die auch als Split-Test bezeichnete Methode wird oft verwendet, um zwei Versionen einer Anzeige, Webseite oder App zu testen, um zu messen, welche Version die höhere gewünschte Conversion erzielt.

Gut geplante A/B-Tests kommen der Effektivität Ihrer Marketing-Strategie nachhaltig zugute. Durch das Herausfinden der überzeugendsten Elemente einer Werbeaktion und deren Kombination, lassen sich die Marketingbemühungen deutlich zielgerichteter gestalten und Online-Maßnahmen erfolgreicher einsetzen. Wir haben die A/B-Tests einmal genauer unter die Lupe genommen.

Wie ein A/B-Test funktioniert

In einem A/B-Test nehmen Sie eine Anzeige, Webseite oder einen App-Bildschirm und ändern diese(n), um eine zweite Version derselben Seite zu erstellen. Diese Änderung kann so einfache Dinge wie eine einzelne Überschrift oder Schaltfläche betreffen oder eine gänzlich andere Gestaltung der Seite sein. Dann zeigen Sie für die Hälfte des Website-Traffics die ursprüngliche Version der Seite als sogenanntes Kontroll- oder Steuerelement an, während die andere Hälfte die angepasste Version der Seite, die Variante, zu sehen bekommt.

Vor der Durchführung legen Sie fest, welche verkaufsrelevanten Teile einer Seite oder Anwendung Sie testen möchten. Da den Besuchern entweder die Kontrollseite oder die Variante angezeigt wird, können die Interaktion und Erfahrung gesammelt, gemessen und statistisch analysiert werden. Am Ergebnis erkennen Sie, ob sich die Änderungen positiv, negativ oder gar nicht auf das Verhalten der Besucher auswirkt.

Ein A/B-Test lässt sich auf der Website direkt oder Off-Site durchführen. Bei Off-Site-Tests werden hauptsächlich Anzeigen oder Verkaufs-E-Mails getestet. Bei durch A/B-Test optimierten Online-Anzeigen setzen Sie anschließend das Werbebudget wesentlich effektiver ein, da Sie wissen, dass diese Ihre die potenziellen Kunden optimaler anspricht. Für die Optimierung von E-Mails senden Sie ebenfalls zwei Gruppen Ihre Nachricht: einer Hälfte die Kontrollversion, während die andere Hälfte die Variante erhält. Nun können Sie verfolgen, welche Version eine bessere Conversion bietet und können die Erkenntnisse für den nächsten Versand anwenden.

Welche Dinge können getestet werden?

Auf einer Webseite können Sie alles testen, was für Ihre Marketingmaßnahmen wichtig sein kann: Überschriften, Handlungsaufforderungen, Texte, Bilder, Buttons etc. Alles was Sie ändern können, kann auch getestet werden. Sinnvoll ist natürlich sich auf prominente und verkaufsfördernde Elemente zu konzentrieren.

Auf Ihrer Webseite finden sich wahrscheinlich diese Elemente:

• Überschrift
• Aufruf zum Handeln
• Info-Texte
• Grafik für die Unterstützung der Verkaufsbemühungen
• Produktbeschreibungen
• Buttons

Für einen A/B-Test sind oftmals kleinere Änderungen bereits ausreichend, wie zum Beispiel die Anpassung der Hauptüberschrift, eines Buttons oder auch nur einer Farbe. Entscheidend ist, verschiedene Alternativen zu testen. Sie sollten außerdem sicherstellen, dass die Mitglieder einer Testgruppe immer aus den gleichen Besuchern bestehen. A/B-Tests werden auch von Produktentwicklern oder Designern verwendet, um die Auswirkungen neuer Funktionen oder Änderung der Benutzererfahrung zu demonstrieren und zu optimieren.

Der A/B-Testprozess im Überblick

Das folgende A/B-Testschema unterstützt Sie bei Ihrer Planung:

1. Daten sammeln – die Analyse von Daten liefert einen Überblick, wo es Optimierungsbedarf gibt. Es hilft mit stark frequentierten Unterseiten einer Website zu beginnen, weil dort die Daten schneller erfasst werden können. Verwenden Sie außerdem Seiten mit niedrigen Conversions- oder hohen Absprungraten.
2. Ziele identifizieren – Conversion-Raten sind Messwerte, die anzeigen können, ob die getestete Variante erfolgreicher ist, als die ursprüngliche Version. Die Conversion-Ziele können von einem Klick auf eine Schaltfläche oder Link bis hin zu Produktkäufen oder Anmeldungen für eine Mailingliste reichen.
3. Hypothesen erstellen – Sobald Sie die Ziele identifiziert haben, können Sie beginnen A/B-Testideen und Hypothesen zu entwickeln.
4. Hilfreiche Tools – A/B-Testsoftware kann Ihnen helfen, die gewünschten Änderungen an Ihrer Webseite oder mobilen App vorzunehmen. Das kann zum Beispiel die Farbe oder Position einer Schaltfläche oder die Reihenfolge bestimmter Elemente sein. Viele Tools besitzen einen visuellen Editor, der Ihnen die Änderungen vereinfacht.
5. Die Testphase – Starten Sie das Experiment und warten Sie auf die ersten auswertbaren Ergebnisse. Weisen Sie den Besuchern zufällig die Kontrollseite oder die Variante zu.
6. Ergebnisse analysieren – Ist das Experiment abgeschlossen werten Sie die Interaktion aus und vergleichen Sie die Ergebnisse. Ihre A/B-Testsoftware hilft Ihnen in der Regel bei der Analyse und zeigt Ihnen, ob zwischen den beiden Versionen ein statistisch signifikanter Unterschied besteht.

Warum Sie A/B-Tests durchführen sollten

A/B-Tests ermöglichen es die Benutzererfahrungen aufgrund einer fundierten Datenlage zu ändern. Die Tests erlauben es, Hypothesen aufzustellen und besser zu verstehen, warum bestimmte Elemente einer Seite das Nutzerverhalten effektiver als andere beeinflussen. Diese Erkenntnisse können dann in die Gestaltung und Optimierung von Website oder Anwendung einfließen.

Die nachhaltigsten Ergebnisse erzielen Sie, wenn Sie die A/B-Tests nicht nur einmalig anwenden, sondern regelmäßig zur kontinuierlichen Verbesserung der Nutzerinteraktion einsetzen und so die Conversions-Rate erhöhen. Denn Sie erhalten so einen objektiven Vergleich, der unabhängig von der eigenen Sichtweise, die Reaktionen der Zielgruppe widerspigelt. Ein A/B-Test ist relativ einfach und dank zahlreich angebotener Software-Unterstützung auch ohne umfassende Vorkenntnisse durchzuführen. Die erzielten Verbesserungen lassen sich im Anschluss an den Test direkt umsetzen.

The post Website-Conversion mit A/B-Tests erfolgreich steigern appeared first on mindtwo.de.

Kaufentscheidungen sind häufig mehr oder weniger emotional begründet und werden in den meisten Fällen zugunsten einer Marke getroffen, der sich der Konsument verbunden fühlt.
Zu den wahrgenommenen grundlegenden wie einfachen Merkmalen einer Marke gehören zum Beispiel das Logo, der Markenname und auch der Slogan. Um die emotionale Verbindung zu Ihrer Marke und den Produkten zu stärken sowie die Präferenz des Kunden für Ihr Angebot zu erhalten, sollten Sie auf die kleineren Details beim Branding achten, da selbst kleinste Veränderungen auch negative Auswirkungen auf das Unternehmen haben können.

Konsistente Markenkommunikation

Sowohl bei der Entwicklung Ihrer Marke als auch bei einem Rebranding ist die durchgängig konsistente Aufstellung der Kommunikation ein Schlüsselelement. Ein Markenname, ein Logo und ein Claim, die auf allen Marketingkanälen zum Einsatz kommen. Denn so erzielen Sie den gewünschten Wiedererkennungswert Ihrer Marke. Verbinden Sie Ihre visuelles Branding mit der passenden Markenstimme, seriös und professionell oder locker und lustig, passend zu Ihren Produkten, Branche und Zielgruppe. Stellen Sie sicher, dass sich diese Grundstimmung konsistent durch die von Ihnen bespielten Kommunikationskanälen zieht.

Die konsistente Kundenkommunikation hilft nicht nur dem Kunden sich besser zu identifizieren und kommt so letztlich auch den Unternehmenszielen zu gute. Sie können sogar mit einem positiven Einfluss für die Suchmaschinenoptimierung Ihrer Website rechnen. Google & Co. bevorzugen Suchergebnisse, die einer Marke zugeordnet werden können und Markeneinträge ranken auch insgesamt einfacher und besser.

Bleiben Sie sich treu

Nach einer gewissen Zeit beginnen Unternehmen häufig das Branding zu hinterfragen und entscheiden sich häufig voreilig dazu Veränderungen durchzuführen. Das widerspricht jedoch der durch die Kunden bevorzugten Kontinuität und Stabilität. Kunden erwarten Umstrukturierungen eher nicht und zuviele oder zu weitreichende Anpassungen des Brandings kann sogar abschrecken. Auch wenn Sie ein Bedürfnis haben, die Marke zu überarbeiten, fühlt sich der Kunde mit der Verlässlichkeit aber sehr wohl. Auch große Marken halten aus gutem Grund an ihrem Branding fest: Audi – Vorsprung durch Technik; Haribo macht Kinder froh und Erwachsene ebenso; Red Bull verleiht Flügel.

Sie wollen trotzdem umgestalten?

Bei einem Rebranding Ihrer Marke ist besonder Sorgfalt angezeigt. Sie sollten jederzeit im bedenken, dass durch Ihre bestehende Marke eine Verbindung zu derzeitigen Kunden besteht und wenn Sie also Ihre Markenkommunikation unvorsichtig oder nicht durchdacht vornehmen, könnte dies durchaus zur Folge haben, dass Kunden verloren gehen. Eine komplette Veränderung der Markenidentität Ihres Unternehmens sollten Sie in keinem Fall anstreben. WIe in jedem guten Change Management Prozess ist es auch bei einem Rebranding ratsam, dies gegenüber den Kunden zu erklären und diese so darauf vorzubereiten. Durch eine gute und zuverlässige Kommunikation erweckt Ihr Unternehmen den Eindruck von guter Organisation, welches vielen Konsumenten Vertrauen schenkt. So behalten Sie Ihre wertvollen Kunden, die Ihrer Marke treu bleiben und die Kaufentscheidung weiterhin auf Ihre Produkte fallen wird.

Heben Sie sich von der Konkurrenz ab

Die Abgrenzung der eigenen Marke gegenüber dem Wettbewerb gehört zu einer Kernfunktionen eines gelungenen Brandings. Gute und herausstechende Markenkommunikation hebt Sie effektiv von der Konkurrenz ab. So bleiben Sie dem Kunden in Erinnerung und die Entscheidung fällt dann sehr viel einfacher auf Ihre Produkte oder Services. Im Rahmen Ihres Brandings und der damit verbunden Botschaft sollten Sie auch den Mehrwert, den Sie bieten, kommunizieren und darstellen.

Setzen Sie dazu gezielt Ihr Marketing ein und machen Sie Ihre Marke und Ihr Angebot unverwechselbar und bleiben Sie so in Erinnerung. Zeigen Sie Konsumenten, welche Vorteile sie erhalten, wenn sie Ihre Marke einsetzen im Vergleich zu einer anderen.

Gestalten Sie Ihre Website professionell

Eine moderne Website ist in einer ansprechenden Optik designt, lässt sich benutzerfreundlich bedienen und ist technisch sauber aufgesetzt. Ein gutes Webdesign berücksichtigt nicht nur flüchtige Designtrends, sondern neben der guten Mischung aus Text, Bildern, Grafiken und weiteren Gestaltungselementen, vor allem die Benutzerfreundlichkeit und auch die Benutzerführung. Einfache Maßgaben für eine gut strukturierte Website sind qualitativ hochwertige und zu Ihrer Marke passende Bilder und eine informative Mischung aus Text- und Bildanteilen. Seitenlanger Text schreckt den Besucher ab und somit für die Website nicht zweckdienlich, da es eher einen negativen ersten Eindruck hinterlässt.

Die verwendeten Bildern sind zum einen ein Gestaltungselement, vermitteln aber natürlich auch eine Botschaft. Die Bildsprache Ihrer Website kann ein mächtiges Tool innerhalb des Online-Brandings sein.

Mobile Optimierung, saubere Entwicklung und Suchmaschinenoptimierung sind weitere wichtige Säulen Ihrer professionellen Website.

Kennen Sie Ihre Kundschaft

Kein Produkt und keine Marke kann “alle” potentiell möglichen Konsumenten ansprechen. Die Defininition einer Zielgruppe sowie das Untersuchen und genaue Beschreiben selbiger gehört zu den Grundlagen des Marketings. Versuchen Sie dies mit der nötigen Detailtiefe vorzunehmen. Denn in die Zielgruppe “über 70 und Hundeliebhaber” fallen Prinz Charles und Ozzy Osbourne gleichermaßen.

Je genauer Sie Ihre Zielgruppe festlegen und je mehr Sie über Ihre potentiellen Kunden wissen, desto effektiver können Sie Ihre Markenkommunikation gestalten. Die Ansprache und das gefühl der Zugehörigkeit fällt größer aus.

Brand-Wissen und -Identifikation im Unternehmen

Ihr Unternehmen wird auch durch die gesamte Belegschaft repräsentiert und Ihre Mitarbeiterinnen und Mitarbeiter bilden ebenso einen Teil Ihrer Marke Daher sollten Sie sicherstellen, dass diese Unternehmen und Marke entsprechend vertreten können. Gerade im Einzelhandel kommt dies verstärkt zum Tragen: Verkaufspersonal eines englischen Herrenausstatter wird eine anderen Kundenumgang pflegen als die Mitarbeiter in einem Sportgeschäft.

Klare Sprache

Auf der Website und auch auf anderen Kommunikationskanälen gilt es Fachbegriffe sparsam dort einzusetzen, wo sie Sinn machen und für eine korrekte Beschreibung notwendig sind. Darüber hinaus sollten Sie sich stets bemühen, in einer möglichst klaren und verständlichen Sprache zu Ihrer Zielgruppe zu sprechen. Im Zentrum der Markenkommunikation stehen immer die Botschaften “was macht das Unternehmen und die Marke aus” und “welchen Mehrwert bietet das Unternehmen oder die Marke”. Fachspezifische Inhalte mögen auf den ersten Blick Expertise zeigen, verwirren den Kunden aber schlussendlich. Halten Sie es einfach und verständlich.

Sorgfältige Auswahl des Markennamens

Ganz besonders, wenn Sie gerade starten und einen Namen wählen, lassen Sie besondere Sorgfalt walten. Dieser will gut überlegt und klug gewählt werden, denn er soll bereits möglichst viel über Ihre Marke erzählen und darüber hinaus auch gegenüber der Konkurrenz herausstechen. Wählen Sie einen kurzen Namen, der sowohl einfach zu schreiben als auch einfach auszusprechen ist, sodass Sie einfach zu finden sind und Kunden sich den Namen leicht einprägen können. Stellen Sie sicher, dass es nicht bereits andere Unternehmen gibt, die diesen Namen verwenden, um Verwechslungen zu vermeiden. Ist der Markenname grundsätzlich positiv belegt und kann damit assoziiert werden, was Sie anbieten?

Nehmen Sie sich hier ausreichend Zeit – denn der Name Ihrer Brand lässt sich einmal etabliert nur mit größeren Mühen ändern.

Branding bildet eine solide Basis

Ein stabile Marke und eine dazu passende Kommunikation bildet die sehr solide Basis für alle weiteren Marketing-Aktivitäten. Darauf können die weiteren Aktivitäten zur Erreichung der Unternehmensziele, allen voran Gewinnmaximierung und vielfach auch ein gesundes Unternehmenswachstum, aufbauen. Sich erst der Umsatzsteigerungen, Kundenzuwachs und dem Ausbau des Unternehmens zu widmen und dann in einem zweiten Schritt das Formen und Definieren der Marke anzugehen, funktioniert weniger gut.

The post 10 häufige Fehler in der Markenkommunikation appeared first on mindtwo.de.

Vor kurzer Zeit hat Google damit begonnen Websites anhand des Mobile First Index zu bewerten, was bedeutet, dass sie primär anhand ihrer mobil verfügbaren Version gerankt werden. Das bedeutet jedoch nicht, dass Seiten, die nur Desktop-freundlich sind, nicht mehr gewertet werden. Diese werden nach wie vor für die Indizierung bei Google herangezogen, allerdings kann dabei die fehlende Unterstützung mobiler Endgeräte als nachteilig gewertet werden.

Bereits seit Dezember 2017 untersucht Google Websites intensiv auf ihre mobile Tauglichkeit, um zu ergründen, wann – und in welchem Ausmaß – die Umstellung auf den Mobile First Index angewandt werden kann. Dies wurde ebenfalls von Google bestätigt: seit 2015 werden alle Inhalte, sowohl auf Desktop als auch auf mobil optimierten Websites Seiten, speziell für die mobile Nutzung bewertet, um herauszufinden, wie “mobile-friendly” das Web insgesamt ist.

Die komplette Umstellung auf “Mobile First” soll jedoch langsam angegangen werden, so dass Website-Betreibern ausreichend Zeit bleibt, um sich zu informieren und Websites dann  mobil optimiert zu gestalten. Ziel sollte es sein den Usern ein so angenehmes und schnelles Surfen wie möglich zu bieten. Das bestmögliche Nutzererlebnis ist uns bleibt auch das übergeordnet Ziel von Google.

Wie funktioniert der Mobile First Index?

Bisher diente die Desktop-Version einer Website als primärer Faktor bei der Bewertung, wobei die mobile Version als Alternative herangezogen werden konnte. In der mobilen Suche wurden so mobil optimierte Seiten bevorzugt angezeigt, bei sonst gleicher Bewertung durch den Algorithmus. Mit der Umstellung auf Googles Mobile First Index wird sich dies umkehren.

Die mobile Version wird nun als primärer Faktor bewertet. Das bedeutet existiert eine mobil optimierte Website oder eine ganz eigene mobile Version der Website, wird diese für die Indizierung herangezogen. Gibt es nur eine Desktop-Version wird diese indiziert, kann aber beim Ranking-Faktor “mobile-friendly” demnach nicht punkten.

Speziell für Website-Betreiber, die eine mobile Version, mit eigenen mobilen Inhalten bereitstellen, hat dies natürlich Konsequenzen, wenn sich die mobilen Inhalte nicht mit denen der Desktop-Version decken.

Wer ist von der Umstellung betroffen?

Von Konsequenzen der Umstellung betroffen sind all jene Website-Betreiber, die separate URLs für ihr mobile Website verwenden oder wenn die Inhalte der Website je nach Gerätetyp dynamisch bereitgestellt werden. Denn oftmals decken sich die Inhalte der mobilen Website-Version nicht mit den regelmäßig umfangreicheren Inhalten der Desktop-Version. Hier können dann Ranking-Einbußen die Folge sein.

Bei Websites, die bereits heute im Responsive Design erstellt wurden oder bei Websites, deren Inhalte auf Mobil- und Desktop-Seite äquivalent sind, wird der Mobile First Index jedoch keine negativen Auswirkungen auf die Rankings haben.

Smartphone Googlebot hilft der mobilen Optimierung

Websites, die vom Mobile First Index erfasst sind, werden verstärkt von einem gesonderten Smartphone Googlebot (auch: Googlebot mobile) gecrawlt werden, welcher mobile Websites untersucht, um diese in den Google Index aufzunehmen. Dieser mobile Googlebot durchsucht automatisiert das Web, um verbesserte und optimierte Suchergebnisse für die mobile Nutzung zu liefern. Dieser spezielle Bot crawlt mobile Seiten für unterschiedliche mobile Geräte und untersucht Faktoren, die für die Optimierung von Bedeutung sind – beispielsweise Ladezeit, Responsive Design oder auch klassische On-Page Faktoren, wie Content und Titel.

Problemlose Nutzung von Gliederungselementen jetzt möglich

Durch die Umstellung auf den Mobile First Index hat auch ein von Google vor einiger Zeit gesetzter Faktor keinen Bestand mehr. Bisher wurden Inhalte, die in Tabs oder Accordions „versteckt“ waren, beim Ranking nicht ganz so stark gewichtet wie direkt auf der Seite zugängliche Inhalte. Dies wird sich mit der Umstellung ändern und zukünftig werden auch die Inhalte, die nicht auf den ersten Blick sichtbar sind, aufgrund des begrenzten Platzes des mobilen Bildschirms mit “sichtbaren” Inhalten gleich bewertet. Durch diese Veränderung wird es mittels Responsive Design noch einfacher und funktionaler dem Besucher strukturierte Inhalte durch ordnende Elemente, wie beispielsweise Tabs, sowohl am Desktop als auch auf der mobilen Seite anzubieten. Der User wird weder am Desktop-Bildschirm noch am Mobilgerät mit zu viel Text überfrachtet, da nun deutlich mehr Spielraum besteht, eine Website auf eine übersichtliche und sinnvolle Art und Weise zu gliedern.

Wie kann man eine Website mobil optimieren?

Zum einen besteht die Möglichkeit die Website im Responsive Design zu gestalten, so dass Ihre Website auf die Rahmenbedingungen und Eigenschaften des jeweils benutzten Endgeräts reagieren kann – sowohl bei Desktops als auch bei Smartphones und Tablets. Neben der dynamischen Anpassung der Darstellung an die jeweilige Bildschirmgröße sollte hierbei ebenso beachtet werden, dass die Website nach wie vor eine schnelle Ladezeit hat und dass Bilder und Animationen entsprechend optimiert sind.

Eine andere Möglichkeit, die Website “mobile friendly” zu gestalten, ist es eine Desktop- und eine mobile Version der Website zu erstellen. Beim Bereitstellen von zwei Websites ist es von großer Wichtigkeit, dass diese möglichst deckungsgleich sind. Alle relevanten Inhalte (Texte, Bilder, Animationen, etc.) sollten bei beiden Versionen der Website gleichwertig und von guter Qualität sein. Außerdem sollten beide Seiten in etwa gleich strukturiert sein, damit User sowohl am mobilen Endgerät als auch am Desktop, die gleichen Inhalte vorfinden und sich auf beiden Versionen schnell zurecht finden. Natürlich sind auch so kleine Details, wie Meta-Title und Meta-Description, äquivalent zu halten. Auch Optimierungen, Veränderungen und vor allem Keywords sollten stets gleich gehalten werden.

Google gibt viele Informationen zur Umstellung

Google beschreibt in seinem Webmaster Blog Post auch selbst nochmals genau, was unter dem Mobile First Index zu verstehen ist, wie dieser funktioniert und welche Maßnahmen Website-Betreiber ergreifen sollten, um durch die Umstellung so wenig wie möglich beeinflusst zu werden. Mögliche Veränderungen und Auswirkungen auf die jeweiligen Typen von Webseiten werden beschrieben, sowie die nun bestehenden Optionen für eine an den Mobile First Index angepasste Website.

Mobile First folgt logisch dem aktuellen Nutzungsverhalten

Immer mehr User nutzen ausschließlich mobile Endgeräte, um Informationen im Internet zu konsummieren. Google möchte allen Usern Suchergebnisse anzeigen, die nicht nur der Suchanfrage entsprechen, sondern auch die bestmögliche Nutzererfahrung bieten. Der Mobile First Index erstellt die Indizierung und damit die Rankings primär anhand der mobilen Version einer Website, um der gesteigerten mobilen Nutzung Rechnung zu tragen und den mobilen Usern optimale Suchergebnisse anzuzeigen.

Obwohl auch nicht “mobile friendly” Seiten unter bestimmten Umständen noch bewertet werden, sollten Website Betreiber spätestens jetzt eine mobil optimierte Seite bereitstellen. Denn selbst wenn Desktop-Seiten bis zuletzt noch ein gutes Ranking haben, werden diese langfristig im Ranking verlieren. Zum einen wegen Googles Mobile First Indexes und zum anderen, weil mobile User immer wieder mobil optimierte Seiten des Wettbewerbs vorziehen werden, da diese am mobilen Endgerät besser zu nutzen sind.

The post Was ändert sich durch den neuen Mobile First Index? appeared first on mindtwo.de.

Sie ahnen bereits, so einfach gestaltet sich die Konzeption einer erfolgreichen und zielgerichteten Landing Page nicht. Im Zentrum Ihrer Landing Page steht einzig und allein das Ziel, beim Besucher die gewünschte Conversion auszulösen. Wir erklären Ihnen nachfolgend einige wichtige Punkte, die eine gute Landing Page mitbringen sollte.

Conversion Centered Design (CCD) – mehr Erfolg für Ihre Landing Page

Jede Marketing Kampagne wird auf ein spezfisches Ziel ausgerichtet. Genau darauf sollte auch die User Experience (das Nutzererlebnis) Ihre Landing Page fokussieren. Demnach ist die unbedingte Voraussetzung für das Webdesign und die Erstellung einer Landing Page, die konkrete Festlegung des Ziels Ihrer damit verknüpften Kampagne. Dies ist die grundsätzliche Basis des Conversion Centered Design (CCD).

Welche Handlung soll durch die Besucher der Landing Page ausgeführt werden? Informationen zu Produkten anfordern? Buchen eines spezifischen Services? Oder nur eine Kontaktaufnahme oder Newsletter-Anmeldung?

Aufmerksamkeit erzeugen

Die Landing Page im CCD-Design hat nur einen Zweck, einen Besucher oder eine Besucherin zu überzeugen, eine bestimmte Aktion auszuführen – die Conversion, die Sie für Ihre Kampagne festgelegt haben. Jedes einzelne Element der Landing Page sollte auf dieses Ziel ausgerichtet sein. Dazu müssen Sie die Aufmerksamkeit der Nutzer generieren und diese auch durch möglichst wenig Ablenkungen auf der Seite halten. Die Ratio der Dinge die der Besucher auf der Landing Page vornehmen kann und die er durchführen soll beträgt auf einer erfolgreichen Landing Page 1:1 – eine Kampagnen-Ziel und eine dedizierte Conversion.

Daraus ergibt isch zum einen, dass Ihre Homepage oder eine Unterseite dieser kein geeignetes Ziel für Ihre Kampagne ist, da sich dem Benutzer hier viel zu zahlreiche Möglichkeiten bieten. Ein weiterer Schritt, um die Aufmerksamkeit auf der Landing Page zu fokussieren, ist die auf eine Navigation gänzlich zu verzichten und somit die gewünschte Handlung durch den Nutzer gänzlich in den Mittelpunkt zu rücken. Einzig Jump Links zu verschiedenen Sektionen Ihrer Landing Page können sinnvoll und auch hilfreich sein.

Hochwertige Bilder

Wählen Sie möglichst eigene hochwertige Bilder für Ihre Landing Page. Diese können Sie selbst gestalten und auch die Qualität ist in der Regel hochwertiger. Verzichten Sie auf Stock-Fotos der einschlägigen Bildbörsen, denn diese sind zum einen nicht exklusiv und werden vielleicht schon von Ihrem Wettbewerber verwendet. Zum anderen erkennt auch der Besucher, dass auf Ihrer Landing Page Bildern aus den Stock-Börsen verwendet werden. Alternativ können auch Grafiken und Illustrationen zur Einzigartigkeit und Erfolg Ihrer Seite beitragen.

Sprechende Call-to-Actions (CTA)

Die gewünschte Conversion wird durch den User durch das Anklicken des Call-to-Action- Buttons ausgelöst. Hier ist durchaus mehr Kreativität gefragt als ein einfaches „Absenden“. Denn ein sprechender Aufruf auf dem Button kann immense Steigerung der Conversion Rate bedeuten. Denn eine persönlichen Ansprache wie etwa „Jetzt mein Probierpaket bestellen“ spricht den Besucher aktiv an – im Vergleich zu einem einfachen „Senden“-Button.

Kontext der Landing Page

Der gesamte Kontext der Landing Page muss stimmig mit der von Ihnen angestrebten Conversion sein. Auch die Inhalte der Seite müssen sich daran orientieren. In Abhängigkeit des Kanals über den die Besucher auf die Landing Page gelangen, sind auch diese Fragestellungen wichtig: Was sollten oder können die Nutzer bereits wissen und welche weiteren Informationen müssen Sie diesen nun auf der Landing Page liefern, damit eine Conversion stattfindet. Die vermittelte Botschaft sollte mit Ihrer Kampagnen-Anzeige im Einklang sein. Über die Texte der Landing Page bieten Sie außerdem auch noch weitere Informationen an, die dem Besucher helfen sich zu entscheiden.

Im Design der Landing Page sollte sich ebenso die Optik und die Kommunikation der Kampagne wieder finden, um dem User so einen Wiedererkennungswert zu liefern.

Ansprechende Headline

Die Headline der Landing Page stellt das prominenteste Mittel dar, mit dem Sie Ihre Botschaft und Versprechen an den Besucher kommunizieren können. Hier greifen Sie die Werbebotschaft aus Ihrer Anzeigen-Kampagne nochmals auf. Gestalten Sie die Headline kurz und prägnant. Mit wenigen Worten soll sie klarstellen, worum es auf der Landing Page geht. Die Hauptüberschrift soll dieNeugier der Besucherwecken und anregen, weiterzulesen.

Platzieren Sie die wichtige Headline der Landing Page „above the fold“, also in dem Bereich der Seite, der zu sehen ist ohne das der Nutzer scrollen muss. Sie können der Überschrift der Landing Page selbstverständlich auch noch einen Untertitel geben, um Ihr Anliegen zu verdeutlichen. Achten Sie jedoch darauf, dass die Hauptbotschaft auch in der Hauptüberschrift verbleibt.

Klare und saubere Strukturen

Legen Sie das übergreifende Hauptaugenmerk Ihrer Landing Page auf den klaren und überischtlichen Aufbau. Geben Sie die notwendigen Informationen, unterstützen Sie dies mit grafischen Elementen, aber überhäufen und verwirren Sie die Nutzer nicht unnötig. Bedenken Sie, dass 70 Prozent aller User eine Website nur überfliegen. Die wenigsten Besucher und Besucherinnen nehmen sich oder haben die Zeit, alle Texte genau durchzulesen.

Das bedeutet jedoch nicht, dass Sie den Texten die Sie verwenden keine Aufmerksamkeit schenken müssen. Ganz im Gegenteil, die Texte müssen besonders klar und deutlich formuliert werde. Die Besucher Ihrer Landing Page müssen die leicht verstehen und unkompliziert erfahren, was Sie anbieten und welche Handlungsoptionen bestehen. Ihr Ziel muss sein, die Nutzer zu überzeugen, länger auf der Landing Page zu verweilen und die gewünschte Conversion auszuführen. Stellen Sie sicher, dass die Besucher der Landing Page wissen,

• wo sie sich befinden
• warum sie verweilen sollten
• welche Handlungsoptionen die Seite bietet

Erstellen Sie Ihre erfolgreiche Landing Page

Mit den beschriebenen Ratschlägen und Tipps sind Sie für die Gestaltung einer erfolgreichen Landing Page gut gewappnet. Entscheidend hierbei ist, Sie verbessern nicht nur die Conversion Rate mittels der Landing Page. Eine gut designte und klar strukturierte Landing Page holt auch Ihre potentiellen, neuen Kunden mit den notwendigen Informationen besser ab und macht diese sehr viel zufriedener.

Sie haben Interesse an einer erfolgsorientierten Landing Page? Sie benötigen eine individuell entwickelte Landing Page? Sprechen Sie uns an! mindtwo, Internetagentur in Bonn, unterstützt Sie gerne bei Ihrem Landing Page Projekt.

The post Erfolgreiche Landing Pages erstellen – hervorragende Conversion erzielen appeared first on mindtwo.de.