Verkkosivuston nopeuden optimointi: vinkkejä Shopify-kaupoille

Internetin käyttäjät ovat kärsimättömämpiä kuin koskaan. Tutkimukset osoittavat, että hitaasti latautuva verkkosivusto vaikuttaa heidän halukkuuteensa ostaa verkkokaupasta. Siksi on tärkeää löytää tasapaino kauniiden, sisältörikkaiden digitaalisten kokemusten tarjoamisen ja niiden tehokkuuden säilyttämisen välillä.

Tässä oppaassa kerrotaan, miten tämä onnistuu.

Mitä on verkkosivuston nopeuden optimointi?

Verkkosivuston nopeuden optimointi on strategia, jonka avulla parannetaan sivun latausnopeutta. Sen tavoitteena, joka tunnetaan myös verkkosivuston suorituskyvyn optimointina, on saada verkkokauppa latautumaan mahdollisimman nopeasti – ennen kuin mahdolliset asiakkaat turhautuvat verkkokokemukseensa ja sulkevat selaimen välilehden.

Nopeuden mittaamiseen käytetään kahta keskeistä mittaria:

1. Sivun nopeus, joka mittaa aikaa, joka kuluu URL-osoitteen sisällön lataamiseen.
2. Sivuston nopeus, joka kuvaa sivuston yleistä suorituskykyä. Sen pisteyttävät palvelut, kuten Google PageSpeed Insights, jotka tarkastelevat sivuston eri latausaikoja kokonaisuutena.

Google suosittelee verkkokaupalle kahden sekunnin latausnopeutta. Yleisesti ottaen mitä nopeampi, sen parempi. Verkkokaupan keskimääräinen konversioaste laskee 0,3 % jokaista lisäsekuntia kohden, joka sivustolla lataamiseen kuluu. "Ihmiset ovat kärsimättömiä", sanoo Josh Stutt, markkinointijohtaja digitaalisen innovaation toimistossa the49. "Kaikki muistavat tilanteita, joissa on yritetty käydä jollain sivustolla, se ei latautunut nopeasti ja välilehti suljettiin sen jälkeen."

Jos esimerkiksi pyörität kauppaa, jonka keskimääräinen tilausarvo on 60 euroa ja jolla on 5 000 kävijää päivässä, yhden sekunnin viive sivuston nopeudessa voi maksaa 9 000 euroa päivässä.

Miksi verkkosivuston nopeus on tärkeää?

Mitä nopeampi sivusto, sitä paremmin onnistut houkuttelemaan asiakkaita – mukaan lukien ne, jotka hylkäävät kilpailijan hitaamman sivuston.

Itse asiassa jo millisekunnin parannus sivuston nopeudessa voi vaikuttaa myönteisesti konversioihin. Jopa millisekunnin parannuksella voi olla huomattavia vaikutuksia verkkokaupan konversioasteeseen.

Portentin tutkimus vahvistaa nämä havainnot. Se osoitti, että verkkokaupoilla, jotka latautuvat sekunnissa, on 2,5 kertaa korkeampi konversioaste kuin niillä, jotka latautuvat viidessä sekunnissa.

Konversioaste laskee sivun latausnopeuden kasvaessa. Hitaasti latautuvat sivustot vaikuttavat kielteisesti myös löydettävyyteen ja hakukonesijoitukseen. Google, maailman suurin hakukone, priorisoi hakutuloksissaan sivustoja, joilla on vahvat verkkosivun ydintiedot (eli hyvä suorituskyky).

Lisäksi jos panostat maksettuun hakuun asiakashankintakanavana, hitaat laskeutumissivut heikentävät Google Ads -laatupisteitäsi – mikä tarkoittaa korkeampaa klikkauskohtaista hintaa. Tämä on kallis ongelma aikana, jolloin asiakashankinta- ja mainontakustannukset kasvavat suhteettomasti useimmilla toimialoilla.

Lue lisää: B2B-verkkokaupan trendit 2025–2026: 15 strategiaa digitaaliseen kaupankäyntiin

Yleiset verkkosivuston nopeuteen vaikuttavat tekijät

Verkkokauppa-alusta

Yritys tarvitsee verkkokauppa-alustan, jonka infrastruktuuri tukee latausaikoja. Alustan käyttäjänä kannattaa keskustella alustan tarjoajan kanssa parannuksista sivuston taustajärjestelmään, jotta verkkosivustot latautuvat nopeasti asiakkaille.

Renderöinti on prosessi, jossa luodaan HTML-merkintä, kun käyttäjä lataa sivun verkkoselaimessaan. Verkkokaupan infrastruktuuri määrittää renderöintiprosessin.

Esimerkiksi Shopifyn Storefront Renderer (SFR) on sovellus, joka on omistettu verkkokauppapyyntöjen mahdollisimman nopeaan palvelemiseen. Se johtaa palvelinpuolen suorituskykyparannuksiin, jotka ovat 2,5–5 kertaa nopeampia kuin ilman SFR:ää tehdyt pyynnöt.

"Renderöinnin esto tarkoittaa, että esimerkiksi JavaScript- tai CSS-tiedostot estävät verkkosivua näkymästä nopeasti", sanoo Chris McCarron, GoGoChimpin omistaja. "Kun selain yrittää ladata verkkosivua, sen täytyy pysähtyä ja ladata nämä tiedostot ennen kuin se voi näyttää sivun loppuosan."

