First Contentful Paint

Mikä on First Contentful Paint (FCP)?

First Contentful Paint (FCP) on tapa mitata sivun latausnopeutta. Sivun nopeutta ei voi tiivistää yhteen ajanhetkeen, sillä latausprosessissa on itse asiassa useita hektiä, jolloin kävijä saattaa kokea sivuston latautuvan nopeasti tai hitaasti. FCP mittaa aikaeroa sivun pyyntöhetkestä siihen, kun ensimmäinen merkityksellinen sisältö renderöidään näytölle ensimmäistä kertaa.

Mitä tämä sitten tarkalleen kertoo? Se kertoo, että FCP on ensisijaisesti "käyttäjäkeskeinen mittari", koska se kertoo jotain kävijän kokemasta latausnopeudesta. Se kertoo jotain user experience -kokemuksesta. FCP-hetkellä voit olla varma, että kävijä todella näkee "jotakin" näytöllä.

Puretaan sanat osiin: 'First', 'Contentful' ja 'Paint'.

1. First:  First tarkoittaa tietysti ensimmäistä tarkkaa hetkeä, jolloin jotain merkittävää ilmestyy selaimeesi.
2. Contentful: Contentful tarkoittaa HTML-elementtiä, jossa on sisältöä. Ei siis taittoelementtiä kuten tyhjää elementtiä tai taustaväriä, vaan pikemminkin tekstiä, kuvaa (mukaan lukien taustakuva), SVG:tä tai canvas-elementtiä.
   
3. Paint: Paint tarkoittaa (suunnilleen), että selain on valmis näyttämään jotain näytöllä. Tämä vaikuttaa yksinkertaiselta, mutta itse asiassa se on selaimen monimutkaisin tehtävä. Jotta selain voi näyttää jotain näytöllä, sen on kyettävä laskemaan kaikki elementin ominaisuudet. Alla on esimerkki renderöintiprosessista, joka vaaditaan ennen kuin mitään voidaan lisätä näytölle.

Mikä on hyvä First Contentful Paint -tulos?

Hyvä FCP-tulos on mikä tahansa alle 1,8 sekuntia. Jos FCP-tuloksesi on 1,8–3 sekuntia, se vaatii parannusta. Yli 3 sekunnin FCP-tulosta pidetään huonona. Läpäistäksesi Core Web Vitals -arvioinnin Largest Contentful Paint -mittarissa vähintään 75 % kävijöistäsi tarvitsee 'hyvän' FCP-tuloksen.

Kuten aina Core Web Vitals -mittareissa, nopeampi First Contentful Paint -tulos on parempi kuin hitaampi. 

Miten mittaat First Contentful Paint (FCP) -tuloksesi?

Google mittaa FCP:n keräämällä dataa oikeilta käyttäjiltä. Data tallennetaan CrUX-tietokantaan. Data on julkisesti saatavilla CrUX API:n tai Google BigQueryn kautta. FCP voidaan mitata myös niin kutsutuilla laboratoriottesteillä. Yleisin laboratoriotesti on Lighthouse.

First Contentful Paint -tuloksen hakeminen CrUX-tietokannasta

First Contentful Paint voidaan lukea CrUX-tietokannasta pagespeed.web.dev:n, CrUX API:n tai Google BigQueryn kautta.

First Contentful Paint -mittaaminen Real User Monitoring (RUM) -seurannalla 

RUM Tracking tarkoittaa Real User Monitoring -seurantaa. Real User Monitoring -seurannalla voit seurata First Contentful Paint -tulosta todellisten käyttäjien vuorovaikutusten kautta. RUM Tracking -seurannan etuna on, ettei sinun tarvitse odottaa 28 päivää tuoreen datan saamiseksi, ja dataa voidaan hakea ja analysoida huomattavasti yksityiskohtaisemmin.

FCP:n mittaaminen Lighthouse-työkalulla

