Lighthousen käyttöönoton jälkeen on ilmaantunut uusia sivun nopeuteen liittyviä parametreja. Yksi tärkeimmistä näistä parametreista on First Contentful Paint (FCP). Lighthouse-versiossa 10, joka tuli voimaan kesäkuusta 2024, FCP:n vaikutus kokonaispisteisiin on 10 %..
FCP:n omaksumiseksi ja ymmärtämiseksi mittarina on välttämätöntä ensin tarkastella sen taustalla olevaa psykologiaa. Konsepti on samanlainen kuin hisseihin asennetut peilit:
Lyhyesti sanottuna: 1900-luvun alkupuoliskolla hissien käyttö korkeissa rakennuksissa lisääntyi merkittävästi, mutta hissijärjestelmät olivat primitiivisiä nykypäivään verrattuna. Tästä syystä syntyi ajatus peilien asentamisesta hisseihin, jotta hississä vietetty aika tuntuisi lyhyemmältä.
Palatakseni aiheeseen: FCP on se kohta, joka saa sinut odottamaan latausajan aikana, kun yrität päästä sivulle. First Contentful Paint -sovelluksen määritelmä on aika, joka kuluu ensimmäisen tekstin, kuvan, ei-valkoisen kankaan jne. näyttämiseen käyttäjälle. FCP:n yksikkö on sekuntia.
Lighthousessa FCP:n väriasteikko määritetään seuraavasti:
- 0-2 sekuntia: Vihreä => Nopea
- 2-4 sekuntia: Oranssi => Tarvitsee parannusta
- 4+ sekuntia: Punainen => Hidas
HTTP-arkiston tietojen mukaan huomioitavien sivustojen määrä nopea on 25%, ja 50 % olemassa olevista sivustoista on luokiteltu hitaiksi.
Mitä voidaan tehdä FCP:n parantamiseksi?
Pienennä palvelimen vasteaikaa
Yleensä tämä voidaan tulkita parannuksiksi, joita tarvitaan palvelimen ja ohjelmiston palvelinpuolella. Voit luetella ongelmat, jotka vaikuttavat negatiivisesti palvelimen vasteaikaan:
- Palvelimen jakaminen, määritykset (eli palvelimen asetukset) ja palvelinresurssit voivat olla ongelma. Palvelimesi kapasiteettia tulee lisätä liikenteen mukaan. Joissakin tapauksissa huonosti kirjoitetut tietokantakyselyt ja erittäin monimutkaiset ohjelmistokomponentit voivat vaikuttaa vakavasti palvelimen vasteaikaan.
- CDN:n (Content Delivery Network) käyttämättä jättäminen voi aiheuttaa viiveitä sisällön käyttöön, mikä vaikuttaa FCP:hen. Sisällön koon kasvaessa esimerkiksi jos suurta animoitua GIF-tiedostoa tai videota yritetään kutsua ilman CDN:ää ja pääpalvelin on eri mantereella, sinun on ehkä harkittava CDN-ratkaisuja FCP:n ratkaisemiseksi.
- Staattisen sisällön näyttämättä jättäminen oikean ja johdonmukaisen välimuistikäytännön avulla voi ylikuormittaa palvelimellesi tarpeettomasti kävijämäärän kasvaessa. Jos esimerkiksi et säilytä logoasi pitkällä aikavälillä välimuistissa, kun lataat sitä jokaiselle sivulle, vahingoitat tarpeettomasti palvelimesi vasteaikaa.
- Tarpeettomat sivun uudelleenohjaukset sivun avaaminen voi tarpeettomasti vaikuttaa FCP:hen.
Aiemmin oli esimerkiksi tällaisia asetuksia: kun käyttäjä halusi siirtyä sivustolle, siellä oli HTTP-HTTS-uudelleenohjaus, ja jos se oli mobiili, HTTPS-uudelleenohjaus mobiililaitteelle (esim. https:// www:stä https://m), ja jos sivu poistettiin ja ohjattiin muualle 301:llä, tuntui siltä, että käyttäjää siirrettäisiin verotoimistossa pöydältä pöydälle. Tämä on äärimmäinen esimerkki ymmärtämisen helpottamiseksi, mutta jos ohjaat sivun toiseen URL-osoitteeseen 301-uudelleenohjauksella ja sitten uudelleenohjaat sivun toiselle 301-uudelleenohjauksella, saatat tehdä saman epäloogisen asennuksen.
- Jos sinä älä käytä preconnect tai DNS-prefetchiä etuliitteet, kun muodostat yhteyden kolmannen osapuolen palveluihin ja muodostat yhteyden moniin kolmannen osapuolen palveluihin, et tee mitään hyödyllistä FCP:lle.
Vähennä renderöinnin estäviä resursseja
Minun on myönnettävä, että tämän yksittäisen rivikohtana kirjoitetun kohdan käsitteleminen voi kestää kuukausia.
Tämän saavuttamiseksi on olemassa ratkaisumenetelmä, jossa kaikki JS, CSS ja vastaavat resurssit, jotka estävät sivun hahmontamisen, ladataan sivun luomisajan jälkeen, mutta sivuston alunperin näkyvä osa ladataan ensin sivuston latautuessa.. Tätä varten kaikki JS-, CSS- ja vastaavat resurssit on kuitenkin tutkittava ja aikaavievimmät prosessit on erotettava toisistaan. Lisäksi mahdollisimman harvojen kolmannen osapuolen palveluiden käyttäminen auttaa optimoimaan FCP:n.