Suurimmat suorituskykyparannukset SFR:n kautta liittyvät välimuistiosumien puutteisiin – tapauksiin, joissa sivua tai muuta pyydettyä tietoa ei löydy välimuistista ja se on haettava muilta välimuistitasoilta tai päämuistista, mikä aiheuttaa viiveitä ja hidastumisia.

Rhone Apparel alkoi käyttää SFR:ää huhtikuussa 2020 ja koki merkittäviä parannuksia edelliseen kuukauteen verrattuna:

• 15 %:n kasvun liikevaihdossa
• 17 %:n kasvun konversioasteessa
• 12 %:n laskun keskimääräisessä sivun latauksessa
• 37,95 %:n laskun keskimääräisessä palvelimen vasteajassa
• 3 %:n laskun poistumisprosentissa

Jos verkkokauppa-alusta ei ole sitoutunut asettamaan nopeutta etusijalle, muilla seuraavilla ehdotuksilla ei ole yhtä suurta merkitystä. Kun tiedät, että tämä on kunnossa Shopifyn kanssa, voit ottaa verkkokauppasi nopeuden haltuun työstämällä seuraavia kohtia, jotka parantavat sivustoa entisestään.

Isännöinti

Verkkokaupan isännöintipalvelu ja infrastruktuuri voivat vaikuttaa verkkokaupan suorituskykyyn – erityisesti korkean liikenteen ja suurten transaktiomäärien päivinä.

Luettelo tunnetuista vähittäiskauppiaista, joiden verkkokaupat kaatuivat keskeisinä myyntikausina, kuten Black Fridayna – esimerkiksi Lululemon, J.Crew ja Lowe's – kasvaa jatkuvasti. Erään kyselyn vastaajista 81 % sanoi, että 60 minuutin käyttökatko maksaa heidän liiketoiminnalleen yli 300 000 dollaria eli n. 268 785 euroa.

Isännöintialustan vaatimuksia tutkiessa kannattaa kiinnittää huomiota seuraaviin:

• Muisti- tai kaistanleveysrajat skaalautumista ja kausikampanjoita varten
• Ennakoitu liikenne ja huipputuisen käyttäjäkuormituksen kesto, jotta vältetään kaatumiset äkillisestä kävijämäärän kasvusta

Ennen jokaista suurta myyntitapahtumaa kannattaa pyytää verkkokauppa-alustan tarjoajaa auttamaan varautumaan odottamattomiin liikennepiikkeihin tai tilausten tulvaan.

Sivuston käyttökatkoja ei ole koskaan helppo käsitellä, mutta ne voivat olla erityisen haitallisia viiden miljardin dollarin yritykselle sen vuoden suurimman myyntikauden aikana. JB Hi-Fin verkkosivusto oli poissa käytöstä kaksi tuntia BFCM-kauden aikana sivuston ongelmien vuoksi. "Olemme nähneet tunnettujen vähittäiskauppiaiden verkkosivustojen kaatuvan", sanoo Chris Lang, JB Hi-Fin insinöörityön johtaja. "Koko maa saa siitä tietää. Se on huono asia asiakkaille ja huono asia brändille. Tekisimme mitä tahansa välttääksemme sen."

Siirryttyään Shopify Plussaan JB Hi-Fi teki ennätysmyynnin lähes kaksinkertaisen verkkoliikenteen ansiosta BFCM-kauden aikana – ilman suorituskykyongelmia.

Pilvipohjaisen infrastruktuurinsa ansiosta Shopify Plussalla on 99,98 %:n kokonaiskäytettävyys, ja sen verkkokauppa latautuu 2,97 kertaa nopeammin kuin muut SaaS-alustat.

Sivuston arkkitehtuuri

Verkkokaupat käyttävät erilaisia arkkitehtuureja esittääkseen tietoa sekä käyttäjille että selaimille. Tästä voi tulla monimutkaista, kun skaalaudut, sanoo Javier Moreno, Shopifyn data science -päällikkö: "Kun brändit kasvavat ja kehittyvät, niiden verkkosivustoista tulee rikkaampia. Tällä rikkaudella on yleensä hintansa; ellet aktiivisesti kiinnitä huomiota nopeuteen, muutokset hidastavat sivustoa."

Parantaakseen sivuston nopeutta jotkut kauppiaat siirtyvät headless-verkkokauppaan – konseptiin, joka irrottaa verkkokaupan käyttöliittymän sitä pyörittävästä taustajärjestelmästä.

Vähittäiskauppiaat, jotka käyttävät Commerce Components by Shopify -ratkaisua, vievät tämän seuraavalle tasolle. He ottavat tarvitsemansa verkkokauppateknologiat silloin kun tarvitsevat, sen sijaan että kuormittaisivat selainta liialla koodilla, joka vaikuttaa kielteisesti sivuston nopeuteen.

Verkkosivuston suorituskyky heikkenee sivuston skaalautuessa.

Liialliset kolmannen osapuolen sovellukset

Jos kauppaan on asennettu yli 20 verkkokaupan lisäosaa, luultavasti niitä kaikkia ei käytetä. Ehkä jotkut asennettiin kokeilua varten ja niiden poistaminen unohtui. Nämä sovellukset kuitenkin toimivat yhä taustalla ja voivat aktiivisesti haitata verkkosivuston suorituskykyä.