1. Avaa sivu – Chromessa – jonka FCP:n haluat mitata. Varmista, että teet tämän incognito-tilassa, jotta lisäosat eivät häiritse ja mahdollisesti hidasta sivusi FCP:tä.
2. Napsauta sivua hiiren oikealla painikkeella ja valitse Tarkastele elementtiä. Näin avaat Chromen kehittäjäkonsolin.
3. Konsolin yläosassa näet Lighthouse-välilehden. Napsauta sitä. Valitse sitten Kategoriat-kohdasta Performance (jätä muut tyhjiksi) ja valitse Laite-kohdasta Mobile.
4. Napsauta nyt Generate Report. Lighthouse luo sivustasi nopeusraportin. Raportin vasemmassa yläkulmassa näet sivusi FCP-tuloksen.

Tämä on kuvakaappaus tämän sivun Lighthouse-raportista. Tämän sivun FCP mobiililaitteella on 0,8 sekuntia! Ei hassummin, eikö?

FCP:n mittaaminen verkkotyökalulla

Voit mitata FCP:n myös useilla verkkotyökaluilla. Tunnetuimpia ovat GTMetrix, pingdom ja pagespeed.web.dev. Näitä työkaluja on helppo käyttää ja ne antavat tietoja LCP:stä tietyissä laboratorio-olosuhteissa.

First Contentful Paint -tuloksen parantaminen

Nyt kun tiedät, mikä First Contentful Paint on, voimme ryhtyä nopeuttamaan sitä. Nopean FCP:n perusidea on itse asiassa melko yksinkertainen: varmistetaan, että selain voi aloittaa renderöinnin välittömästi. Mikä tahansa renderöintiä viivästyttävä tekijä johtaa huonoon FCP-tulokseen.

Aivan kuten Largest Contentful Paint, myös First Contentful Paint voidaan jakaa 2 tai 4 kategoriaan:

1. Time to First Byte (TTFB) – Aika sivun latauksen aloittamisesta siihen, kun selain vastaanottaa ensimmäisen tavun HTML-koodista. 
2. Resurssin latausviive – Aika TTFB:n ja FCP-resurssin latauksen aloittamisen välillä
   
3. Resurssin latausaika – Aika, joka kuluu itse FCP-resurssin lataamiseen.
   
4. Elementin renderöintiviive – Aika FCP-resurssin latauksen valmistumisesta LCP-elementin täydelliseen renderöintiin
   

Nopeusvinki: Voit helposti eliminoida vaiheet 2 & 3 varmistamalla, ettei LCP-elementti vaadi verkkoresurssia. Tekstielementin tapauksessa harkitse font-display:swap-asetuksen käyttöä. Pienen kuva-elementin tapauksessa harkitse kuvan sijoittamista inline-muotoon.

Tämä jättää meille optimoitavaksi vain Time to First Byte -ajan ja elementin renderöintiviiveen.

Alla on 14 ratkaisua, joita käytän usein FCP:n parantamiseen. Ole kuitenkin varovainen, sillä ratkaisun käyttäminen väärässä paikassa voi itse asiassa aiheuttaa viiveitä. Siksi on parasta konsultoida sivunopeusasiantuntijaa ennen kuin aloitat itse.

1. Nopea palvelinvaste (TTFB)

TTFB (aika pyynnön ja palvelimen lähettämän ensimmäisen tavun välillä) on aina ensimmäinen vaihe renderöintiprosessissa. Siitä eteenpäin selaimesi alkaa suorittaa useita tehtäviä samanaikaisesti, ja lisäoptimointien vaikutus alkaa vähentyä. HTML-koodi on ainoa pyyntö, joka vaikuttaa suoraan kaikkiin nopeusmittareihin.

Nopeutta, jolla HTML-koodi lähetetään palvelimelta, mitataan usein Time to First Byte (TTFB) -arvona. On tärkeää tehdä tämä mahdollisimman nopeaksi. Usein tämä tehdään ottamalla käyttöön palvelinpuolen välimuisti.

Mitä tulee Time to First Byte -aikaan, pienempi on aina parempi. 

Voit helposti mitata Time to First Byte -ajan itse. Se tehdään seuraavasti:

1. Avaa Google Chromen kehittäjäkonsoli pikanäppäimellä Ctrl-Shift-I.
   
2. Konsolin yläosassa näet Network-välilehden. Napsauta sitä.
3. Lataa sivu uudelleen Ctrl-R:llä.
   
