Kako pospešiti trgovino Shopify, ne da bi jo pokvarili

Kam gre čas

• Aplikacije, ki na vsako stran vstavijo JavaScript in CSS, tudi tja, kjer ničesar ne delajo.
• Koda, ki so jo pustile odstranjene aplikacije; odstranitev aplikacije teme ne počisti vedno.
• Drsniki v glavi strani, samodejni videi in slike čez celo širino, precej večje od zaslona.
• Oznake tretjih oseb: klepet, ocene, pojavna okna, toplotne karte, več analitičnih in oglaševalskih pikslov.
• Več spletnih pisav v številnih debelinah.

Najprej izmerite

PageSpeed Insights zaženite za tri predloge: naslovnico, stran zbirke in stran izdelka, na telefonu. Zapišite LCP, TBT in največje vire. Shopifyjevo poročilo o spletni zmogljivosti v skrbniški plošči pokaže Core Web Vitals resničnih uporabnikov, ko ima trgovina dovolj obiska.

Spremembe vedno najprej preizkusite na neobjavljeni kopiji teme in jo objavite šele nato.

Popravki v varnem vrstnem redu

• Preglejte seznam aplikacij. Odstranite tiste, ki jih ne uporabljate več, in izklopite vdelave aplikacij, ki niso potrebne na vsaki strani (Online Store > Themes > Customize > App embeds).
• V kodi teme poiščite ostanke odstranjenih aplikacij (odrezke in oznake script z imenom aplikacije) in jih na kopiji teme odstranite.
• Drsnik v glavi zamenjajte z eno sliko. Naložite jo s fetchpriority="high", ne z zamikom, in uporabite Shopifyjev filter image_url s smiselno širino in srcset.
• Slike pod pregibom nalagajte z zamikom in vsaki sliki določite širino in višino, da se postavitev ne premika.
• Pripomočke za klepet, ocene in pojavna okna, kjer aplikacija to omogoča, naložite šele, ko uporabnik podrsa ali klikne.
• Pisave omejite na eno družino v dveh debelinah ali uporabite sistemske pisave.
• Sledilne piksle, kjer je mogoče, prestavite v Shopifyjeve Customer Events namesto v kodo teme.

Ko je težava v sami temi

Starejše, močno prilagojene teme pogosto nosijo leta nakopičenih skript in stilov. Prehod na sodobno temo Online Store 2.0 in ponovna izdelava ključnih razdelkov je včasih cenejša kot optimizacija stare kode vrstico za vrstico. Pred začetkom je vredno primerjati obe možnosti.

Kakšen dostop potrebuje razvijalec

Za delo na hitrosti je potreben dostop sodelavca (collaborator) z dovoljenjem za urejanje tem in pregled aplikacij, ki ga lastnik trgovine odobri v skrbniški plošči, brez deljenja gesla. Delo poteka na kopiji teme, zato živa trgovina ni prizadeta, dokler lastnik sprememb ne odobri.

Pogosta vprašanja