Palkkaa kehittäjä poistamaan tarpeettomat sovellukset. Suorita tämän jälkeen sivun nopeustestit työkaluilla, kuten GTmetrix tai PageSpeed Insights, tai jopa manuaalinen testi Chromen kehittäjätyökaluilla. Klikkaa "Network"-välilehteä ja lataa sivu uudelleen.

Aina kun haluat asentaa uuden sovelluksen, kysy itseltäsi: onko tämän sovelluksen lisäarvo suurempi kuin sen mahdollinen latausnopeuden hidastuminen?

Suurin osa Shopify Plus -hallintapaneelin kautta ladattujen sovellusten skripti-/CSS-tiedostoista lisätään theme.liquid-tiedoston <head>-osaan {{ content_for_header }} -kohdan sisällä.

Sovellus on renderöitävä ennen kuin mitään muuta koodia ladataan.

"Navigoiminen nopeamman latauksen ja sovellusten kokemuksellisen ja myynnillisen arvon välillä on syy siihen, että lataamme Script Tag API:lla lisätyt skriptit asynkronisesti. Tämän ansiosta sivun lataus ei pysähdy", sanoo Jason Bowman, Shopify Plussan ratkaisusuunnittelutiimin johtaja. "Suoraan <head>-osaan lisätyillä <scripts>-elementeillä on kuitenkin usein välitön vaikutus suorituskykyyn."

Tapoja saada tietoa verkkosivuston nopeudesta

Jokainen nopeustestityökalu käyttää erilaista pisteytysmenetelmää, aivan kuten jokaisella tiimillä on erilainen määritelmä hyvästä sivuston nopeudesta. Työkalut, jotka tarjoavat "sivun latausajan", joutuvat valitsemaan yhden tietyn aikamerkinnän, kuten "aika ensimmäiseen tavuun" (TTFB), tuloksiinsa.

Käytä näitä nopeustestejä päätöksenteon tukena, mutta pidä mieli avoimena. Sivuston nopeus on tasapainotettava sellaisen käyttöliittymän rakentamisen kanssa, joka optimoi asiakkaan matkan.

Google PageSpeed Insights

PageSpeed Insights on Google Labs -työkalu, joka antaa räätälöityjä ehdotuksia verkkosivuston suorituskyvyn parantamiseksi. Se myös tunnistaa sivuston elementit, jotka hidastavat sivua, kuten CSS ja JavaScript.

"Varmistan, että jokainen projekti, jonka parissa työskentelen, testataan säännöllisesti Google PageSpeed Insightsilla tai vastaavalla työkalulla", Josh Stutt sanoo. "Sinun on tiedettävä, miten sivusto suoriutuu ja mitkä ovat sen heikot kohdat, ennen kuin voit tehdä parannuksia."

Voit jopa tarkastella kilpailijoidesi mobiilisivuston suorituskykyä. Kun tiedät, mikä heidän sivustossaan on vialla, voit välttää samat virheet.

GTMetrix

GTMetrix antaa verkkosivustolle nopeusarvosanan A:sta F:ään. Se yhdistää dataa sekä Yslowsta että PageSpeed Insightsista ja tarjoaa suorituskykyraportin, joka sisältää:

• sivun latausnopeuden
• Web Vitals- ja Lighthouse-analyysin
• verkkosivuston nopeuden optimointimahdollisuudet
• sivun koostumuksen erittelyn pyyntöjen ja kokonaistavukoon mukaan

Pingdom

Pingdom.com pisteyttää verkkosivuston suorituskyvyn (0 %:sta 100 %:iin). Sillä on myös hyödyllinen "waterfall-analyysi" -ominaisuus, joka auttaa tunnistamaan muita merkittäviä ongelma-alueita. Tämä rivi riviltä -pisteytys on hyödyllinen viitetyökalu.

Miten optimoit verkkosivustosi nopeuden

• Käytä sisällönjakeluverkkoa
• Älä liioittele teeman muokkauksissa
• Ota käyttöön pikakatselu kategoriasivuilla
• Poista tarpeettomat ponnahdusikkunat
• Kevennä etusivun hero-liukusäätimiä
• Pakkaa, muuta kokoa ja pienennä kuvia
• Käytä kevytupotuksia videoille
• Vähennä uudelleenohjauksia ja rikkinäisiä linkkejä
• Ota käyttöön laiska lataus
• Poista selaimen esto jäsentimen estäviltä skripteiltä
• Ota käyttöön selaimen välimuisti palaaville kävijöille
• Järjestä seuranta Google Tag Managerilla
• Varo liiallisia Liquid-silmukoita

Käytä sisällönjakeluverkkoa (CDN)

Sisällönjakeluverkko eli sisällönjakeluverkko (CDN) on ryhmä palvelimia, jotka on hajautettu ympäri maailmaa. Se jakaa sisällön toimituskuorman kävijän sijaintia lähimpänä olevan palvelimen kautta, mikä nopeuttaa paikallisia käyttäjäkokemuksia.

Koska yhä useammat verkkokaupat kansainvälistyvät, CDN – tai Shopifyn tapauksessa kaksois-CDN:t – on välttämätön ainesosa alustan suorituskyvylle.

