Kumulatiivinen asettelun muutos (CLS)

Kumulatiivinen asettelun siirtymä (Cumulative Layout Shift) mittaa visuaalista epävakautta määrittämällä, kuinka paljon näkyvää sisältöä liikkuu odottamatta sivun elinkaaren aikana. Se on yksi Googlen Core Web Vitals -mittareista, ja toisin kuin lataus- ja reagointikykymittarit, se on yksikköä vailla oleva pistemäärä eikä kesto. Se lasketaan siirtymän vaikutuksen alaisen näyttöalueen osuudesta ja sisällön liikkumismatkasta. Googlen julkaisema kynnysarvo käsittelee 0.1:tä tai sitä pienempää arvoa hyvänä todellisten käyttökokemusten 75. persentiilissä.

Sen kuvaama toimintatapa on tuttu kenelle tahansa, joka on yrittänyt napsauttaa linkkiä ja saanut sen yläpuolelle latautumaan mainoksen, joka työntää sivua alaspäin, tai aloittanut kappaleen lukemisen, joka hyppäsi näkyviin verkkofontin vaihtuessa. Ärsytyksen lisäksi käytännön seurauksena ovat virheklikkaukset: sisällön siirtyminen napautushetken ja napautuksen tekemisen välillä johtaa väärään toimintoon, mikä kauppa- tai pankkikäyttöliittymässä voi tarkoittaa väärää ostosta, väärää poistamista tai tahatonta navigointia.

Syyt on dokumentoitu hyvin ja ne on enimmäkseen helppo estää. Kuvat ja videot, joilla ei ole selkeitä mittoja, aiheuttavat uudelleenjuoksua latautuessaan, koska selain ei voi varata oikeaa tilaa etukäteen. Mainokset, upotukset ja iframe-kehykset, jotka on lisätty työnkulkuun ilman varattua säilöä, työntävät sisältöä alaspäin. Verkkofontit, jotka vaihtavat varafonttia eri mittareilla, uudelleenjuoksuttavat tekstin. Sisältö, joka dynaamisesti lisätään olemassa olevan sisällön yläpuolelle, kuten bannerit, ilmoitukset ja suostumusilmoitukset, siirtää kaiken sen alapuolella olevan. Animaatiot, jotka muuttavat asettelun ominaisuuksia muuntamisen ja läpinäkyvyyden sijaan, käynnistävät uudelleenjuoksutuksen jokaisessa kehyksessä.

Vastaavat korjaukset ovat edullisimpia suorituskykytyössä saatavilla olevia ratkaisuja. Leveys- ja korkeusattribuuttien tai kuvasuhteen asettaminen medialle varaa tilaa ennen latausta. Kiinteiden säilöjen varaaminen mainoksille ja upotuksille estää sisällön syrjäyttämisen lisäyksen yhteydessä. Varafontin mittareiden yhteensovittaminen verkkofontin kanssa ja asianmukaisten fontin latausstrategioiden käyttö vähentää uudelleenjuoksutusta vaihdon yhteydessä. Dynaamisen sisällön lisääminen taitoksen alapuolelle tai päällekkäisiin elementteihin olemassa olevan sisällön yläpuolelle välttää häiritsevimmän ongelman. Vain muunnoksen ja läpinäkyvyyden animointi pitää liikkeen poissa asettelupolulta.

Mittaaminen vaatii huomiota istuntoon pelkän sivun latauksen sijaan. Mittari kerääntyy sivun koko elinkaaren ajalta, mukaan lukien vierityksen ja vuorovaikutuksen aikana tapahtuvat muutokset. Tämä tarkoittaa, että sivu, joka saa hyvän tuloksen ensimmäisessä latauksessa, voi silti saada huonon tuloksen kokonaisuudessaan, koska laiskasti ladattua sisältöä saapuu ilman varattua tilaa. Muutokset, jotka tapahtuvat lyhyessä ajassa käyttäjän vuorovaikutuksen jälkeen, suljetaan pois, koska sisällön liikkuminen reaktiona tarkoitukselliseen toimintaan on odotettavissa eikä häiritsevää.

Suostumusilmoitukset ja mainosbannerit ansaitsevat erityistä huomiota, koska ne lisätään myöhään, niitä hallitaan yleensä varsinaisen kehitysprosessin ulkopuolella ja ne usein syrjäyttävät sisältöä. Banneri, joka näkyy dokumentin yläosassa renderöinnin jälkeen, työntää kaiken alas juuri sillä hetkellä, kun kävijä alkaa lukea tai kurottaa linkkiä kohti. Tällaisten elementtien, kuten päällekkäiselementtien, esittäminen, jotka eivät osallistu asetteluun, tai tilan varaaminen niille ennen niiden renderöintiä ratkaisee ongelman poistamatta niitä. Koska markkinointi- tai lakitiimit usein konfiguroivat nämä komponentit kolmannen osapuolen työkaluilla, korjaus vaatii yleensä keskustelua funktioiden välillä eikä pelkästään koodimuutosta.

Koska syyt sijaitsevat yleensä malleissa, mainosintegraatioissa ja kolmannen osapuolen upotuksissa yksittäisen komponentin sijaan, korjaavat toimet vaativat yleensä koordinointia kustakin vastaavan tiimin välillä. Käytännössä tämä on vakiokäytäntöä. verkkosuorituskyky työtä, ja se on yksi niistä alueista, joilla yhteys kaupallisiin tuloksiin on suorin, koska tuotteen tai kassasivun asettelun epävakaus aiheuttaa virhevalintoja ja hylkäyksiä, jotka a UX-tarkastus tulevat esiin käytettävyysongelmina ilman, että niiden taustalla olevaa teknistä syytä välttämättä tunnistetaan.