codeblick logocodeblick logo small

Digitale Lösungen

Themen DL - Optimierung Ihrer Website-Performance (Frontend und Backend) - Teil 1

Die Anforderungen für Onlineshop-Betreiber, aber auch Unternehmen, die Ihre Produkte und Dienstleistungen über Ihren Webauftritt präsentieren, steigen stetig. Der heutige Online-User wird immer anspruchsvoller, was Schnelligkeit, Usability und Funktionalität betrifft. Daher müssen Web- und E-Commerce-Agenturen zunehmend darauf achten, dass die Ladezeiten und Anforderungen an den Onlineshop oder Website eingehalten werden.

Alle Zahnräder müssen ineinandergreifen und ein performantes Gesamtkonstrukt ergeben. Es gibt nichts schlimmeres als eine Seite mit einer guten Usability aber einer Ladezeit von über 10 Sekunden. Im Gegenzug bringt mir die schnellste Seite nichts, wenn die Seite nicht bedienbar ist. Daher ist es notwendig die Bereiche Gestaltung, Content/Produkte und Performance als großes Gesamtes zu optimieren.

Thema Performance

Gerade die Performance spielt nicht nur für Ihre Kunden eine große Rolle. Für die relevanteste Suchmaschine Google ist die Geschwindigkeit eines Onlineshops oder Website mittlerweile ein maßgebender Ranking Faktor geworden. Das bedeutet; Ist Ihre Website schnell und die Ladezeit gering, so wird Sie besser bewertet und Sie landen in den Suchergebnissen weiter oben.

Viele Dienstleister oder Shop-Betreiber legen Ihren größten Fokus auf die Optimierung vom Backend, also die Programmierung. Sofern man eine solide Basisprogrammierung oder Applikation hat, geht es bei der Backendoptimierung dann meist nur noch um Millisekunden. Das bedeutet dann viel Aufwand (=Kosten) für wenig Erfolg. Selbstverständlich darf man größere Flaschenhälse und Probleme in der Programmierung nicht unbeobachtet lassen und sollte diese unverzüglich beheben. Schaut man sich nun aber mal die Verhältnismäßigkeit der Gesamtladezeit an, macht das Backend (unten "Web application") meist einen Prozenteil von 20% bis 25% aus.

Soweit zu den Hintergründen, tauchen wir zunächst mal tiefer in die Ladezeit einer Web-Anfrage ein:

Die Ladezeit bei diesem Online-Shop Beispiel (Newrelic.com) wurde durch uns bereits von ~5 Sekunden auf ~3 Sekunden optimiert. Aber hier kann man immer noch deutlich sehen: Den größten Anteil an der Zeit, die der Kunde warten muss, bis die Seite komplet ausgeliefert wurde, macht das "DOM processing" und das "Page rendering" aus. Hier steckt also großes Potential, die Ladezeit locker mal um eine bis zwei Sekunden schneller zu bekommen! Widmen wir uns in diesem zweiteligen Artikel also mal der Optimierung dieser einzelnen speziellen Bereiche.

Network / Netzwerk

Als "Netzwerk" wird der Request und die Zeit bezeichnet, die der Browser warten muss, bis er das erste HTML ausgeliefert bekommt (auch "First-Byte" genannt). Dazu zählt eben auch der viollette "Web Application" Bereich, also das Backend.

DOM Processing / DOM Verarbeitung

Ist das "First-Byte" beim Browser angekommen muss dieser also das ausgelieferte HTML verarbeiten und für den User das sogenannte DOM (Document Object Model) strukturieren und interpretieren. Ist die Verarbeitung des DOMs beendet, spricht man auch von "DOM Ready".

Page rendering / Seiten-Rendering

Die "Page rendering" Phase ist die Zeit zwischen DOM ist fertig und dem "window load" Event. Diese Phase beinhaltet browserseitiges Laden des Seiteninhaltes und steht maßgeblich für die Zeit der zu ladenden Skripte und statischen Resourcen z.B. Bilder. Ist diese Phase beendet spricht man auch von "Page Ready".

Um die Übersichtlichkeit zu gewährleisten, werde ich diesen Artikel in zwei Abschnitte unterteilen.

Hier geht es zum zweiten Teil des Artikels