Shopify tarjoaa maailmanluokan Fastlyn tarjoaman CDN:n ilman lisäkustannuksia. Nykyään on olemassa vähemmän mutta tehokkaampia Fastlyn läsnäolopisteitä (PoP) strategisilla paikoilla ympäri maailmaa. Tiheät läsnäolopisteet mahdollistavat sen, että enemmän voidaan palvella välimuistista, mukaan lukien staattinen ja tapahtumapohjainen sisältö. Tämä parantaa välimuistin osumasuhdetta, mikä johtaa parempiin käyttäjäkokemuksiin.

Kaiken kaikkiaan CDN:t lisäävät nopeutta ja pienentävät samalla kustannuksia. "Lisenssin, isännöinnin ja CDN:n saaminen Shopify Plussalta säästi meille noin 100 000 dollaria vuodessa heti alusta alkaen", sanoo Red Dress Boutiquen omistaja Diana Harbour.

Esimerkiksi visuaalinen sisältö on usein hitaan suorituskyvyn syy. Shopify ilmoittaa CDN:lle, kun resurssit (esim. kuvat, JavaScript ja CSS) ovat muuttuneet.

Tee tämä Shopifylla

Shopify-kauppiaat voivat käyttää asset_url-suodatinta, joka liittää versionumerot automaattisesti kaikkiin luomiimme URL-osoitteisiin. Esimerkiksi URL-osoitteen loppuun liitetty versionumero voi näyttää tältä: ?v=1384022871. Tämä suodatin kertoo CDN:lle, että sen tulee hakea oikea versio. Ilman sitä et ehkä näe odottamaasi resurssia sen jälkeen, kun olet tehnyt muutoksia sisältöön.

Lisäksi, jos viittaat sisältöön suoraan CSS:ssäsi, URL-osoite on staattinen. Se ei myöskään sisällä Shopifyn automaattisesti päivittämää resurssiversiota.

Varmistaaksesi automaattiset päivitykset muuta CSS-syntaksisi sisältämään asset_url-suodattimen. Lisätietoja kaikista resurssien hakemista auttavista URL-suodattimista löydät Shopifyn ohjekeskuksesta.

Älä liioittele teeman muokkauksissa

Verkkosivuston ulkoasu ratkaisee, kuinka todennäköisesti asiakas on vuorovaikutuksessa sen kanssa. Tutkimukset osoittavat, että ensivaikutelmista 94 % liittyy suunnitteluun – ja nämä päätökset tapahtuvat ennätysvauhdilla. Verkkosivuston kävijän ensivaikutelma muodostuu kymmenesosasekunnissa.

Sivuston nopeuden ja kauniin teeman välillä on kuitenkin kompromissi – jälkimmäisen mukana tulee usein sekava koodi ja liialliset grafiikat. "Et tarvitse teemaa kaikilla mahdollisilla lisäominaisuuksilla", Josh Stutt sanoo. "Tarvitset ratkaisun, joka on siisti, nopea ja helppo navigoida. Olen nähnyt yli 50 %:n parannuksen etusivun poistumisprosentissa uusien kävijöiden osalta pelkästään vaihtamalla virtaviivaisempaan teemaan."

Nirav Sheth, Anattan toimitusjohtaja ja perustaja, sanoo: "Nopeat nopeusniksit eivät rakenna perustaa pitkän aikavälin suorituskyvylle – vain todelliset nopeusparannukset tekevät sen, ja se alkaa taustalla olevan teema-arkkitehtuurin optimoinnista."

Ota käyttöön pikakatselu kategoriasivuilla

Pikakatselun ponnahdusikkunat näyttävät tuotteen – suoraan tuotelistaussivulta – sen sijaan, että sinun täytyisi käydä tuotesivulla.

Teoriassa pikakatselun pitäisi säästää asiakkaiden aikaa, mutta se voi itse asiassa haitata asiakkaan kokemusta verkkokaupassa:

• Se lisää ylimääräisen vaiheen asiakkaan matkaan.
• Sitä voidaan klikata vahingossa, mikä on käyttäjälle turhauttavaa.
• Sen voi erehtyä luulemaan tuotesivuksi.
• Ennen kaikkea se voi merkittävästi hidastaa sivun latausaikaa.

Pikakatselun ponnahdusikkunatoteutukset (joko teemaan sisäänrakennettuna tai sovelluksesta) voivat joskus esiladata koko tuotesivun tiedot siltä varalta, että kävijä klikkaa "Pikakatselu"-painiketta.

Se on kuitenkin valtava määrä ladattavaa dataa, erityisesti kokoelmasivulla, jossa on 20 tai 30 tuotepikkukuvaa. Klikkauskartoitus – JavaScript-pohjainen työkalu, joka seuraa, missä käyttäjät vierittävät tai liikuttavat kursoriaan klikatakseen sivustolla – voi auttaa näkemään, käyttävätkö asiakkaat pikakatselua lainkaan.

Joitakin apuun soveltuvia sovelluksia:

• Contentsquare (ent. Hotjar)

Löydä pikakatselu Shopifysta

Pitäisi olla helppo nähdä, onko verkkokaupan tuotepikkukuvissa pikakatselupainiketta. Tarkista teeman muokkaustyökalusta vaihtoehto tämän toiminnon käyttöön ottamiseksi tai poistamiseksi. Jos et näe tätä vaihtoehtoa teeman muokkaustyökalussa, tarkista, tuleeko se sovelluksesta. Jos näin on, sen poistamisen pitäisi olla ilmeistä.

