Was ist ein Frontend?
Das Frontend bezeichnet die Benutzeroberfläche einer Applikation, über die ein User mit der Website interagieren kann. Es setzt sich meist aus zwei Teilen zusammen: Einer grafischen Darstellung, dem sogenannten Webdesign und einem programmierten Teil, der die Interaktion mit der Benutzeroberfläche möglich macht, dem sogenannten Frontend Development. Das Frontend ermöglicht eine einfache Überbrückung zwischen Kunden und Backend, dessen Nutzung ansonsten nur mit einem gewissen Fachwissen nutzbar wäre. Alle Arten von Buttons, Menüs, Farben oder Schriften wurden mittels Programmiersprachen wie HTML oder Java erstellt und durch Grafiken des Webdesigns erweitert.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Was bedeutet Frontend Optimization?
Frontend Optimization, kurz FEO, bezeichnet die Optimierungen des Frontend und versucht vor allem die Ladezeit und die Browser-Freundlichkeit zu verbessern sowie die Datengrößen zu verringern. Eine weitere Aufgabe von FEO ist es, das Frontend so zu optimieren, dass auf Anfragen unterschiedlicher Nutzer und vor allem Nutzergeräten richtig geantwortet wird. Um dies zu erreichen gibt es verschiedene Maßnahmen, die Programmierer anwenden. In der Frontend Optimization wird zwischen tatsächlicher und wahrgenommener Ladezeit unterschieden, wobei die tatsächliche Ladezeit ein Leistungsmerkmal ist, während die wahrgenommene Ladezeit die entscheidende Zeit für die Benutzererfahrung darstellt.
Time to First Byte (TTFB)
Time to First Byte, also zu Deutsch Zeit bis zum ersten Byte ist eine der wichtigsten Kennzahlen zur Bewertung der Frontend Optimierung. Dabei wird in tatsächlicher Ladezeit gemessen wie lang die Zeitspanne ist, bis der erste Byte der angefragten Datenmenge beim Browser des anfragenden Nutzers ankommt. In der wahrgenommenen Ladezeit wird die Dauer betrachtet, die der Browser braucht, um das erste Byte anzuzeigen, nachdem die HTML Datei heruntergeladen worden ist.
Frontend Optimization Maßnahmen
Verringerung von HTTP Anfragen
Technisch gesehen wird immer dann eine gewisse Anzahl von HTTP Fragen gestellt, wenn der Nutzer eine Seite aufruft. Für jede HTTP Anfrage muss der Browser eine eigene Transmission Control Protocol (TCP) Verbindung herstellen. Die Anzahl an gestellten HTTP Anfragen, also TCP Verbindungen hängt von der Anzahl der Seitenelemente ab. Für jedes Seitenelement wird eine neue HTTP Anfrage gestellt.
Ein mögliches Problem ist, dass ein Browser nur eine geringe Anzahl an HTTP Anfragen gleichzeitig verarbeiten kann, da diese nur eine gewisse Anzahl an TCP Verbindungen aufbauen können. Das Ziel dabei ist eine potenzielle Überlastung des Servers zu vermeiden. Wenn also zu viele Seitenelemente bestehen, können diese nicht alle zum selben Zeitpunkt geladen werden und müssen in die Warteschlange gestellt werden. Aus diesem Grund sollte man auf redundante Seitenelemente wie überflüssige Bilder, große CSS–Dateien oder nicht benötigte Plug–Ins verzichten. Also versucht man in der FEO eine Verringerung der HTTP Anfragen zu erzielen, indem man verschiedene Seitenelemente in Gruppen zusammenfasst.
Besteht eine Homepage z.B. aus drei Texten, einem Logo, einem Menü und zwölf Bildern, werden 17 HTTP Anfragen gestellt. Im Google Chrome Browser können aber maximal sechs Anfragen gleichzeitig bearbeitet werden, sodass elf Anfragen in die Warteschlange gestellt werden müssten. Man umgeht das Problem, indem man in der Frontend Optimization alle Bilder zu einer sogenannten Spite–Grafik zusammenfügt, damit nur noch sechs Seitenelemente vorhanden sind und die Seite problemlos abgerufen werden kann.
Dateikomprimierung
Jede Website besteht aus einer Ansammlung aus verschiedenen HTML-, JavaScript-, CSS- und anderen Codedateien in verschiedenen Größen. Je größer oder komplexer die Datei, desto länger auch die Ladezeit. Mit der Dateikomprimierung versucht man die Dateigrößen auf einen Bruchteil zu verringern. Dafür gibt es verschiedene Optionen wie zum Beispiel gzip, die Codedateien auf bis zu 80% ihrer ursprünglichen Größe komprimieren.
Cache Optimization
Das Caching bezeichnet das Zwischenspeichern von Dateien und Texten in einem sogenannten Cache, um unnötiges doppeltes Laden oder doppelte Serveranfragen zu vermeiden, indem auf die Daten im Cache zurückgegriffen wird und Ladezeiten verkürzt werden. Der Cache wird in der Regel auf dem lokalen Netzwerk des Nutzers oder auf einem CDN-PoP (Content Delivery Network) gespeichert. Ein CDN-PoP dient der Überbrückung der Distanz zwischen Nutzer und Server mit den originalen Dateien, die abgerufen werden sollen. Das CDN liegt zwischen dem Nutzer und dem originalen Server und ist als zusätzlicher Cache zu verstehen, der die Dateien der Originalserver abruft und bei sich zwischenspeichert. Der PoP (Point of Presence) besteht aus mehreren Cache Servern und umfasst den Bereich, in dem ein Content Delivery Network arbeitet. Die Cache Optimization analysiert mit sogenannten HTTP-Cache Headern, welche Informationen oder Inhaltselemente der verschiedenen Websites wichtig sind und zwischengespeichert werden.
Code Minifizierung
Die Code Minifizierung wird genutzt, um unnötigen Platz von Daten einzusparen. Dabei wird die Differenz geschlossen, die beim Schreiben der Programmierer und dem Lesen der Maschinen entsteht, indem unnötige Zeichen oder Kommentare eingespart werden, um die Leserlichkeit beim Programmieren zu verbessern. So können die Dateicodes noch vor der Komprimierung um bis zu 50% reduziert werden.
Bildoptimierung
Um Platz bei der Verwendung von Bildern zu sparen, werden hauptsächlich zwei Methoden verwendet. Entweder man verwendet Caches zum Zwischenspeichern der Bilder, um die Dateigröße zu reduzieren oder man komprimiert die Bilder. Dabei ist das Verwenden eines Caches die bessere Methode, da bei der Komprimierung die Bilddaten manipuliert werden und die ursprüngliche Qualität des Bildes zwangsläufig verringert wird.
Aufgeräumtes HTML Dokument
Beim Aufräumen des HTML-Dokuments spielen im Wesentlichen zwei Dinge eine Rolle. Zum einen die richtige Platzierung von Cascading Style Sheets (CSS) für die Erstellung von Gestaltungsanweisungen und die Festlegung der Darstellung der Inhalte auf den Seiten. CSS-Komponenten sollte man optimalerweise in die Kopfzeile des HTML-Dokuments einfügen. Die richtige Platzierung führt zwar nicht zu geringeren Ladezeiten, aber sie vermeidet leere Bildschirme und ungestylten, zusammenhangsloswirkenden Text. Zum anderen spielt die richtige Platzierung eines JavaScript Attributs eine wichtige Rolle. Da die Platzierung von JavaScript Attributen im oberen Bereich des Dokuments das Laden von HTML- und CSS-Elementen zeitweise verhindern kann, wird empfohlen diese Attribute am Ende des Dokuments zu platzieren.
CSS Performance
Um die CSS Performance zu optimieren wird empfohlen alle CSS–Elemente in einer Datei anzulegen, da der Browser ansonsten mehrere Files gleichzeitig laden muss.
Prefetching
Das Prefetching bezeichnet das vorausschauende Laden von Speicherinhalten basierend auf mutmaßlichen Schlussfolgerungen, bevor sie wirklich gebraucht werden, um im Falle eines Bedarfs die Daten schneller bereitstellen zu können. Das Prefetching funktioniert für Links, DNS (Domain Name System) und das Vorrendern von Inhalten. Aktiviert wird das Prefetching über einen zusätzlichen Tag im HTML-Code, der einfach beim Programmieren hinzugefügt werden kann.