Gidas
Kodėl mano Shopify parduotuvė lėta? 7 dalykai, kuriuos verta patikrinti
Ką radau realioje mados e‑parduotuvėje, ką pakeičiau ir ką galite pasitikrinti patys prieš kreipdamiesi pagalbos.
Gytis Kubilius, Shopify programuotojas5 min. skaitymo
- 2–3 sek.
- pagrindinė nuotrauka lėtame telefone, buvo 8+ sek.
- 0
- puslapio šuolių slenkant, buvo 4–9
- 2,0 MB
- pradinis puslapis, buvo 3,2 MB
- 4 dienos
- darbo, be dizaino keitimo
Trumpai
Dažniausiai Shopify parduotuvė lėta ne dėl pačios Shopify platformos. Ją lėtina tai, kas užkraunama papildomai: programėlės, kurios prideda kodą visuose puslapiuose, per vėlai kraunamos nuotraukos ir per sunkus pirmasis ekranas. Vienoje mados e‑parduotuvėje po šių pataisymų pagrindinė nuotrauka lėtame telefone pradėjo rodytis per 2–3 sek., o anksčiau reikėdavo daugiau nei 8 sek.
Parduotuvė ir tai, ką matė pirkėjas
Dizainerių drabužių e‑parduotuvė Shopify platformoje. Palyginau, kaip ji kraunasi lėtame telefone prieš pataisymus ir po keturių darbo dienų.
2026 m. spalį dirbau su nooksas.lt, lietuviška dizainerių mados e‑parduotuve. Problema buvo paprasta: lėtas puslapis jau kenkė pardavimams ir parduotuvės įvaizdžiui.
Prieš
Po
Lėta parduotuvė retai atrodo „sugedusi“. Ji tiesiog atrodo tuščia. Pirmiausia pasirodo antraštė, tada juodas ar pilkas plotas vietoje pagrindinės nuotraukos. Prekių nuotraukos atsiranda po vieną, o paspaudimo momentu puslapis dar ir pasislenka.
„Nooksas“ parduotuvėje taip nutikdavo visuose puslapiuose.
Vienas skaičius to neparodo. Tai yra tai, ką jaučia pirkėjas. Dėl to į PageSpeed balą žiūriu paskiausiai, o ne pirmiausia.
Ar pati Shopify yra lėta?
Ne. Didžiąją dalį dalykų, kuriuos vis dar siūlo seni „greitinimo“ gidai, Shopify jau daro pati.
Shopify naudoja CDN, talpina puslapius podėlyje, optimizuoja kodą ir pateikia nuotraukas moderniais formatais, pavyzdžiui, WebP, jei tema juos užkrauna tinkamai.
Todėl galite ignoruoti tokius patarimus:
- „Naudokite CDN“ arba „įjunkite podėliavimą“: Shopify tuo jau pasirūpina.
- „Minifikuokite kodą“: tai irgi atliekama.
- „Naudokite AMP“: paieškos rezultatams jo nebereikia, o prižiūrėti tenka dar vieną puslapio versiją.
- „Pasiekite 100 balų“: balas yra laboratorinis testas, o ne jūsų pirkėjas.
Shopify parduotuvę dažniausiai lėtina tai, kas pridedama papildomai: temos kodas, programėlės ir būdas, kuriuo kraunamos nuotraukos.
1. Pagrindinė nuotrauka pasirodo per vėlai
Pirmoji nuotrauka, kurią mato pirkėjas, turėtų būti kraunama pirmiausia, tinkamo dydžio ir be papildomų kliūčių.
„Nooksas“ pagrindinio banerio animacijai reikėjo papildomos 560 KB nuotraukos iš išorinio serverio. Kol ji neužsikraudavo, vietoje pagrindinės nuotraukos buvo matomas juodas fonas.
Animaciją pakeitėme paprastu perėjimu ir nustatėme, kad pirma nuotrauka krautųsi iškart ir pagal ekrano dydį, o likusios vėliau. Dabar pagrindinė nuotrauka lėtame telefone pasirodo per 2–3 sek.
2. Prekių nuotraukos laukia, kol užsikraus kodas
Jei nuotrauka pasirodo tik tada, kai ją įkelia JavaScript, ją gali vėlinti visas kitas puslapio kodas.
Daug temų nuotraukas krauna „lazy“ principu: pirmiausia rodo mažą pakaitinį vaizdą, o tikrą nuotrauką įkelia vėliau. Tai gerai nuotraukoms puslapio apačioje, bet ne pirmoms nuotraukoms viršuje.
„Nooksas“ net pagrindinė prekės nuotrauka iš pradžių buvo tik 100 px pločio pakaitinis vaizdas. Pirmą nuotrauką pakeitėme taip, kad ji krautųsi iškart ir tinkamo dydžio, o likusias palikome krautis vėliau.
Prieš
Po
3. Kraunantis puslapiui turinys juda
Nuotraukai vieta turi būti rezervuota dar prieš jai pasirodant. Kitaip jai užsikrovus visas turinys pasislenka.
Jei laikinas vaizdas yra 100 px aukščio, o tikra nuotrauka 205 px, jai pasirodžius visas turinys po ja nuslenka žemyn. Telefone tai reiškia, kad pirkėjas gali paspausti ne ten, kur norėjo, arba pamesti vietą puslapyje.
„Nooksas“ prekių kortelės užsikrovus nuotraukoms padidėdavo apie 105 px, o prekės galerija apie 460 px. Rezervavus reikiamą vietą iš anksto, šuolių skaičius slenkant sumažėjo nuo 4–9 iki nulio.
4. Programėlės kraunamos kiekviename puslapyje
Peržiūrėkite visas programėles, kurios kraunamos jūsų parduotuvėje, ir paklauskite savęs: ar vis dar jas naudojate?
Daug programėlių prideda savo JavaScript prie kiekvieno puslapio, net jei tame puslapyje jo nereikia.
„Nooksas“ kartu su savininku peržiūrėjome visas programėles. Išjungėme dvi nebenaudojamas: sesijų įrašymo įrankį ir AI pokalbių langą. Likusias palikome, nes jos realiai naudojamos.
Ne kiekviena programėlė yra problema. Bandėme vėliau krauti ir el. pašto iššokančio lango programėlę, bet realaus pagerėjimo nebuvo, todėl jos nelietėme. Tikslas nėra šalinti programėles vien dėl geresnio balo.
Kas lieka pašalinus programėlę
Pašalinus programėlę jos kodas ne visada automatiškai dingsta iš temos. Naujesnės programėlės dažniausiai naudoja „app embeds“, tačiau senesnės galėjo tiesiogiai keisti temos failus.
5. Tas pats kodas kuriamas kelis kartus kiekviename puslapyje
Dalies lėtumo pirkėjas niekada nemato. Tai tiesiog nereikalingas kodas, kuris kuriamas kiekviename puslapyje.
„Nooksas“ šalies pasirinkimo meniu kiekviename puslapyje buvo sukuriamas tris kartus, kartu su maždaug 65 vėliavėlių paveikslėliais. Tai sudarė 297 KB, arba 22 % viso puslapio HTML.
Dabar šalių sąrašas ir mobilusis meniu sukuriami tik tada, kai žmogus juos atidaro. 65 paveikslėlių užklausos tapo viena, o pradinio puslapio elementų skaičius sumažėjo nuo maždaug 7 100 iki 4 500.
6. Mobilioji versija per sunki
Telefonas neturėtų siųstis to, ko negali panaudoti.
„Nooksas“ prekių kortelėse užvedus pelę buvo rodoma antra nuotrauka. Telefonas pelės neturi, tačiau tas nuotraukas vis tiek atsisiųsdavo.
Dabar jos kraunamos tik įrenginiuose su pele. Kartu su kitais nuotraukų pakeitimais kolekcijos puslapio dydis sumažėjo nuo 3,0 MB iki 2,5 MB, o pradinio puslapio nuo 3,2 MB iki 2,0 MB.
Tas pats principas galioja ir pirmajam ekranui. Skaidrių karuselės, automatiškai leidžiami vaizdo įrašai ir didelės animacijos daugiausia kainuoja būtent tada, kai pirkėjas laukia, kol puslapis pasirodys.
7. Matuojate ne tai, kas svarbiausia
Greitį vertinkite pagal realius savo lankytojus Shopify „Web performance“ ataskaitoje, o ne pagal vieną PageSpeed testą.
PageSpeed Insights yra laboratorinis testas: vienas imituojamas telefonas, vienas paleidimas. Rezultatas gali stipriai svyruoti. „Nooksas“ tas pats nepakeistas puslapis vienuose testuose surinkdavo apie 40 balų, kituose apie 88.
Shopify „Web performance“ ataskaita naudoja realių parduotuvės lankytojų paskutinių 30 dienų duomenis.
| Rodiklis | Paprastai | Geras rezultatas |
|---|---|---|
| LCP | Kada pasirodo pagrindinė nuotrauka ar tekstas | ≤ 2,5 sek. |
| INP | Kaip greitai puslapis reaguoja į paspaudimą | ≤ 200 ms |
| CLS | Kiek turinys juda kraunantis | ≤ 0,1 |
Kur dingo Shopify Speed Score?
Shopify senojo greičio balo iš 100 nebenaudoja nuo 2024 m. sausio 31 d. Jį pakeitė „Web performance“ ataskaita.
Jei gidas vis dar rekomenduoja „pakelti Shopify Speed Score“, jis pasenęs.
Rezultatai „Nooksas“
Ta pati e‑parduotuvė, tie patys testai prieš pataisymus ir po keturių darbo dienų. Pirmiausia rodau, kas pasikeitė lankytojui, o testų balą palieku pabaigai.
- Pagrindinė nuotrauka lėtame telefone
8+ sek.2–3 sek. - Pagrindinė prekės nuotrauka
8 sek.2 sek. - Puslapio šuoliai slenkant
4–90 - Pradinio puslapio dydis
3,2 MB2,0 MB
| Rodiklis | Prieš | Po |
|---|---|---|
| Kolekcijos puslapio dydis | 3,0 MB | 2,5 MB |
| Laikas, kai telefonas nereaguoja | 330 ms | 124 ms |
| Elementų pradiniame puslapyje | 7 094 | 4 460 |
| PageSpeed mobile, mediana | 43 | 86 |
| PageSpeed desktop, mediana | 70,5 | 96 |
Kas nepadėjo: vėliau krauti el. pašto iššokančio lango programėlę. Išmatavau: pastebimo skirtumo nebuvo, todėl pakeitimo nedariau.
Kada jau reikia programuotojo
1, 4, 6 ir 7 punktus galite patikrinti patys. 2, 3 ir 5 punktų problemos slypi temos kode.
Patys galite stebėti, skaičiuoti, išjungti tai, ko nebenaudojate, ir sekti „Web performance“ ataskaitą.
Tačiau tai, kaip tema prašo nuotraukų, kaip rezervuoja joms vietą ir ką sukuria kiekviename puslapyje, jau sprendžiama kode. Čia greitinimo programėlė dažniausiai nepadės, nes ji negali pakeisti pačios temos veikimo.
Normalus greitinimas prasideda nuo matavimų. Tada pakeitimai daromi temos kopijoje, tikrinami realiuose telefonuose ir tik po to publikuojami.
Jei kas nors žada konkretų PageSpeed balą dar net nepažiūrėjęs į parduotuvę, vertinčiau atsargiai.
Klausimai
Trumpi atsakymai į dažniausius klausimus apie Shopify greitį.
Kiek Shopify programėlių jau yra per daug?
Vieno skaičiaus nėra. Viena programėlė, kuri kiekviename puslapyje krauna sunkų JavaScript, gali lėtinti labiau nei penkios, kurios kraunamos tik ten, kur jų reikia. Žiūrėkite ne į programėlių skaičių, o į tai, ką kiekviena jų prideda.
Ar pašalinus Shopify programėlę jos kodas irgi dingsta?
Ne visada. Naujesnės programėlės, naudojančios „app embeds“, paprastai nieko nepalieka. Senesnės galėjo keisti temos failus tiesiogiai, todėl jų kodas gali likti ir toliau krautis.
Koks yra geras Shopify PageSpeed rezultatas?
Vieno „gero“ balo nėra. PageSpeed yra laboratorinis testas ir jo rezultatai gali svyruoti. Daug svarbiau stebėti LCP, INP ir CLS pagal realių lankytojų duomenis Shopify „Web performance“ ataskaitoje.
Kodėl parduotuvė telefone lėtesnė nei kompiuteryje?
Telefonas paprastai turi lėtesnį procesorių, mažiau resursų ir dažniau naudoja lėtesnį mobilųjį ryšį. Be to, blogai optimizuota tema gali telefone siųstis turinį, kurio ten visai nereikia.
Ar parduotuvės greitis turi įtakos Google pozicijoms?
Taip, tačiau greitis yra tik vienas iš daugelio signalų. Dėl kelių PageSpeed balų neverta aukoti funkcionalumo ar gero pirkėjo patyrimo.