Durch CSS-Transitionen verursachter Layout Shift

Das Problem mit transition: all

Die häufigste Ursache für Layout Shifts im Zusammenhang mit Transitionen ist transition: all. Laut dem CSS-Kapitel des Web Almanac 2022 verwenden 53 % der Seiten transition: all. Das bedeutet, dass jede Eigenschaftsänderung animiert wird, einschließlich derjenigen, die sich auf das Layout auswirken, wie width, height, margin und padding.

Eine CSS-Transition hat eine Eigenschaft (property), eine Dauer (duration), eine Timing-Funktion (timing-function) und eine Verzögerung (delay). Die Kurzschreibweise (shorthand) sieht so aus:

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

Das Problem beginnt, wenn Entwickler transition: all .3s ease schreiben, anstatt genau die Eigenschaft anzugeben, die sie animieren möchten. Während des Ladens der Seite geht ein Above-the-fold-Element wie ein Navigationsmenü von seinem anfänglichen (ungestylten) Zustand in seinen endgültigen (gestylten oder sogar versteckten) Zustand über. Wenn die Transition-Eigenschaft all ist, schließt dies Breite (width), Höhe (height) und sogar die Sichtbarkeit (visibility) ein. Das Ergebnis: ein Layout Shift, der nur während des Ladens auftritt und fast unmöglich konsistent zu reproduzieren ist.

Welche CSS-Eigenschaften verursachen Layout Shift?

Nicht alle CSS-Transitionen verursachen Layout Shifts. Nur Eigenschaften, die die Geometrie oder Position eines Elements ändern, lösen den Layout-Schritt (layout step) des Browsers aus. Laut Googles Forschung bestehen Seiten, die layout-induzierende CSS-Eigenschaften animieren, den CLS um 15 % seltener. Seiten, die margin oder border-width animieren, haben einen schlechten CLS mit fast dem Doppelten der normalen Rate.

Eigenschaften, die Layout Shift verursachen: width, height, margin, padding, top, left, right, bottom, border-width, font-size, display

Sichere Eigenschaften (nur Composite, kein Layout Shift): transform, opacity, filter, clip-path

Sichere Eigenschaften (nur Paint, kein Layout Shift): background-color, color, box-shadow, outline

Die wichtigste Erkenntnis: transform und opacity werden vollständig vom Compositor-Thread des Browsers verarbeitet. Sie lösen niemals eine Layout-Neuberechnung aus, daher zählen sie niemals zum CLS. Wenn Sie ein Element verschieben müssen, verwenden Sie transform: translate() anstelle von top/left. Wenn Sie die Größe visuell ändern müssen, verwenden Sie transform: scale() anstelle von width/height.

Schauen Sie sich das folgende Beispiel an. Dies zeigt einen Layout Shift, der durch CSS-Transitionen verursacht wird, die während der Ladephase einer Seite auftreten. Ich sehe dieses Muster ständig und das Finden und Beheben dieser Art von Problemen kann schwierig sein.

CSS-Transitionen finden und beheben

Um alle durch CSS-Transitionen verursachten Layout Shifts zu finden und zu beheben, müssen wir einen schnellen Test durchführen. Zuerst finden wir alle CSS-Transitionen auf der Seite. Dann prüfen wir, ob eine von ihnen layout-beeinflussende Eigenschaften ändert. Schließlich messen wir die Auswirkungen der Deaktivierung oder Modifizierung dieser Transitionen, um zu bestätigen, dass sie den CLS verursacht haben.

Core Web Vitals Tipp: Cumulative Layout Shifts, die durch CSS-Transitionen verursacht werden, treten oft früh während der Ladephase der Seite auf. Diese Layout Shifts treten nicht konsistent auf, was das Debuggen erschwert. Wenn Sie Ihr Netzwerk verlangsamen, indem Sie ein mobiles Gerät emulieren und Ihren Cache deaktivieren, wird das Auffinden erleichtert!

Schritt 1: CSS-Transitionen finden

Das Finden von CSS-Transitionen kann manuell durchgeführt werden: 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 dieses Snippet in die Konsole ein und drücken Sie die Eingabetaste