Jos kaksi ensimmäistä vaihetta eivät auta, se on todennäköisesti sisäänrakennettu itse teemaan. Siinä tapauksessa tarvitset kehittäjän tunnistamaan ja poistamaan sen. Etsi Shopify Plus Service Partner auttamaan tässä prosessissa.

Käytä AJAXia hakemaan tuotetiedot, kun kävijä klikkaa pikakatselun ponnahdusikkunapainiketta. Vaihtoehtoisesti voit tallentaa rajallisen määrän tuotetietoja data-attribuutteina tuoteruudukon kohteessa. Rakenna sitten HTML ja ponnahdusikkuna dynaamisesti JavaScriptillä.

Kumpikin vaihtoehto on vähemmän ihanteellinen kuin pikakatselun poistaminen. Tuotetiedot on silti ladattava jokaiselle tuotteelle. Silti se on parempi kuin kaikkien tuotekuvien ja linkkien lataaminen.

Poista tarpeettomat ponnahdusikkunat

Ponnahdusikkunat ovat olemassa näyttääkseen erikoistarjouksia tai houkutellakseen ihmisiä ottamaan seuraavan askeleen asiakaspolulla. Olipa kyseessä kupongin lunastaminen tai sähköpostiosoitteen syöttäminen, ponnahdusikkunat auttavat sitouttamaan ensimmäistä kertaa vierailevia ja avaavat oven tulevalle viestinnälle.

Verkkokaupan ponnahdusikkunoissa on kuitenkin oma hienovarainen taitonsa. Liian monet vilkkuvat grafiikat voivat haitata sivuston nopeutta ja suorituskykyä – puhumattakaan siitä, että ne häiritsevät käyttäjiä olemasta vuorovaikutuksessa verkkosivuston sisällön kanssa, jonka olet jo optimoinut konversioita varten.

Aseta rajat ponnahdusikkunoiden käytölle sivuston nopeusviiveiden estämiseksi. Voit esimerkiksi luoda ponnahdusikkunoille liipaisimia, jotta ylimääräinen koodi ei osaltaan hidasta sivuston latautumista. Näytä ikkuna heti sivun latauksen yhteydessä, kuten poistumisaikeen tai aikaviiveen ponnahdusikkunat. Molemmat näistä liipaisimista antavat hieman liikkumavaraa alkuperäisen sivun latauksen ja ponnahdusikkunan latauksen välillä.

Kevennä etusivun hero-liukusäätimiä

Valtavat monikuvaiset hero-diaesitykset ovat erinomaisia tuotteiden esittelyyn. Valitettavasti niissä on kääntöpuolensa: koko ja laatu, joka hero-liukusäätimeltä vaaditaan hyvältä näyttämiseen, voivat lisätä latausaikoja – varsinkin jos sinulla on neljä tai viisi diaa.

Vähennä etusivun diojen määrää tai poista ne kokonaan. Yksi laadukas, hyvin harkittu hero-kuva – selkeällä toimintakehotteella – auttaa vetämään asiakkaat puoleensa nopeasti, koska aivot käsittelevät visuaalista kuvastoa 60 000 kertaa nopeammin kuin tekstiä.

Jos sinun on käytettävä liukusäädintä, noudata parhaita UX-käytäntöjä, kuten:

• Pidä kiinni kahdesta tai kolmesta diasta
• Näytä diat staattisina sisältöosioina automaattisesti pyörivien karusellien sijaan
• Käytä srcset- tai Lazy Load -ratkaisua kattoratkaisuna

Esimerkiksi Chubbies käyttää optimoituja kuvia perinteisen etusivun hero-liukusäätimen sijaan. Perustajaosakas Tom Montgomery sanoo: "Olemme olleet Shopifyn kanssa ensimmäisestä päivästä lähtien. Kukaan meistä ei ole insinööri, joten on hienoa voida luottaa Shopifyn asiantuntijoihin, jotta voimme keskittyä innovointiin."

Pakkaa, muuta kokoa ja pienennä kuvia

Kuvat muodostavat noin 50–75 % verkkosivujen kokonaispainosta. Tämä voi olla suurempi ongelma verkkokaupan skaalautuessa. Mitä enemmän tuotteita myyt, sitä enemmän kuvatiedostoja sinulla on palvelimellasi. Jokainen sivulla käytetty kuva luo uuden HTTP-pyynnön. Sivun nopeuden virtaviivaistamisen ohella kuvien karsiminen auttaa tekemään enemmän vähemmällä.

Alex Mirzaian, Eightvapen markkinointipäällikkö, sanoo: "Jos luot jatkuvasti sisältöä blogikirjoituksilla tai monta tuotetta päivässä, sinulla on taipumus vain lisätä kuvia verkkosivustolle ajattelematta. Kuvien pakkaaminen voi auttaa paljon, kun sivustolla on tuhansia kuvia."

Voit minimoida kuvan koon laatua heikentämättä häviöttömällä pakkauksella työkaluilla, kuten TinyJPG tai TinyPNG.

Varo myös tyhjiä kuvalähteitä – <img src = ' '> – koodissasi. Ne aiheuttavat ylimääräistä kuormitusta selaimelle lähettämällä vielä yhden pyynnön palvelimillesi. Yksinkertainen ratkaisu on CSS-"spritet", jotka yhdistävät useita kuvia, kuten kuvakkeita, yhdeksi, mikä rajoittaa palvelimen yksittäisten kuvapyyntöjen määrää. Se myös parantaa sivun nopeutta.