4. Näet nyt kaikki verkkopyynnöt, jotka Chrome on lähettänyt palvelimellesi.
5. Napsauta ylintä verkkopyyntöä, joka on pyyntö itse sivullesi.
6. Nyt saat lisätietoja tästä verkkopyynnöstä.  Napsauta tietojen yläosassa olevaa timing-välilehteä nähdäksesi sivusi TTFB:n.

2. HTTP/3

HTTP/3 on HTTP-protokollan kolmas versio. HTTP/3 ratkaisee monia vanhempien HTTP/1.1- ja HTTP/2-protokollien ongelmia. Esimerkiksi HTTP/2:sta lähtien voit lähettää useita tiedostoja samanaikaisesti saman yhteyden kautta. HTTP/3 tarjoaa nopeamman alkuyhteyden ja vähemmän ongelmia pienistä verkkokatkoksista.

Menemättä liian yksityiskohtiin, HTTP/3 mahdollistaa merkittävän nopeusparannuksen, erityisesti hitaammissa verkoissa kuten mobiiliverkoissa. Verkkojärjestelmänvalvojasi voi kertoa, onko verkkopalvelimesi jo yhteensopiva nopeamman HTTP/3-protokollan kanssa.

Voit itse tarkistaa, käyttääkö verkkosivustosi jo nopeampaa HTTP/3-protokollaa. Avaa Google Chromen verkkotyökalujen tarkastelu pikanäppäimellä Ctrl-Shift-I. Napsauta taulukon otsikkoriviä hiiren oikealla painikkeella ja valitse Protocol. Lataa nyt sivu uudelleen nähdäksesi, mitä protokollaa sivustosi käyttää.

3. Selaimen välimuisti

Verkkoyhteys on usein heikko lenkki sivunopeuden kannalta. Eikö olisikin paljon helpompaa ohittaa verkko kokonaan?

Kun kävijä on käynyt sivustollasi aiemmin, voit määrittää, voiko selain tallentaa verkkoresursseja  (esimerkiksi tyylitiedostoa)  ja kuinka kauan. Joka kerta kun kävijä tarvitsee jotain näistä tiedostoista uudelleen, ne nousevat selaimen välimuistista hetkessä. Tämän ansiosta selain voi aloittaa renderöinnin paljon nopeammin ja nopeuttaa FCP:tä.

4. Pakkaus

Verkkonopeus on lähes kaikissa tapauksissa heikko lenkki. Hyvän First Contentful Paint -tuloksen kannalta on erittäin tärkeää, että tiedostot lähetetään verkon kautta mahdollisimman nopeasti. Pakkaus vähentää palvelimelta lähetettävien tavujen määrää – vähemmän tavuja tarkoittaa vähemmän odotusaikaa verkkoresurssille. Pakkaus on mielestäni tekniikka, joka ei saa ansaitsemaansa huomiota. Valitettavasti liian monet verkkosivujen ylläpitäjät "ottavat pakkauksen käyttöön" eivätkä sitten enää katso asiaa uudelleen. Ja se on sääli, koska se on helppo tapa tehdä asioista hieman nopeampia.

Kaksi suosittua pakkaustekniikkaa ovat Gzip ja Brotli. Gzip on käytetyin pakkaustekniikka, mutta Brotli on nopeasti kuromassa eroa kiinni. Brotli on Googlen itsensä luoma ja tarjoaa 15–20 % parempia tuloksia HTML-, JavaScript- tai CSS-tiedostojen pakkaamisessa. Brotli on siksi ihanteellinen verkkokäyttöön.

Dynaamisen ja staattisen pakkauksen välillä on myös eroja. Dynaamisessa pakkauksessa tiedosto pakataan juuri ennen lähettämistä verkkopalvelimen kautta; staattisessa pakkauksessa pakattu tiedosto on tallennettu palvelimelle valmiiksi. Tämä on usein paljon älykkäämpi tapa pakata, mutta sitä käytetään harvoin.

5. Web-fonttien varhainen lataus resurssivihjeillä

Resurssivihjeet käynnistävät latauksen tai verkkoyhteyden ennen kuin selain tekisi sen itse. Joitakin verkkoresursseja, kuten web-fontteja tai kuvia, ladataan vasta sen jälkeen, kun selain on varma, että ne tarvitsee näyttää.

