Frontend

Simpel gesagt ist Frontend das, was Du „im Vordergrund“ siehst – also das User-Interface bzw. die Benutzeroberfläche. Ein Frontend gibt es dabei bei CMS-basierten Websites. Hierbei werden alle sichtbaren Inhalte, also das Design, die Aufteilung der Website, Bilder, Texte, etc. über das Frontend ausgespielt. Es beinhaltet somit alles, was Du tatsächlich auch sehen kannst, wenn Du eine Website anklickst. Doch nicht nur das: Auch jede Software und jedes Computerspiel hat eine Benutzeroberfläche, die der User sieht und über die er Befehle eingibt. Das wird ebenfalls als Frontend bezeichnet. Das Backend ist hingegen alles, was im Hintergrund geschieht und somit für den Nutzer unsichtbar ist. Das Frontend ist somit die benutzerfreundliche Übersetzung des im Backend hinterlegten Quellcodes.

Was ist der Unterschied zwischen Frontend und Backend?

IT-Systeme werden in einer Art Schichteneinteilung in zwei Teilbereiche eingeteilt: Frontend und Backend. Frontend ist dabei die Schicht, die der Anwender sieht, deshalb wird sie auch Presentation Layer genannt. Es ist somit anwendernah und ermöglicht den Zugriff auf Daten und Prozesse. Diese Daten sind wiederum im Backend hinterlegt und die Prozesse werden dort verarbeitet. Du kannst Dir das Backend somit als Datenbank vorstellen, die im Hintergrund agiert während das Frontend die grafische Darstellung im Vordergrund übernimmt.

Merke: Ohne Backend, kein Frontend!

Frontend und Deine Website

Du kannst das Frontend Deiner Website mithilfe von CSS, JavaScript und anderen Programmierer-Sprachen modifizieren. Somit erhält sie weitere Funktionen, die die Visualisierung nach Deinen Wünschen anpasst. Außerdem kann das Frontend folgende Bereiche beeinflussen:

• Seitenladezeit
• Verfügbarkeit und automatische Aktualisierung der Website
• Informationsübermittlung
• Benutzerfreundlichkeit mithilfe der Seiten-Navigation
• Einfügen von Filter- und Suchfunktionen
• Chat-Felder
• Einblendung von Bannerwerbung

Frontend und Deine Conversion Rate

Möchtest Du Deine Conversion Rate optimieren, solltest Du Dir Dein Frontend genauer anschauen. Fakt ist: Die Conversions Deiner Nutzer werden vom Design Deiner Website maßgeblich beeinflusst. Ist Deine Seite nicht benutzerfreundlich aufgebaut, verirren sich Deine Website-Besucher beispielsweise durch eine schlechte Navigation. Die Chance, dass sie daraufhin nicht konvertieren ist wesentlich höher. Auch Ladezeit-Verbesserungen und Optimierungen des Cachings gehören zum Frontend.

Frontend und SEO

Das Frontend kann somit die Bewertung Deiner Website durch die Suchmaschine beeinflussen. Bei dessen Aufbau kannst Du dafür sorgen, dass es SEO-freundlich wird. Hierfür gibt es verschiedene Faktoren, die zum Frontend gehören und die Du beachten solltest.

Usability

Ist eine Seite benutzerfreundlich, strukturiert und leicht verständlich aufgebaut, lädt sie zum Bleiben ein. Dies verbessert sowohl die Verweildauer als auch die Absprungrate Deiner Website-Besucher – beides sind wichtige Bewertungskriterien Deiner Website.

Sauberer, fehlerfreier und semantischer HTML-Code

Nur, wenn Dein HTML-Code fehlerfrei ist, kann die Seite richtig und vollständig gecrawlt werden. Die Folge wäre, dass die Seite nicht indexiert wird.

Unique Content

Unique Content ist immer wichtig. Inhalte Deiner Seite sollten einzigartig sein – heißt sie sollten sich weder mit Content Deiner eigenen noch mit dem einer fremden Website doppeln. Sogenannter Duplicate Content führt dazu, dass Suchmaschinen nicht klar differenzieren können, wer der Urheber der Inhalte ist. Somit kann nicht entschieden werden, welche Seite die wirklich relevante ist und kann deshalb nicht indexiert werden.

Vermeidung von Flash-Inhalten oder Frame-Sets

Flash-Inhalte und Frame-Sets sollten vermieden werden, da sie von Suchmaschinen nicht gecrawlt werden können. Bei beiden handelt es sich allerdings um Methoden, die heute nicht mehr regulär eingesetzt werden.

Seitentitel und Meta-Description

Ein individueller Seitentitel und eine angepasste Meta-Description ist für jede einzelne Deiner Webseiten wichtig. Sie helfen den Suchmaschinen bei der Einordnung der Seite.

Seitenladegeschwindigkeit

Internetnutzer sind oftmals ungeduldig. Eine lange Ladezeit führt deshalb zu einem häufigeren Absprung. Wie schnell Deine Seite ist, kannst Du beispielsweise über das PageSpeed Insights-Tool von Google testen.

Breadcrumb-Navigation

Breadcrumbs helfen dem Nutzer bei der Orientierung auf der Website. Sie hinterlassen sozusagen eine Brotkrumen-Spur, an der der Nutzer seinen bereits „geschrittenen“ Pfad nachvollziehen kann. Diese Art der Navigation steigert die Benutzerfreundlichkeit.

Interne Verlinkungen

Durch interne Verlinkungen hilfst Du den Suchmaschinen dabei Deine Seite und deren Struktur und Aufbau besser zu verstehen.

Robots.txt

Über die Robots.txt teilst Du der Suchmaschine mit, welche Seiten nicht gecrawlt werden sollen. Das ist vor allem deshalb von Vorteil für Dich, weil Du Dein Crawling-Budget schonst, das für jede Website begrenzt ist.

XML-Sitemap

Eine XML-Sitemap kann man als Inhaltsverzeichnis Deiner Website sehen. Hierüber teilst Du den Suchmaschinen mit, wie umfangreich Deine Website ist und hilfst ihnen Deine Website vollständig zu crawlen.

Suchmaschinenfreundliche, sprechende URLs

Die URL ist nicht nur für die Suchmaschinen wichtig, sondern ebenfalls für die Orientierung des Benutzers. Kann Dein Nutzer verstehen, wohin ihn die URL leitet, steigert das die Benutzerfreundlichkeit.