Shopifyn sisäänrakennetut kuvakokoparametrit mahdollistavat pienimmän mahdollisen kuvan lataamisen laatua säilyttäen. Se pyytää Shopifylta täsmälleen sen kuvakoon, joka aiotaan näyttää, minkä jälkeen se pienentää CDN:stä ladatun tiedoston kokoa ja vähentää selainpuolen skaalauksen tarvetta.

"Yhdellä asiakkaistamme oli hitaasti latautuva sivusto, joten aloitimme optimoimalla kuvat", sanoo Maria Harutyunyan, Loopex Digitalin perustajaosakas. "Teimme niistä pienempiä ja pakkasimme ne, mikä teki valtavan eron sivujen latausnopeuteen. Itse asiassa kuvat vievät nyt 60 % vähemmän tilaa ja latautuvat paljon nopeammin."

Käytä kevytupotuksia videoille

Videosta on nopeasti muodostumassa internetin kieli – noin 91 % yrityksistä käyttää videota markkinointityökaluna. Mutta sen mukaan, miten ne on upotettu sivustolle, ne voivat aiheuttaa suuria eroja latausajassa.

YouTuben vakioupotuskoodi ei ainoastaan paisuta sivustoa – koska jotkin tiedostot ladataan jo ennen kuin kävijä on klikannut toistopainiketta – vaan se myös käyttää <iframe>-tunnistetta, jossa videosoittimen leveys ja korkeus on kiinteä. Videosi ei mukaudu eri laitteiden näyttökokoihin.

Ratkaisu on kevytupotukset, jotka lataavat videot suoraan verkkosivullesi. Kun sivu alun perin latautuu, sivusto upottaa vain YouTube-videon pikkukuvan. Itse videosoitin (ja kaikki sen ylimääräinen JavaScript) latautuu vasta, kun käyttäjä klikkaa pikkukuvan sisällä.

YouTube-pikkukuvat ovat noin 15 kilotavua, joten kevytupotukset voivat pienentää verkkosivujen kokoa lähes megatavulla.

Lue lisää: Miten tienata rahaa YouTubessa (2026): 9 parasta strategiaa

Vähennä uudelleenohjauksia ja rikkinäisiä linkkejä

Liian monet uudelleenohjaukset ja rikkinäiset linkit voivat vaikuttaa kielteisesti suorituskykyyn ja heikentää hakukonesijoituksia.

Tee siivousta uudelleenohjauksissasi. Esimerkiksi 302-uudelleenohjaukset, jotka osoittavat, että sivu on siirretty väliaikaisesti, voivat heikentää hakukoneoptimointia. Ne myös laukaisevat ylimääräisiä HTTP-pyyntöjä ja viivästyttävät datansiirtoja.

Käytä sen sijaan "välimuistiin tallennettavaa uudelleenohjausta" tai Shopifyn sisäänrakennettua uudelleenohjaustoimintoa – jotka ovat oletusarvoisesti 301-tyyppisiä – navigointipaneelissasi. Ja muista: älä koskaan uudelleenohjaa URL-osoitteita sivuille, jotka ovat itse uudelleenohjauksia.

Sivun elementtien, kuten kuvien, CSS:n ja JS-tiedostojen, rikkinäiset linkit lisäävät HTTP-pyyntöjä ja hidastavat sivustosi nopeutta. Käytä työkalua, kuten Broken Link Checker, niiden poistamiseen. Mukautettujen 404-virhesivujen luominen auttaa kävijöitä, jotka vahingossa syöttävät virheellisen URL-osoitteen sivustollesi.

Ota käyttöön laiska lataus

Laiska lataus on tekniikka, joka estää kaiken sisällön latautumisen välittömästi verkkosivulle. Verkkokaupat, jotka käyttävät laiskaa latausta, näyttävät sisältöä vain, kun käyttäjät saavuttavat tietyt liipaisimet.

Näemme laiskan latauksen toiminnassa, kun käyttäjä vierailee verkkokaupan tuotesivulla. Vain taitteen yläpuolella näkyvä sisältö ilmestyy välittömästi saapumisen yhteydessä, kuten tuotteen nimi, kuvat ja tuotekuvaus. Tukeva sisältö ilmestyy, kun käyttäjät vierittävät tämän osion alle. Käyttäjien luoma sisältö, sosiaalisen median karusellit ja asiakasarvostelut ladataan kaikki laiskasti, jotta koodi ei ylikuormita palvelinta liialla tiedolla heti latautumisen yhteydessä.

GoGoChimpin Chris McCarron käytti tätä verkkosivuston nopeuden optimointistrategiaa asiakkaan verkkokaupassa: "Jokaisella verkkosivulla oli hämmästyttävä määrä kuvia taitteen alapuolella. Ongelma tässä on se, että verkkoselain lataa samanaikaisesti jokaisen verkkosivun kuvan riippumatta siitä, mitkä kuvat ovat näkyvissä. Laiska lataus sen sijaan lataa kuvan vasta, kun se voidaan nähdä selaimessa."

Poista selaimen esto jäsentimen estäviltä skripteiltä

