Jos Shopify-kaupassasi on asennettuna useampia sovelluksia, on suuri mahdollisuus, että tarpeettomat tai kaikkialla tarpeettomat skriptit hidastavat sitä.
Monet näistä skripteistä latautuvat oletusarvoisesti globaalisti, jopa sivuille, joilla niillä ei ole mitään tarkoitusta.
Tämän turhan tavaran tarkistaminen ja poistaminen on yksi nopeimmista ja luotettavimmista tavoista parantaa latausaikaa ja sivuston suorituskykyä.
Tässä postauksessa näytämme vaihe vaiheelta, miten teet itse Shopify-sivuston auditoinnin ja lyhennät latausaikaasi.
Skriptien ja sovellusten aiheuttama turha kuorma Shopifyssa
Uusin 1 000 Shopify-kaupan nopeustestauksemme osoitti, että alle puolet läpäisee jatkuvasti Core Web Vitals -kynnysarvot! Skriptit ja sovellukset ovat suuri syy suorituskyvyn heikkenemiseen.
Skriptien ja sovellusten aiheuttama turha kuorma tarkoittaa tarpeettoman, globaalisti ladatun tai huonosti rajatun koodin kertymistä verkkosivustollesi. Ajan myötä, varsinkin jos et jatkuvasti optimoi, nämä "jäänteet" voivat alkaa hidastaa sivustoasi.
Tässä on jaottelu ei-niin-tekniikkaorientoituneille lukijoille.
- Skripti on joukko JavaScriptillä kirjoitettuja ohjeita, jotka kertovat selaimelle, mitä tehdä. Jotkut skriptit ovat kriittisiä sivun latautumisen kannalta; toiset eivät. Tyypillinen esimerkki on seurantaskripti tai markkinointisovellus, joka latautuu tarpeettomasti jokaiselle sivulle.
- Sovelluskuorma tarkoittaa tarpeettomia sovelluksia tai sovelluskoodia, jotka sisältävät skriptejä ja käyttämättömiä resursseja, kuten JavaScriptiä, CSS:ää tai kuvia, jotka latautuvat sivuille, joilla niitä ei tarvita. Sanotaanpa tuotearvostelusovellus, joka latautuu kaikkialle sivustolle, ei vain tuotesivuille.
Mitä opit
Tunnistat testaustyökalujen avulla, mitkä skriptit ja koodinpätkät hidastavat verkkosivustoasi, ja poistat tarpeettomat aiheuttamatta virheitä, kun ne testataan ja rajataan oikein.
Opimme, miten:
- Tunnista, mitkä skriptit todella ajetaan
- Ymmärrä, milloin ja missä ne suoritetaan
- Poista tai rajaa ne turvallisesti
Mitä työkaluja käytämme?
Hallintapaneeli ei näytä kaikkea tarvittavaa. Käytämme yhdistelmää alkuperäisiä Shopify-työkaluja ja selaimesi sisäänrakennettuja työkaluja, nimittäin Shopify Theme Inspector -työkalua, Shopify Theme Editor -työkalua, Lighthousea ja Network Waterfall -työkalua.
Alla oleva taulukko selventää kunkin työkalun käyttötarkoitusta.
| Työkalu | Mihin sitä käytetään | Mitä se ei kerro |
|---|---|---|
| Shopify Theme Inspector | Hitaiden Liquid-tiedostojen, pätkien ja sovelluksella renderöityneen teemakoodin löytäminen | JavaScriptin koko, kolmannen osapuolen skriptit tai verkon ajoitus |
| Shopify Theme Editor | Sovelluksen upotusten poistaminen käytöstä ja teemakoodin poistaminen tai muokkaaminen | Mitkä skriptit ovat hitaita tai tarpeettomia |
| Lighthouse | Korostaa skripti-/sovelluskuormaa ja arvioi suorituskyvyn vaikutusta | Mihin skripti on lisätty teemassa |
| Network Waterfall | Näyttää, mitä skriptejä latautuu, milloin ne latautuvat ja mikä ne käynnisti | Liquid-renderöinnin suorituskyky |
Kauppasi ei isännöi sovelluksia
WordPressissä lataat laajennuksen ja asennat täydellisen koodin sivulle. Kun se poistetaan, koodi poistetaan. Shopifyssa asia on toisin; et lataa sovellusta suoraan kauppaasi. Asennettuna on vain sovelluksen API (liitin sivustosi ja sovelluksen välillä), ja se sallii sovelluksen:
- Injektoida skriptejä
- Renderöidä lohkoja tai katkelmia
- Kutsua Shopify API:ja
- Ladata resursseja sovelluksen omilta palvelimilta
Sovellus elää edelleen kauppasi ulkopuolella, mutta se voi syöttää Liquid-katkelmia, resursseja tai asetuksia teemaasi, kun taas suoritusaikaiset skriptit latautuvat ulkoisesti. Tämä tarkoittaa useita asioita sivustosi suorituskyvylle ja käsillä oleville tehtävillemme jäännösten puhdistamisessa.
- Jokainen sovellus lisää "suoritusaikakustannuksia", vaikka se olisi kevyt: sovellus lataa edelleen resursseja, jäsentää JavaScriptiä ja suorittaa logiikkaa sivun latautuessa, mikä lisää verkon viivettä.
- Skriptit ladataan yleensä globaalisti oletusarvoisesti: sovelluksen skripti latautuu yleensä kaikille kauppasi sivuille, vaikka toimintoa ei tarvittaisikaan kyseisillä sivuilla.
- Sovellusten poistaminen ei takaa puhdistusta: kun sovellus poistetaan, sen ulkoiset palvelut lakkaavat vastaamasta, mutta syötetyt Liquid-katkelmat, sovelluksen upotukset, skriptitunnisteet tai metakentät voivat jäädä jäljelle.
Kolme tapaa lyhentää Shopifyn latausaikaa
Latausaikaa voi lyhentää kolmella käytännöllisellä tavalla, olipa sovelluksia asennettuna tai jo poistettuna:
1. Poista sovelluksen upotus käytöstä
- Skripti tulee sovelluksesta, jota edelleen käytät (mutta et tarvitse kaikkialla), tai
- Et ole 100 % varma, mitä koodi tekee, tai
- Lighthouse näyttää toimittajaskriptejä, ja haluat peruuttamattoman muutoksen.
2. Poista pätkä/skripti teeman koodista, kun
- Sovellus on poistettu, mutta sen skriptit latautuvat edelleen (klassinen jäännös)
- DevTools "Initiator" osoittaa theme.liquid-tiedostoon, pätkään tai osioon
- Koodi on selvästi vanha asennuslohko (kommentit, toimittajaverkkotunnukset jne.)
3. Ehdollinen lataus, kun
- Tarvitset sovellusta, mutta vain tietyillä malleilla. Tämä ei aina toimi; jotkut sovellukset vaativat globaalin saatavuuden ja rikkoutuvat, jos ne ladataan ehdollisesti.
Hyvä esimerkki on Yotpo Reviews -sovellus aiemmasta analyysistamme. Ehdollisesti sen lataaminen tuotesivuille olisi ihanteellista. Yksinään vain yhden sovelluksen optimointi ei ole merkittävä parannus. Saman menettelyn toistaminen jokaiselle sovellukselle on osa mitä käytämme asiakkaidemme verkkosivustojen nopeuttamiseen.
Käytä Theme Inspectoria Shopify-suorituskyvyn tarkasteluun.
Shopify-sovellukset lisäävät usein omia pätkiään teematiedostoihisi. Teematarkastaja on erinomainen apu Liquidissa renderöityjen sovelluspätkien löytämiseen ja osoittaa sinulle teematiedoston, joka on hidas. Se ei diagnosoi kolmannen osapuolen JavaScript-latauksia tai verkoston pullonkauloja.”
Vaikka keskitymme skriptien aiheuttamaan ylimääräiseen kuormitukseen, Theme Inspector auttaa sulkemaan pois palvelinpuolen Liquid-pullonkaulat ennen kuin syyttää JavaScriptiä.
Jos et ole jo tehnyt sitä, lataa Shopify Theme Inspector for Chrome -laajennus.
Mitä sinun on etsittävä:
- "Mikä Liquid-malli/katkelma/osio on hidas?"
- "Kestääkö jokin tietty sovelluksen katkelma (renderöity Liquidilla) 300 ms+ renderöityä?"
- "Johtuuko hidastuminen palvelinpuolen teeman renderöinnistä, eikä JavaScriptistä?"
Käytä Lighthousea kolmannen osapuolen skriptien aiheuttaman turhan kuorman löytämiseen.
Lighthouse on avoimen lähdekoodin työkalu, johon pääset suoraan Google Chromesta ja joka analysoi suorituskykyä, saavutettavuutta, hakukoneoptimointia ja parhaita käytäntöjä käyttämällä laboratoriotietoja. On ratkaisevan tärkeää mitata verkkosivustosi yleistä suorituskykyä, koska se on monien online-nopeustestaustyökalujen moottori.
Käsillä olevien tehtäviemme kannalta Lighthouse on paras korostamaan kolmannen osapuolen skriptien aiheuttamaa turhaa kuormitusta ja antamaan arvioituja säästöjä ja suuntaa-antavia merkkejä, mutta se ei aina kerro, mihin kyseinen skripti on lisätty teemaasi.
Lisäksi Lighthousen tulokset voivat vaihdella ajojen välillä, ja sitä tulisi käyttää diagnostiikkatyökaluna, ei takuuna todellisista käyttäjäkokemuksen paranemista.
1. Käytä Lighthousea verkkosivustoltasi
Sinun ei tarvitse olla kehittäjä päästäksesi Lighthouseen. Napsauta hiiren kakkospainikkeella Chromesta ja paina "Tarkasta elementti". Sieltä siirry Lighthouseen alla olevien kuvakaappausten mukaisesti.
Vinkki: Suorita Lighthouse incognito-tilassa, jotta selaimen laajennukset eivät häiritse
2. Analysoi suorituskykyä työpöytä- ja mobiililaitteille
Meidän tarvitsee analysoida vain suorituskykyä, sillä siellä piilevät latausongelmat. Muutaman minuutin odotus paljastaa sivustosi tulokset ja hidastukset.
3. Tunnista skriptit ja sovellusten aiheuttama kuorma
Selaamalla tuloksia alas kohtaan Insights and diagnostics näemme sovellusten nimet ja relevantin koodin, kuten kuvakaappauksessa näkyy. Jos tietyn sovelluksen nimi ilmestyy, se ei tarkoita, että sinun pitäisi/voit poistaa tai kommentoida koodia välittömästi teemaeditorista.
Tässä esimerkissä voimme nähdä:
- Yotpo merkitty kohdassa käyttämätön CSS
- Klaviyo merkitty kohdassa perintö JavaScript
- Lisävaroituksia liittyen käyttämättömään JavaScriptiin ja JavaScriptin suoritusajan
Tämä on jatkotutkimuksen lähtökohta. Ajattele sitä lyhytlistana. Se auttaa meitä tunnistamaan, mitkä sovellukset vaikuttavat suoritusaikaiseen painoon ja löytämään globaalin latauksen malleja. Vasta kun ymmärrämme:
Mitä sovellus tekee: Ymmärrä, mitä koodi tekee ja voiko sen poistaminen rikkoa muita toimintoja.
Missä sitä tarvitaan: Selvitä, tarvitaanko sovellusta tietyllä sivulla vai ei.
Miten se ladataan: Meidän on ymmärrettävä, milloin ja miten skriptit ladataan. Jotkut sovellukset vaativat skriptien globaalin injektion (suoritus jokaisella sivulla), emmekä voi poistaa sovellustoimintoja, jos sitä ei käytetä tietyllä sivulla.
Miten poistamani sovellukset näkyvät?
Tyypillisesti löydät seuraavat:
- Myyjän skripti latautuu edelleen, vaikka ominaisuus on poistettu.
- CSS/JS on merkitty käyttämättömäksi sivuilla, joilla sen ei pitäisi lainkaan latautua.
- Kolmannen osapuolen aika on korkea myyjälle, jota sinulla ei enää ole asennettuna.
Network Waterfallin käyttö
Seuraava työkalumme on Network Waterfall. Kuten Lighthouse, voit käyttää sitä suoraan selaimestasi; toisin kuin Lighthouse, se testaa verkkosivustoasi verkon nopeuden perusteella. Kehittäjät käyttävät sitä jatkuvasti varmistaakseen, että verkkosivustot latautuvat tehokkaasti, jopa hitaammilla verkoilla.
Network waterfall on paras työkalu näkemään jokaisen skriptipyynnön, tunnistamaan suurimmat/hitaimmat kolmannen osapuolen tiedostot ja varmistamaan, latautuuko skripti sivuille, joilla sen ei pitäisi latautua.
"Initiator" kertoo, kuka skriptin latasi. Jos Initiator osoittaa:
- theme.liquid-tiedostoon, pätkään tai osioon, se on todennäköisesti turvallista poistaa jos sovellus on poistettu
- Sovelluksen latausohjelmaan tai toimittajan CDN:ään, tarkista sitten sovelluksen upotukset tai sovelluksen asetukset
- Toisen kolmannen osapuolen skriptin poistaminen on tapahduttava ylävirrassa, ei teeman koodissa
| Mitä näet verkossa | Alkuunpanija osoittaa | Sovelluksen tila | Mitä tehdä | Miksi |
|---|---|---|---|---|
| Myyjän skripti latautuu jokaiselle sivulle | theme.liquid, pätkä tai osio | Poista pätkä/skripti | Lykkää/viivästytä | Tämä on jäännöskoodia (haamujäännös), joka laukaisee edelleen pyyntöjä |
| Myyjän skripti latautuu globaalisti | Sovelluksen lataaja / Sovelluksen upotus | Sovellus on edelleen asennettu | Poista sovelluksen upotus käytöstä | Turvallisin, peruutettavissa oleva tapa pysäyttää globaali lataus |
| Myyjän skripti latautuu vain tietyille sivuille | Teeman ehto tai osio | Sovellus on edelleen asennettu | Pidä ennallaan | Skripti on jo rajattu oikein |
| Myyjän skripti latautuu globaalisti, mutta ominaisuutta käytetään vain tuotesivuilla tai ostoskorissa | Teemakoodi tai upotus | Sovellus on edelleen asennettu | Ehdollinen lataus | Vähentää turhaa kuormitusta rikkomatta toiminnallisuutta |
| Myyjän skripti latautuu toisen kolmannen osapuolen kautta (GTM, suostumustyökalu) | Kolmannen osapuolen lataaja | Sovellus voi olla poistettu | Poista ylävirran lataaja | Teemakoodin poistaminen ei estä sitä |
| Myyjän skripti latautuu aikaisin ja estää renderöinnin | Sivu → myyjän skripti | Sovellus on edelleen asennettu | Lykkää / viivästytä | Säilyttää ominaisuuden samalla parantaen LCP:tä |
Käyttämättömän koodin poistaminen
Kun tiedät, mikä poistetaan, kopioi teemasi ensin. Siirry sitten Online Store --> Teemat --> Toiminnot --> Muokkaa koodia, kommentoi se pois, testaa huolellisesti ja poista sitten vasta rivit/pätkätiedostot.
Vinkki: Varmuuskopioi teemasi aina ennen koodin muokkaamista kopioimalla se! Voit rikkoa muita sivun toimintoja tahattomasti.
1. Etsi koodi
Network Waterfallista kopioi koko Request URL tai yksinkertaisesti kopioi URL Lighthousesta kohdasta "Vähennä käyttämätöntä JS/CS.S" ja etsi sitä (tai toimittajan nimeä) hakupalkista.
Tätä URL-osoitetta/verkkotunnusta etsit teemasta.
2. Kommentoi skripti pois
Koodissa kommentoi ensin (jotta voit palauttaa), testaa kaupan etusivu ja poista sitten pysyvästi rivit/katkelmatiedostot vasta kun kaikki toimii.
Jos se on Liquid-renderöinti/katkelma:
{% comment %}
{% render 'app-name' %}
{% endcomment %}
Jos kyseessä on skriptitunniste:
3. Tallenna ja testaa verkkosivusto
Haluat varmistaa, että kaikki verkkosivustolla toimii oikein, ennen kuin poistat rivin/pätkän pysyvästi. Jos mikään ei ole vialla, jatka koodin poistamista.
Tässä on yleinen tarkistuslista siitä, mitä sivustolla tulee testata:
| Mitä testataan | Missä testataan | Mitä tarkistetaan |
|---|---|---|
| Etusivu latautuu puhtaasti | Suodattimet, lajittelu, ääretön vieritys, merkit ja pikalisaus toimivat edelleen | Ei rikkinäistä asettelua, puuttuvia fontteja/kuvakkeita tai konsolivirheitä |
| Kokoelmasivu | mikä tahansa /collections/... | Analytiikka ja seuranta, mukaan lukien GA4-tapahtumat, GTM-kontit ja konversioseuranta, jos asiaankuuluvia |
| Tuotesivu (PDP) | mikä tahansa /products/... | Arvostelut, tähtiluokitukset, kanta-asiakaswidgetit, lisämyynti, ostoskorin lisäyspainike toimivat |
| Ostoskori-sivu | /cart | Ostoskorin laatikko/sivu toimii, määrät päivittyvät, alennukset, toimitusarvio |
| Kassan polku (niin pitkälle kuin mahdollista) | Lisää ostoskoriin → kassa | Ei puuttuvia toimitus-/maksuehtoja, ei estettyä kassapainiketta |
| Haku | /search | Hakutulokset näkyvät oikein; ei käyttöliittymän häiriöitä |
| Tilin kirjautuminen | /account/login | Kirjautuminen toimii; ei uudelleenohjaussilmukoita |
| Chromen responsiivinen tila/puhelin | odota 10–30 s tai käynnistä poistumisaie | Sähköpostin keruu, tekstiviestilomakkeet, kanta-asiakasponnahdusikkunat näkyvät edelleen (tai eivät, jos odotetaan) |
| Analytiikka/seuranta (jos asiaankuuluvaa) | DevTools → Verkko (suodata myyjä) | Myyjän pyynnöt laukeavat edelleen, jos halusit pitää seurannan |
| Verkon vahvistus | DevTools → Verkko → JS | Poistettu skripti ei enää lataudu sivuille, joilla sen ei pitäisi |
| Mobiilitarkistus | Chromen responsiivinen tila / puhelin | Ei asettelun siirtymiä, kosketuskohteet toimivat, suorituskyky ei heikentynyt |
Nopeus ja konversiot ovat saman kolikon kaksi puolta
Pienet, merkitykselliset parannukset nostavat sivustosi lopulta jokaisen toimialan parhaiden verkkokauppojen tasolle. Kyse ei ole vain nopeudesta, vaan myös hankintastrategiasi kärsii, ellet jatkuvasti optimoi sivuston suorituskykyä.
Google ja nykyiset suurikokoiset kielimallit suosivat yleensä nopeita verkkosivustoja ja saattavat sijoittaa ne korkeammalle tai näyttää niiden sisällön suoraan keskusteluissa, kun suorituskyky heijastaa todellista käyttäjäkokemusta. Toisaalta konversioprosentin ja nopeussuorituskyvyn välillä on suora yhteys, joka on aina merkityksellinen.
Käsittelemämme asiat ovat vain yksi osa palapeliä. Suora puhelu kehitystiimimme kanssa auttaa sinua paikantamaan tarkemmin, mitä on optimoitava ja millaisen vaikutuksen sillä olisi. Varaa maksuton puhelu nyt ja säästä itseltäsi kuukausien tutkimus ja kokeilu ja erehdys.
