· 11 min lukuaika

Sivusto latautuu hitaasti: seitsemän syytä ja korjaus

VVerkkoPro-tiimi, verkkosivut ja hakukoneoptimointi· Julkaistu

Suora vastaus ensin: yhdeksässä tapauksessa kymmenestä syy on pakkaamattomat valokuvat. Puhelimella otettu kuva painaa useita megatavuja, ja sivulle riittää alle 200 kilotavua. Toiseksi yleisin on liian monta WordPress-lisäosaa ja kolmanneksi halpa webhotelli, jonka palvelin vastaa vasta lähes sekunnin päästä. Käymme läpi kaikki seitsemän syytä, miten nopeus mitataan oikein ja mitkä korjaukset kannattaa tehdä ensin.

Miksi nopeus on rahakysymys

Hitaan sivuston hinta ei ole huono pistemäärä testissä vaan kävijät, jotka eivät koskaan nähneet sisältöä. Kun asiakas etsii putkimiestä puhelimellaan ja avaa kolme hakutulosta peräkkäin, hitain niistä ei ehdi näyttää mitään ennen kuin hän on jo palannut takaisin hakutuloksiin. Mitään yhteydenottoa ei synny, eikä analytiikkaan jää käytännössä jälkeä, koska seurantakin ehti tuskin latautua.

Googlen kannalta nopeus on yksi sijoitustekijä satojen joukossa, ja sen merkitys on pienempi kuin moni myyntipuhe antaa ymmärtää. Erinomainen nopeus ei nosta ohutta sisältöä kärkeen. Huono nopeus sen sijaan haittaa kahdesti: se painaa sijoitusta hieman ja hukkaa osan niistä kävijöistä, jotka sijoituksesta huolimatta tulivat.

Käytännön tavoite kannattaa asettaa käyttäjän mukaan eikä mittarin. Pääsisällön pitää näkyä puhelimella alle kahdessa ja puolessa sekunnissa tavallisella mobiiliyhteydellä. Kaikki tämän listan korjaukset palvelevat sitä yhtä tavoitetta.

Seitsemän syytä, painavimmasta alkaen

  1. 01

    Pakkaamattomat valokuvat

    Suurin yksittäinen syy

    Puhelimella otettu kuva on 3 ja 8 megatavun välillä. Sivulle riittää tyypillisesti alle 200 kilotavua. Muunna kuvat WebP-muotoon, skaalaa ne siihen kokoon jossa ne näytetään, ja lataa taitteen alapuoliset kuvat vasta tarvittaessa. Tämä yksi korjaus riittää usein puolittamaan latausajan.

  2. 02

    Liikaa lisäosia

    WordPressin klassikko

    Jokainen lisäosa lataa omat tyylitiedostonsa ja skriptinsä jokaisella sivulla, myös niillä, joilla sitä ei käytetä. Kolmenkymmenen lisäosan sivusto on käytännössä aina hidas. Käy lista läpi ja poista kaikki, joita et ole käyttänyt kuukauteen.

  3. 03

    Halpa jaettu webhotelli

    Palvelimen vastausaika

    Jos palvelin vastaa vasta 800 millisekunnin päästä, olet menettänyt lähes sekunnin ennen kuin selain on saanut riviäkään. Mittaa tämä PageSpeedin kohdasta palvelimen vasteaika. Tämä on ainoa listan kohta, jota et voi korjata koodilla.

  4. 04

    Raskas sivunrakentaja

    Rakenteellinen

    Visuaaliset rakentajat tuottavat syvälle sisäkkäistä koodia ja lataavat oman kehyksensä joka sivulla. Nopeus, jonka ne antavat rakennusvaiheessa, maksetaan takaisin joka ikisellä sivulatauksella loppuelämän ajan.

  5. 05

    Upotetut videot ja kartat

    Kolmannen osapuolen kuorma

    Yksi upotettu video voi ladata satoja kilotavuja skriptiä ennen kuin kukaan painaa toistoa. Käytä videolle kevyttä esikatselukuvaa, joka lataa soittimen vasta klikkauksesta, ja korvaa upotettu kartta kuvalla, jossa on linkki karttapalveluun.

  6. 06

    Liian monta fonttia

    Piilokuorma

    Jokainen fonttiperhe ja leikkaus on oma tiedostonsa. Kaksi fonttia ja kolme leikkausta riittää lähes jokaiselle yrityssivustolle. Lataa fontit omalta palvelimelta ja käytä font-display-asetusta, jottei teksti jää näkymättömiin latauksen ajaksi.

  7. 07

    Sisältö hyppii latautuessaan

    CLS

    Kun kuvalle ei ole varattu tilaa etukäteen, teksti hyppää alaspäin kuvan latautuessa ja käyttäjä klikkaa väärää kohtaa. Korjaus on merkitä jokaiselle kuvalle leveys ja korkeus. Tämä ei nopeuta sivua mutta parantaa mittaria ja käyttökokemusta enemmän kuin useimmat muut korjaukset.