Ennen kuin selain voi näyttää sivun asiakkaallesi, sen on käytävä läpi prosessi nimeltä "HTML:n jäsentäminen". Mutta jäsentimen estävät skriptit keskeyttävät tämän prosessin: kun selain kohtaa jäsentimen estävän skriptin, sen on pysäytettävä kaikki ja keskityttävä vain kyseisen skriptin suorittamiseen ennen kuin se voi jatkaa muuta.

Onneksi tähän on helppo korjaus, ja siihen tarvitaan vain "async"- tai "defer"-attribuutti.

Jäsentimen estävä: <script src="jquery.js"></script> Ei jäsentimen estävä: <script src="jquery.js" defer></script>

Kiinnitä huomiota siihen, että JavaScript itsessään ei estä selaimia – se, miten JavaScript ladataan, määrittää sen, estääkö se selaimen vai ei. Kun olet tehnyt nämä muutokset koodiin, tarkista, että verkkosivustosi tarjoaa edelleen saman halutun kokemuksen.

Järjestä seuranta Google Tag Managerilla

Asiakastieto ruokkii verkkokaupan ja digitaalisen markkinoinnin strategioita. Mutta tuon datan kerääminen voi myös hidastaa verkkosivuston suorituskykyä. Kaikki nuo JavaScript-seurantatunnisteet (esim. yleistä analytiikkaa, konversioita, tavoitteita ja käyttäytymiseen perustuvaa uudelleenkohdennusta varten) ovat usein syyllisiä.

Asiakastiedon kerääminen voi myös olla aika- ja resurssitaakka kehittäjä-, IT- tai markkinointitiimillesi. Tunnistehallintajärjestelmä (TMS), kuten Google Tag Manager, tiivistää kaikki tunnisteesi yhteen JavaScript-pyyntöön. Jos tunnisteen häiriö aiheuttaa verkkosivustosi kaatumisen, TMS auttaa myös poistamaan tunnisteen nopeasti.

Nirav Sheth lisää, että kun Anatta optimoi kauneusalan verkkokaupan sivuston nopeutta, "eniten sivuston nopeutta paransi kaiken muun yli Shopify-API:en hyödyntämisen ja Google Tag Managerin siivoamisen yhdistelmä."

Yksi koodinpätkä on kaikki, mitä tarvitset Shopify Plus -kauppasi tunnisteiden hallintaan yhdessä paikassa Google Tag Managerilla. Lisätietoja Google Tag Managerista saat Shopify Plus -ohjekeskuksesta.

Varo liiallisia Liquid-silmukoita

Liquid on tehokas Shopifyn koodauskieli. On kuitenkin tiettyjä tapauksia, joissa lisähyötyjä on punnittava kompromisseja vastaan.

Forloop-iteraatio on yksi näistä tapauksista. Forloop tarkoittaa, että järjestelmän on käytävä silmukassa läpi (esim. indeksoitava tai haettava) kaikki kokoelman tuotteet, ja se tapahtuu, kun se etsii tiettyä ehtoa (esim. hinta tai tunniste).

Nämä ominaisuudet voivat olla hyödyllisiä tietyissä tapauksissa – kuten kuvien tai tuotevarianttien tulostamisessa. Ne ovat hyödyllisiä myös, kun kokoelmasivulla on pienempi määrä tuotteita, mutta varo niiden vaikutusta latausaikoihin.

Tarkista teemakoodisi varmistaaksesi, ettet suorita Liquid-forloop-silmukoita useaan kertaan etsien samaa tietoa. Näin voi käydä, kun useat kehittäjät työskentelevät teeman parissa ja saattavat kahdentaa tehtäviä tai tuoda ristiriitaista koodia. Näiden kaksinkertaisuuksien poistaminen nopeuttaa sivun latautumista.

Usein on helpompaa käyttää yksinkertaista product.options_with_values -silmukkaa. Tutustu dokumentaatioon ymmärtääksesi, miten Shopifyn mallinnuskieli ja Liquid-silmukat toimivat.

Miten teet verkkosivuston nopeustestin

Verkkosivun ydintiedot ovat joukko mittareita, jotka auttavat arvioimaan verkkosivuston nopeutta. Sivustoilla, jotka täyttävät nämä verkkosivun ydintietojen kynnysarvot, käyttäjät 24 % epätodennäköisemmin hylkäsivät sivuston kesken latauksen.

• Täysin latautunut sivu: tämä on perinteisin mittari sille, kauanko sivun täydellinen latautuminen kestää.
• Aika ensimmäiseen tavuun: nopeus, jolla sivu aloittaa latausprosessin.
• Ensimmäinen merkityksellinen näkymä: nopeus, jolla verkkosivuston kävijät voivat ladata riittävästi sivua ymmärtääkseen sen.

Google PageSpeed Insights pisteyttää jokaisen näistä verkkosivun ydintiedoista tilan mukaan: hyvä, parannettavaa ja huono. Jokaisen pistemäärän alla näet myös sivustollesi räätälöityjä verkkonopeussuosituksia.

Nopeuden optimointi mobiililaitteille

Mobiiliostamisen trendi vain jatkaa kasvuaan – mobiilikaupan myynnin ennustetaan muodostavan 10,4 % kaikesta verkkokaupan myynnistä vuoteen 2025 mennessä.