(() => {

  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('%cReadable table of selectors and their transitions', 'color: red; font-weight: bold;');
  console.table(nodeTable);

  console.log('%cNodeList for you to inspect (harder to read but more info)', 'color: red; font-weight: bold;');
  console.log(nodeArray);


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

  console.log('%cSpecific CSS to disable all transitions on this page', 'color: red; font-weight: bold;');
  console.log(`<style>${selectors}{transition-property: none !important;}</style>`);

  console.log('%cGlobal CSS to disable all transitions on this page (not suggested on production)', 'color: red; font-weight: bold;');
  console.log(`<style>*{transition-property: none !important;}</style>`);

})()

Es wird Ihnen eine Tabelle aller Transitionen, die Elemente, an denen sie arbeiten, und weitere Details zu den Transitionen angezeigt.

Um Layout Shifts zu finden, suchen Sie nach Transition-Eigenschaften wie width, height, margin, padding, top, left, display und insbesondere all (da all jede gültige Transition-Eigenschaft einschließt).

Schritt 2: CSS-Transitionen modifizieren

Das obige JavaScript-Snippet zeigt alle Transitionen an und liefert auch einen Beispielcode zum Deaktivieren dieser Transitionen. Für schnelle Testzwecke empfehle ich Ihnen, den einfachen Weg zu gehen und alle Transitionen mit einer einfachen Zeile CSS-Code zu deaktivieren

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

Für Live-Umgebungen ist natürlich etwas mehr Finesse erforderlich. Entfernen Sie sorgfältig nur unnötige Transition-Eigenschaften auf Pro-Selektor-Basis. Ändern Sie zum Beispiel #button{transition: all .2s} zu #button{transition: background-color .2s}

Schritt 3: Messen Sie die Änderung des Layout Shifts

Best Practices für Transitionen

1. Geben Sie immer die genaue Eigenschaft an: Verwenden Sie niemals transition: all. Schreiben Sie stattdessen transition: background-color .2s ease. Dies verhindert versehentliche Layout Shifts von Eigenschaften, die Sie nicht animieren wollten.
2. Verwenden Sie transform und opacity für Animationen: Diese beiden Eigenschaften werden vom Compositor verarbeitet und lösen niemals ein Layout aus. Verwenden Sie transform: translate() zum Verschieben von Elementen, transform: scale(), um deren Größe visuell zu ändern, und opacity zum Ausblenden. Dies ist, was Google für hochperformante Animationen empfiehlt.
3. Legen Sie explizite Dimensionen für animierte Elemente: Wenn ein Element eine Transition durchlaufen muss, stellen Sie sicher, dass es vor und nach der Transition eine explizite Breite und Höhe (oder ein aspect ratio) hat. Dies verhindert, dass sich umgebende Inhalte verschieben. Weitere Informationen hierzu finden Sie unter Beheben von Layout Shifts, die durch sich automatisch in der Größe anpassende Bilder verursacht werden.
4. Seien Sie vorsichtig mit will-change: Die CSS-Eigenschaft will-change weist den Browser an, sich auf eine Animation vorzubereiten, indem das Element auf seinen eigenen Compositor-Layer verschoben wird. Dies ist jedoch mit Kompromissen verbunden: Es erstellt einen neuen Stacking Context, erhöht die GPU-Speichernutzung und richtet einen Containing Block für positionierte Nachkommen (descendants) ein. Wenden Sie es dynamisch mit JavaScript kurz vor Beginn der Animation an und entfernen Sie es, wenn die Animation endet. Belassen Sie will-change nicht dauerhaft in Ihrem Stylesheet.

Trotz alledem berichtet der Web Almanac 2025, dass 40 % der mobilen Seiten immer noch non-composited Animationen ausführen. Die gute Nachricht: Der CLS ist der Core Web Vital mit der höchsten Erfolgsquote von 81 % auf Mobilgeräten. Die schlechte Nachricht: Wenn Ihre Website zu den 19 % gehört, die durchfallen, könnten CSS-Transitionen die Ursache sein, die Sie noch nicht überprüft haben.