Sivun visuaalisen vakauden (CLS) optimointi

Kysymys: Testasin sivuja Googlen Web Vitals –testillä ja muuten kaikki oli ok, mutta Cumulative Layout Shift oli huono. Miten sitä voi parantaa?

Kumulatiivinen asettelumuutos (CLS) on yksi Googlen uusista käyttäjäkokemusta mittaavista ns. webin vitaaliarvoista.

Sen lisäksi, että CLS antaa verkkovastaavalle tietoa käyttäjäkokemuksen laadusta, se alkaa toukokuusta 2021 vaikuttamaan myös sivujen sijoitukseen hakutuloksissa. Harkinnassa Googlella on myös niiden sivujen korostaminen hakutulossivulla, jotka tarjoavat erinomaisen käyttäjäkokemuksen.

Kumulatiivinen asettelumuutos mittaa sivun visuaalista vakautta, eli sitä, miten paljon sivun mitat muuttuvat käytön aikana. Pääasiallinen syy korkeaan Cumulative Layout Shift -arvoon on, että sivulle ladataan jälkeenpäin mainoksia tai muuta dynaamista sisältöä. Tämä saa sivun hyppimään itsekseen näytöllä eri kohtaan. Olet varmasti kokenut tämän. Ärsyttävää.

Cumulative layout shift, miten se mitataan?

Google Developers:n tarjoama nettipalvelu CLS:n mittaamiseen löytyy osoitteesta:

https://web.dev/measure/

Testi kertoo sivun CLS:n, loput webin vitaaliarvot (LCP ja FID) ja myös muuta tietoa sivun virittelyyn.

Alle 0.1:n olevia CLS-arvoja pidetään hyvinä, arvot 0.1-0.25 välillä kertovat, että parantamisen varaa on jo ja yli 0.25:n menevät arvot ovat yksinkertaisesti huonoja.

#1 Varmista, että kuvien koot ovat selaimen tiedossa jo ennen niiden lataamista

Varmista, että sivujesi html-koodista tai css-tyylitiedostosta käy ilmi, minkä kokoisina kuvat sivulla näytetään. Tällöin selain osaa varata kuvalle oikeankokoisen tilan jo ennen kuin se on saanut haettua www-palvelimelta varsinaisen kuvatiedoston.

Kun kuvalle on varattu oikeankokoinen tila sivulta heti alusta alkaen, selaimen ei tarvitse uudelleenjärjestellä sivua siinä yhteydessä kun se tuo kuvan näkyviin. Selain ainoastaan sijoittaa kuvan sille varattuun tilaan. Kun uudelleenjärjestelyä ei tehdä, myöskään sivun mitat eivät muutu, visuaalinen vakaus säilyy ja Cumulative Layout Shift -arvo ei kasva.

Myös lazy loading voi olla syy kohonneeseen CLS-arvoon. Vastaan on tullut tilanteita, joissa julkaisu- tai verkkokauppajärjestelmän tavassa toteuttaa lazy loading on ollut ongelmia. Jos sivujesi CLS on korkea ja käytät "laiskaa latausta", kokeile laittaa toiminto pois päältä ja tarkista vaikuttaako se CLS-arvoon. Jos CLS on parempi ilman lazy loadingia, kyseessä on ongelma käyttämässäsi järjestelmässä. Selvitä miten asia on korjattavissa tai pidä lazy loading pois päältä.

#2 Varaa etukäteen tilaa dynaamisesti ladattavalle sisällölle

Moderneissa käyttöliittymissä sivun eri osat ladataan usein hieman eri aikaan ja sivu täydentyy pienillä tiedonmuruilla sitä mukaa kun niitä saadaan haettua taustajärjestelmistä. Verkkokaupan tuotesivu saattaa esimerkiksi aluksi sisältää vain tuotteen perustiedot, mutta jonkun ajan kuluttua sille ilmestyy myös tieto varastotilanteesta.

Kaikille pienille dynaamisesti ladattaville tiedoille pitää CLS:n minimoimiseksi varata etukäteen tilaa, jotta tiedon tuominen näkyviin näissä kohdissa ei johda ympäröivien käyttöliittymän osien uudelleenjärjestelyyn.

#3 Älä käytä plugineja, jotka muuttavat sivun rakennetta ilman käyttäjän vuorovaikutusta

Verkkokauppa- ja julkaisujärjestelmien pluginit, jotka oleellisesti muuttavat sivun esitystapaa, kannattaa käydä läpi tiheällä kammalla. Erossa kannattaa erityisesti pysyä plugineista, jotka aktivoituvat automaattisesti sivun latauksen yhteydessä mutta vasta sen jälkeen kun ensimmäinen oletusarvoinen versio sivusta on jo lähetetty käyttäjän selaimelle. Esimerkiksi verkkokauppojen pluginien yhteydessä on ilmennyt tilanne, jossa kategoriasivu tuotteineen lähetetään käyttäjälle alunperin grid-muodossa, mutta jonka plugin käynnistyttyään muuttaa listamuotoon. Tästä seuraa väistämättä merkittävä hypähdys CLS-arvossa.

