Layout Shift durch CSS-Transitiions verursacht

CSS-Transitiions verstehen:

CSS-Transitiions sind ein mächtiges Werkzeug, um die Änderung einer Eigenschaft im Laufe der Zeit zu animieren. Sie werden häufig für Effekte wie das Einblenden, Gleiten und Skalieren von Elementen auf einer Webseite verwendet. Entwickler können Übergangseffekte definieren, indem sie die zu übergebende Eigenschaft, die Dauer des Übergangs und die Timing-Funktion, die die Beschleunigung des Übergangs regelt, angeben.

Transitiions können eine Eigenschaft, Dauer, Timing-Funktion und eine Verzögerung haben. Ein Transition-Shorthand sieht so aus:

/* property | duration | timing-function | delay */
transition: margin-right 4s ease-in-out 1s;

Layout Shifts: Die unbeabsichtigte Konsequenz:

Layout Shifts treten auf, wenn Elemente auf einer Webseite ihre Position oder Größe ändern, was dazu führt, dass andere Elemente neu angeordnet werden und sich das gesamte Layout der Seite verschiebt. Während CSS-Transitiions darauf ausgelegt sind, flüssige Animationen bereitzustellen, können sie versehentlich Layout Shifts auslösen, was zu einer störenden Benutzererfahrung führt. Die häufigsten Ursachen für Layout Shifts während CSS-Transitiions sind Änderungen in Dimensionen, Position oder Sichtbarkeit von Elementen.

Cumulative Layout Shifts, die durch CSS-Transitiions verursacht werden, treten normalerweise auf, wenn ein Above-the-Fold-Element wie ein Navigationsmenü von seinem ersten (ungestylten) Zustand in seinen endgültigen (gestylten oder sogar versteckten) Zustand übergeht. Dies ist normalerweise eine unbeabsichtigte Folge von zu breiten Transition-Eigenschaften. Zum Beispiel sollte ein Menüeintrag nur die Hintergrundfarbe ändern und stattdessen wurde die Transition-Eigenschaft 'background-color' 'all' gewählt. Dies führt nicht nur zu einem Hintergrundübergang, sondern in einigen Fällen auch zu einem Breiten-, Höhen- oder sogar Sichtbarkeitsübergang während des Seitenladens.

Schauen Sie sich das folgende Beispiel an. Dies demonstriert einen Layout Shift, der durch CSS-Transitiions verursacht wird, die während der Ladephase einer Seite auftreten. Leider sehe ich dieses Muster die ganze Zeit und das Finden und Beheben dieser Art von Problemen kann schwierig sein.

CSS-Transitiions finden und beheben:

Um alle Layout Shifts zu finden und zu beheben, die durch CSS-Transitiions verursacht werden, müssen wir einen kurzen Test durchführen. Zuerst müssen wir alle CSS-Transitiions finden. Wenn wir das getan haben, müssen wir sicherstellen, dass die Transition die Position (Breite, Höhe, Margin, Padding, Sichtbarkeit) eines Elements nicht ändert. Wir können dies tun, indem wir diese Transitiions ändern oder deaktivieren. Schließlich können wir die Auswirkungen dieser Änderungen testen und ein für alle Mal entscheiden, ob CSS-Transitiions CLS-Probleme verursachen. 

Core Web Vitals Tipp: Cumulative Layout Shifts, die durch CSS-Transitiions verursacht werden, treten oft früh während der Ladephase der Seite auf. Diese Layout Shifts passieren nicht konsistent, was sie schwer zu debuggen macht. Das Verlangsamen Ihres Netzwerks durch Emulieren eines mobilen Geräts und das Deaktivieren Ihres Caches macht das Finden einfacher! 

Schritt 1: CSS-Transitiions finden

Das Finden von CSS-Transitiions kann manuell erfolgen: Untersuchen Sie alle Stylesheets und suchen Sie nach dem Wort 'transition'. Das sollte nicht mehr als 10 Minuten Arbeit sein, aber es gibt einen besseren Weg! Fügen Sie einfach diesen Schnipsel in die Konsole ein und drücken Sie Enter

