Shopify suorituskyky ja mobiili kokemus
Nopea kauppa ei vain veloita nopeammin Se vastaa nopeammin asiakkaiden aikomuksiin.
Tavoitteena ei ole saavuttaa eristetty täydellinen pistemäärä, vaan parantaa todellisuudessa käytettyjen sivujen kuormitusta, reagointikykyä ja vakautta Aloita mittaamalla, tunnista vastuuhenkilö, sitten oikea liiketoiminnan vaikutuksen mukaan.
Älä sekoita Shopifya siihen, mitä Shopifyyn lisättiin
Alusta tarjoaa isännöinnin, CDN: n ja useita optimointeja.Slowdownit tulevat usein teemasta, sovelluksista, markkinointiskripteistä, mediasta ja räätälöinneistä.
Yksikään partituuri ei kerro koko tarinaa
Vertaa todellisia käyttäjätietoja, useita sivutyyppejä ja lab-testejä Nopea kotisivu ei korvaa hidasta tuotelehteä.
Kolme ulottuvuutta varoa
Mittaa, kun näkyvä pääsisältö tulee saataville, usein suuri kuva tai otsikko.
Tarkkailee vastenopeutta vuorovaikutusten jälkeen: valikko, muunnelmat, suodattimet, kori tai painikkeet.
Mittaa odottamattomia sisällön liikkeitä latauksen aikana.
Shopify yhdistää nämä mittarit verkkosuorituskykyraportteihinsa todellisista tiedoista, kun riittävästi volyymia on saatavilla.
6-vaiheinen diagnostinen menetelmä
Valitse tärkeät sivut
Testaa ainakin tervetuliais, suuri kokoelma, edustava tuotelehti, kori ja toimituksellinen sivu.
Aloita mobiililla
Yhteydet, prosessorit ja näytön koot tekevät ongelmista näkyvämpiä Käytä todellista puhelinta täydentämään työkaluja.
Lue Shopify-raportit
Tarkkaile Core Web Vitals, vaikutusalaan kuuluvia sivutyyppejä ja asennusta tai muutosta vastaavia tapahtumia.
Vertaa PageSpeed Insightsiin
Lab-testaus auttaa havaitsemaan resurssien, raskaiden kuvien, komentosarjojen ja liiallisen selaintyön.
Eristä syy
Testaa kopio teemasta, poistaa tilapäisesti käytöstä sovelluslohko tai komentosarja, ja vertaa sitten ennen ja jälkeen.
Mitta julkaisun jälkeen
Todelliset tiedot vievät aikaa muutosten heijastamiseen Dokumentoi päivämäärä ja seuraa myös muuntamista.
Kustannustehokkaimmat optimoinnit
Tarkastushakemukset
Poista toiminnot ilman riittävää arvoa ja tarkista komentosarjat, jotka jäävät jäljelle asennuksen poistamisen jälkeen.
Vaalenna pääkuvaa
Tarjoile sopivan kokoisena, säilytä hyödyllinen laatu ja vältä pääsisällön muodostavan kuvan viivyttämistä.
Käytä responsiivisia kuvia
Selain pitäisi ladata näyttöystävällinen versio mieluummin kuin jättimäinen työpöytätiedosto mobiilissa.
Vähennä JavaScriptiä
Suosi HTML - ja CSS-koodia mahdollisuuksien mukaan Lataa toimintoja vain niitä tarvitsevilla sivuilla.
Lykkää ei-olennaisia skriptejä
Kaikkien chat, arvostelut, kartat, videot ja markkinointityökalut eivät saa estää ensimmäistä näyttöä.
Master fontit
Rajoita perheitä ja rasvoja, esilataa vain olennaisia tiedostoja tai harkitse järjestelmäfonttia.
Varaulottumat
Aseta kuvien, videoiden ja widgetien leveys ja korkeus, jotta vältytään sisältöhyppyiltä.
Meloa isot kokoelmat
Älä lataa satoja tuotteita kerralla, kun sivutus tai hallittu kuormitus riittää.
Siivoa markkinoinnin seuranta
Poista käyttämättömät tunnisteet ja tarkista kunkin ladatun työkalun arvo tunnisteenhallinnan kautta.
Priorisoi vaikutuksella
| Toiminta | Tavanomainen prioriteetti | Miksi |
|---|---|---|
| Poista raskas ja hyödytön sovellus | Korkea | Voi vähentää JavaScript, kyselyt ja selaimen toimivat useita sivuja |
| Optimoi mobiilisankari | Korkea | Suurin näkyvä elementti vaikuttaa usein havaittuun kuormitukseen |
| Viivytä video vesiviivan alla | Korkea | Vältä välittömästi lataamasta näkymätöntä mediaa |
| Rajoita kirjasimia ja rasvoja | Keskiarvo | Vähentää latauksia ja nopeuttaa tekstin näyttöä |
| Puhdas toistuva Nestemäinen koodi | Keskiarvo | Voi parantaa renderöintiaikaa monimutkaisissa malleissa |
| Hanki muutama kilotavu pienestä kuvakkeesta | Heikko | Rajoitettu vaikutus, jos suuret käsikirjoitukset ja media pysyvät raskaina |
Kuvat: asetukset, joilla on todella merkitystä
Tekemään
- Käytä Shopify-kuvasuodattimia, joissa on useita leveyksiä
- Anna mitat varataksesi tilaa
- Lasimainen median lataaminen näytön alle
- Isäntäresurssit Shopify CDN: llä
- Testaa mobiili croping
Välttää
- Lähetä sama 3000 px kuva kaikille näytöille
- Laita päävisuaaliin viivästynyt kuormitus ilman syytä
- Käytä useita raskaita liukusäätimiä
- Lataa automaattinen video teräväpiirtona
- Kerro näkymättömiä kuvia karuselleissa
Kolmannen osapuolen sovellukset ja komentosarjat: päätä arvon mukaan
Tunnista toiminto
Mitä se itse asiassa tuottaa: myynti, luottamus, tuki, data tai yksinkertainen koristelu?
Mittaa alue
Ladataanko komentosarja kaikilla sivuilla, kun siitä on hyötyä vain tuotteessa tai kärryssä?
Hae natiivifunktiota
Teema tai Shopify saattaa jo tarjota kevyemmän ratkaisun.
Testi ennen/jälkeen
Vertaa kopiota teemasta lohkon kanssa ja ilman, ja tarkista sitten, että tiedot ja myynti pysyvät oikeina.
Poista puhtaasti
Kun olet poistanut asennuksen, tarkista koodikatkelmat, tunnisteet ja tiedostot, jotka saattavat pysyä aktiivisina.
Asiakirja
Säilytä kunkin ulkoisen komentosarjan omistaja, tarkoitus ja tarkistuspäivämäärä.
Teeman tekniset optimoinnit
Progressiivinen JavaScript
Olennaisten ominaisuuksien, kuten tuotteen löytämisen ja ostamisen, tulee pysyä vankkoina. Käytä JavaScriptiä parantaaksesi, älä tee koko sivusta riippuvaista.
Ei-estokomentosarjat
Mukautetut attribuutit ja ehdollinen lataus estävät tiedostoja viivästyttämästä sivun alkurakennetta.
Tehokas neste
Vältä toistuvia monimutkaisia laskelmia silmukoissa ja analysoi hitaat osiot Shopify-työkaluilla.
Kohdennettu CSS
Vähennä kokonaisriippuvuuksia ja vältä sivulta puuttuvien komponenttityylien lataamista.
Kriittiset resurssit
Esilataa vain olennaiset resurssit ensimmäisellä näytöllä Liian monet esilataukset luovat uutta kilpailua.
Ohjaustyökalut
Teeman tarkistus voi havaita suuria nippuja, etäresursseja, JavaScriptin estämistä ja joitain CSS-riippuvuuksia.
Mitä ei tehdä
Jatketaan pistemäärä 100 hinnalla millä hyvänsä
Älä poista kannattavaa ominaisuutta muutamaan kohtaan Vertaa teknisiä kustannuksia ja kaupallista arvoa.
Optimoi vain vastaanotto
Vierailijat saapuvat usein suoraan tuotearkille, mallistolle tai esineelle.
Asenna nopeussovellus ilman diagnostiikkaa
Lisäkerros ei aina korjaa syytä ja saattaa lisätä JavaScriptin.
Lataa laiskasti kaikki sisältö
Ensimmäisen tärkeän visuaalisen pitäisi näkyä nopeasti Lazy-lataus on erityisen hyödyllistä näkyvän alueen alla.
Poista olennainen seuranta
Säilytä tilauksiin, määritykseen ja vaatimustenmukaisuuteen tarvittavat työkalut ja optimoi sitten niiden lataus.
Muokkaa aktiivista teemaa kopioimatta
Työskentele kaksoiskappaleen parissa, testaa kurssit ja säilytä palautettava versio.
7 päivän toimintasuunnitelma
Usein kysyttyjä kysymyksiä
Mitä PageSpeed-pisteitä sinun pitäisi pyrkiä?
Ei ole olemassa yhtä pistemäärää, joka takaa hyvän kokemuksen. Ennen kaikkea, etsiä parantaa metriikkaa, tärkeitä sivuja ja todellista dataa poistamatta hyödyllisiä toimintoja.
Onko Shopify luonnollisesti hidas?
Shopify tarjoaa optimoidun infrastruktuurin ja CDN:n. Lopullinen suorituskyky riippuu suuresti lisätystä teemasta, mediasta, sovelluksista ja komentosarjoista.
Hidastavatko kaikki sovellukset kauppaa?
Ei. Niiden vaikutus vaihtelee niiden koodin, lataussivujen ja toiminnon mukaan Arvioi jokainen yksilöllisesti.
Pitääkö minun pakata kaikki kuvat manuaalisesti?
Shopify tekee muunnoksia ja tarjoilee kuvia CDN: nsä kautta, mutta sinun tulee aina pyytää sopivia ulottuvuuksia ja välttää tarpeettoman suuria lähdetiedostoja.
Kuinka kauan ennen kuin näet parannusta?
Lab-testit vastaavat välittömästi, kun taas todellisiin käyttäjiin perustuvat raportit vaativat lisäkäyntejä ja voivat näyttää viivettä.
Hyvä optimointi poistaa jarrut arvon irrottamatta
Tee Shopify-kaupastasi nopeampi, vakaampi ja nautinnollisempi mobiilissa
Tarkista teemasi, sovelluksesi, komentosarjasi ja mediasi ennen muutosten tekemistä.