Jos olet varma, että tarvitset resurssia sivuston näkyvän osan renderöintiin, on lähes aina hyvä idea sisällyttää "resurssivihje". Tämä varmistaa, että selain aloittaa latauksen tai yhteyden muodostamisen resurssiin välittömästi. Tämän ansiosta resurssi on saatavilla aiemmin ja selain voi aloittaa renderöinnin nopeammin.

Ole kuitenkin varovainen resurssvihjeiden kanssa – jos käytät niitä väärin, ne voivat itse asiassa hidastaa sivuasi.

Varhainen lataus "preloading"-tekniikalla

<link rel="preload" href="/static/font/opensans600.woff2" as="font" type="font/woff2" crossorigin>

Preload-linkki on yksi tehokkaimmista työkaluista sivunopeuden arsenaalissa. Preload-linkin avulla lataat verkkoresurssin, jota tarvitset myöhemmin. Tämä on usein erittäin hyvä idea fonteille, kriittisille skripteille ja kuville sivun näkyvässä osassa.

Yhteyden muodostaminen etukäteen preconnect-tekniikalla

Preconnect-linkki muodostaa yhteyden palvelimeen etukäteen. Tämä on hyödyllistä, kun isännöit tiedostoja kolmannen osapuolen palvelimella, kuten CDN:llä tai Google Analyticsilla.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

6. Seuraavan sivun ennakkohaku prefetch-tekniikalla

<link rel="prefetch" href="/page2.html">

Prefetch-tekniikalla voit hakea matalan prioriteetin resursseja. Tämä on hyödyllinen tapa hakea resursseja, joita arvelet tarvitsevasi myöhemmin – esimerkiksi kun odotat jonkun napsauttavan seuraavan sivun linkkiä.

7. Vältä uudelleenohjauksia

Yleinen virhe on liian pitkä uudelleenohjausketju. Selitän: Sivustosi toimii todennäköisesti suojatun yhteyden kautta. Kun kävijä kirjoittaa sivustosi osoitteen lisäämättä https-etuliitettä, hänet ohjataan verkkosivustosi suojaamattomaan versioon. Jos kaikki on kuitenkin asetettu oikein, kävijä ohjataan suojatulle verkkosivustolle. Näet tämän alla olevassa vihreässä esimerkissä.

Mutta joskus uudelleenohjaus tapahtuu yhden tai useamman välivaiheen kautta, kuten punaisessa esimerkissä näkyy. Juuri nämä välivaiheet aiheuttavat sivuston hidastumisen, mikä johtaa huonoon First Contentful Paint -tulokseen. Jokainen välivaihe maksaa ylimääräistä aikaa, joka voi kertyä nopeasti. Varmista siis aina, että pääset oikealle sivulle yhdellä uudelleenohjauksella.

8. Minimoi CSS

Ulkoinen CSS-tiedosto on aina renderöinnin estävä. Tämä tarkoittaa, ettei selain normaalisti voi aloittaa sisällön näyttämistä ennen kuin kaikki tyylitiedostot on ladattu ja analysoitu. Siksi on parasta pitää tyylitiedostot mahdollisimman pieninä. Näin tyylitiedoston lataamista ei tarvitse odottaa yhtä kauan.

CSS-koon pienentäminen lyhytkoodilla

Yksi tapa pienentää CSS:n kokoa on käyttää lyhytkoodeja. Nämä ovat yksirivistiä, joiden avulla voit kirjoittaa CSS-valitsimen tärkeimmät ominaisuudet yhdelle riville.

body{
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 0.94rem;
    line-height: 1.6;
    font-family: "Segoe UI", "Segoe UI", system-ui, -apple-system, sans-serif;
}

Voit myös kirjoittaa sen näin:

body{font: 400 .94rem/1.6 Segoe UI,Segoe UI,system-ui,-apple-system, sans-serif;}

CSS-koon pienentäminen edelleen

CSS:n kokoa voidaan pienentää entisestään yhdistämällä valitsimia pilkulla, poistamalla rivinvaihdot ja välilyönnit sekä kirjoittamalla lyhyempiä värikoodeja.

