Shopifyn nopeusvertailuarvot: Tiedot 1 000 testaamastamme Shopify-kaupasta

Jokainen kauppias haluaa nopean sivuston. Mutta harva tietää, mitä "nopea" todella tarkoittaa Googlen mielestä. Halusin selvän vastauksen Shopify-kaupoille, en arvauksia tai huhupuheita.

Joten rakensin sellaisen.

Määrittääkseni, miltä "riittävän nopea" todella näyttää, analysoin 1 000 Shopify-kauppaa, lukuun ottamatta "headless"-ratkaisuja, ja mittasin sekä PageSpeed Insights -tietoja laboratoriotietojen osalta että Chrome UX Report -tietoja kenttätietojen osalta.

Keskityimme kolmeen Core Web Vitals -mittariin: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ja Cumulative Layout Shift (CLS).

Nämä tulokset yhdistettiin sitten Lighthouse-suorituskykytietoihin, jotta saatiin aikaan selkeä ja reilu vertailu kaikilla sivustoilla.

Sukelletaanpa syvemmälle.

Mitä opit

Tässä raportissa vastataan lyhyesti seuraaviin kysymyksiin:

• Kuinka suuri osa Shopify-kaupoista täyttää Googlen Core Web Vitals -vaatimukset?
  Laskin läpäisyprosentit vuoden 2025 kynnysarvojen mukaan (LCP ≤ 2,5 s, INP ≤ 200 ms ja CLS ≤ 0,1. Pieni paljastus: alle puolet kaupoista täytti kaikki kolme vaatimusta.
• Mitkä toimialat ovat nopeimpia?
  Vertailtiin seitsemää kategoriaa: vaatteet, kauneus, elektroniikka, ruoka ja juomat, yleinen vähittäiskauppa, koti ja ulkoilu tai urheilu, jotta nähtiin, ketkä ovat edellä ja ketkä jäävät jälkeen.
• Miten avainluvut korreloivat keskenään?
  Onko kyse enimmäkseen LCP:stä? Onko vuorovaikutuksen viiveillä tai ulkoasun muutoksilla merkitystä? Jokainen näistä mittareista on piirretty suhteessa komposiittipisteisiin vahvimpien vaikuttajien löytämiseksi.
• Miksi tämä ei ole kilpailu?
  Kevyt DTC-brändi pienellä tuotevalikoimalla voi helposti ylittää globaalin brändin, jolla on monimutkainen kassaprosessi, satoja integraatioita ja miljoonia kuukausittaisia kävijöitä. Selitän, miksi kontekstilla on väliä ja miten tulkitset omia tuloksiasi sen mukaisesti.
• Mitä kauppiaiden tulisi tehdä seuraavaksi? Analyysini ja vuosien verkkokauppakokemukseni perusteella jaan priorisoidun tarkistuslistan parannuksista.

Koko artikkelin ajan näet kaavioita ja huomautuksia. Käytä niitä vapaasti omissa esityksissäsi, myyntiesityksissäsi tai sisäisissä auditoinneissasi, mutta muista mainita lähde, kun teet niin.

Termistö ja lyhenteet saattavat tuntua vaikeaselkoisilta. Seuraava taulukko pyrkii auttamaan tässä.

Miten tiedot kerättiin ja laskettiin

Ennen kuin sukellamme tuloksiin, on tärkeää ymmärtää, miten "makkara tehtiin". Tutkimusasetelmallani oli kolme pääkomponenttia:

1. Testiautomaatio. Loin Bash-skriptin, joka suorittaa PageSpeed Insights -analyysin sekä mobiili- että työpöytäversioille, sekä CrUX API:n sekä alkuperä- että URL-tietojen osalta.
2. Core Web Vitals -kynnysarvot. Googlen ohjeet ovat selvät: hyvä LCP on alle 2,5 sekuntia, erinomainen INP on alle 200 ms ja vakaa CLS on alle 0,1. Näitä kynnysarvoja käytettiin merkitsemään kunkin mittarin läpäisy/epäonnistuminen. Komposiittipisteitä laskettaessa jokainen mittari normalisoitiin tavoitteeseensa, suhteet rajattiin kolmeen (jotta poikkeavat arvot eivät dominoisi) ja sovellettiin painokertoimia: 40 % LCP:lle, 30 % INP:lle, 10 % CLS:lle ja 20 % Lighthouse-suorituskykypisteille.
3. Edustava otos. Luettelo 1 000 Shopify-sivustosta koottiin yhdistelmästä julkisesti saatavilla olevia hakemistoja, toimialojen rankingeja ja omaa asiakaskuntaamme. Pyrimme hajauttamaan otoksen mahdollisimman laajalle toimialoille ja alueille. Se ei ole täydellinen edustus koko Shopify-universumista, mutta se on riittävän suuri paljastaakseen kuvioita ja riittävän pieni suoritettavaksi muutamassa päivässä.

Sekä läpäisy/epäonnistuminen että komposiittipisteiden laskenta perustuvat kokonaan mobiilidataan, sillä useimmat käyttäjät kokevat suorituskykyongelmia mobiilissa. Työpöytätulokset sisällytetään vertailua varten, mutta ne eivät vaikuta komposiittipisteisiin.

Raportti keskittyy tiukasti käyttäjäkokemuksen mittareihin. Tämän raportin lopussa linkitetyssä Google Sheetissä Composite Score Weighted (CSW) ja CWV pass/fail -sarakkeet lasketaan automaattisesti kaavojen avulla. Tarkkuuden varmistamiseksi läpäisy/epäonnistuminen -tulokset tarkistettiin uudelleen raakaa LCP-, INP- ja CLS-dataa vasten, jotta johdonmukaisuus koontitilastoissa varmistettiin.

Kokonaiskuva: alle puolet läpäisee Core Web Vitals -vaatimukset

Kun tulokset kaikista 1 000 myymälästä laskettiin yhteen, vain 48 % täytti Core Web Vitals -kynnysarvot mobiilissa. Tämä tarkoittaa, että yli puolet Shopify-kauppiaista jättää suorituskyvyn parannukset ja mahdollisesti tulot hyödyntämättä.

Tietoaineiston mediaani mobiili LCP oli 2,26 sekuntia, mediaani INP oli 153 millisekuntia ja mediaani CLS oli 0,01 sekuntia. Vaikka INP:n ja CLS:n mediaanit ovat mukavasti Googlen hyvien rajojen sisällä, LCP on aivan rajoilla.

Seuraava kaavio asettaa tuon 48 % läpäisyasteen perspektiiviin, muistuttaen, että lähes puolet kaikista Shopify-kaupoista epäonnistuu edelleen ainakin yhdessä tärkeimmistä suorituskykymittareista.

Komposiittipisteiden jakauma

Kokonaiskohortin suorituskyvyn selvittämiseksi jokaiselle sivustolle laskettiin komposiittipisteet painotetun kaavan avulla. Pisteet voivat teoreettisesti vaihdella välillä 0 (täydellinen) ja 2,5 (erittäin hidas).

Alla oleva histogrammi osoittaa, että useimmat Shopify-kaupat keskittyvät välille 0,5 ja 1,2, ja hitaampien sivustojen pitkä häntä ulottuu jopa 2,2:een. Jokainen palkki näyttää kauppojen määrän kyseisellä komposiittipistealueella (testattuja kauppoja yhteensä 1 000). Alhaisempi pistemäärä on parempi.

Jakautuma on oikealle vinoutunut, mikä kertoo kaksi asiaa:

• Useimmat kaupat pärjäävät kohtalaisesti, mutta eivät erinomaisesti. Käyrän huippu on noin 0,7–0,8, mikä edustaa kauppoja, joissa LCP on noin 2,6–2,8 sekuntia, vankka INP-vaste (≈ 200 ms) ja vakaat asettelut. Nämä sivustot ovat käyttökelpoisia, mutta eivät vielä nopeita.
• Pienempi joukko sivustoja on erittäin hitaita. Kaikki yli 1,5 CSW:n arvot vastaavat usein LCP:itä yli 4 sekunnin ja INP-piikkejä yli 500–700 ms. Nämä sivustot voivat olla kuvapainotteisia, niissä voi olla liikaa skriptejä tai optimoimattomia teemoja.

Kun tarkastelet tuota kaavion keskikohoumaa, herää kysymys: Miksi niin monet kaupat ovat jumissa siellä? Vastaus on yleensä kompromisseissa. Kauppiaat haluavat korkearesoluutioisia kuvia, ponnahdusikkunoita, chat-widgettejä ja animaatioita. Kaikki tämä lisää viiveitä millisekunneissa.

Ilman tietoista optimointia jokainen uusi sovellus tai skripti lisää kitkaa. Siksi usein sanomme, että suorituskyvyssä ei ole kyse vain siitä, mitä lisäät, vaan siitä, mitä päätät jättää pois.

Tarkempi tarkastelu toimialoittain

Kaikki markkinarakot eivät ole samanarvoisia. Huippuluokan kauneusbrändillä, jolla on tuhansia tuotevariantteja, kanta-asiakasohjelma ja useita tai räätälöityjä integraatioita, on hyvin erilainen tekninen jalanjälki kuin pienellä vaatekaupalla tai ulkoiluvälineiden jälleenmyyjällä. Nähdäksemme, miten nämä todellisuudet näyttäytyvät, otoksemme on jaettu seitsemään toimialaan ja laskimme kunkin läpäisyasteen ja mediaanit.

Alla oleva kaavio osoittaa niiden kauppojen osuuden kullakin toimialalla, jotka täyttävät Googlen Core Web Vitals -kynnysarvot mobiilissa. Jokainen palkki edustaa niiden kauppojen prosenttiosuutta kyseisellä toimialalla, jotka läpäisivät kaikki kolme mittaria (LCP, INP ja CLS). Ulkoilu- ja urheilutuotebrändit ovat johdossa yli 60 %:n läpäisyasteella, kun taas kauneus- ja muotibrändit jäävät jälkeen raskaampien visuaalien ja monimutkaisempien teemojen vuoksi.

Core Web Vitals -läpäisyasteet toimialoittain

Tässä muutamia huomioita:

1. Ulkoilu / Urheilu & Varusteet johtaa joukkoa noin 63 %:n läpäisyasteella. Näillä sivustoilla on usein virtaviivaiset luettelot (teltat, pyörät, vaelluskengät) ja vähemmän kolmannen osapuolen skriptejä. Ne priorisoivat nopeat lisää ostoskoriin -prosessit näyttävien markkinointisovellusten sijaan, mikä pitää sivut kevyinä.
2. Ruoka & Juomat ja Elektroniikka ovat molemmat noin 55 %, hieman yleisen keskiarvon yläpuolella. Näillä kategorioilla on kohtuullisen suuria tuotekatalogeja, mutta ne hyötyvät standardeista tuotemalleista ja vähemmistä lisämyynnin ponnahdusikkunoista.
3. Yleinen vähittäiskauppa, koti ja vaatteet sijoittuvat keskelle (noin 47–50 %). Vaatebrändit rakastavat suuria sankarikuvia ja lookbookeja, jotka yleensä hidastavat LCP:tä. Kodintavaraliikkeissä on usein interaktiivisia huoneensuunnittelijoita tai 3D-malleja, jotka lisäävät painoa.
4. Kauneusala on jäljessä, läpäisten CWV:n vain noin 36 % kerroista. Kauneusbrändit panostavat voimakkaasti korkearesoluutioisiin kuviin, video-ohjeisiin, käyttäjien luomien sisältöjen widgeteihin ja kanta-asiakasmoduuleihin. Kaikki tämä kitka näkyy luvuissa.

Mediaaniluvut toimialoittain

Läpäisyasteet kertovat vain osan tarinasta. Syventyäkseni asiaan tarkastelin kunkin toimialan LCP:n, INP:n ja CLS:n mediaaneja.

CLS-arvot ovat yksiköttömiä ja paljon pienempiä kuin LCP tai INP. Alla olevassa kaaviossa ne on kerrottu 1000:lla, jotta ne näkyvät samalla asteikolla.

Tämä kaavio korostaa, miksi läpäisyasteet jakautuvat niin kuin ne jakautuvat:

• Kauneuden mediaani-LCP on lähes 2,5 s, mikä asettaa puolet kauneussivustoista "hyvän" kynnysarvon väärälle puolelle. Yhdistettynä noin 180 ms:n mediaani-INP:hen ja hieman korkeampaan CLS:ään, keskimääräinen kauneuskauppa kamppailee päästäkseen komposiittitavoitteemme alle.
• Ulkoilu / Urheilu & Varusteet ylpeilee parhaalla LCP-mediaanilla (noin 2,1 s) ja alhaisimmalla CLS:llä. Nämä kauppiaat käyttävät usein yksinkertaisempia teemoja ja luottavat korkeakontrastisiin tuotekuviin suurten lifestyle-karusellien sijaan, mikä tuo tuloksia nopeudessa.
• Yleisen vähittäiskaupan ja kodin LCP-mediaanit ovat samankaltaisia, noin 2,25–2,3 s, mutta kodin INP-mediaani on hieman korkeampi. Tämä voi johtua raskaammista tuotekonfiguraattoreista tai monimutkaisemmista kokoelmasivuista.

Tässä vaiheessa saatat ihmetellä, onko jokin mittari tärkeämpi kuin toiset. Juuri tähän vastaamme seuraavaksi.

Keskimääräinen komposiittipistemäärä toimialoittain

Läpäisyasteet ja mediaanit tarjoavat yhden näkökulman, mutta painotettu komposiittipistemäärä kuvaa kokonaisvaltaista suorituskykyä yhdellä asteikolla. Alla olevassa pylväsdiagrammissa näkyy, että kauneusalan keskimääräinen komposiittipistemäärä on korkein (huonompi suorituskyky), kun taas ulkoilu/urheilu ja varusteet -alan keskimääräinen komposiittipistemäärä on alhaisin (paras suorituskyky). Keskimmäisten kategorioiden tiiviimpi ryhmittely heijastaa sitä, kuinka pienet parannukset LCP:ssä tai INP:ssä voivat tehdä merkittävän eron.

Mikä mittari ohjaa komposiittipistemäärää?

Ymmärtääkseni, mikä perustavanlaatuinen mittari nostaa tai laskee komposiittipistemäärää, piirsin jokaisen mittarin suhteessa laskemaani komposiittipistemäärään. Alla oleva kaavio esittää LCP:n, INP:n ja CLS:n välisen suhteen.

Visuaalisesti näet, että viivat muodostavat nousevan diagonaalin LCP- ja INP-kaavioissa, mutta näyttävät hajanaisemmilta CLS-kaaviossa. Tilastollisesti korrelaatiokertoimet ovat 0,77 LCP:lle, 0,57 INP:lle ja 0,38 CLS:lle. Toisin sanoen:

• Suurin sisällön maalaus (LCP) vaikuttaa eniten kokonaissuorituskykyyn. Lähes jokaisella mitatulla hitaalla sivustolla oli LCP-ongelma. Yleisiä syyllisiä ovat liian suuret sankarikuvat, estoa aiheuttavat JavaScriptit ja optimoimaton CSS.
• Interaction to Next Paint -mittarilla on merkitystä, mutta vähemmän. INP-ongelmat, kuten pitkät tehtävät, raskaat JavaScript-kehykset tai viivettömät tapahtumankäsittelijät, ilmenevät usein dynaamisilla sivuilla, kuten ostoskärryjen laatikoissa tai suodatuskäyttöliittymissä. Ne voivat saada sivuston tuntumaan hitaalta, vaikka pääsisältö ilmestyisi nopeasti.
• Kumulatiivisella ulkoasun siirtymällä (CLS) on pienin korrelaatio. Useimmissa Shopify-teemoissa on kohtuullinen asettelun vakaus valmiina. CLS-piikkejä esiintyy kuitenkin sivustoilla, joilla on myöhään latautuvia mainosbannerita, fontteja, jotka vaihtuvat sivun latauksen jälkeen, tai karuselleja, jotka muuttavat kokoa ennakoimattomasti.

Yhteenveto: Jos sinulla on rajalliset resurssit, aloita korjaamalla LCP. Varmista, että sankarikuvasi on alle 2 MB, pakkaa ja skaalaa se oikein ja käytä -attribuuttia sen priorisoimiseksi. Tarkista sitten kolmannen osapuolen skriptit ja pidä INP alle 200 ms. Varaa aikaa poistaa ulkoasun muutoksia myöhemmin, koska ne eivät todennäköisesti vaikuta pistemäärääsi niin paljon.

Voit myös visualisoida kunkin mittarin suhteellisen vaikutuksen komposiittipistemäärään alla olevan yksinkertaisen pylväsdiagrammin avulla. Otimme korrelaatiokertoimet ja piirsimme ne vierekkäin. Tämä helpottaa näkemään, että LCP on tärkein (korrelaatio noin 0,77), jota seuraavat INP (≈ 0,57) ja sitten CLS (≈ 0,38). Värit vastaavat brändimme palettia: punainen LCP:lle, vihreä INP:lle ja musta CLS:lle.

Miksi nopeus ei ole kilpailua

On houkuttelevaa käsitellä tällaisia vertailukohtia tulostauluna: kuka ”voittaa” suorituskykykisassa? Mutta tämä lähestymistapa yksinkertaistaa ongelmaa liikaa ja voi johtaa kauppiaita harhaan. Kevyt Shopify-sivusto, jossa on alle 50 tuotetta, ei chat-widgetiä ja yksinkertainen teema, saattaa läpäistä Core Web Vitals -testit vaivattomasti, kun taas massiivinen monimerkkikauppapaikka tuhansilla tuotteilla, personoidulla suositusjärjestelmällä ja vankalla analytiikalla kamppailee pitääkseen LCP-arvonsa alle 3 sekunnissa. Tarkoittaako tämä, että iso brändi on ”häviöllä”? Tuskin.

Seuraavassa on muutamia syitä, miksi korkea kokonaispistemäärä ei välttämättä tarkoita, että brändi epäonnistuu:

• Tuoteluettelon koko ja monimutkaisuus. Enemmän tuotteita tarkoittaa enemmän kuvia, monimutkaisempaa varianttilogiikkaa ja monimutkaisempaa suodatusta. Jokainen näistä elementeistä lisää painoa. Kauppiaiden, joilla on suuri tuoteluettelo, tulisi vertailla itseään vertaisiinsa, ei minimalistisiin yhden tuotteen kauppoihin.
• Liikenteen määrä ja infrastruktuuri. Suuren liikenteen sivustot investoivat usein kehittyneisiin analytiikka-, personointi- ja A/B-testaustyökaluihin, jotka kaikki lisäävät JavaScriptin suoritusaikaa. Ne voivat myös ottaa käyttöön kolmannen osapuolen tunnisteiden hallintatyökaluja mainontaa varten, mikä heikentää INP-arvoa. Nämä työkalut ovat välttämättömiä tulojen skaalaamiseksi; avainasemassa on toteuttaa ne harkitusti ja siirtää mahdollisimman paljon reuna- tai palvelinpuolelle.
• Liiketoimintamalli ja konversiot. Tilauslaatikot, kootaan itse -paketit ja kansainvälistymisominaisuudet vaativat usein mukautettuja skriptejä ja dynaamista hinnoittelua. Hitaampi mutta ominaisuusrikas sivusto saattaa konvertoida paremmin kuin riisuttu sivusto. Tärkeintä on nopeuden ja liiketoiminta-arvon välinen kompromissi.
• Kehitysresurssit. Monet pienet kauppiaat luottavat valmiisiin teemoihin ja sovelluskaupan lisäosiin. Heillä ei välttämättä ole budjettia palkata kehittäjiä optimoimaan koodia tai pakkaamaan kuvia. Shopifyn sisäänrakennetun kuvanoptimointityökalun kaltaiset työkalut auttavat, mutta ne eivät ratkaise kaikkea.

Tämän havainnollistamiseksi alla oleva kaavio vertaa kuvitteellista ”Simple Storea” ”Complex Storeen”. Yksinkertainen kauppias myy 500 tuotetta ja käyttää vain kourallista sovelluksia. Monimutkainen kauppias myy 20 000 tuotetta ja integroituu tusinaan kolmannen osapuolen järjestelmään. Monimutkaisen kaupan kokonaispistemäärä on selvästi suurempi kuin yksinkertaisen kaupan. Molemmat voivat olla menestyviä yrityksiä, mutta niiden suorituskykyprofiilit ovat luonnostaan erilaisia.

Siksi raporttimme ei luokittele sivustoja tai häpäise ”hitaampia” kauppiaita. Sen sijaan tarjoamme suhteellisia vertailukohtia ja suosituksia. Tavoitteesi ei ole voittaa Patagoniaa tai Gymsharkia; sen sijaan tavoitteena on tehdä sivustostasi mahdollisimman nopea ottaen huomioon ainutlaatuiset rajoituksesi ja asiakkaidesi odotukset.

Keskeiset havainnot ja suositukset

Mitä sinun tulisi siis tehdä kaikella tällä tiedolla? Alla on tiivistetty tarkistuslista, jonka voit jakaa kehittäjäsi, toimistosi tai sisäisen tiimisi kanssa. Se heijastaa suurimpia suorituskykyyn vaikuttavia tekijöitä, jotka olemme havainneet sadoissa auditoinneissa.

Priorisoi Largest Contentful Paint (LCP)

Tee todellisesta LCP:stä nopea.

• Tunnista todellinen LCP-elementti kenttätiedoista, yleensä kotisivun pääkuva tai suuri tuotekuva.
• Esilataa se ja merkitse se tärkeäksi
  ja lisää fetchpriority="high" img-tagiin.
• Tarjoile oikean kokoinen kuva Shopifyn kuvien jakeluverkosta (CDN)
  Käytä Liquid-suodattimia, kuten {{ image | image_url: width: 1440 }}, ja luo oikeat srcset- ja sizes-arvot. Älä lähetä ylisuuria 3k-kuvia mobiililaitteille.
• Pidä pääkuva yksinkertaisena
  Kuvagalleriat, automaattisesti toistuvat videot, raskaat parallaksi-efektit ja monimutkaiset bannerit viivästyttävät LCP-arvoa. Yksi hyvin mitoitettu pääkuva on yleensä nopeampi ja konvertoi paremmin.
• Lisää vain kriittinen CSS, siirrä loput
  Upota näkyvissä oleva CSS mallipohjalle ja lataa loput media- tai rel="preload"-määreillä, joita seuraa rel="stylesheet"-vaihto.

Tietoja CDN:istä Shopifyssa

• Kaikki verkkokaupan teemat käyttävät jo Shopifyn Fastly-sisällönjakeluverkkoa (CDN) resursseille ja kuville. Ne käyttävät myös Cloudflaren reunacachingia joillakin alueilla (pieni, mutta merkittävä ero). Siksi sinun ei tarvitse "lisätä CDN:ää".
• Tärkeintä on välimuistiystävällisyys
  Vältä välimuistia rikkovia kyselyjonoja kuvissa, tee teeman resursseista sormenjälki, pidä erillisten resurssi-URL-osoitteiden määrä pienenä ja vältä käyttäjäkohtaisia HTML-muunnelmia, jotka rikkovat välimuistia.

Pidä Interaction to Next Paint (INP) hallinnassa

Karsii pääketjun työtä.

• Jaa pitkät tehtävät
  Kaikki yli ~50 ms pitäisi jakaa. Käytä requestAnimationFrame- ja requestIdleCallback-funktioita työn pilkkomiseen.
• Siirrä ja viivästytä skriptejä tieltä
  Käytä defer- tai type="module"-määreitä teema- ja sovellusskripteissä. Pidä head-osa puhtaana. Lataa ei-kriittiset pikselit vasta ensimmäisen vuorovaikutuksen jälkeen.
• Käytä Shopify Pixeleitä ja palvelintapahtumia mahdollisuuksien mukaan
  Siirrä asiakaspuolen seurantatyökalut Shopifyn asiakastapahtumiin ja pikseleihin vähentääksesi etupään kustannuksia.
• Auditoi sovelluksia, ei pelkästään skriptejä
  Suosi teemasovelluslaajennuksia ja sovelluslohkoja mukautettujen skriptimerkintöjen sijaan. Poista sovellukset, jotka syöttävät suuria paketteja tai monistavat ominaisuuksia. Yksi arviointisovellus, yksi chat, yksi analytiikka mahdollisuuksien mukaan.
• Suosi CSS:ää JavaScriptin sijaan käyttöliittymän toiminnallisuudessa
  Kiinteät otsikot, harmonikat ja yksinkertaiset animaatiot ovat edullisempia CSS:llä. Kun kuunnellaan vieritystä tai koonmuutosta, tee kuuntelijoista passiivisia ja rajoitettuja.

Minimoi kumulatiivinen asettelun siirtyminen (CLS)

Varaa tilaa kaikelle, mikä saapuu myöhään.

• Aseta aina kuvien leveys ja korkeus ja käytä aspect-ratio-ominaisuutta CSS:ssä, jotta selain voi varata tilaa ennen kuvan latautumista.
• Anna dynaamiselle käyttöliittymälle paikka
  Evästeiden, maantieteellisen sijainnin, alennusten ja ilmoituspalkkien bannereilla tulisi olla varattu tila alusta alkaen. Älä lisää uusia säiliöitä sisällön yläpuolelle.
• Lataa fontit ilman tekstin siirtymistä
  Esilataa vain tarvitsemasi kriittiset fonttitiedostot. Käytä font-display: swap -ominaisuutta. Rajoita painoja ja alijoukkoja. Harkitse järjestelmäfonttistackia, jos brändi sallii sen.
• Tuotesivut
  Varaa tilaa merkeille, varianttivalitsimille, hintalohkoille ja ostoskoriin lisäämisalueelle. Arvosteluilla tulisi olla joko kiinteä säiliö tai ne latautuvat vuorovaikutuksen yhteydessä.

Käytännön Shopify-spesifiset toimenpiteet, jotka vaikuttavat merkittävästi

• Kuvat
  Käytä image_url-funktiota kokoparametrien kanssa ja luo srcset- sekä sizes-attribuutit. Tarjoa AVIF- tai WebP-muodossa, kun alusta palauttaa ne. Pakkaa lähdekuvat ennen latausta pitääksesi ne alle ~500 kt pääkuvien osalta ja selvästi alle muiden osalta.
• Teeman rakenne
  Renderöi pääosio (hero section) aikaisin mallissa. Vältä raskaiden sovelluslohkojen sijoittamista LCP-elementin yläpuolelle.
• Kolmannet osapuolet
  Yhdistä pikselit Shopify Pixelien avulla, poista varjoskriptit ja viivästytä chat-widgetit käyttäjän aikomuksen mukaisesti. Harkitse arvostelujen lataamista klikkauksella tai näkyviin tullessa.
• Navigointi ja ostoskori
  Pidä megavalikko ja ostoskori kevyt. Vältä suuria nesteytyskustannuksia. Jaa koodi, jos teema käyttää moduuleja.
• Testaus
  Vahvista muutokset kenttätiedoilla. Tarkista LCP ja INP CrUX:stä ja Chrome DevToolsista, ei vain Lighthousesta. Profiloi pääketjun työ suorituskykypaneelissa ja etsi pitkiä tehtäviä.

Ennen kuin siirrymme siihen, mitä suorituskykykulttuurin rakentaminen todella vaatii, on syytä kuulla, miten Shopify itse määrittelee tämän vastuun.

”Todellisten Shopify-kauppojen testaamisesta saatu vertailutieto paljastaa kriittisen oivalluksen: suorituskyky on jaettu vastuu. Shopify on rakentanut mekanismeja, kuten ’10 pisteen maksimivaikutus’ -säännön App Store -sovelluksille ja Lighthouse-pohjaisia testauskehyksiä standardien ylläpitämiseksi, mutta kestävä nopeus edellyttää kauppiailta ja kehittäjiltä harkittua lähestymistapaa jokaiseen resurssiin, skriptiin ja integraatioon, jonka he lisäävät.

Kauppiaat, jotka kohtelevat suorituskykyä ydintoimintana, eivät jälkikäteen mietittävänä asiana, ovat niitä, jotka tarjoavat kokemuksia, jotka muuttavat selaimet ostajiksi.”

Michelle Drawert, Shopify Senior Partner Solutions Engineer

Rakenna suorituskyvyn kulttuuri

Teknisten korjausten lisäksi kauppiailla, jotka johdonmukaisesti parantavat suorituskykyä, on muutama samanlainen ajattelutapa:

• Suorituskyky on ominaisuus, ei jälkikäteen ajateltu asia. Käsittele nopeutta osana brändisi lupausta, aivan kuten muotoilua tai tuotteen laatua. Tee siitä KPI ja tarkista sitä säännöllisesti.
• Vertaa itseäsi ajan mittaan. Käytä työkaluja, kuten PageSpeed Insightsia ja CrUX:ää, seurataksesi mittareitasi kuukausittain. Etsi regressioita uusien ominaisuuksien käyttöönoton yhteydessä.
• Kouluta sidosryhmiä. Suunnittelijat, markkinoijat ja kehittäjät kaikki vaikuttavat suorituskykyyn. Opeta heille Core Web Vitals -perusteet, jotta he ymmärtävät, miksi saatat sanoa ”ei” sille uudelle pääkuvavideolle.
• Tasapainota nopeus ja arvo. Ominaisuuksien poistaminen nopeuden vuoksi voi heikentää konversiota. Harkitse aina, tuottaako widget tai integraatio enemmän tuloja tai luottamusta kuin ne millisekunnit, joita se maksaa.

Lopuksi seuraava taulukko tiivistää suosittelemamme toimenpiteet ja niiden suhteellisen tärkeyden nopeuden parantamisessa. Kuvien pakkaaminen ja sisällönjakeluverkon käyttö ovat listan kärjessä, koska ne vaikuttavat suoraan LCP:hen. Skriptien lykkääminen ja pitkien tehtävien jakaminen seuraavat tiiviisti perässä. Kuvien tilan varaaminen ja tapahtumien debouncing ovat yksinkertaisempia, mutta silti hyödyllisiä.

Tutustu tietojoukkoon

Avoimuuden vuoksi jaamme tämän raportin taustalla olevan koko tietojoukon. Kaikki testaamamme sivustot ovat julkisesti saatavilla, ja suorituskykymittarit voidaan luoda uudelleen ilmaisilla työkaluilla. Taulukko on asetettu "vain luku" -tilaan, joten kukaan ei voi vahingossa muuttaa sitä. Voit avata sen suoraan täältä:

Shopify_Speed_Benchmarks_Final

Voit vapaasti luoda kopion taulukosta omalle Drive-tilillesi, suodattaa rivejä, leikata pivot-taulukoita toimialan tai alueen mukaan ja luoda omia löydöksiäsi. Se on lopullinen lähde kaikille tässä artikkelissa mainituille luvuille. Jos julkaiset oman analyysisi näiden tietojen perusteella, mainitse Shero Commerce ja linkitä tähän raporttiin.

Lopuksi varoituksen sana: työkirja on laaja (sen kokoaminen kesti yli viikon), mutta lukemasi raportti tiivistää keskeiset trendit.

Johtopäätös

Näitä tuloksia ei pidä lukea kuvastavan Shopifyn infrastruktuuria. Shopifyn ydinjärjestelmä on johdonmukaisesti alan nopeimpien ja luotettavimpien joukossa, sisältäen sisäänrakennetun globaalin CDN-toimituksen, optimoidun kuvankäsittelyn ja skaalautuvan natiivin välimuistinvahvennuksen.

Tässä esitetyt suorituskykyerot johtuvat kaupan toteutuksesta, mukautetuista teemoista, kolmannen osapuolen skripteistä ja sovellusten paisumisesta, eikä itse Shopifysta.

Itse asiassa, jos samat vertailuarvot suoritettaisiin vanhoilla alustoilla, kuten Magentolla, WooCommercella tai mukautetuilla rakennelmilla, yleiset läpäisyprosentit olisivat huomattavasti alhaisemmat. Shopify tarjoaa yhden vahvimmista teknisistä perustoista erinomaisten Core Web Vitals -pisteiden saavuttamiseen, kun se on oikein rakennettu ja konfiguroitu.

Tärkeintä on LCP, jota seuraa INP ja sitten CLS. Silti keskittyminen pelkästään sijoitukseen tai toisen kauppiaan ohittamiseen jättää huomiotta olennaisen. Tavoitteesi tulisi olla nopean, vakaan ja miellyttävän käyttökokemuksen tarjoaminen, joka ansaitsee luottamusta ja edistää konversiota.