Miten kuvakoko vaikuttaa Core Web Vitals -mittareihin?

Mihin Core Web Vitals -mittareihin kuvat vaikuttavat?

Largest Contentful Paint (LCP) mittaa, milloin suurin näkyvä kuva tai tekstilohko piirtyy. Näyttävä valokuva voi olla tämä elementti, mutta se ei automaattisesti ole logo tai sivun suurin tiedosto. Tunnista mitattu elementti ensin. Googlen LCP-opas selittää, miksi kuvan löytyminen, lataaminen ja näyttäminen vaikuttavat tulokseen.

Cumulative Layout Shift (CLS) mittaa odottamatonta liikkumista. Ilman varattua tilaa saapuva kuva voi työntää sisältöä alaspäin. CLS-opas suosittelee kuvien mittojen määrittelyä, jotta selain voi varata kuvasuhteen mukaisen tilan.

Interaction to Next Paint (INP) kuvaa käyttöliittymän reagointia käyttäjän toimintaan. Valokuvan pakkaaminen ei automaattisesti korjaa hidasta valikkoa tai painikkeen hidasta toimintaa. Tutki niitä erikseen INP-ohjeen avulla.

Milloin Core Web Vitals -tulos on hyvä?

Taulukossa ovat Googlen Core Web Vitals -ohjeen hyvän tuloksen rajat. Kaikkien kolmen mittarin on alitettava tai saavutettava rajansa todellisten käyntien 75. persentiilissä. Mobiili ja tietokone arvioidaan erikseen. Pienempi kuva tai yksi hyvä laboratoriotesti ei vielä osoita sivun läpäisevän arviointia. Jos ongelma on INP-arvossa, selvitä vuorovaikutuksen viiveet kuvan toistuvan pakkaamisen sijaan.

Aloita näkyvästä pääkuvasta

Tarkista tuotesivulla ensisijainen tuotekuva ja artikkelissa suorituskykyraportin nimeämä kansikuva tai otsikko. Kirjaa tiedostokoko, pikselimitat ja näyttökoko ennen kopion tekemistä, jotta voit verrata lähtötilannetta tulokseen.

Jos valokuva on näyttötilaansa nähden liian suuri, tee pienempi versio koonmuutostyökalulla. Vertaa sitten WebP-versiota JPG–WebP-muuntimella. Arvioi käyttäjälle tärkeitä tuotteen yksityiskohtia ja tekstiä, älä pelkästään tiedoston pienentymistä.

Anna selaimen aloittaa pääkuvan lataus ajoissa

Älä käytä viivästettyä latausta sivun LCP-kuvalle. Pienikin tiedosto voi ilmestyä myöhään, jos sivu odottaa komentosarjoja ennen sen löytämistä. Pyydä teeman tai sivuston kehittäjää tarkistamaan todellinen kuvapyyntö, jos pakkaaminen auttaa vain vähän.

Käytä viivästettyä latausta harkiten alempana oleville kuville. Käsittele galleriaa eri tavalla kuin sen ensimmäistä näkyvää kuvaa: aloitusnäkymä tarvitaan heti, myöhemmät kuvat voivat latautua vierityksen edetessä.

Tarkista raportin LCP-kuva julkaistulta sivulta. Ensimmäisenä lisätty kuva ei välttämättä ole mittauksen kohde. Selaimen pitäisi löytää tärkeä kuva ajoissa, eikä sen latausta pidä siirtää myöhemmäksi (lazy loading). Kehittäjä voi harkita juuri sille asetusta fetchpriority="high". Jos kaikille gallerian kuville annetaan sama korkea latausprioriteetti, tärkein kuva ei enää erotu joukosta. Tarkista pyynnöt muutoksen jälkeen.

Pidä asettelu vakaana

Määritä leveys ja korkeus sivun koodissa ja säilytä kuvasuhde myös kuvan mukautuessa näytön leveyteen. Tarkista sivu sekä puhelimen kapealla näytöllä että tietokoneella. Jos kuva rajataan tarkoituksella, varaa rajauksen näyttöalue johdonmukaisesti.

Jos liike jatkuu, tutki myös viereiset bannerit, upotukset ja fontit. Kuvan vaihtaminen ei korjaa ilmoitusta, joka lisätään artikkelin yläpuolelle vasta sivun ilmestyttyä.

Näytön leveyteen mukautuvan kuvan HTML-mitat, esimerkiksi width="1200" ja height="800", kertovat sen kuvasuhteen. CSS voi silti näyttää kuvan kapeampana asetuksilla max-width: 100% ja height: auto. Varmista, ettei teema korvaa tätä väärällä kiinteällä korkeudella. Tarkoituksella rajattu korttikuva tarvitsee sen sijaan oman, johdonmukaisesti varatun näyttöalueen.

Oletetaan, että uusi kuva on paljon pienempi mutta sen alla oleva kappale liikkuu edelleen kuvan ilmestyessä. Tiedoston pienentäminen vähensi ladattavaa määrää, mutta asettelusta puuttuu yhä kuvalle varattu tila. Korjaa kuvan mitat tai sille varattu alue ja testaa liike uudelleen. Vastaavasti vakaa kuva-alue voi sisältää hitaasti latautuvan kuvan: tilan varaaminen ei pienennä tiedostoa.

Varmista yksi muutos kerrallaan

1. Kirjaa sivun osoite, testilaite ja ongelman aiheuttava sivun osa.
2. Muuta yhtä kuvaa tai latausasetusta.
3. Varmista, että julkaistu sivu pyytää uutta tiedostoa eikä välimuistin vanhaa versiota.
4. Toista sama testi ja tarkista aloitusnäkymä silmämääräisesti.
5. Säilytä muutos, jos kuvanlaatu ja kyseinen mittari tukevat sitä.

Kuvan tallentaminen on vain osa suorituskykyä. Jatka järjestelmällisesti PageSpeed-oppaalla.