Layout Shift orsakad av CSS-övergångar

Förstå CSS-övergångar:

CSS-övergångar är ett kraftfullt verktyg för att animera förändringen av en egenskap över tid. De används ofta för effekter som toning, glidning och skalning av element på en webbsida. Utvecklare kan definiera övergångseffekter genom att ange egenskapen som ska övergå, övergångens varaktighet och tidsfunktionen som styr övergångens acceleration.

En övergång kan ha en property, duration, timing-function och en delay. En transition-shorthand ser ut så här:

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

Layout Shifts: den oavsiktliga konsekvensen:

Layout shifts uppstår när element på en webbsida ändrar position eller storlek, vilket gör att andra element omflödas och sidans övergripande layout förskjuts. Även om CSS-övergångar är utformade för att ge smidiga animationer kan de oavsiktligt utlösa layout shifts, vilket leder till en störande och försämrad user experience. De vanligaste orsakerna till layout shifts under CSS-övergångar inkluderar förändringar i dimensioner, position eller synlighet av element.

Cumulative Layout Shift orsakad av CSS-övergångar uppstår vanligtvis när ett element ovanför vikningen, som en navigationsmeny, övergår från sitt första (ostylade) tillstånd till sitt slutgiltiga (stylade eller till och med dolda) tillstånd. Detta är vanligtvis en oavsiktlig konsekvens av alltför breda transition-egenskaper. Till exempel bör en menypost bara övergå bakgrundsfärg, men istället för transition-egenskapen 'background-color' har 'all' valts. Detta leder inte bara till en bakgrundsövergång utan i vissa fall även till en bredd-, höjd- eller till och med synlighetsövergång under sidladdning.

Ta en titt på exemplet nedan. Detta demonstrerar en layout shift orsakad av CSS-övergångar som uppstår under laddningsfasen av en sida. Tyvärr ser jag detta mönster hela tiden och att hitta och åtgärda den här typen av problem kan vara svårt.

Hitta och åtgärda CSS-övergångar:

För att hitta och åtgärda alla layout shifts orsakade av CSS-övergångar behöver vi göra ett snabbt test. Först måste vi hitta alla CSS-övergångar. När vi har gjort detta måste vi säkerställa att övergången inte ändrar positionen (width, height, margin, padding, visibility) av ett element. Vi kan göra detta genom att modifiera eller inaktivera dessa övergångar. Slutligen kan vi testa effekten av dessa ändringar och avgöra en gång för alla om CSS-övergångar orsakar CLS-problem. 

Core Web Vitals tip: Cumulative Layout Shift som orsakas av CSS-övergångar uppstår ofta tidigt under laddningsfasen av sidan. Dessa layout shifts sker inte konsekvent vilket gör dem svåra att felsöka. Att sakta ner ditt nätverk genom att emulera en mobil enhet och inaktivera din cache gör det lättare att hitta dem! 

Steg 1: Hitta CSS-övergångar

Att hitta CSS-övergångar kan göras manuellt: inspektera alla stilmallar och sök efter ordet 'transition'. Det bör inte ta mer än 10 minuters arbete, men det finns ett bättre sätt! Klistra bara in detta kodavsnitt i konsolen och tryck på 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('%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>`);

})()

Det visar dig en tabell över alla övergångar, elementen de verkar på och mer detaljer om övergångarna.

För att hitta layout shift behöver vi leta efter transition-egenskaper som width,height, margin,padding, transform, display och särskilt all (eftersom all inkluderar alla giltiga transition-egenskaper)

Steg 2: Modifiera CSS-övergångar

JavaScript-kodavsnittet ovan visar alla övergångar samt ger exempelkod för hur man inaktiverar dessa övergångar. För snabb testning föreslår jag att du tar den enkla vägen och inaktiverar alla övergångar med en enkel rad CSS-kod

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

Naturligtvis krävs lite mer finess i produktionsmiljöer. Ta försiktigt bara bort onödiga transition-egenskaper per selektor. Ändra till exempel #button{transition: all .2s} till  #button{transition: background-color .2s}

Steg 3: Mät förändringen i layout shift

Andra goda rutiner för övergångar:

1. Föredra GPU-acceleration: Att använda GPU-acceleration för CSS-övergångar kan avlasta renderingsarbetet från CPU:n till GPU:n. Detta kan uppnås genom att säkerställa att egenskaperna som övergår är lämpliga för GPU-acceleration, såsom opacity och transform.
2. Använd egenskapen "will-change": CSS-egenskapen will-change informerar webbläsaren om att ett specifikt element sannolikt kommer att ändras, vilket gör att den kan optimera renderingen därefter. 
3. Säkerställ konsekventa dimensioner: För att förhindra layout shifts orsakade av dimensionsändringar, säkerställ att element har konsekventa dimensioner före och efter övergången. Detta kan innebära att ställa in explicita dimensioner, använda procentbaserade värden eller använda tekniker som aspect ratio-boxar.
4. Optimera tidsfunktioner: Valet av tidsfunktion kan avsevärt påverka upplevelsen av smidighet under en övergång. Var uppmärksam på accelerations- och retardationsmönstren och överväg att använda ease-in-out eller anpassade cubic bezier-funktioner för en mer naturlig känsla.