Näin optimoit kuvat Google PageSpeediä varten

Tallenna hyödyllinen lähtötilanne

Avaa PageSpeed Insights, syötä tutkittavan sivun julkinen osoite ja käynnistä mobiili- tai tietokonetesti.

1. Testaa julkaistun sivun tarkka osoite.
2. Kirjaa, tarkasteletko mobiilia vai tietokonetta.
3. Kirjaa raportissa mainittu kuva ja sen nykyinen osoite.
4. Tallenna mitat ja tiedostokoko raportin rinnalle.
5. Päätä, mitä korjauksen pitäisi parantaa: tiedostokokoa, latauksen alkamista, asettelun vakautta vai jotain muuta.

Valitse edustava sivu ennen koko sivuston muuttamista. Verkkokaupassa se voi olla tavallinen tuotesivu gallerioineen, julkaisussa tyypillinen kansikuvallinen artikkeli. Etusivun tulos ei kuvaa automaattisesti kaikkia sivupohjia.

Kohdista korjaus havaittuun ongelmaan

Jos ladattava kuva on tarpeettoman suuri sen näyttötilaan nähden, tee sopivat kokoversiot. Jos pakkaus on ongelma, vertaa WebP:tä nykyiseen tiedostoon. Käytä lähteen mukaan JPG–WebP-muunninta tai PNG–WebP-muunninta.

Jos sisältö liikahtaa kuvan ilmestyessä, varaa kuvalle tila pelkän pakkaamisen sijaan. Jos pääkuvan lataus alkaa myöhään, selvitä, miten selain löytää sen. Core Web Vitals -opas selittää tilanteiden erot.

Ymmärrä raportin kaksi tietolähdettä

PageSpeed Insights yhdistää Lighthouse-laboratoriotestin ja oikeiden käyttäjien mittaustiedot, kun niitä on saatavilla. Käyttäjätiedot kattavat edelliset 28 päivää, ja yksittäisen sivun sijaan voidaan näyttää koko sivuston tiedot. Pienellä sivustolla tietoja ei välttämättä ole riittävästi; se ei tarkoita epäonnistunutta testiä. Katso Googlen PageSpeed-ohje.

Uusi kuva voi vaikuttaa seuraavaan laboratoriotestiin, mutta historialliset käyttäjätiedot eivät päivity heti kuvaamaan vain uutta versiota. Kirjaa, mitä raportin osaa vertaat, jotta et sekoita välitöntä testiparannusta kaikkien käyttäjien kokemukseen.

Tarkista, koskevatko käyttäjämittaukset tätä URL-osoitetta vai koko originia. Origin kokoaa yhteen käyntejä sivuilta, joilla on sama protokolla, palvelinnimi ja portti. Sen tiedoista ei voi päätellä, paraniko juuri muokattu tuotesivu. Pidä yksittäisen sivun laboratoriotestit erillään tästä laajemmasta aineistosta. Erota myös raportin arvioima tavusäästö mitatusta LCP-parannuksesta: tiedosto voi pienentyä ilman, että kuva ilmestyy aiemmin.

Varmista, että muutos näkyy julkaistulla sivulla

Julkaise uusi tiedosto ja päivitä sivun viittaus tarvittaessa. Tarkista selaimen kuvapyynnöstä, että uusi versio todella toimitetaan. Paikallinen tallennus ei yksin muuta kävijän näkymää. Jos vanha osoite tai tiedosto säilyy, tutki välimuisti ja järjestelmän luomat kuvaversiot.

Testaa sama osoite samalla laitetyypillä. Toista mittaus, jos tulos vaihtelee odottamatta, ja vertaa nimenomaan korjattua havaintoa. Kaikki pistevaihtelu ei johdu kuvan muutoksesta. Älä vaihda palvelinta, skriptejä ja kaikkia kuvia samalla kertaa, jos haluat tietää, mikä auttoi.

Tunnista, milloin hitautta aiheuttaa jokin muu

Kun kuvaongelmat on korjattu, tutki jäljelle jäävät hidasteet. Hidas palvelinvastaus, raskaat skriptit tai viivästynyt piirtäminen voivat olla suurin hitauden syy. Lisäpakkaus voi silloin huonontaa kuvia korjaamatta hitautta.

Kirjaa sivu, alkuperäinen tiedosto, korvaava versio ja havaittu tulos. Näin seuraava tekijä voi toistaa työn ja huomata ongelman palaamisen teeman tai asettelun muuttuessa.

Esimerkki: raportin havainnosta yhteen korjaukseen

Kuvitellaan, että mobiiliraportti tunnistaa tuotteen pääkuvan liian suureksi. Tallenna raportti, sivun osoite, kuvan osoite ja näyttömitat. Tee pienempi versio samalla rajauksella ja julkaise se testisivulla. Varmista ennen uutta mittausta, että selain pyytää korvaavaa tiedostoa. Tämä on toimintatavan esimerkki, ei mittaustulos tai lupaus pistemäärän paranemisesta.

Kirjaa vertailuun testipäivä, laitetyyppi, kuvan mitat, tiedostokoko, raportin LCP-aika, asettelun liikkeet ja kuvan laatu. Tee useita vertailukelpoisia mittauksia ja huomioi vaihteluväli. Älä vertaa parasta uutta tulosta huonoimpaan vanhaan. Jos tiedosto pienenee mutta LCP ei muutu, latauksen jokin muu vaihe voi nyt rajoittaa tulosta.

Päätä, kannattaako muutos säilyttää

Säilytä muutos, kun se korjaa havaitun ongelman heikentämättä tuotteen yksityiskohtia, tekstiä tai asettelua. Jos kuvapyyntö alkaa yhtä myöhään kuin ennen, selvitä, milloin selain löytää kuvan ja aloittaa sen lataamisen. Jos tiedosto saapuu nopeasti mutta pysyy piilossa, tarkista sivun piirtäminen ja ilmestymistehosteet. Pakkaus ei yksin korjaa kumpaakaan viivettä.