On hyvä huomata, että jos muutos sivulla tapahtuu käyttäjän käynnistämänä, tämä ei vaikuta CLS-arvoon. CLS-arvoon vaikuttavat vain muutokset, jotka ovat käynnistyneet yli 500ms kuluttua käyttäjän toimenpiteestä. Niiden katsotaan alkaneen itsenäisesti ilman käyttäjän vuorovaikutusta.

#4 Varaa etukäteen tilaa mainoksille ja pidä tilasta kiinni

Mainokset ovat suurin yksittäinen visuaalista vakautta verkossa heikentävä syy. Ne ladataan usein dynaamisesti sivulle jälkikäteen, jolloin ne syrjäyttävät sisältöä kohdasta, johon ne ladataan. Tämä johtaa sivun mittojen muuttumiseen, mikä nostaa CLS:ää ja heikentää käyttäjäkokemusta.

Kuten kuvien kanssa, myös mainosten kanssa ratkaisu on varata sivulta jo etukäteen tilaa mainokselle. Tekninen toteutus voi olla esim. niin, että sivun html-koodissa mainoskoodi ympäröidään ylimääräisellä div-tagilla, jolle määritellään leveys ja korkeus. Kun mainos ladataan tähän ennalta varattuun tilaan, sivun mitat eivät muutu latauksen yhteydessä. Käyttämällä ylimääräistä div-tagia, pyritään "estämään" mainoskoodia muuttamasta kokomäärityksiä. Adsensen tapauksessa erikoista on, että ylimääräiselle diville on hyvä määritellä myös id koska muussa tapauksessa Adsensen tiedetään kaikesta huolimatta muuttavan ko. tagin kokomäärittelyjä.

Mainosverkostojen kautta tulevat mainokset voivat vaihdella korkeudeltaan ja leveydeltään, ja tämä on ongelma etukäteen mitoitetun tilan kanssa. Jos mainospaikalle ladattu mainos on huomattavasti pienempi kuin sille varattu tila, mainoksen ympärillä on paljon tyhjää, mikä näyttää erikoiselta. Tilanteeseen ei kuitenkaan ole patenttiratkaisua. Jos tavoitteena on minimoida Cumulative Layout Shift, mainosta ympäröivän tyhjän tilan kanssa on vain elettävä.

Mainospaikka voi jäädä kokonaan tyhjäksi jos mainosverkostolla ei ole tarjota siihen yhtään mainosta. Perinteinen reaktio tähän on ollut sulkea koko mainospaikka lennossa, mutta kumulatiivisen asettelumuutoksen kannalta tämä on huonoin vaihtoehto. Mainosverkoston kanssa kannattaa ottaa käyttöön passback-toiminto, joka palauttaa komennon sivuille siinä tapauksessa että verkostolla ei ole tarjolla mainosta. Sen jälkeen sivusto tuottaa itse mainospaikalle vaikkapa sen omaa sisältöä koskevan noston tai mainoksen.

Täysin visuaalisesti vakaa sivu (CLS on 0) ei usein ole realistinen tavoite, edelläkin mainituista syistä. Googlekaan ei edellytä täydellisyyttä. Sivulta mitattua alle 0.1:n CLS-arvoa pidetään jo hyvänä. Huonona pidetään vasta arvoja, jotka ylittävät 0.25:n. Rimaa kannattaa suunnitelmallisesti laskea, ja pyrkiä täydellisyyden sijaan riittävän hyvään tulokseen. Mainospaikalle voi kiinteän koon (css/height) sijasta määritellä minimikoon (css/min-height), joka vastaa yleisimmin mainospaikalle ladattavan mainoksen kokoa. Näin mainospaikka on suurimman osan ajasta sopivan kokoinen ja muina aikoina sen koon muutos on mahdollisimman pieni.

#5 Sijoita jälkikäteen ladattavat elementit niin alas sivulla kuin mahdollista

Jos et voi välttää tilannetta, jossa sivulle ladattava mainos tai muu elementti väkisin siirtää jälkeensä tulevaa osaa sivusta alaspäin, yritä sijoittaa nämä elementit mahdollisimman alas sivulla. Näin se osa sivua, johon siirtymä kohdistuu on kuitenkin mahdollisimman pieni. Tämä parantaa käyttäjäkokemusta.

#6 Varmista, että verkkofontit ladataan riittävän ajoissa

Jos sivusi käyttää verkkofontteja, varmista, että ne haetaan selaimelle mahdollisimman varhaisessa vaiheessa. Mikäli fontteja ei ole ladattu vielä siinä vaiheessa kun selain näyttää sivuston sisällön ensimmäistä kertaa, oletusfontin korvaaminen verkkofontilla voi fonttien kokoeron ollessa riittävä saada aikaan sisällön siirtymistä.

Keino fonttien latauksen nopeuttamiseen on komentaa jo sivun html-koodissa selainta lataamaan ne ennakkoon link/preload -tagilla.

Lisätietoa

Googlen tiedote asiasta: Timing for bringing page experience to Google Search

Web.dev: Defining the Core Web Vitals metrics thresholds

Web.dev: Optimize Cumulative Layout Shift