h1{
  color : #000000;
}
h2{
  color : #000000;
}
h3{
  color : #000000;
}
h4{
  color : #000000;
}
h5{
  color : #000000;
}

Voidaan lyhentää muotoon

h1,h2,h3,h4,h5{color:#000}

9. Kriittinen CSS

Voimme viedä CSS:n askeleen pidemmälle käyttämällä kriittistä CSS:ää. Kriittinen CSS on välttämätön nopealle verkkosivustolle ja nopealle First Contentful Paint -tulokselle.

Kriittinen CSS on kokoelma kaikista valitsimista (kuten body, p, h1 jne.), joita tarvitset sivun näkyvän osan näyttämiseen. Älä laita tätä kriittistä CSS:ää erilliseen tyylitiedostoon; lisää se sen sijaan suoraan sivun <head>-osioon. Näin sinun ei tarvitse ladata uutta tiedostoa ja selain voi aloittaa renderöinnin salamannopeasti. Tämä tekee FCP:stä nopeamman. CSS, jota et suoraan tarvitse sivun näkyvässä osassa, ladataan ensimmäisen renderöintikierroksen jälkeen. Kävijäsi näkökulmasta sivu on jo valmis – kukaan ei huomaa, että uusia tyylejä lisätään vielä taustalla.

Kriittisen CSS:n voi helposti luoda omalla kriittisen CSS:n työkalullamme. Liitä verkkosivusi URL-osoite työkaluun, niin me hoidamme loput puolestasi!

10. Lykkää JavaScript-lataamista

Yksi yleisimmistä syistä hitaaseen First Contentful Paint -tulokseen on JavaScript. Riippuen siitä, miten käytät JavaScript-koodia, se voi estää sivun renderöinnin. Normaalisti JavaScript ladataan ja suoritetaan ennen renderöintipuun rakentamista. Ilman renderöintipuuta selain ei voi näyttää mitään näytöllä – tämä koskee myös FCP:tä.

Voimme kiertää tämän lykkäämällä JavaScript-koodin suoritusta. Tämän voi tehdä kolmella tavalla

Asynkroninen JavaScript

<script async src="async.js"></script>

Lisäämällä async-attribuutin script-tagiin sivun rakentaminen ei enää esty JavaScript-koodin lataamisen aikana. Async-attribuutti osoittaa, että lataus ja renderöintipuun rakentaminen voivat tapahtua samanaikaisesti.

Kun skripti suoritetaan, sivu estyy. Useimmissa tapauksissa async-attribuutin ansiosta selaimella on ollut tarpeeksi aikaa rakentaa tärkeä osa sivusta, ja First Contentful Paint on jo näytöllä.

Lykätty JavaScript

<script defer src="async.js"></script>

Defer-attribuutti toimii suunnilleen samalla tavalla kuin async-attribuutti. Lisäämällä defer-attribuutin script-tagiin skripti voidaan myös ladata samanaikaisesti sivun rakentamisen kanssa. Kun kaikki skriptit on ladattu, ne suoritetaan siinä järjestyksessä kuin ne löytyivät HTML-koodista. Tämäkin voi estää sivun näyttämisen, mutta useimmissa tapauksissa First Contentful Paint on jo näytöllä.

11. Älä luota ulkoisiin resursseihin

Ulkoiset resurssit, kuten ulkoiset fontit, ulkoiset kuvat, ulkoiset tyylitiedostot tai ulkoiset skriptit, ovat mahdollinen pullonkaula First Contentful Paint -tuloksessa. Koska sinulla ei ole hallintaa palvelimeen, jolla tiedostot sijaitsevat, et tiedä kuinka nopeasti ne lähetetään. Lisäksi et voi käyttää olemassa olevaa yhteyttä verkkopalvelimeen. Uusi yhteys uuteen palvelimeen on muodostettava – ja se vie aikaa.

Ulkoisten resurssien estäminen

Ei ulkoisia resursseja

12. Käytä oikeaa fonttimuotoa

Fontit ansaitsevat erityishuomiota First Contentful Paint -tuloksen kannalta. Noin 99 %:lla tarkastelemistamme sivuista FCP-elementti on tekstirivi. Kun käytät ulkoisia web-fontteja, nämä fontit on ensin ladattava palvelimelta, mikä tietysti vie aikaa. 

Viime aikoina web-fontit ovat saaneet enemmän huomiota, ja uusia, nopeampia fonttimuotoja on tullut lisää. Nopein fonttimuoto tällä hetkellä on woff2, jota seuraa woff. Woff2:ta tukee jokainen moderni selain. 

Voit määrittää web-fonttisi suositusjärjestyksen CSS font-face -määrittelyssä. Se tehdään seuraavasti:

 @font-face {  
   font-family: 'myFont';  
   font-weight: 400;  
   font-style: normal;  
   font-display: swap;
   unicode-range: U+000-5FF 
   src: local('myFont'),
        url('/fonts/myFont.woff2') format('woff2'),
        url('/fonts/myFont.woff') format('woff');
}

13. Font display:swap

Web-fontteja käytettäessä fonttien oletuskäyttäytyminen on olla näyttämättä tekstiä sivulla ennen kuin fontti on ladattu. Tämä on yleensä suoraan First Contentful Paint -tuloksen kustannuksella. 

Voit ratkaista tämän käyttämällä font-display:swap-asetusta. Tällä voit valita näyttää tekstin sivulla joka tapauksessa selaimelle tunnetulla fontilla, samalla kun web-fontti ladataan taustalla.

Ilman font-display:swap-asetusta

Font-display:swap-asetuksella

Lue koko artikkelimme  Ensure text remains visible during webfont load

14. Minimoi DOM-koko

Verkkosivu koostuu HTML-koodista. Ensimmäinen asia, jonka selain tekee, on muuntaa HTML DOM-solmuiksi. Se on HTML-elementtien puumainen rakenne, jota käytetään myöhemmin renderöintipuun rakentamiseen. Renderöintipuusta selain aloittaa renderöinnin; lopulta verkkosivu ilmestyy näytölle. 

DOM-solmujen (HTML-elementtien) määrä ja niiden syvyys puurakenteessa määrittävät, kuinka monimutkaista selaimen on rakentaa sivusi. Myös CSS:n ja JavaScript-koodin analysointi vie enemmän aikaa, kun DOM-solmuja on liikaa. Tämäkin on suoraan FCP:n kustannuksella.

Ratkaise tämä:

• Lataa osia verkkosivustasi laiskasti
  Alkuperäisen näytön nopeuttamiseksi harkitse verkkosivustosi osien, kuten alatunnisteen, lataamista AJAX:lla myöhemmin.
• Hyödynnä content-visibility-ominaisuutta
  CSS-ominaisuus content-visibility käskee selainta ohittamaan tyylit, asemoinnin ja piirtämisen renderöinnin aikana. Se tekee näin juuri ennen kuin elementti tulee näkyväksi.
•  Jaa suuret sivut useiksi sivuiksi
  DOM-solmujen määrää voidaan vähentää jakamalla suuret sivut useiksi sivuiksi.
•  Toteuta loputon vieritys
  Loputon vieritys on käytännössä laiskaa latausta: kun vierität toistuvien elementtien, kuten kuvien (pinterest) tai suurten datataulukoiden, läpi, loputon vieritys voi nopeuttaa sivuasi merkittävästi.
• Vältä JavaScript DOM -vuorovaikutusta
  Ole erityisen varovainen JavaScript-koodin kanssa, kun sivullasi on suuri määrä DOM-solmuja. Komento voi silloin ladata suuren määrän DOM-solmuja, mikä lisää muistin käyttöä.
• Vältä monimutkaisia CSS-määrittelyä
  Ole erityisen varovainen monimutkaisten CSS-komentojen kanssa, kun DOM-solmuja on paljon. Esimerkiksi last-child-tila on tarkistettava jokaiselle div-elementille sivullasi.
• Käytä web worker -säikeitä säästääksesi selaimen pääsäiettä
  Web worker -säikeet ovat JavaScript-koodia, joka voi toimia rinnakkain verkkosivusi kanssa. Voit antaa näille web worker -säikeille komentoja, jotka suoritetaan taustalla. Kun web worker on suorittanut komennon, se välittää tuloksen alkuperäiselle sivulle. Tämän etuna on, että voit edelleen suorittaa monimutkaista JavaScript-koodia sivun jäätymättä.