Miten mitata niin, että luku tarkoittaa jotain

Aja sivu PageSpeed Insightsin läpi ja katso ensin mobiilivälilehteä. Työpöytätulos on lähes aina selvästi parempi ja siksi harhaanjohtava: suomalaiset hakevat palveluita puhelimella. Yksittäinen testi heittelee helposti kymmenen pistettä, joten aja se kolme kertaa ja käytä keskimmäistä tulosta.

Sivun yläosassa näkyy usein kenttädata, joka perustuu oikeisiin kävijöihin viimeisen 28 päivän ajalta. Se on tärkeämpi kuin alempi laboratoriotesti, koska se kertoo mitä asiakkaasi oikeasti kokivat. Sama data näkyy myös Search Consolen käyttökokemusraportissa, jonka käymme läpi Search Consolen oppaassa.

Älä tavoittele sataa pistettä. Se on laboratorioluku, ja viimeiset kymmenen pistettä maksavat enemmän työtä kuin ensimmäiset viisikymmentä, ilman että kukaan käyttäjä huomaa eroa. Vihreät Core Web Vitals -arvot oikealla käyttäjädatalla on oikea maali.

Järjestys, jossa korjaukset kannattaa tehdä

Aloita kuvista. Käy läpi etusivu ja kolme tärkeintä palvelusivua, pakkaa jokainen kuva WebP-muotoon ja skaalaa se siihen kokoon, jossa se todella näytetään. Tämä on työtä yhden iltapäivän verran ja tuottaa yleensä suurimman yksittäisen parannuksen koko listalta. Lisää samalla jokaiselle kuvalle leveys ja korkeus, jolloin sisällön hyppiminen loppuu.

Toiseksi karsi lisäosat ja skriptit. Poista se, mitä et ole käyttänyt kuukauteen. Korvaa upotettu video esikatselukuvalla ja upotettu kartta kuvalinkillä. Kolmanneksi asenna välimuisti, jos käytät WordPressiä. Vasta neljäntenä kannattaa harkita webhotellin vaihtoa, ja vain jos palvelimen vasteaika on yhä yli 600 millisekuntia näiden jälkeen.

Jos sivusto on rakennettu raskaalle sivunrakentajalle, tulet jossain vaiheessa seinään: pohja itsessään on hidas eikä sitä voi optimoida pois. Silloin uudelleenrakentaminen kevyemmälle pohjalle on usein halvempaa kuin loputon viilaus. Teemme tämän työn palveluna sivulla nopeusoptimointi, ja koko sivuston uusiminen käydään läpi sivulla verkkosivujen uudistus.

Usein kysytyt kysymykset

Miksi nettisivut latautuvat hitaasti?

Yleisimmät syyt suomalaisilla pk-yritysten sivustoilla ovat järjestyksessä: pakkaamattomat valokuvat, liian monta WordPress-lisäosaa, halpa jaettu webhotelli, raskas sivunrakentaja, upotetut videot ja kartat, sekä liian monta eri fonttia. Näistä ensimmäinen aiheuttaa yksin suurimman osan hitaudesta ja on myös helpoin korjata.

Kuinka nopea sivuston pitää olla?

