Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Touch und Scroll Event Listeners sind u.a. nützlich, um Interaktionen zu verfolgen und um individuelle Bildläufe im Browser zu erstellen. Leider können sie stark die Performance einer Website beeinträchtigen. Passive Event Listeners lösen dieses Problem.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Lighthouse-Fehler: Does not use passive listeners to improve scrolling performance

Stellt euch vor, ihr verwendet auf eurer Website einen Scroll Event Listener um zu prüfen, ob eine gewisse Strecke gescrollt wurde. In den Google Chrome DevTools (Lighthouse) wird euch dann die folgende Fehlermeldung angezeigt

Does not use passive listeners to improve scrolling performance

Das Problem mit dem nicht passiven Event Listener ist, dass Browser nicht wissen können, ob ein Event Listener den Bildlauf verhindert. Deshalb warten sie die Ausführung eines Event Listeners ab, bevor sie die Seite weiter bewegen. Ein passiver Event Lister wiederum gibt dem Browser zu verstehen, dass er den Bildlauf niemals verhindern wird.

Lighthouse Performance Test Abschnitt: Does not use passive listeners to improve scrolling performance
Lighthouse Performance Test – Chrome DevTools

Event Listeners passiv machen, um die Scroll-Performance zu verbessern

Der Standardwert für die Passive-Option eines Event Listeners ist auch bei Browsern, die die Funktion unterstützen, false. Ausgenommen touchstart und touchmove in aktuellen Versionen von Chrome Desktop und Android. Aufrufe zu preventDefault() brauchen ebenfalls nicht auf passive gesetzt werden.

Einen Event Lister passiv zu machen ist recht simpel. Dazu muss nur die entsprechende Flag zum Event Listener hinzugefügt werden. Beispiel:

document.addEventListener('wheel', kbFunction, {passive: true});

Wie ihr euch vorstellen könnt, funktioniert das nicht in allen Browsern und führt zu Fehlern, wenn die Funktion nicht unterstützt wird. Wir sehen die Funktion eindeutig als Progressive Enhancement und setzten deshalb eine Feature-Detection ein. Es gibt aber auch einen Polyfill.

Die Feature-Detection, auf die auch von der Google Developers Website verwiesen wird sieht wie folgt aus:

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
      get: function() {
          supportsPassive = true;
      }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way.
elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false);
[loggedin]

Scroll-Performance signifikant verbessern mit IntersectionObserver

Jetzt ist unser Scroll Event Listener zwar passiv, aber abhängig von der Funktion, die wir an den Scroll Event Listener hängen, kann es sein, dass es immer noch nicht besonders performant ist.

Wollen wir z. B. eine Aktion ausführen, sobald 300px auf unserer Website gescrollt wurde, schreiben wir eine Funktion, die unnötigerweise bei jedem einzelnen Pixel, der gescrollt wird prüft, ob er schon die 300px erreicht hat. Wir könnten jetzt zwar auch eine Timeout einsetzen, um nicht bei jedem einzelnen Pixel zu prüfen, sondern in zeitlichen Abständen. Dass kann aber zu unerwünschtem Springen, Flackern oder verzögerten Aktionen führen, wenn die 300px genau innerhalb eines Timeouts erreicht werden.

Eine bessere Lösung ist, die IntersectionObserver API zu verwenden. Was die InterSectionObserver API ist und wie sie funktioniert, zeigen wir euch in dem Artikel [Scrollabhängige Effekte mit der InterSectionObserver API].[/loggedin]

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

Feedback & Ergänzungen – 3 Kommentare

  1. Patrick
    schrieb am 03.03.2021 um 15:40 Uhr:

    Hallo,
    vielen Dank.
    Geht das auch für Nicht-Entwickler?
    Bei mir jammert PageSpeed Insights wegen des besagten Fehlers. Ich nutze den GTM, tracke jedoch nicht die Scrolltiefe sondern ob eine bestimmte Datei heruntergeladen wurde. Kann ich hier im GTM etwas anpassen oder muss das über Code sein? Wenn nur über Code – wo denn genau? Wären sehr hilfreiche Informationen. Vielen Dank.

    Antworten
    • Felix Lehmann (Autor)
      schrieb am 04.03.2021 um 10:56 Uhr:

      Hallo Patrick,

      ich befürchte, dass hier Entwickler-Kenntnisse notwendig sind. Über den GTM lässt sich das nicht konfigurieren.
      Es muss der Code identifiziert und angepasst werden, der die Warnung erzeugt. Das kann z. B. ein Script aus einem Plugin sein. Sollte dies der Fall sein, kann man darauf meistens auch wenig Einfluss nehmen, sondern nur nach einer Alternative suchen oder abwägen das Plugin ganz zu deinstallieren.

      Viele Grüße
      Felix

      Antworten
      • Patrick
        schrieb am 04.03.2021 um 16:32 Uhr:

        Hi Felix,
        danke für die Antwort. Ok, dann muss ich mal versuchen herauszufinden welches Plugin für die Meldung verantwortlich ist. Ich habe nur „Event“ gelesen und bin sofort davon ausgegangen, dass der GTM Schuld ist.

        LG Patrick

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: