FCP (First Contentful Paint) mittaa aikaa, joka kuluu sivun ensimmäisen visuaalisen sisältöelementin — tekstin, kuvan, SVG:n tai canvas-elementin — piirtymiseen näytölle. Se kertoo käyttäjälle, että sivu on alkanut latautua ja jotain tapahtuu.
FCP:n merkitys käyttökokemuksessa
FCP on tärkeä käyttökokemuksen mittari, koska se kuvaa hetkeä, jolloin käyttäjä saa ensimmäisen visuaalisen palautteen sivun latautumisesta. Ennen FCP:tä käyttäjä näkee vain tyhjän sivun, mikä aiheuttaa epävarmuutta ja voi johtaa sivulta poistumiseen.
Nopea FCP rauhoittaa käyttäjää — hän näkee, että sivu latautuu, ja odottaa todennäköisemmin loppuun. Hidas FCP aiheuttaa tunteen, ettei sivu toimi, ja käyttäjä saattaa klikata takaisin-painiketta tai sulkea välilehden.
FCP eroaa LCP:stä siinä, että FCP mittaa ensimmäisen sisällön piirtymistä (yleensä navigaatioteksti tai pieni elementti), kun taas LCP mittaa suurimman sisältöelementin piirtymistä. FCP tapahtuu aina ennen LCP:tä.
FCP:n tavoitearvot
Google suosittelee, että FCP-arvo on alle 1,8 sekuntia. Parannusta vaativa arvo on 1,8–3,0 sekuntia ja huono yli 3,0 sekuntia. Nämä ovat tiukemmat kuin LCP:n raja-arvot, koska ensimmäinen sisältö on yleensä pienempi ja nopeammin ladattava.
FCP-arvoa voi mitata Google PageSpeed Insightsissa, Lighthouse-työkalussa ja Chrome DevTools -työkaluissa. Google Search Console raportoi FCP-arvoja osana suorituskykyraportteja.
FCP:n optimointi
FCP:hen vaikuttavat eniten TTFB (palvelimen vasteaika), renderöintiä estävät resurssit ja fonttien lataus. Palvelimen vasteajan pitäminen alhaisena on ensimmäinen askel — hyvä TTFB on alle 200 ms.
Renderöintiä estävä CSS ja JavaScript viivästävät FCP:tä, koska selain ei piirrä sisältöä ennen kriittisten resurssien lataamista. Kriittinen CSS tulisi upottaa inline-muodossa <head>-osioon, ja JavaScript ladata asynkronisesti defer- tai async-attribuutilla.
Web-fontit voivat viivästää FCP:tä, jos selain odottaa fontin latautumista ennen tekstin piirtämistä. font-display: swap -CSS-ominaisuus ohjeistaa selainta näyttämään tekstin varafonteilla, kunnes web-fontti on latautunut.
Yhteenveto
FCP on tärkeä käyttökokemuksen mittari, joka kuvaa hetkeä, jolloin käyttäjä saa ensimmäisen visuaalisen palautteen sivun latautumisesta. Pk-yrityksen kannattaa optimoida TTFB, minimoida renderöintiä estävät resurssit ja huolehtia fonttien latauksen optimoinnista. Nopea FCP antaa sivustolle ammattimaisen ja luotettavan ensivaikutelman.