Miksi Shopify-kauppa on hidas? Näin löydät syyn ja korjaat sen

Kauppa ei yleensä hidastu yhdessä yössä. Yksi sovellus tässä, seurantakoodi tuossa, kampanjaa varten isompi pääkuva, ja vuoden päästä tuotesivu aukeaa puhelimella selvästi hitaammin kuin julkaisun aikaan. Hidas kauppa maksaa: osa asiakkaista lähtee ennen kuin sivu on edes auki.

Hyvä uutinen on, ettei syytä tarvitse arvata. Shopify mittaa kauppasi nopeutta oikeilta asiakkailta, ja syyt ovat lähes aina samat. Kerromme tässä, miten löydämme ja korjaamme ne.

Katso ensin, mitä Shopify on mitannut

Luvut löytyvät jo Shopifyn hallintapaneelista. Online Store -sivulla (suomeksi Verkkokauppa, teemakirjasto) on yhteenveto viimeiseltä 30 päivältä, ja tarkemmat raportit ovat kohdassa Analytics > Reports (Analytiikka > Raportit): hae raportin nimellä, esimerkiksi sanalla contentful, next tai cumulative.

Raporttien katsomiseen tarvitset Reports-käyttöoikeuden. Jos kauppa on vielä salasanan takana, oikeiden kävijöiden dataa ei kerry, joten luvut alkavat näkyä vasta kaupan avauduttua.

Shopify seuraa kolmea lukua. Ne ovat samat, joilla Google arvioi sivujen käyttökokemusta:

Mitä Shopify mittaa	Raportin nimi	Hyvä tulos	Heikko tulos
Kuinka nopeasti sivun tärkein sisältö, yleensä pää- tai tuotekuva, näkyy	Largest Contentful Paint (LCP)	enintään 2,5 sekuntia	yli 4 sekuntia
Kuinka nopeasti sivu reagoi, kun asiakas napauttaa tai klikkaa	Interaction to Next Paint (INP)	enintään 0,2 sekuntia	yli 0,5 sekuntia
Kuinka paljon sisältö hyppii latautuessaan	Cumulative Layout Shift (CLS)	enintään 0,1	0,25 tai enemmän

Tulos on hyvä, kun kolme neljästä asiakkaasta saa vähintään näin nopean kokemuksen. Raporteissa Shopify merkitsee aikajanalle myös sovellusasennukset ja teemamuutokset, joten niistä näkee usein suoraan, milloin kauppa hidastui. Välissä on kohtalainen taso: se ei vielä ole hälyttävä, mutta siinä on parannettavaa.

Katso, mikä sivu on hidas

Kokonaisluku kertoo, onko ongelmaa. Se ei kerro, missä ongelma on. Siihen on kaksi raporttia, jotka löytyvät samalla haulla:

• Page type jakaa luvut sivutyypeittäin: etusivu, tuotesivu, kokoelma, ostoskori ja niin edelleen. Jos vain tuotesivu on punaisella, aloita siitä.
• Page URL näyttää yksittäiset sivut. Siitä löytyy esimerkiksi kampanjasivu, jonka iso kuva hidastaa koko sivua.

Luvut päivittyvät jopa puolentoista vuorokauden viiveellä. Anna korjauksen jälkeen kulua vähintään kaksi viikkoa ennen kuin arvioit tuloksen.

Jos haluat nähdä, mikä yksittäisellä sivulla hidastaa, Googlen ilmainen PageSpeed Insights -työkalu listaa syyt. Sen antama pistemäärä on kuitenkin vain testi yhdellä kuvitellulla puhelimella. Oikeiden asiakkaiden kokemus näkyy Shopifyn raporteissa.

Mikä yleensä hidastaa verkkokauppaa

1. Turhat sovellukset

Jokainen sovellus, joka lisää kauppaan jotain näkyvää, lataa mukanaan omaa koodiaan, usein jokaisella sivulla. Shopify itse suosittelee poistamaan käyttämättömät sovellukset ja ne, jotka tekevät saman asian kuin jokin toinen.

• Käy sovellukset läpi ja poista ne, joita et enää käytä.
• Avaa teemaeditorissa App embeds (Sovellusten upotukset) ja kytke pois ne, joita et tarvitse.
• Vanhat sovellukset saattoivat lisätä koodia suoraan teemaan, ja se voi jäädä paikalleen, vaikka sovellus poistettaisiin. Jos kauppa on vanha, pyydä kehittäjää tarkistamaan, onko teemassa jäänteitä poistetuista sovelluksista.

