LCP mittaa ajan, joka kuluu pääsisällön latautumiseen. Pääsisältö on sivun suurin tekstilohko tai kuva. Useimmilla sivuilla LCP on kriittinen mittari, koska se ratkaisee, milloin sivusta on käyttäjälle hyötyä.
Käyttäjä saapuu sivulle. Sivu alkaa latautua. Selain lataa HTML:n. Selain lataa CSS:n. Selain lataa JavaScriptin. HTML piirtyy. CSS lisää tyylit. JavaScript suoritetaan. Pääsisältö tulee näkyviin. Tämä on LCP.
Yhden sekunnin LCP on erinomainen. Käyttäjä näkee sisällön nopeasti. Kolmen sekunnin LCP on hidas. Käyttäjä odottaa. Viiden sekunnin LCP on erittäin hidas. Käyttäjä lähtee.
Mikä lasketaan Largest Contentful Paintiksi
Sivun suurin elementti ruudun näkyvässä osassa. Yleensä kuva tai otsikko. Esimerkki: etusivu, jolla on pääkuva. Pääkuva on suurin elementti. Pääkuvan näkyviin tulon aika on LCP.
Esimerkki: blogiartikkeli, jolla on otsikko. Otsikko on suurin elementti. Otsikon näkyviin tulon aika on LCP.
Esimerkki: tuotesivu, jolla on tuotekuva. Tuotekuva on suurin elementti. Tuotekuvan näkyviin tulon aika on LCP.
LCP mitataan hetkestä, jolloin käyttäjä klikkaa linkkiä (sivun latauksen alku), siihen asti kun suurin elementti tulee näkyviin. Mukana on HTML:n, CSS:n ja JavaScriptin latausaika, kuvan latausaika ja sivun piirtämiseen kuluva aika.
LCP:n optimointi
Optimoinnin tavoite: alle 2,5 sekunnin LCP.
Keino yksi: optimoi palvelimen vasteaika (TTFB). Nopeampi palvelin tarkoittaa, että HTML saapuu nopeammin. HTML:n saapuminen on piirtämisen edellytys. Lyhennä TTFB:tä parantamalla palvelinta, käyttämällä CDN:ää ja vähentämällä tietokantakyselyjä.
Keino kaksi: pienennä CSS-tiedostoa. Pienempi CSS latautuu nopeammin. CSS pitää ladata ennen kuin sivu voi piirtyä. Pienennä CSS:ää poistamalla käyttämättömät tyylit, minimoimalla tiedosto ja lykkäämällä vähemmän tärkeä CSS.
Keino kolme: pienennä JavaScript-tiedostoa. Suuri JavaScript viivästyttää suoritusta ja piirtämistä. Pienennä JavaScriptiä poistamalla käyttämätön koodi, jakamalla suuret tiedostot ja lykkäämällä vähemmän tärkeä JavaScript.
Keino neljä: optimoi kuvat. Kuvat ovat usein suurimpia elementtejä (LCP). Pienennä kuvan tiedostokokoa pakkaamalla, käyttämällä moderneja formaatteja (WebP) ja pienentämällä kuvan mittoja.
Keino viisi: esilataa kriittiset resurssit. Kerro selaimelle, että kriittinen kuva tai fontti ladataan aikaisin. Kuva latautuu samaan aikaan HTML:n ja CSS:n kanssa. Se lyhentää LCP:tä.
Käytännön esimerkki: blogiartikkelin LCP:n optimointi
Lähtötilanteen LCP: 2,8 sekuntia.
Analyysi: artikkelin pääkuva on suurin elementti. Kuva on kaksi megatavua. Sen lataus kestää 1,2 sekuntia. Kuvan lataus on pullonkaula.
Optimointi
Pakkaa kuva: pienennä se kahdesta megatavusta 0,5 megatavuun. Latausaika on nyt 0,3 sekuntia.
Muunna WebP-formaattiin: pienennä edelleen 0,3 megatavuun. Latausaika on nyt 0,1 sekuntia.
Esilataa kuva: kerro selaimelle, että kuva ladataan aikaisin. Kuva latautuu samaan aikaan HTML:n kanssa. Säästö on 0,2 sekuntia.
Siirrä kriittinen CSS ruudun näkyvään osaan: lyhennä aikaa, jonka jälkeen sivu voi piirtyä. Säästö on 0,3 sekuntia.
Uusi LCP: 1,7 sekuntia.
2,8 miinus 1,2 (kuvan lataus) plus 0,1 (pakatun kuvan lataus) on 1,7 sekuntia. Alle tavoitteen 2,5.
LCP ja eri sivutyypit
Etusivu
Pääkuva on yleensä LCP. Optimoi pakkaamalla kuva, käyttämällä CDN:ää ja esilataamalla.
Blogiartikkeli
Otsikko tai ensimmäinen kuva on LCP. Optimoi vähentämällä CSS:n ja JavaScriptin viivettä ja esilataamalla fontit.
Tuotesivu
Tuotekuva on LCP. Optimoi pakkaamalla kuva ja käyttämällä responsiivisia kuvia eri laitteille.
Kassasivu
Lomake tai painike on LCP. Optimoi vähentämällä CSS:ää ja JavaScriptiä sekä esilataamalla kriittiset resurssit.
Eri sivutyypeillä on eri optimointikeinot. Tunne oma LCP-elementtisi. Optimoi se elementti.
LCP mobiilissa ja tietokoneella
Mobiilin LCP on yleensä hitaampi kuin tietokoneen. Mobiiliverkko on hitaampi. Mobiililaitteilla on vähemmän laskentatehoa.
Tietokoneen lähtötilanteen LCP: 1,5 sekuntia. Mobiilin lähtötilanteen LCP: kolme sekuntia.
Mobiili on kaksi kertaa hitaampi. Mobiilikäyttäjät kokevat hitauden selvemmin.
Optimoi ensin mobiili. Keskity kuvien koon pienentämiseen (mobiilin kaistanleveys on rajallinen). Vähennä JavaScriptiä (mobiililaitteet jäsentävät hitaammin). Käytä mobiiliystävällisiä formaatteja.
LCP:n parannuksen mittaaminen
Lähtötilanteen LCP
Mittaa ennen optimointia.
Toteuta optimointi
Uusi LCP
Mittaa optimoinnin jälkeen.
Parannus
Lähtötilanteen LCP miinus uusi LCP.
Esimerkki
Lähtötilanne 2,8 sekuntia. Optimoinnin jälkeen 1,7 sekuntia. Parannus on 1,1 sekuntia.
Laske vaikutus
1,1 sekunnin parannus voi nostaa konversioprosenttia yhdellä prosentilla (riippuu lähtötilanteesta ja toimialasta). Viidenkymmenen tuhannen kuukausittaisen kävijän kohdalla se tarkoittaa viittäsataa lisäkonversiota, kun tilauksen arvo on sata dollaria. Viisikymmentä tuhatta dollaria kuukaudessa. Kuusisataa tuhatta dollaria vuodessa.
Vertaa optimoinnin kustannuksiin. Jos kustannus on viisikymmentä tuhatta dollaria, takaisinmaksuaika on yksi kuukausi. Erinomainen tuotto.
Usein kysytyt kysymykset
Mistä tiedämme, mikä elementti on LCP-elementtimme?
Käytä Google Chromen DevToolsia. Klikkaa sivua hiiren oikealla painikkeella. Valitse Inspect. Avaa Performance-välilehti. Tallenna sivun lataus. DevTools näyttää LCP-elementin. Voit myös käyttää PageSpeed Insightsia. Lighthouse tunnistaa LCP-elementit. Tarkista myös Search Consolen Core Web Vitals -raportti. Se näyttää sivujen LCP-elementit. Rakenna tämä suoraan verkkosivustollesi WEMASY-sivustonrakentajalla.
Pitäisikö LCP:tä optimoida kaikilla sivuilla vai vain etusivulla?
Optimoi kaikki sivut. Priorisoi kuitenkin liikenteen mukaan. Etusivu on tärkeä, mutta niin ovat myös tuotesivut (verkkokaupassa) tai artikkelisivut (julkaisijalla). Mittaa LCP kaikilla tärkeillä sivuilla. Priorisoi optimointi liikennemäärän mukaan.
Auttaako esilataus aina LCP:tä?
Ei aina. Esilataus käyttää kaistanleveyttä. Jos esilataat turhan resurssin, käytät kaistaa, jolla olisi voinut ladata tärkeän resurssin. Esilataa vain kriittiset resurssit (pääkuva, kriittinen fontti). Älä esilataa vähemmän tärkeitä resursseja.
Miten LCP:tä optimoidaan, kun pääsisältö on dynaamista (ladataan API:sta)?
API-kutsun viive lisää LCP:tä. Lyhennä API:n vasteaikaa optimoimalla tietokanta, tallentamalla vastauksia välimuistiin ja käyttämällä CDN:ää. Näytä myös luurankonäkymä tai paikkamerkkisisältö API:n latautuessa. Paikkamerkki ilmestyy heti. Käyttäjä kokee sivun latautuneeksi. Varsinainen sisältö täyttyy perässä. Koettu LCP on nopeampi kuin todellinen LCP.
Pitäisikö LCP-elementille käyttää lazy loadingia?
Ei. Lazy loading viivästyttää kuvaa, kunnes se on tulossa näkymään. Jos kuva on ruudun näkyvässä osassa (LCP-elementti), lazy loading viivästyttää kuvaa turhaan. Käytä lazy loadingia vain ruudun alaosan kuville. Lataa LCP-elementti heti.
Miten LCP eroaa FCP:stä (First Contentful Paint)?
FCP on hetki, jolloin mitä tahansa sisältöä ilmestyy (se voi olla pieni teksti). LCP on hetki, jolloin pääsisältö ilmestyy (yleensä suurempi kuva tai otsikko). FCP on nopeampi kuin LCP. LCP on tärkeämpi käyttökokemukselle. Paranna ensin LCP:tä.