Schlechte Performance durch Long Tasks

Was sind Long Tasks?

Long Tasks sind Aufgaben die länger als 50ms benötigen, um verarbeitet zu werden. In dieser Zeit ist der Hauptthread komplett mit dieser einen Aufgabe beschäftigt und kann keine weiteren Aufgaben ausführen. Gerne genutzte Beispiel für solche Aufgaben sind langlaufende Event-Handler oder Re-Renderings.

Diese Long-Tasks sorgen dafür, dass die TTI und die TBT als ausschlaggebende Indikatoren für den Page-Speed sich deutlich verschlechtern.

Was sind komplexe Long Tasks?

Komplexe Tasks die länger als 50ms in der Verarbeitung brauchen sind Long Tasks. Der User soll nach spätestens 100ms eine Rückmeldung durch den Browser für seine Eingabe erhalten. Dies ist jedoch nur möglich, wenn der Task nach 50ms abgeschlossen ist. Der Browser kann Tasks, die zu lange benötigen, um den Task vor 50ms zu beenden, nicht abbrechen, um eine neue Eingabe zu ermöglichen. Dies würde den regulären Aufbau der Seite so weit “zerstören”, dass diese unbrauchbar wäre.

Generell kann man sagen, dass Long Tasks Aufgaben sind, die den Hauptthread für eine Zeitperiode, die länger als >50ms ist, überlagert und für das Einfrieren des Userinterface sorgt. Daraus resultiert, dass die Website nicht mehr responsive ist und auch die Interaktionen und Klicks, die ein User ausführt, nicht mehr registriert werden. Dies ist den nicht geladenen Event Listenern und Klick Handlern geschuldet, die dadurch nicht verfügbar sind.

Wie kann ich die Long Tasks minimieren und meinen Shopware Shop performanter gestalten?

Eine erste mögliche Lösung ist es, die Tasks aufzuteilen, um den Workload für den Main Thread zu splitten und somit zu reduzieren. Hier sollte nach Möglichkeit geschaut werden, dass die Tasks an einem anderen „Ort“ ausgeführt werden, wenn sie benötigt werden. Dies sollte nicht im Main Thread passieren, sondern im Optimalfall in einem Worker. Es sollte je nach Task entschieden werden, ob ein Shared oder Dedicated Worker das gewünschte Ergebnis liefert.

Außerdem sollte so weit wie möglich auf Drittanbieter Code verzichtet werden. Dieser sorgt oft für das lange Belegen des Haupt-Threads. Konkrete Beispiele sind hier eine große Anzahl von CDN’s (Content Delivery Networks) oder Fremdanwendungen dessen Code nicht beeinflusst werden kann wie zum Beispiel:

- Google AD’s

- Google Tag Manager

- HotJar

Es sollte jedoch nicht grundsätzlich auf Code von Drittanbietern verzichtet werden, sondern immer analysiert werden, welcher Code gut und welcher Code schlecht ist. Zudem sollte differenziert werden, ob der Code durch Shopware selbst hervorgerufen wird oder ob ein Fremdanbieter diesen Code zur Verfügung stellt.

Eine einfache Checklist sieht wie folgt aus:

Wer ist der Verursacher für Long Tasks?

Ist der Verursacher ein Fremdanbieter?

Wenn ja, ist dieser notwendig für den Onlineshop? Gibt es Alternativen?

Wenn nein, kann dieser entfernt werden?

Wenn nein, kann dieser Shopware Code optimiert oder ausgetauscht werden?

Wenn der Verursacher kein Fremdanbieter ist, stammt dieser von Shopware selbst und es kann durch Trial-and-Error das dementsprechende Contentelement ausfindig gemacht werden, welches die Long Tasks verursacht. Nachdem das Content-Element gefunden wurde, kann dies entweder entfernt werden oder nach einer Alternative gesucht werden.

Unsere bisherigen Tests haben ergeben, dass es häufig der Artikel Slider auf der Startseite ist, welcher zu Long Tasks führt.

Diese Optimierung bedeutet: wenig Aufwand, viel Erfolg.

Im linken Beispiel sind sowohl der Banner als auch fünf weitere Produkt Slider auf der Startseite des Onlineshops sichtbar. Bei dem rechten Onlineshop befindet sich auf der Startseite nur der Banner mit dem identischen Bild. Dies stellt Situation in einem Onlineshop sehr vereinfacht dar.

Das Entfernen der Artikel Slider in unserem Demoshop sorgte für eine Verbesserung um 16 Punkte sowie die deutliche Optimierung fast aller Werte. Besonders stark konnten wir die TBT optimieren.

Zusätzlich sind in dem Onlineshop auf der linken Seite die im vorherigen Abschnitt dargestellten Drittanbieter Codes implementiert. Diese wurden zu Demonstrationszwecken beim zweiten Beispiel entfernt.

Eine weitere Möglichkeit ist es den Code später zu laden, wenn der Main Task nicht benötigt wird, um die wichtigsten Bestandteile des Webshops zu laden. Bedeutet, den Code in eine Queue einzubinden, sodass die Idle-Zeit des Browsers genutzt wird, um eben diesen Code zu laden. Sollte der Code jedoch vorab genutzt werden müssen, um zum Beispiel ein Task auszuführen, die der User anfordert, kann dieser auch ohne Probleme außerhalb der Queue geladen und genutzt werden. Vorteile einer solchen Queue sind, dass localStorage writes auch nach Verlassen der dementsprechenden Seite geschrieben werden können und der Speicherstand nicht verloren geht. Dieses Vorgehen kann zusätzlich zur Verbesserung der Performance auch zu einer deutlich besseren User Experience führen. Zusätzlich sollte Analytics Code immer in ein IdleQueue eingebaut werden, da auch hier die UserDaten selbst bei Verlassen der Seite gespeichert werden und somit zusätzlich zur verbesserten Performance eine bessere Datengrundlage für Auswertungen geliefert werden kann.

Beispielcode:

Um eine solche Optimierung mithilfe von Queues umzusetzen, muss jedoch Code installiert werden, welcher nicht standardmäßig implementiert ist.

Idle Value:

import {IdleValue} from './path/to/IdleValue.mjs';

class MyComponent {

constructor() {

addEventListener('click', () => this.handleUserClick());

this.formatter = new IdleValue(() => {

return new Intl.DateTimeFormat('en-US', {

timeZone: 'America/Los_Angeles',

});

});

}

handleUserClick() {

console.log(this.formatter.getValue().format(new Date()));

}

}

Idle Queue:

import {IdleQueue} from './path/to/IdleQueue.mjs';

const queue = new IdleQueue();

queue.pushTask(() => {

// Some expensive function that can run idly...

});

queue.pushTask(() => {

// Some other task that depends on the above

// expensive function having already run...

});

Local Storage:

const queue = new IdleQueue({ensureTasksRun: true});

const signupBtn = document.getElementById('signup');

signupBtn.addEventListener('click', () => {

// Instead of sending the event immediately, add it to the idle queue.

// The idle queue will ensure the event is sent even if the user

// closes the tab or navigates away.

queue.pushTask(() => {

ga('send', 'event', {

eventCategory: 'Signup Button',

eventAction: 'click',

});

});

});

Analytics:

const queue = new IdleQueue({ensureTasksRun: true});

queue.pushTask(() => ga('create', 'UA-XXXXX-Y', 'auto'));

queue.pushTask(() => ga('send', 'pageview'));