codeblick logocodeblick logo small

Digitale Lösungen

Optimierung Ihrer Website-Performance (Frontend und Backend) - Teil 2

Im ersten Teil dieses Artikels haben wir die Grundlagen und Hintergründe aufgeführt. In diesem Teil wollen wir praktische Beispiele und Anwendungszenarien bearbeiten, die uns helfen die Performance im Frontend-Bereich zu optimieren.

Stutze dein DOM:

Mit dem DOM-Tree werden die zu ladenden HTML-Elemente bezeichnet, z.B. <html> <head> <body> <div> <span> usw. Daher ist klar, je mehr Elemente sich im DOM-Tree befinden, desto komplexer wird der Aufbau unter der Haube der Website. 

DOM Processing: Time spent in the browser parsing and interpreting the HTML.

Daher muss man darauf achten, seine DOM-Tiefe gering zu halten. Schauen wir uns also mal folgendes Beispiel an:

Dieser Kunden hat eine durchschnittliche Ladezeit von 7,5 Sekunden. Die App-Performance, Netzwerk und Page-Rendering sind akzeptabel, aber das DOM-Processing alleine benötigt bis zu 4 Sekunden. Hier muss definitiv die Seitengröße reduziert werden, um diesen Bereich zu optimieren.

Ein nützliches Tool hierbei ist der Service von websiteoptimization.com. Beachten Sie bei der Ergebnis-Analyse die Hinweise unten. Dort finden Sie Informationen über die Anzahl der Elemente (z.B. "TOTAL_OBJECTS"). Ist die Anzahl der Elemente zu hoch, lohnt es sich, diese zu reduzieren.

Um die Anzahl der Elemente zu ermitteln, kann man auch als Alternative in der JS Console des Browsers folgendes eingeben:

document.getElementsByTagName('*').length

Beispiel:

<ul>    <li><a href="#nav1">Nav 1</a></li>    <li><a href="#nav2">Nav 2</a></li>    <li><a href="#nav3">Nav 3</a></li>    <li><a href="#nav4">Nav 4</a></li> </ul>

Empfehlung:

<nav>    <a href="#nav1">Nav 1</a>    <a href="#nav2">Nav 2</a>    <a href="#nav3">Nav 3</a>    <a href="#nav4">Nav 4</a> </nav>

Somit spart man sich eine DOM-Ebene und der Browser muss weniger Elemente verarbeiten, was zu geringeren Ladezeiten führt.

Page Rendering:

So viel zum Thema DOM. Kommen wir nun zum Page-Rendering, auch der sogenannte Render-Tree. Hier fließt also der DOM-Tree mit dem CSS und den Bilder zusammen und der Browser rendert die Website.

Diese Ansatzpunkte sollten Sie für die Optimierung des Page-Renderings angehen:

1. Assets komprimieren

Es gibt hilfreiche Tools zur Komprimierung Ihrer HTML, CSS, JS Dateien. Achten Sie ebenfalls darauf, dass Sie Ihre Bilder komprimieren. Hier kann man sich einige KB mit professionellen Komprimierungstools sparen.

2. Caching für statische Dateien aktivieren

Aktivieren Sie auf Ihrer Website oder Onlineshop das Browser-Caching und vergeben Sie für statischen Dateien mod_expire_headers. In unserem Artikel "nützliche .htaccess Snippets" können Sie im Detail einsehen, wie Sie die Expire Headers aktivieren können.

3. Requests verringern (JavaScript und CSS Aggregation oder Image-Sprites)

Versuchen Sie möglichst wenige Request zu verursachen. Jeder Aufruf einer JS, CSS oder Bild-Datei führt dazu, dass der Browser mit dem Server eine "Anfrage" öffnen muss. Jede dieser Anfragen verursacht eine Verbindung und das kann man sich sparen, indem man JavaScript, CSS Dateien in eine zusammenführt und Bilder als Sprites einbindet.

4. Reflows vermeiden

In dem unten aufgeführten Video sieht man ab der Sekunde 0:16 das die Seite eigentlich fertig ist und dann auf einmal wieder anfängt sich neu zu positionieren. Diesen sogenannten Reflow-Effekt sollte man vermeiden. In dem Beispiel von mozilla.org würde diese Ersparnis 30% des Page-Renderings verringern.  

Wie sie Reflows vermeiden, können Sie in dem empfohlenen Google-Artikel nachlesen: "Minimizing browser Reflow".

5. Animationen beschleunigen

Bevorzugen Sie translate3d oder translateZ um bei Animationen den Hardware-beschleuniger zu aktiveren. Der Webkit-Browser verwendet dann die GPU um die Animation zu berechnen. Was natürlich schneller ist, wie man im folgenden Test sehen kann:

translate3d vs translate vs css left/top vs css margin