(() => {
 
  let nodeTable = [];
  let nodeArray = [];

  // Get the name of the node
  function getName(node) {
    const name = node.nodeName;
    return node.nodeType === 1
      ? name.toLowerCase()
      : name.toUpperCase().replace(/^#/, '');
  }

  // Get the selector
  const getSelector = (node) => {
    let sel = '';

    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const part = el.id
          ? '#' + el.id
          : getName(el) +
          (el.classList &&
            el.classList.value &&
            el.classList.value.trim() &&
            el.classList.value.trim().length
            ? '.' + el.classList.value.trim().replace(/\s+/g, '.')
            : '');
        if (sel.length + part.length > (100) - 1) return sel || part;
        sel = sel ? part + '>' + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch (err) {
      // Do nothing...
    }
    return sel;
  };

  const getNodesWithTransition = (node) => {

    // Get the computed style
    let cs = window.getComputedStyle(node);
    let tp = cs['transition-property'];
    let td = cs['transition-duration'];

    // If there is a transition, add it to the table
    if (tp !== '' && tp !== 'none' && td != '0s') {
      nodeTable.push({ selector: getSelector(node), transition: cs['transition'] });
      nodeArray.push(node);
    }

    // Recursively call this function for each child node
    for (let i = 0; i < node.children.length; i++) {
      getNodesWithTransition(node.children[i]);
    }
  }

  // find all transitions
  getNodesWithTransition(document.body);

  // Display the results in the console
  console.log('%cLesbare Tabelle von Selektoren und ihren Transitiions', 'color: red; font-weight: bold;');
  console.table(nodeTable);

  console.log('%cNodeList für Sie zum Inspizieren (schwerer zu lesen, aber mehr Infos)', 'color: red; font-weight: bold;');
  console.log(nodeArray);


  // styles to temporarity override the transitions
  let selectors = nodeTable.map((item) => item.selector).join(', ');

  console.log('%cSpezifisches CSS, um alle Transitiions auf dieser Seite zu deaktivieren', 'color: red; font-weight: bold;');
  console.log(`<style>${selectors}{transition-property: none !important;}</style>`);
  
  console.log('%cGlobales CSS, um alle Transitiions auf dieser Seite zu deaktivieren (nicht empfohlen in Produktion)', 'color: red; font-weight: bold;');
  console.log(`<style>*{transition-property: none !important;}</style>`);

})()

Es zeigt Ihnen eine Tabelle aller Transitiions, die Elemente, auf denen sie arbeiten, und weitere Details zu den Transitiions.

Um Layout Shift zu finden, müssen wir nach Transition-Eigenschaften suchen wie width,height, margin,padding, transform, display und besonders all (da all alle gültigen Transition-Eigenschaften umfasst)

Schritt 2: CSS-Transitiions ändern

Der obige JavaScript-Schnipsel zeigt alle Transitiions sowie Beispielcode, wie man diese Transitiions deaktiviert. Für schnelle Testzwecke schlage ich vor, den einfachen Weg zu gehen und alle Transitiions mit einer einfachen Zeile CSS-Code zu deaktivieren

<style>*{transition-property: none !important;}</style>

Natürlich ist für Live-Umgebungen etwas mehr Finesse erforderlich. Entfernen Sie vorsichtig nur unnötige Transition-Eigenschaften pro Selektor. Ändern Sie zum Beispiel #button{transition: all .2s} in  #button{transition: background-color .2s}

Schritt 3: Messen Sie die Änderung im Layout Shift

Andere Transition Good-Practices:

1. GPU-Beschleunigung bevorzugen: Die Nutzung von GPU-Beschleunigung für CSS-Transitiions kann die Rendering-Workload von der CPU auf die GPU verlagern. Dies kann erreicht werden, indem sichergestellt wird, dass die Eigenschaften, die übergeben werden, für GPU-Beschleunigung förderlich sind, wie Opazität und Transform.
2. Verwenden Sie die "will-change" Eigenschaft: Die will-change CSS-Eigenschaft informiert den Browser, dass ein spezifisches Element wahrscheinlich geändert wird, sodass er das Rendering entsprechend optimieren kann. 
3. Sorgen Sie für konsistente Dimensionen: Um Layout Shifts zu vermeiden, die durch Änderungen der Dimensionen verursacht werden, stellen Sie sicher, dass Elemente vor und nach dem Übergang konsistente Dimensionen haben. Dies kann das Festlegen expliziter Dimensionen, die Verwendung prozentualer Werte oder den Einsatz von Techniken wie Aspect Ratio Boxen beinhalten.
4. Optimieren Sie Timing-Funktionen: Die Wahl der Timing-Funktion kann die Wahrnehmung von Geschmeidigkeit während eines Übergangs erheblich beeinflussen. Achten Sie auf Beschleunigungs- und Verzögerungsmuster und ziehen Sie die Verwendung von ease-in-out oder benutzerdefinierten kubischen Bezier-Funktionen für ein natürlicheres Gefühl in Betracht.