CLS ja INP ovat Core Web Vitals -mittareita, jotka mittaavat käyttökokemuksesta muuta kuin nopeutta.
CLS mittaa visuaalista vakautta. Asettelun siirtymä tapahtuu, kun sisältö liikkuu latauksen jälkeen. Käyttäjä lukee artikkelia. Mainos latautuu. Artikkeli siirtyy alaspäin. Käyttäjä menettää paikkansa. CLS kvantifioi tämän ärsytyksen.
INP mittaa vastaavuutta. Käyttäjä klikkaa painiketta. Järjestelmä vastaa. Kuinka kauan vastaus kestää? INP kvantifioi vastauksen viiveen.
Cumulative Layout Shift (CLS) tarkemmin
Mikä aiheuttaa CLS:n
Mainokset latautuvat ja vievät tilaa. Upotukset latautuvat ja vievät tilaa. Kuvat latautuvat ilman määriteltyä korkeutta. Fontit vaihtuvat ja teksti asettuu uudelleen. Sisältöä lisätään JavaScriptillä.
Käytännön esimerkki
Sivun asettelu on vakaa. Käyttäjä alkaa lukea. Mainos latautuu. Mainos on 300 pikseliä korkea. Mainoksen alla oleva sisältö siirtyy 300 pikseliä alaspäin. Käyttäjä menettää paikkansa. Ärsyttävää.
Mittaaminen
CLS mitataan prosenttina siirtyneestä näkymäalueesta. Jos näkymäalue on 1 000 pikseliä korkea ja sisältö siirtyy 300 pikseliä, CLS on 0,3. Tavoite on alle 0,1 (kymmenen prosentin siirtymä on hyväksyttävä, kolmenkymmenen ei).
CLS:n optimointi
Keino yksi: varaa tila
Varaa tila mainoksille, upotuksille ja kuville. Kerro asettelumoottorille: mainos vie 300 pikseliä. Varaa tila. Mainos latautuu varattuun tilaan. Ei siirtymää.
Keino kaksi: lisää sisältö loppuun
Vältä sisällön lisäämistä sivun keskelle. Lisää se loppuun (alla oleva sisältö on jo vierittynyt pois näkymästä). Tai lisää se kiinnitettyyn ylätunnisteeseen (käyttäjä odottaa ylätunnisteen muuttuvan).
Keino kolme: vältä fonttien vaihtumista
Vältä fontin vaihtamista kesken sivun latauksen. Fontin vaihtuminen saa tekstin asettumaan uudelleen. Kaikki kyseistä fonttia käyttävä teksti siirtyy. Käytä `font-display: optional` tai `font-display: swap` -asetusta siirtymän minimoimiseksi.
Keino neljä: määritä kuvan korkeus
Käytä kuville kiinteää korkeutta. Kuva latautuu. Korkeus on määritetty. Kuva täyttää varatun tilan. Ei siirtymää.
Käytännön esimerkki: verkkokaupan tuotesivun CLS:n optimointi
Lähtötilanteen CLS: 0,25 (huono).
Analyysi
Tuotekuvat latautuvat ilman määriteltyä korkeutta. Kuvat siirtävät sisältöä. Osuus CLS:stä 0,10. Tuotteen alla oleva mainos latautuu sivun latauksen jälkeen. Mainos vie tilaa. Sisältö siirtyy. Osuus CLS:stä 0,12. Käyttäjäarvostelut ladataan API:sta. Ne lisätään sivulle. Sisältö siirtyy. Osuus CLS:stä 0,3.
Optimointi
Määritä kuvan korkeus HTML:ssä. Kuvat täyttävät varatun tilan. Osuus CLS:stä: nolla. Varaa tila mainokselle. Mainos latautuu varattuun tilaan. Osuus CLS:stä: nolla. Lataa käyttäjäarvostelut vasta tarvittaessa (lazy load) ruudun alaosassa. Älä lisää niitä ruudun näkyvään osaan. Osuus CLS:stä: nolla (siirtymä tapahtuu näkymäalueen alapuolella).
Uusi CLS: 0,05 (hyvä).
Interaction to Next Paint (INP) tarkemmin
Mitä INP mittaa
INP mittaa vastaavuutta. Käyttäjä klikkaa painiketta. Järjestelmä käsittelee klikkauksen. Päivittää tilan. Piirtää muutoksen. Muutos näkyy ruudulla. INP on aika klikkauksesta visuaalisen päivityksen ensimmäiseen piirtoon.
Käytännön esimerkki
Käyttäjä klikkaa Lisää ostoskoriin -painiketta. Järjestelmä tarkistaa varastosaldon. Päivittää ostoskorin laskurin. Piirtää uuden määrän ruudulle. Jos INP on 100 millisekuntia, käyttäjä näkee laskurin päivittyvän heti. Jos INP on yksi sekunti, laskuri päivittyy sekunnin myöhemmin. Sivu tuntuu jähmeältä.
Mittaaminen
INP mitataan millisekunteina. Alle 200 millisekunnin tavoite on hyvä.
INP:n optimointi
Keino yksi: lyhennä JavaScriptin suoritusaikaa
Pitkä JavaScript estää piirtämisen. Pilko pitkä tehtävä pienempiin tehtäviin. Käytä async-, defer- tai Web Workers -ratkaisuja raskaisiin laskentoihin.
Keino kaksi: optimoi tapahtumankäsittelijät
Tapahtumankäsittelijöiden pitäisi tehdä mahdollisimman vähän työtä. Siirrä raskas työ taustalle.
Keino kolme: optimoi CSS
Raskas CSS voi viivästyttää piirtoa. Käytä CSS containmentia kertomaan selaimelle: tämä elementti on itsenäinen, älä laske koko sivun tyylejä uudelleen, kun tämä elementti muuttuu.
Keino neljä: käytä nopeampaa piirtotekniikkaa
CSS-päivitykset ovat nopeampia kuin JavaScriptin DOM-päivitykset. Käytä CSS-muunnoksia (transform) left- ja top-sijoittelun sijaan. Käytä CSS:n opacity-ominaisuutta näkyvyyden vaihtamisen sijaan.
Käytännön esimerkki: lomakkeen vastaavuus
Lähtötilanteen INP: 400 millisekuntia (huono).
Analyysi
Lomakkeessa on validointi-JavaScript. Käyttäjä kirjoittaa kenttään. Validointi suoritetaan. Validointi on synkroninen. Se estää kentän päivittymisen. Kenttä ei päivity ennen kuin validointi on valmis. Lomake tuntuu jähmeältä.
Optimointi
Siirrä validointi taustalle (Web Worker tai setTimeout). Kenttä päivittyy heti. Validointi tapahtuu taustalla. Käytä lomakkeella CSS containmentia. Kerro selaimelle: lomake on itsenäinen, älä laske koko sivun tyylejä uudelleen. Käytä animaatiossa CSS-muunnosta JavaScript-sijoittelun sijaan.
Uusi INP: 150 millisekuntia (hyvä).
CLS ja INP yhdessä
CLS saa sivun tuntumaan epävakaalta. INP saa sivun tuntumaan jähmeältä. Yhdessä ne vaikuttavat siihen, millaisena käyttäjä laadun kokee.
Sivu, jolla on hyvä LCP mutta huono CLS (nopea mutta hyppivä), tuntuu ärsyttävältä. Käyttäjä syyttää hitautta, vaikka kyse on vakaudesta.
Sivu, jolla on hyvä LCP ja CLS mutta huono INP (nopea ja vakaa mutta jähmeä), tuntuu rikkinäiseltä. Painikkeet eivät reagoi klikkauksiin.
Kaikilla kolmella Core Web Vitals -mittarilla on merkitystä hyvälle käyttökokemukselle.
Usein kysytyt kysymykset
Miten CLS-ongelmat havaitaan?
Käytä Chrome DevToolsia. Klikkaa sivua hiiren oikealla painikkeella. Valitse Inspect. Avaa Performance-välilehti. Tallenna sivun lataus. DevTools näyttää latauksen aikaiset asettelun siirtymät. Voit myös käyttää PageSpeed Insightsia. Lighthouse tunnistaa CLS-ongelmat. Tarkista myös Search Consolen Core Web Vitals -raportti. Se näyttää sivut, joiden CLS on huono. Rakenna tämä suoraan verkkosivustollesi WEMASY-sivustonrakentajalla.
Pitäisikö tilaa varata kaikille mainoksille vai vain kriittisille?
Varaa tila ruudun näkyvän osan mainoksille (mainoksille, jotka latautuvat heti). Älä varaa tilaa ruudun alaosan mainoksille (mainoksille, jotka latautuvat vierityksen jälkeen). Alaosan mainokset voivat siirtää alaosan sisältöä, mutta käyttäjä ei näe siirtymää.
Miten INP:tä optimoidaan monimutkaisissa sovelluksissa, joissa on paljon JavaScriptiä?
Siirrä raskas laskenta Web Workereihin. Web Worker toimii erillisessä säikeessä. Se ei estä pääsäiettä. Pääsäie pysyy reagoivana käyttäjän syötteisiin. Käytä myös kehyksiä, jotka lykkäävät raskasta laskentaa siihen asti, kun vuorovaikutus on käsitelty.
Onko CLS tärkeämpi mobiilissa kuin tietokoneella?
Mobiilissa se on tärkeämpi. Mobiilinäyttö on pienempi. Asettelun siirtymät näkyvät selvemmin. Mobiilikäyttäjä huomaa siirtymän todennäköisemmin ja turhautuu. Priorisoi CLS:n optimointi mobiilissa.
Voivatko hyvä CLS ja INP korvata huonon LCP:n?
Eivät. Jos sivun lataus kestää viisi sekuntia, käyttäjä on jo turhautunut ennen kuin CLS ja INP ehtivät vaikuttaa. Käyttäjä lähtee ennen vuorovaikutusta. Nopea lataus (hyvä LCP) on hyvän kokemuksen edellytys. Hyvä CLS ja INP parantavat nopean sivun kokemusta, eivät hitaan.
Miten CLS:n ja INP:n parannuksia mitataan ja seurataan?
Lähtötilanne: mittaa ennen optimointia. Toteuta optimointi. Uusi mittaus: mittaa sen jälkeen. Käytä Web Vitals -kirjastoa (JavaScript-kirjasto, joka mittaa Core Web Vitals) oikeiden käyttäjien seurantaan. Aseta hälytykset: jos CLS tai INP huononee, hälytys ilmoittaa tiimille.