Optimizacija hitrosti v Shopify: tema in aplikacije

Vse trgovine Shopify tečejo na istih strežnikih in istem CDN, zato je počasna trgovina počasna zaradi tega, kar nalaga: teme, skript aplikacij, slik in videa. Optimizacija hitrosti v Shopify pomeni odstranjevanje in zmanjševanje teh stvari, ne menjavo gostovanja. V večini trgovin največ prinesejo odstranitev neuporabljene kode aplikacij, stiskanje glavne slike in poznejše nalaganje pripomočkov.

Ta vodnik pokaže, kako hitrost pravilno izmeriti, nato pa gre skozi popravke v vrstnem redu, v katerem se običajno obrestujejo. Je del vodnika SEO za Shopify.

Meri prave strani

Preizkusi stran izdelka in stran zbirke, ne samo domače strani. To so strani, ki so uvrščene in na katerih kupci pristanejo.

Google PageSpeed Insights da laboratorijske ocene za posamezno nalaganje in, če ima trgovina dovolj obiskovalcev, prave Core Web Vitals uporabnikov Chroma v zadnjih 28 dneh. Google uporablja številke pravih uporabnikov.
Poročilo Core Web Vitals v Search Console tvoje URL-je združi po stanju, zato vidiš, ali imajo vse strani izdelkov isto težavo.
Poročilo o spletni zmogljivosti v Shopify v analitiki pokaže iste meritve pravih uporabnikov skozi čas, kar je uporabno za preverjanje, ali je sprememba pomagala.

Osredotoči se na tri Core Web Vitals: Largest Contentful Paint (kako hitro se prikaže glavna slika ali besedilo), Interaction to Next Paint (kako hitro se stran odzove na dotik) in Cumulative Layout Shift (koliko stvari poskakuje). Laboratorijske ocene se od preizkusa do preizkusa spreminjajo; ne lovi popolnih 100.

1. Odstrani kodo aplikacij, ki jih ne uporabljaš

Aplikacije so najpogostejši vzrok za počasno trgovino Shopify. Vsaka, ki posega v trgovino, lahko na vsako stran doda JavaScript in CSS.

Naštej aplikacije, ki jih imaš. Odstrani vse, ki jih ne uporabljaš več.
Odstranitev ne odstrani vedno kode, ki jo je aplikacija dodala v temo. V datotekah teme (Online Store > Themes > Edit code) poišči ime aplikacije in odstrani preostale izseke in oznake script.
Daj prednost aplikacijam, ki uporabljajo razširitve aplikacij za teme (bloke aplikacij, ki jih dodaš v urejevalniku tem). Ob odstranitvi se čisto odstranijo in se naložijo samo tam, kamor jih postaviš.
Pri aplikacijah, ki jih obdržiš, preveri, ali se naložijo na vsaki strani. Tabela velikosti je potrebna samo na straneh izdelkov.

2. Popravi največjo sliko

Na večini strani izdelkov in zbirk je največji element fotografija izdelka ali glavna pasica. Poskrbi, da je hitra:

Nalagaj smiselne datoteke. Fotografije pred nalaganjem pomanjšaj na približno 2.000 do 2.500 slikovnih pik širine in jih stisni. Shopifyjev CDN samodejno streže pomanjšane različice in sodobne formate, kot je WebP, vendar ogromen izvirnik še vedno stane čas.
Prve slike ne nalagaj z zamikom. Slike na vrhu strani naj se naložijo takoj. Zamaknjeno nalaganje je za slike nižje na strani.
Uporabi odzivne slike. Sodobne teme uporabljajo Shopifyjeva filtra image_url in image_tag, da vsakemu zaslonu postrežejo pravo velikost. Starejše teme lahko vsem napravam strežejo eno veliko velikost.
Izogibaj se samodejnemu predvajanju videa v glavnem delu strani. Če video potrebuješ, najprej pokaži naslovno sliko in video naloži pozneje.

3. Pripomočke naloži pozneje

Ocene, mehurčki za klepet, pojavna okna, vrtiljaki s predlogi za dodatni nakup in viri z družbenih omrežij se le redko morajo naložiti pred izdelkom.

Klepet in pojavna okna naloži, ko je stran interaktivna, ali z zamikom.
Pripomočke za ocene postavi nižje na stran, da ne blokirajo glavne vsebine. Besedilo ocen zaradi SEO obdrži v HTML strani.
Odstrani sledilne piksle tretjih oseb, ki jih ne gledaš več. Vsak je še ena skripta.

4. Uporabi sodobno temo

Teme, zgrajene za Online Store 2.0, vključno s Shopifyjevimi brezplačnimi temami na osnovi Dawn, so zasnovane okoli blokov aplikacij, odzivnih slik in lažjega JavaScripta. Tema izpred nekaj let s težkimi drsniki in jQuery je lahko počasna ne glede na to, kaj odstraniš.

Pred menjavo preizkusi demo stran izdelka nove teme v PageSpeed Insights. Tema, ki je počasna že v svoji predstavitvi, bo počasna tudi s tvojimi izdelki.

5. Ustavi premikanje postavitve

Vsebina, ki med nalaganjem poskakuje, slabša Cumulative Layout Shift in moti kupce.

Slikam določi širino in višino (Shopifyjev filter image_tag ju doda).
Rezerviraj prostor za pasice in obvestilne vrstice, ki se pojavijo po nalaganju.
Pisave po meri nalagaj s font-display: swap in omeji število debelin.

Kaj ne pomaga veliko

Aplikacije za pospeševanje. Večina na stran doda svojo skripto. Odstranjevanje kode je boljše od dodajanja.
Menjava gostovanja ali CDN. V Shopify tega ne moreš narediti in tudi ni treba.
Pomanjševanje nekaj kilobajtov CSS. V primerjavi z odstranitvijo aplikacije ali popravkom glavne slike le redko premakne meritve pravih uporabnikov.

Ohrani hitrost

Hitrost se z dodajanjem aplikacij in razdelkov slabša. Po vsaki novi aplikaciji znova preveri stran izdelka in vsak mesec poglej poročilo Core Web Vitals. Revizija spletnega mesta, na primer zaDojo, označi počasne strani in prevelike slike v celotni trgovini, zato ti strani ni treba preizkušati eno po eno.

Pogosta vprašanja

Ali hitrost Shopify vpliva na SEO? Da, malo. Core Web Vitals so signal za uvrščanje, vendar sta vsebina in ustreznost pomembnejši. Hitrost je pomembnejša za prodajo: kupci zapustijo počasne strani izdelkov.

Kakšna je dobra ocena hitrosti v Shopify? Ciljaj na "Good" Core Web Vitals v podatkih pravih uporabnikov (Largest Contentful Paint pod 2,5 sekunde, Interaction to Next Paint pod 200 milisekund, Cumulative Layout Shift pod 0,1). Laboratorijska ocena od 100 je vodilo, ne cilj.

Zakaj je moja trgovina Shopify počasna na mobilnih napravah? Telefoni imajo počasnejše procesorje in povezave, zato težak JavaScript iz aplikacij tam škodi veliko bolj. Najprej preizkusi na mobilni napravi.