CSS-siirtymien aiheuttama Layout Shift

CSS-siirtymien ymmärtäminen:

CSS-siirtymät ovat tehokas työkalu ominaisuuden muutoksen animointiin ajan kuluessa. Niitä käytetään yleisesti efekteihin kuten häivytykseen, liukumiseen ja elementtien skaalaukseen verkkosivulla. Kehittäjät voivat määritellä siirtymäefektejä määrittämällä siirrettävän ominaisuuden, siirtymän keston ja siirtymän kiihtyvyyttä ohjaavan ajoitusfunktion.

Siirtymällä voi olla ominaisuus, kesto, ajoitusfunktio ja viive. Siirtymän lyhennys näyttää tältä:

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

Layout Shiftit: tahaton seuraus:

Layout shiftit tapahtuvat, kun verkkosivun elementit muuttavat sijaintia tai kokoa, mikä aiheuttaa muiden elementtien uudelleenasettelun ja sivun kokonaisasettelun siirtymisen. Vaikka CSS-siirtymät on suunniteltu tarjoamaan sulavaa animaatiota, ne voivat tahattomasti laukaista layout shiftejä, mikä johtaa häiritsevään user experienceen. Layout shiftien yleisimmät syyt CSS-siirtymien aikana ovat elementtien mittojen, sijainnin, or näkyvyyden muutokset.

CSS-siirtymien aiheuttamat Cumulative Layout Shiftit tapahtuvat yleensä, kun above-the-fold-elementti kuten navigointivalikko siirtyy ensimmäisestä (tyylittömästä) tilastaan lopulliseen (tyyliteltyyn tai jopa piilotettuun) tilaan. Tämä on yleensä tahaton seuraus liian laajoista siirtymäominaisuuksista. Esimerkiksi valikkorivin tulisi siirtää vain taustaväriä, mutta siirtymäominaisuudeksi on valittu 'background-color' sijasta 'all'. Tämä johtaa taustasiirtymän lisäksi joissain tapauksissa myös leveyden, korkeuden tai jopa näkyvyyden siirtymään sivun latauksen aikana.

Katso alla oleva esimerkki. Tämä havainnollistaa CSS-siirtymien aiheuttamaa layout shiftiä, joka tapahtuu sivun latausvaiheen aikana. Valitettavasti näen tätä kaavaa jatkuvasti, ja tällaisten ongelmien löytäminen ja korjaaminen voi olla vaikeaa.

CSS-siirtymien löytäminen ja korjaaminen:

Löytääksemme ja korjataksemme kaikki CSS-siirtymien aiheuttamat layout shiftit meidän on tehtävä nopea testi. Ensin meidän on löydettävä kaikki CSS-siirtymät. Kun olemme tehneet tämän, meidän on varmistettava, ettei siirtymä muuta elementin sijaintia (width, height, margin, padding, visibility). Voimme tehdä tämän muokkaamalla tai poistamalla nämä siirtymät käytöstä. Lopuksi voimme testata näiden muutosten vaikutusta ja päättää lopullisesti, aiheuttavatko CSS-siirtymät CLS-ongelmia. 

Core Web Vitals -vinkki: CSS-siirtymien aiheuttamat Cumulative Layout Shiftit tapahtuvat usein aikaisin sivun latausvaiheen aikana. Nämä layout shiftit eivät tapahdu johdonmukaisesti, mikä tekee niistä vaikeita debugata. Verkon hidastaminen mobiililaitteen emuloinnilla ja välimuistin poistaminen käytöstä helpottaa niiden löytämistä! 

Vaihe 1: Etsi CSS-siirtymät

CSS-siirtymien löytäminen voidaan tehdä manuaalisesti: tarkasta kaikki tyylitiedostot ja etsi sanaa 'transition'. Sen ei pitäisi kestää yli 10 minuuttia, mutta on parempikin tapa! Liitä tämä koodinpätkä konsoliin ja paina 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>`);

})()

Se näyttää sinulle taulukon kaikista siirtymistä, elementeistä joihin ne vaikuttavat ja lisätietoja siirtymistä.

Layout shiftien löytämiseksi meidän on etsittävä siirtymäominaisuuksia kuten width,height, margin,padding, transform, display ja erityisesti all (koska all sisältää kaikki kelvolliset siirtymäominaisuudet)

Vaihe 2: Muokkaa CSS-siirtymiä

Yllä oleva JavaScript-koodinpätkä näyttää kaikki siirtymät sekä tarjoaa esimerkkikoodin niiden poistamiseen käytöstä. Nopeaa testausta varten suosittelen helppoa reittiä ja kaikkien siirtymien poistamista käytöstä yhdellä yksinkertaisella CSS-koodirivillä

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

Tuotantoympäristöissä tarvitaan tietysti hieman enemmän hienosäätöä. Poista huolellisesti vain tarpeettomat siirtymäominaisuudet valitsinkohtaisesti. Vaihda esimerkiksi #button{transition: all .2s} muotoon  #button{transition: background-color .2s}

Vaihe 3: Mittaa layout shiftin muutos

Muita hyviä käytäntöjä siirtymille:

1. Suosi GPU-kiihdytystä: GPU-kiihdytyksen hyödyntäminen CSS-siirtymissä voi siirtää renderöintikuorman CPU:lta GPU:lle. Tämä voidaan saavuttaa varmistamalla, että siirrettävät ominaisuudet soveltuvat GPU-kiihdytykseen, kuten opacity ja transform.
2. Käytä "will-change" -ominaisuutta: The will-change CSS-ominaisuus ilmoittaa selaimelle, että tiettyä elementtiä todennäköisesti muutetaan, jolloin selain voi optimoida renderöinnin vastaavasti. 
3. Varmista yhtenäiset mitat: Layout shiftien estämiseksi mittojen muutoksista johtuen varmista, että elementeillä on yhtenäiset mitat ennen ja jälkeen siirtymän. Tämä voi tarkoittaa eksplisiittisten mittojen asettamista, prosenttipohjaisten arvojen käyttöä tai tekniikoiden kuten kuvasuhdelaatikoiden hyödyntämistä.
4. Optimoi ajoitusfunktiot: Ajoitusfunktion valinta voi merkittävästi vaikuttaa siirtymän sujuvuuden vaikutelmaan. Huomioi kiihtyvyys- ja hidastuvuusmallit ja harkitse ease-in-out tai mukautettujen cubic bezier -funktioiden käyttöä luonnollisemman tunnun saavuttamiseksi.