Korkeista mobiiliostomääristä huolimatta kaikki mobiiliostajat eivät ole halukkaita käyttämään rahaa hitaasti latautuvilla verkkosivustoilla. Niin paljon, että jo millisekunnin parannus mobiilin latausnopeudessa voi parantaa konversioasteita 8,4 %.

Havaittuaan, että suurin osa sen mobiilikävijöistä ei konvertoitunut, yritysvaatteiden ja lahjojen brändi Merchology päätti suunnitella mobiilisivustonsa uudelleen mobiili edellä -asiakaskokemusta varten. Kaksi kuukautta mobiilisivuston julkaisun jälkeen Merchology saavutti 40 %:n kasvun mobiilikonversioasteissa.

Näin voit varmistaa, että mobiili edellä -läsnäolo sekä yleinen suorituskyky ja nopeus ovat kilpailijoidesi tasolla tai jopa paremmat.

Rakenna Accelerated Mobile Pages -sivuja

Accelerated Mobile Pages (AMP) on Googlen sponsoroima projekti, joka muotoilee verkkosivuston sisällön uudelleen mobiililaitteille. Sivustoilla, joilla AMP on käytössä, Google tallentaa jokaisen sivun välimuistiin ja lataa sen uudelleen joka kerta, kun käyttäjä saapuu hausta. Tämä vähentää sivun latausaikoja, mikä johtaa kaksinkertaiseen sivulla vietettyyn aikaan ja 20 %:n kasvuun konversioissa verrattuna ei-AMP-sivuihin.

Ota AMP käyttöön verkkokaupassasi Shopify-sovelluksilla, kuten AMP, Fire AMP tai The AMP App. Jokainen niistä poistaa monimutkaisen koodin mobiilisivustosi sotkemisesta, jotta sivut latautuvat nopeasti.

Poista mobiilivideoiden automaattinen toisto käytöstä

Kaikki mobiili-internetin käyttäjät eivät selaa verkkokauppaasi vahvalla verkkoyhteydellä. Ehkä he ovat Allbirdsin asiakkaita, jotka selaavat kauppiaan verkkosivustoa kesken vaelluksen, kun heidän jalassaan olevat kengät hajoavat. Tai he ovat Firebelly Teanin asiakkaita, jotka tilaavat seuraavan teepussilaatikkonsa odottaessaan parkkipaikalla lastensa koulupäivän loppumista.

Joka tapauksessa nämä ihmiset saattavat olla vuorovaikutuksessa videoiden kanssa, joita kauppiaat käyttävät viestiäkseen potentiaalisten asiakkaiden kanssa mobiilisivustollaan. Mutta näiden videoiden automaattinen toisto voi aiheuttaa vakavia viiveitä sivuston nopeuteen.

Mobiiliverkkoyhteyden on ladattava suuri tiedosto, kun video on asetettu automaattisesti toistuvaksi. Kun se korvataan staattisella pikkukuvalla ja valinnaisella painikkeella videon käynnistämiseksi, koko tiedostoa ei tarvitse ladata heikon internetyhteyden kautta. Kävijät saavat ensimmäisen merkityksellisen näkymänsä ennätysajassa.

Optimoi mobiilikassa

Kassaprosessi unohtuu usein mobiilisivuston nopeutta parannettaessa. Etu-, tuote- ja kategoriasivut saavat eniten huomiota, suurelta osin siksi, että et halua potentiaalisten asiakkaiden kaatuvan ensimmäisellä esteellä: ensimmäisellä mobiilikohtaamisella kauppasi kanssa.

Kassaprosessin jättäminen pois verkkosivuston nopeuden optimointistrategiasta johtaa todennäköisesti korkeampaan ostoskorin hylkäysasteeseen. Ihmiset ovat riittävän varmoja valitakseen käsin ostettavat tuotteet. Mutta jos heitä odottavat viiveet kassalla, heidän on todella rakastettava ostoskorissa olevaa tuotetta jäädäkseen. (Toisin sanoen: menetät heräteostajat.)

Shop Pay mahdollistaa mobiiliostajien kiitämisen kassan läpi ennätysvauhdilla. Shopifyn mukaan Shop Pay -kassaa käyttävillä kauppiailla on 1,91 kertaa korkeampi mobiilin kassalta tilaukseen -aste kuin niillä, jotka käyttävät tavallista kassaa.

"Suurin osa asiakkaistamme nykyään löytää uusia tuotteita liikkeellä ollessaan mobiililaitteillaan, ja jos heidän on täytettävä lomake, olemme menettäneet heidät", sanoo Benjamin Sehl, Kotnin perustajaosakas. "Shop Payn käyttöönotto kassallamme on todella tehnyt asiakaskokemuksen tuskallisimmasta kohdasta ilahduttavan, ja koska se on kytketty miljoonan kauppiaan ekosysteemiin, jopa uudet asiakkaat voivat maksaa yhdellä klikkauksella."

Optimoi verkkosivustosi nopeus ja seuraa vaikutusta konversioihin

On tärkeää saada tiimisi hyväksyntä ajan ja resurssien sijoittamiseen verkkosivustosi suorituskyvyn ja nopeuden optimointiin. Jakamamme data ja työkalut voivat auttaa rakentamaan perustelut.

Monet näistä optimoinneista voi tehdä itse. Kun se ei ole mahdollista, voit pyytää apua Shopify Plus -kumppanilta. He voivat opastaa, miten Shopify-sivustoasi voi nopeuttaa.