Asettelun siirtymät

Silktide tarkkailee sivuasi sen latautuessa ja mittaa, kuinka paljon asettelu hyppii, sekä tunnistaa sivun ne osat, jotka liikkuvat. Vakaa sivu näkyy kerran ja pysyy paikallaan; epävakaa sivu siirtyy kuvien, fonttien ja upotusten latautuessa.

Mittari on Cumulative Layout Shift (CLS), yksi Googlen Core Web Vitals -mittareista. Se laskee yhteen kaikki odottamattomat liikkeet latauksen aikana: arvoa 0,1 tai alle pidetään hyvänä ja arvoa 0,25 tai yli heikkona.

Miksi tämä on tärkeää

Asettelun siirtymät aiheuttavat todellisia virheitä. Vierailija on napauttamassa linkkiä, sisältö hyppää viime hetkellä ja hän napauttaa jotain muuta – joskus mainosta, joskus "Osta"-painiketta "Peruuta"-painikkeen sijaan. Vierailijan lukema teksti hypähtää pois hänen näkyvistään. Tämä saa sivuston tuntumaan rikkoutuneelta ja epäluotettavalta tavalla, jonka vierailijat huomaavat heti, vaikka eivät osaisikaan nimetä sitä.

Google käyttää myös Core Web Vitals -mittareita, tämä mukaan lukien, hakusijoitussignaalina, joten epävakaa sivu voi heikentää sekä näkyvyyttä että luottamusta.

Kuinka korjata se

Silktide näyttää, mitkä elementit siirtyivät; korjauksena on varata niille tila ennen niiden latautumista.

1. Määritä jokaiselle kuvalle ja videolle eksplisiittinen leveys ja korkeus (tai CSS-kuvasuhde), jotta selain varaa oikean tilan ennen tiedoston saapumista – katso Eksplisiittiset kuvakoot.
2. Varaa tila mainoksille, upotuksille ja muulle myöhään latautuvalle sisällölle kiinteäkokoisella säiliöllä, vaikka se olisi joskus osittain tyhjä.
3. Älä koskaan lisää uutta sisältöä sen yläpuolelle, mitä vierailija jo lukee, ellei se tapahdu vastauksena hänen omaan toimintaansa.
4. Lataa mukautetut fontit tavalla, joka välttää tekstin näkyvän uudelleenasettelun – katso Näkyvä teksti latauksen aikana.

Kuinka Silktide testaa tämän

1. Lataa sivu oikeassa selaimessa käyttäen nopeustesteillesi määritettyä laitetyyppiä, yhteysnopeutta ja testisijaintia.
2. Tallenna jokainen odottamaton asettelun liike sivun latautuessa ja laske ne yhteen sivun Cumulative Layout Shift -pisteeksi.
3. Raportoi jokainen siirtynyt elementti sekä sen HTML ja yksittäinen osuus kokonaismäärästä.
4. Luokittele sivu sen kokonaispisteen perusteella tämän mittarin julkisella asteikolla: 0,1 tai alle on hyvä, 0,25 tai yli on heikko.

Vianmääritys

En näe sivun liikkuvan

Siirtymät tapahtuvat usein latauksen ensimmäisinä hetkinä ennen kuin alat lukea tai vain hitaammilla yhteyksillä, joilla tiedostot saapuvat ajan mittaan erillään toisistaan. Selaimesi on myös voinut tallentaa sivun kuvat ja fontit välimuistiin, joten minkään ei tarvitse saapua myöhässä. Tarkistuksen luettelemat elementit osoittavat kuitenkin, mikä liikkui, vaikka vain hetkellisesti.

Pisteeni poikkeaa muiden työkalujen tuloksista

CLS riippuu laitteesta, yhteysnopeudesta ja siitä, kuinka pitkälle mittaus ulottuu. Silktide mittaa hallitun sivulatauksen määritetyillä nopeustestiasetuksillasi; todellisten vierailijoiden tietoihin perustuvat työkalut (tai työkalut, jotka jatkavat mittaamista käyttäjien vierittäessä ja käyttäessä sivua) voivat oikeutetusti raportoida samalle sivulle erilaisia arvoja.

Lue lisää

• Sivunopeus ja Core Web Vitals – CLS:n ja muiden elintärkeiden mittareiden priorisointikehys
• Cumulative Layout Shift (web.dev)
• Optimoi Cumulative Layout Shift (web.dev)
• Eksplisiittiset kuvakoot
• Näkyvä teksti latauksen aikana
• Web Vitals