Miksi verkkosivuni kuvat latautuvat hitaasti?

Aloita yhdestä hitaasta sivusta

Avaa julkaistu sivu puhelimella ja tietokoneella. Katso, mikä kuva ilmestyy myöhässä, onko koko sivu hidas ja liikkuuko teksti kuvien ilmestyessä.

1. Kirjaa sivun osoite ja kuva, jossa ongelma näkyy.
2. Tee testi PageSpeed Insightsissa ja tallenna kuviin liittyvät havainnot.
3. Jos joku muu ylläpitää sivustoasi, lähetä hänelle sivun osoite ja raportti. Pyydä tarkistamaan kyseinen kuva ennen koko kuvakirjaston muuttamista.

Seuraavat osiot auttavat valitsemaan sopivan tarkistuksen. Tarkempaa selvitystä varten selaimen Network-näkymä näyttää, mitä tiedostoja sivu lataa ja kuinka kauan kukin pyyntö kestää.

Valitse seuraava tarkistus oireen mukaan

Valinnainen: tutki kuvaa Network-näkymässä

Avaa sivu tietokoneella Chromessa. Avaa kehittäjätyökalut Windowsissa tai Linuxissa näppäimillä Ctrl + Shift + J ja Macissa näppäimillä Command + Option + J. Valitse Network-välilehti ja etene näin:

1. Valitse kuvasuodatin, jonka nimi on Img.
2. Ota Disable cache käyttöön ja lataa sivu uudelleen näkymän ollessa auki. Näin tarkistat uuden latauksen selaimen tallentaman kopion sijaan.
3. Valitse ongelmallisen kuvan pyyntö. Tarkista esikatselusta, että kyseessä on oikea kuva.
4. Kirjaa kuvan osoite ja tiedostokoko.
5. Avaa Timing nähdäksesi, mihin pyynnön aika kuluu. Tarkista sitten Initiator, joka kertoo, mikä käynnisti pyynnön.

Tämä selaimen välimuistiasetus ei tyhjennä sivuston palvelimen tai CDN:n välimuistia. CDN on palvelu, joka jakelee sivuston tiedostoja eri palvelimilta ja voi säilyttää omia tallennettuja kopioitaan.

Jos pyyntö alkaa myöhään, selvitä, käynnistääkö sen sivun alkuperäinen HTML, skripti vai viivästetyn latauksen sääntö. Jos pyyntö alkaa ajoissa mutta vastausta odotetaan pitkään, vertaa toiseen kuvaan ja sivun HTML-tiedostoon. Jos tiedosto saapuu nopeasti mutta kuva ei näy, tarkista CSS, animaatiot ja JavaScript. Korjaa se vaihe, jossa viive todella syntyy.

Timing näyttää, mihin pyynnön aika kuluu, esimerkiksi vastauksen odottamiseen tai tiedoston lataamiseen. Initiator kertoo, mikä aloitti pyynnön, kuten sivun HTML tai skripti. Näin erotat suuren tiedoston myöhään alkavasta latauksesta.

Chromen Network-ohje

Erota Timing-näkymässä Queueing tai Stalled, palvelimen vastauksen odotus eli TTFB ja Content Download eli tiedoston lataus. Ennen pyynnön lähettämistä kuluva aika voi liittyä selaimen jonotukseen tai yhteyden muodostamiseen, joten se ei ole kokonaan palvelimen käsittelyaikaa. TTFB sisältää myös verkossa kuluvan ajan, eikä pitkä odotus yksin todista palvelinvikaa. Pitkä latausvaihe ohjaa tarkistamaan siirrettävän datan määrän ja yhteysnopeuden. Vertaa useita pyyntöjä samoissa olosuhteissa ennen korjauksen valintaa.

Pienennä tarpeettoman suuria kuvatiedostoja

Jos pieni kortti lataa valtavan valokuvan, aloita mitoista. Tee kopio koonmuutostyökalulla kuvasuhde säilyttäen. Vertaa sitten WebP:tä tai AVIF:ää, jos sivustosi tukee niitä. Kuvamuoto-opas auttaa valinnassa.

Tutki koko aloitusnäkymää, ei vain suurinta kuvaa. Kymmenet yhtä aikaa latautuvat pienet pikkukuvat voivat yhteensä siirtää turhan paljon. Päätä, mitä tarvitaan heti ja mikä voi odottaa kävijän vierittämistä lähemmäs.

Korjaa ajoitus, jos tiedostokoko ei ole ongelma

Varmista, ettei viivästetty lataus hidasta tärkeintä näkyvää kuvaa. Jos kuva ilmestyy vasta animaation tai skriptin jälkeen, tutki tapahtumaketju kehittäjän kanssa. Googlen LCP-ohje erottaa lataamisen ja piirtämisen viiveet toisistaan.

Vertaa useita pyyntöjä ennen kuin syytät kuvamuotoa. Jos myös HTML ja muut tiedostot odottavat pitkään, tarkista palvelin ja tiedostojen jakeluasetukset. Saman kuvan toistuva tallennus ei yleensä korjaa viivettä ennen palvelimen vastausta.

Toista testi samoissa olosuhteissa

Uusintakäynti voi nopeutua välimuistin ansiosta. Kirjaa, testaatko uutta vai välimuistista ladattua sivua, ja pidä laite sekä verkko samoina. Tarkista myös kapea näkymä: se voi paljastaa puuttuvan mobiilikuvan.

1. Kirjaa yksi hidas sivuosoite ja siihen liittyvä kuvapyyntö.
2. Muuta kyseistä tiedostoa tai lataustapaa.
3. Varmista, että sivu toimittaa uuden version.
4. Toista sama mittaus ja tarkista kuvanlaatu.

Tarkastele gallerian ensimmäistä näkymää kokonaisuutena. Suuri pääkuva ja kaksikymmentä pikkukuvaa voivat tarvita erilaiset lataussäännöt. Aseta näkyvä kuva etusijalle ja siirrä alempana olevien latausta tarvittaessa myöhemmäksi. Vieritä muutoksen jälkeen koko galleria läpi ja varmista, että kuvat ehtivät näkyviin eikä takaisin siirtyminen jätä tyhjiä alueita.