Käytännön tavoite on, että sivun pääsisältö näkyy alle kahdessa ja puolessa sekunnissa mobiiliverkossa. Googlen mittarissa tämä on LCP, ja hyvänä pidetään alle 2,5 sekuntia. Yli neljä sekuntia on huono. Tärkeämpää kuin tarkka luku on se, että käyttäjä näkee jotain hyödyllistä heti eikä tyhjää valkoista.

Mikä on Core Web Vitals?

Kolme mittaria, joilla Google arvioi käyttökokemusta oikeilla kävijöillä. LCP mittaa, kuinka nopeasti suurin sisältöelementti piirtyy. INP mittaa, kuinka nopeasti sivu reagoi klikkaukseen. CLS mittaa, hyppiikö sisältö latautuessaan. Nämä ovat kevyt sijoitustekijä ja iso käytettävyystekijä.

Vaikuttaako nopeus Google-sijoitukseen?

Vaikuttaa, mutta vähemmän kuin usein väitetään. Nopeus on yksi sijoitustekijä satojen joukossa, eikä erinomainen nopeus nosta heikkoa sisältöä. Vaikutus on suurempi epäsuorasti: hitaalta sivulta poistutaan ennen kuin sisältö näkyy, jolloin sivu ei tuota mitään riippumatta sijoituksesta.

Miten mittaan sivustoni nopeuden oikein?

Käytä PageSpeed Insightsia ja katso ennen kaikkea mobiilituloksia, koska valtaosa hauista tehdään puhelimella. Katso myös sivun alaosassa oleva kenttädata, joka perustuu oikeisiin käyttäjiin, jos sitä on saatavilla. Yksittäinen testi vaihtelee, joten aja se kolmesti ja käytä mediaania.

Onko sadan pisteen tulos tarpeen?

Ei ole. Pistemäärä on laboratoriotesti, ei totuus. Yli yhdeksänkymmenen tulos mobiililla on erinomainen ja siitä eteenpäin parannukset ovat käyttäjälle huomaamattomia. Tavoittele vihreitä Core Web Vitals -arvoja oikealla käyttäjädatalla, älä täydellistä pistemäärää testissä.

Auttaako välimuistilisäosa?

Auttaa WordPressissä usein merkittävästi ja on halvin yksittäinen parannus. Se ei kuitenkaan korjaa perussyytä, jos sivulla on kolmen megatavun valokuvia. Pakkaa kuvat ensin, asenna välimuisti sen jälkeen, muuten mittaat vain nopeampaa tapaa tarjoilla raskasta sivua.

Kannattaako vaihtaa webhotellia?

Kannattaa, jos palvelimen vastausaika on jatkuvasti yli 600 millisekuntia eikä se korjaannu välimuistilla. Halvin jaettu webhotelli on usein aidosti pullonkaula. Ero parempaan pakettiin on tyypillisesti muutamia euroja kuukaudessa, ja se näkyy heti jokaisella sivulatauksella.

Paljonko nopeusoptimointi maksaa?

Kevyt optimointi eli kuvien pakkaus, välimuisti ja turhien lisäosien poisto asettuu Suomessa tyypillisesti 300 ja 900 euron välille. Perusteellinen työ, jossa puretaan raskas sivunrakentaja tai rakennetaan etusivu uudelleen, on lähempänä 1 000 ja 3 000 euroa. Uudessa sivustossa nopeus ei maksa erikseen, koska se on rakennusvaiheen valinta eikä jälkikorjaus.

Miksi sivustoni on nopea tietokoneella mutta hidas puhelimella?

Koska mobiiliverkko on hitaampi, puhelimen suoritin on heikompi ja moni sivusto lataa puhelimessakin työpöytäkokoiset kuvat. Testaa aina mobiilituloksella. Jos ero on suuri, syy on lähes aina kuvissa tai JavaScriptin määrässä.

Nopeus kuuluu rakentamiseen, ei jälkikorjaukseen

Rakentamamme sivustot ovat kevyitä lähtökohtaisesti. Näet valmiin sivuston ja sen mittarit ennen kuin maksat mitään.

Vastaamme kahden tunnin sisällä