Esimerkki: Vorssa Inkin teemaan oli jäänyt koodia sovelluksista, joita ei enää käytetty. Siivouksen jälkeen etusivu keveni 11,4 megatavusta 3,5 megatavuun, ja sivun hyppiminen latautuessa (CLS) putosi 0,15:stä 0,01:een. Lue koko Vorssa Inkin teemauudistus.

2. Pääkuva latautuu liian myöhään tai on liian iso

Sivun yläosan iso kuva on yleensä se, jota asiakas odottaa. Tavallisin virhe on, että teema käskee selaimen lataamaan senkin vasta myöhemmin, samaan tapaan kuin sivun alaosan kuvat.

• Ensimmäisenä näkyvä kuva ladataan heti, ja sivun alempana olevat kuvat vasta kun asiakas vierittää niihin.
• Puhelimelle ladataan pieni kuva ja isolle näytölle iso. Shopify osaa tehdä tämän itse, kun teema käyttää sen omia kuvatoimintoja.
• Älä häivytä pääkuvaa näkyviin animaatiolla. Se näyttää hienolta, mutta asiakas odottaa kuvaa pidempään.

Kehittäjälle: ei loading="lazy" ensimmäiselle kuvalle, vaan fetchpriority="high", ja kuvat image_url- ja image_tag-suodattimilla (widths ja sizes).

3. Chatit, arvostelut ja seurantakoodit

Chat-ikkunat, arvostelulaatikot, testityökalut ja seurantakoodit kilpailevat kaupan oman sisällön kanssa. Ne voivat useimmiten odottaa, kunnes sivu on auki.

• Poista seurantakoodit, joiden tietoja kukaan ei katso.
• Anna chatin latautua vasta, kun asiakas avaa sen.
• Kytke testityökalut pois, kun testiä ei ole käynnissä.

Kehittäjälle: muut kuin välttämättömät skriptit defer- tai async-määreellä.

4. Liian monta fonttia

Jokainen fontti ja sen lihavointi on oma tiedostonsa, joka ladataan ennen kuin teksti näyttää oikealta. Yksi tai kaksi fonttia ja vain tarvittavat paksuudet riittävät useimmille kaupoille.

5. Hyppivä sisältö

Myöhässä ilmestyvä banneri tai kuva työntää sisällön alas juuri kun asiakas aikoo napauttaa, ja hän osuu väärään kohtaan. Kuvien paikka pitää varata valmiiksi, samoin ilmoituspalkeille ja sovellusten lisäosille.

6. Iso valikoima ja raskas teema

Jos kokoelmasivut ovat hitaita juuri isossa valikoimassa, syy voi olla teeman koodissa. Teema, joka on nopea kymmenellä tuotteella, voi olla hidas tuhannella. Tämän korjaaminen on kehittäjän työtä.

Tee muutokset turvallisesti

Nopeuskorjaukset muuttavat käynnissä olevan kaupan teemaa, joten emme koskaan tee niitä suoraan julkaistuun teemaan. Teemme jokaisen muutoksen ensin julkaisemattomaan kopioteemaan, testaamme sen, katsomme sen puhelimella ja vasta sitten julkaisemme. Työtavan kerromme artikkelissa Älä muokkaa live-teemaa.

Seuraa julkaisun jälkeen Shopifyn raporttia pari viikkoa. Silloin näet, auttoiko muutos oikeasti asiakkaitasi.

Milloin kannattaa pyytää apua

Jos luvut ovat punaisella eikä syy ole ilmeinen, taustalla on usein sovellus, jota ei voi poistaa, paljon muokattu teema tai vuosia sitten lisätty koodi, jota kukaan ei muista. Silloin kokenut Shopify-kehittäjä säästää aikaasi: mittaamme, korjaamme suurimmat syyt ensin ja näytämme tuloksen ennen ja jälkeen kauppasi omista Shopify-raporteista.

Lähteet: Shopifyn ohjekeskuksen verkkosuorituskykyraportit ja shopify.devin teemojen suorituskykyohje (englanniksi).

Haluatko tietää, mikä hidastaa juuri sinun kauppaasi? Kysy Virralta alta.