CLS (kumulatiivinen asettelun muutos)
CLS mittaa kuinka paljon näkyviä elementtejä odottamatta siirtyä sivu lataa Googlen Core Web Vitals.
Mitä CLS (Cumulative Layout Shift) on?
CLS mittaa, kuinka paljon näkyviä elementtejä odottamatta siirtää sivun kuormia tai käytetään. Pistemäärä on mittaamaton ja lasketaan seuraavasti: iskufraktio (kuinka suuri osa näkökentästä vaikuttaa) Etäisyysosuus (kuinka pitkälle elementit liikkuvat). CLS on yksi kolmesta Core Web Vitals rinnalla LCP ja INP, ja hyvä tulos on 0.1 tai pienempi 75. persentiilissä … 0.25 Sitä pidetään köyhänä.
Miksi CLS (Cumulative Layout Shift) on tärkeä?
Layout-hypyt ovat suoraan haitallisia verkkokaupassa: ostoskeskus aikoo napauttaa “Osta,” mutta banneri tai myöhään ladattava kuva painaa nappia ja hana laskeutuu johonkin muuhun. Se luo turhautumista, virheklikkauksia ja epäluottamusta juuri ennen kääntymistä. CLS on myös osa Googlen sivukokemuksen signaaleja, joten jatkuvasti korkeat arvot voivat heikentää rankingissa. Vakaa sivu tuntuu nopeampi ja ammattimaisempi … vaikka raaka nopeus on sama.
Yleiset käyttötapaukset
- Kuvat ja video ilman ulottuvuuksia. Ei
width/heighttaiaspect-ratioselain ei voi varata tilaa etukäteen, joten sisältö hyppää, kun media latautuu … pari tätä oikealla Vaihtoehtoinen teksti. - Keksikyltit ja ponnahdusikkunat. Sivun yläosaan tai keskelle pistetty sisältö työntää kaiken sen alle.
- App widgetit. Arvostelut, “hiljan katseltu” ja ylös lohkot, jotka kuormittavat jälkeen loput reflow layout.
- Web-fontit. Swaping alkaen varafontin lopullinen kirjasin voi aiheuttaa tekstin reflow ja siirtyä.
- Mainokset ja kuvakehykset Alueella ei ole varattua tilaa Ilman vieritystä näkyvä alue.
Näytä perspektiivi
Shopifyssa useimmat asetteluhypyt tulevat sovelluksista ja teeman muokkauksista ydinalustan sijaan. Varaa aina tilaa dynaamisille lohkoille, aseta kiinteät mitat tuotekuville ja lataa evästeet ja ponnahdusikkunat, jotta ne eivät työnnä sisältöä ympäriinsä. Mittaa vaikutus PageSpeed Insightsilla tai Majakalla sekä mobiililla että työpöydällä ja katso nopeusraportti alla Verkkokauppa Shopify admin, joka on rakennettu Google Lighthouse data.