Layout Shift verursacht durch CSS-Transitions

Das transition: all Problem

Die häufigste Ursache für Layout Shifts im Zusammenhang mit Transitions 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 das Layout beeinflussen, 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 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 die exakte Eigenschaft anzugeben, die sie animieren möchten. Während des Ladens der Seite geht ein Element im Above-the-Fold-Bereich, wie z. B. 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 width, height und sogar die Sichtbarkeit (visibility) ein. Das Ergebnis: ein Layout Shift, der nur während des Ladevorgangs auftritt und nahezu unmöglich konsistent zu reproduzieren ist.

Welche CSS-Eigenschaften verursachen Layout Shifts?

Nicht alle CSS-Transitions verursachen Layout Shifts. Nur Eigenschaften, die die Geometrie oder Position eines Elements ändern, lösen den Layout-Schritt des Browsers aus. Laut Googles Forschung bestehen Seiten, die layout-induzierende CSS-Eigenschaften animieren, den CLS mit einer um 15% geringeren Wahrscheinlichkeit. Seiten, die margin oder border-width animieren, weisen fast doppelt so oft schlechte CLS-Werte auf.

Eigenschaften, die Layout Shifts 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 bewegen müssen, verwenden Sie transform: translate() anstelle von top/left. Wenn Sie die Größe visuell anpassen müssen, verwenden Sie transform: scale() anstelle von width/height.

Sehen Sie sich das Beispiel unten an. Dies demonstriert einen Layout Shift, der durch CSS-Transitions 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-Transitions finden und beheben

Um alle durch CSS-Transitions verursachten Layout Shifts zu finden und zu beheben, müssen wir einen schnellen Test durchführen. Zuerst finden wir alle CSS-Transitions 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 Transitions, um zu bestätigen, dass sie CLS verursacht haben.

Core Web Vitals Tipp: Cumulative Layout Shifts, die durch CSS-Transitions verursacht werden, treten oft früh während der Ladephase der Seite auf. Diese Layout Shifts passieren nicht konsistent, was ihr Debugging erschwert. Das Verlangsamen Ihres Netzwerks durch Emulieren eines mobilen Geräts und das Deaktivieren Ihres Caches wird das Finden erleichtern!

Schritt 1: CSS-Transitions finden

Das Finden von CSS-Transitions 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 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 zeigt Ihnen eine Tabelle aller Transitions, der Elemente, auf die sie wirken, und weitere Details zu den Transitions.

Um Layout Shifts zu finden, achten Sie auf 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-Transitions anpassen

Das obige JavaScript-Snippet zeigt alle Transitions an und liefert Beispielcode zur Deaktivierung dieser Transitions. Für schnelle Testzwecke empfehle ich Ihnen, den einfachen Weg zu wählen und alle Transitions mit einer einzigen Zeile CSS-Code zu deaktivieren

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

Natürlich ist für Live-Umgebungen etwas mehr Fingerspitzengefühl erforderlich. Entfernen Sie vorsichtig nur nicht benötigte Transition-Eigenschaften auf Basis der jeweiligen Selektoren. Ändern Sie beispielsweise #button{transition: all .2s} in #button{transition: background-color .2s}

Schritt 3: Die Veränderung beim Layout Shift messen

Best Practices für Transitions

1. Geben Sie immer die exakte Eigenschaft an: Verwenden Sie niemals transition: all. Schreiben Sie stattdessen transition: background-color .2s ease. Dies verhindert versehentliche Layout Shifts durch Eigenschaften, die Sie gar nicht animieren wollten.
2. Verwenden Sie transform und opacity für Animationen: Diese beiden Eigenschaften werden vom Compositor verarbeitet und lösen niemals Layout-Berechnungen aus. Verwenden Sie transform: translate(), um Elemente zu bewegen, transform: scale(), um ihre Größe visuell anzupassen, und opacity, um sie ein- oder auszublenden. Dies ist, was Google für hochperformante Animationen empfiehlt.
3. Legen Sie explizite Dimensionen für animierte Elemente fest: Wenn ein Element eine Transition durchführen soll, stellen Sie sicher, dass es vor und nach der Transition explizite width und height (oder ein aspect-ratio) aufweist. Dies verhindert, dass sich umgebende Inhalte verschieben. Weitere Informationen hierzu finden Sie unter Behebung von Layout Shifts durch automatisch skalierende Bilder.
4. Seien Sie vorsichtig mit will-change: Die CSS-Eigenschaft will-change teilt dem Browser mit, sich auf eine Animation vorzubereiten, indem das Element in seine eigene Compositor-Ebene verschoben wird. Aber es bringt Kompromisse mit sich: Es erstellt einen neuen Stacking Context, erhöht die GPU-Speichernutzung und etabliert einen Containing Block für positionierte Nachkommen. 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 nicht-compositete Animationen ausführen. Die gute Nachricht: CLS ist das Core Web Vital mit der höchsten Bestehensrate von 81% auf Mobilgeräten. Die schlechte Nachricht: Wenn Ihre Website zu den durchfallenden 19% gehört, könnten CSS-Transitions die Ursache sein, die Sie noch nicht überprüft haben.