Shopify lista za optimizaciju mobilne verzije (2026)

Da biste Shopify prodavnicu optimizovali za mobilne uređaje, počnite od brze teme rađene prvo za mobilni prikaz i prođite Core Web Vitals na mobilnom: LCP do 2,5 sekunde, INP do 200 milisekundi i CLS do 0,1. Zatim prikazujte slike odgovarajuće veličine, napravite da se svako dugme lako dodiruje, skratite navigaciju i ubrzajte checkout dugmadima za brzo plaćanje kao što su Shop Pay, Apple Pay i Google Pay.

Ova kontrolna lista ima 24 provere u sedam grupa, sa Shopify alatima i podešavanjima za svaku. Google indeksira mobilnu verziju vaše prodavnice: od jula 2024. sadržaj koji nije dostupan na mobilnom više ne može da bude indeksiran. Zato je mobilna verzija ona koja se računa i za pretragu.

Kontrolna lista na jednom mestu

Kako se meri brzina Shopify prodavnice na mobilnom?

1. Znajte ciljne vrednosti Core Web Vitals za mobilni

Google meri Core Web Vitals na 75. percentilu učitavanja stranica, posebno za mobilne uređaje i za desktop. U većini prodavnica mobilni je teži test, jer telefoni imaju sporije procesore i mreže.

INP je 12. marta 2024. zamenio First Input Delay (FID) kao Core Web Vital. U Shopify prodavnicama loš INP na mobilnom obično dolazi od teškog JavaScript-a: skripti aplikacija, chat vidžeta, tagova za praćenje i složenih birača varijanti.

2. Čitajte podatke stvarnih posetilaca po uređaju

Počnite od onoga što doživljavaju stvarni kupci. Shopify izveštaji o brzini sajta (web performance reports) prikazuju LCP, INP i CLS iz stvarnih poseta u poslednjih 30 dana. Sažetak je u Online Store > Themes, a puni izveštaji u Analytics > Reports, gde možete da filtrirate po tipu uređaja. Srednji opseg Shopify naziva „Moderate”. Izveštaj Core Web Vitals u Google Search Console-u prikazuje iste metrike po grupama URL-ova za mobilni.

3. Pronađite uzroke laboratorijskim testovima

Podaci stvarnih posetilaca govore da problem postoji. Laboratorijski testovi govore zašto. Pokrenite PageSpeed Insights ili Lighthouse u mobilnom režimu za početnu stranicu, stranicu kolekcije i stranicu proizvoda. Naš besplatni Shopify test brzine pokreće Lighthouse istovremeno za mobilni i desktop.

Dve napomene za starije vodiče na koje možete naići. Time to Interactive (TTI) uklonjen je u Lighthouse-u 10 iz 2023, a FID nikada nije bio laboratorijska metrika. U laboratoriji je Total Blocking Time (TBT) signal najbliži INP-u.

Kako izabrati i očistiti temu za mobilni?

4. Izaberite brzu temu rađenu prvo za mobilni

Svaka tema u Shopify Theme Store-u mora da bude responzivna, da ima prosečnu Lighthouse ocenu performansi od najmanje 60 i ocenu pristupačnosti od najmanje 90 na početnoj stranici, stranici proizvoda i stranici kolekcije, i da koristi površine za dodir od najmanje 24 sa 24 CSS piksela. To su minimumi, a ne garancija. Testirajte demo teme na telefonu, a zatim ponovo sa svojim slikama, aplikacijama i sadržajem.

Besplatne Shopify teme, uključujući porodicu Horizon predstavljenu 2025. i Dawn, dobra su polazna tačka. Ako vašem katalogu ili brendu treba raspored koji nijedna tema dobro ne rešava, lagana prilagođena tema rađena prvo za mobilni često je brža od mnogo menjane premium teme. To je posao koji radi naš tim za razvoj Shopify tema.

5. Uklonite aplikacije i kod koje ne koristite

Svaka aplikacija koja dodaje kod u prodavnicu dodaje težinu pri svakoj poseti sa telefona. Popišite aplikacije, zapitajte se šta svaka donosi i uklonite one koje vam ne trebaju. Deinstaliranje aplikacije ne uklanja uvek kod koji je dodala u temu, pa posle toga proverite da li u temi postoje zaostali snippet-i i skripte. Istovremeno uklonite CSS i JavaScript koji se ne koriste.

6. Učitavajte skripte sa defer ili async

Shopify smernice za teme su jasne: teme nikada ne treba da koriste script tagove koji blokiraju parsiranje stranice. Koristite defer kada je redosled izvršavanja važan, a async kada nije. Vidžete koji nisu neophodni, kao što su chat ili recenzije ispod prvog ekrana, učitajte posle učitavanja stranice ili kada kupac počne da koristi stranicu. Ovo je jedan od najdelotvornijih načina da poboljšate INP na mobilnom.

7. Redovno ažurirajte temu

Ažuriranja teme donose ispravke grešaka, poboljšanja brzine i kompatibilnost sa novim Shopify funkcijama. Svako ažuriranje prvo testirajte na neobjavljenoj kopiji, posebno ako tema ima prilagođen kod, pa ga tek onda objavite.

Kako postupati sa slikama, videom i fontovima na mobilnom?

8. Prikazujte responzivne slike

Koristite Liquid filtere image_url i image_tag. image_tag pravi srcset sa razumnim podrazumevanim širinama, pa telefon preuzima mali fajl, a desktop veći. Shopify CDN takođe prepoznaje koje formate pregledač podržava i automatski šalje WebP ili AVIF. Ne morate sami da konvertujete fajlove: otpremite kvalitetne originale i dodajte atribut sizes koji odgovara vašem rasporedu. Više detalja naći ćete u našoj kontrolnoj listi za optimizaciju slika na Shopify-ju.

9. Glavnu sliku učitajte prvu, ostale odloženo

Najveća slika na prvom ekranu obično je vaš LCP element. Shopify smernice kažu:

• Koristite loading="lazy" samo za slike van prvog ekrana. Nikada nemojte odloženo učitavati LCP sliku.
• Dodajte fetchpriority="high" samo LCP slici, jednoj po stranici, i nikada zajedno sa odloženim učitavanjem.
• Opciju preload: true u image_tag koristite štedljivo. Shopify preporučuje unapred učitavanje (preload) samo jednog ili dva resursa koje bi pregledač inače kasno pronašao.

image_tag podrazumevano već uključuje odloženo učitavanje za slike u sekcijama niže na stranici. Proverite da glavna slika i prva slika proizvoda nisu odloženo učitane zbog nekog podešavanja teme ili aplikacije.

10. Rezervišite prostor za slike, ugrađene elemente i banere

Raspored se pomera kada se nešto pojavi bez rezervisanog prostora: slike bez dimenzija, trake sa obaveštenjima koje se kasno učitaju, vidžeti za recenzije i baneri za kolačiće koji guraju sadržaj nadole. image_tag podrazumevano dodaje atribute za širinu i visinu. Za ugrađene elemente i blokove aplikacija u CSS-u zadajte fiksnu visinu ili odnos stranica.

11. Neka video bude lagan

Otpremite video na Shopify ili ga hostujte na YouTube-u ili Vimeo-u, umesto da ugrađujete velike fajlove sa drugih mesta. Shopify filter video_tag podržava autoplay, loop, muted i controls i prikazuje poster sliku. Pozadinske snimke koji se sami puštaju držite kratkim i kompresovanim, i koristite poster sliku da sekcija odmah ima šta da prikaže.

12. Ograničite web fontove

Svaka porodica fontova i svaka debljina je još jedno preuzimanje. Koristite jednu ili dve porodice i samo debljine koje vam trebaju, ili sistemske fontove ako odgovaraju brendu. Shopify filter font_face prihvata font_display: 'swap', pa se tekst prikazuje rezervnim fontom dok se web font učitava.

Kako napraviti Shopify prodavnicu koja se lako dodiruje i čita?

13. Napravite dovoljno velike površine za dodir

Uzmite 24 piksela kao donju granicu i ciljajte oko 44 piksela za glavne akcije, kao što su Add to cart, ikonica menija, dugmad za količinu i dugmad za zatvaranje. Ostavite razmak između linkova u menijima i podnožju. Lighthouse ovo sada proverava u reviziji pristupačnosti, pod veličinom cilja (target size).

14. Koristite čitljiv tekst i polja od 16 piksela

Osnovni tekst podesite na oko 16 piksela, sa udobnim proredom. U poljima za unos, uključujući pretragu, prijavu na mejl listu i količinu, koristite najmanje 16 piksela, jer iOS Safari zumira polja sa manjim tekstom kada ih kupac dodirne. Proverite i kontrast boja, jer se telefoni često koriste napolju.

15. Ostavite mogućnost zumiranja

Koristite standardni viewport tag, <meta name="viewport" content="width=device-width, initial-scale=1">, koji Shopify teme Dawn i Horizon već imaju. Ne isključujte zumiranje prstima. Kupci zumiraju fotografije proizvoda i sitna slova, a blokiranje toga je problem pristupačnosti.

Kako treba da radi navigacija na mobilnom?

16. Neka meniji budu kratki i sklopivi

Najvažnije kategorije stavite na vrh, a potkategorije u sklopive sekcije. Dobar test: prvi nivo mobilnog menija treba da stane na jedan ekran bez skrolovanja.

17. Neka pretraga i korpa budu uvek nadohvat

Tanko zaglavlje koje ostaje na vrhu ekrana, sa logom, menijem, pretragom i korpom, drži najvažnije na jedan dodir, a ne skriva mnogo sadržaja. Mnogi kupci idu pravo na pretragu, pa je držite vidljivom na mobilnom, najbolje sa predlozima rezultata dok kucaju.

18. Glavnu akciju stavite na domet palca

Na stranicama proizvoda neka Add to cart bude vidljivo pri dnu ekrana, na primer kroz traku za dodavanje u korpu koja se pojavi kada glavno dugme izađe iz vidnog polja. Birač varijanti, cenu i informacije o dostavi držite blizu njega.

19. Prilagodite filtere malom ekranu

Otvarajte filtere u fioci ili panelu preko celog ekrana sa jasnim dugmetom „prikaži rezultate” i prikažite broj aktivnih filtera. Aplikacija Shopify Search & Discovery određuje koji se filteri prikazuju.

20. Izbegavajte pop-up prozore koji prekrivaju stranicu

Google savetuje da se izbegavaju prozori koji prekrivaju celu stranicu i predlaže banere koji zauzimaju samo mali deo ekrana. Obavezni dijalozi, kao što je provera godina, izuzeti su. Za prijavu na mejl listu:

• Koristite mali baner, formular u sadržaju ili panel koji izlazi sa dna umesto pop-up prozora preko celog ekrana.
• Prikažite ga kada kupac počne da koristi stranicu, a ne odmah po dolasku.
• Dajte mu dugme za zatvaranje koje se lako dodiruje.
• Tražite jedno polje, na primer mejl, uz jasan poziv na akciju.

Kako optimizovati checkout na mobilnom?

21. Prikažite dugmad za brzo plaćanje

Dinamička dugmad za checkout, koje Shopify naziva accelerated checkout, omogućavaju kupcima da plate preko Shop Pay, Apple Pay, Google Pay, PayPal, Amazon Pay ili Venmo direktno sa stranice proizvoda ili iz korpe, bez kucanja adrese na maloj tastaturi. Shop Pay čuva mejl, način plaćanja i adrese kupca za sledeći put. Shopify navodi da Shop Pay može da poveća konverziju do 50% u odnosu na kupovinu bez naloga, na osnovu studije koju je naručio 2023. godine.

22. Neka checkout bude kratak i testirajte ga na telefonu

Checkout na jednoj stranici je podrazumevani Shopify raspored. Zadržite ga i dodajte samo polja i checkout ekstenzije koje su vam zaista potrebne. Posle svake promene checkout aplikacija, metoda plaćanja ili pravila dostave napravite probnu porudžbinu na telefonu. Proverite da li se pregled porudžbine, polje za popust, opcije dostave i dugmad za plaćanje lako pronalaze i koriste.

Kako testirati i pratiti rezultate na mobilnom?

23. Testirajte na pravim telefonima

Režimi uređaja u pregledaču i servisi kao što je BrowserStack korisni su, ali uvek završite na pravim uređajima: bar jednom novijem iPhone-u i jednom Android telefonu srednje klase. Tražite horizontalno skrolovanje, elemente koji ostaju na ekranu i prekrivaju sadržaj, tastaturu koja prekriva polja za unos i slike ili tekst koji ne staju.

24. Pratite rezultate na mobilnom svakog meseca

Uporedite stopu konverzije na mobilnom i desktopu u Shopify Analytics-u ili GA4 i pogledajte gde kupci sa telefona napuštaju sajt. Ako jedna stranica proizvoda ima mnogo veću stopu napuštanja na mobilnom, prvo nju pogledajte na telefonu. Core Web Vitals u Shopify izveštajima o brzini sajta i u Search Console-u proveravajte svakog meseca i posle svake promene teme ili aplikacije.

Starije kontrolne liste često upućuju na Google Mobile-Friendly Test i izveštaj Mobile Usability u Search Console-u. Google je oba ugasio u decembru 2023, pa umesto njih koristite alate navedene gore.

Da li vam za brzinu na mobilnom i dalje trebaju AMP ili headless?

AMP: ne. Google je 2021. prestao da zahteva AMP za Top Stories, a AMP stranice se rangiraju kao i sve druge stranice. Shopify nema ugrađenu podršku za AMP, pa AMP znači aplikaciju i drugu verziju stranica koju morate da održavate. Taj trud bolje uložite u Core Web Vitals na vašoj pravoj temi.

Prilagođena tema ili headless: ponekad. Lagana prilagođena tema daje vam punu kontrolu nad tim šta se učitava na mobilnom. Headless prodavnica, na primer sa Shopify Hydrogen-om, daje još veću kontrolu, ali je to veći projekat i ima više toga za održavanje. Izaberite je kada ograničenja teme blokiraju važne funkcije, a ne samo zbog bolje ocene brzine.

Ako želite da neko drugi pogleda brzinu i konverziju vaše prodavnice na mobilnom, naša usluga optimizacije stope konverzije za Shopify uvodi promene zasnovane na podacima i meri svaku od njih posle objavljivanja.

FAQ

Kako da moja Shopify prodavnica bude prilagođena mobilnim uređajima?

Koristite responzivnu, brzu temu, prođite Core Web Vitals na mobilnom, prikazujte responzivne slike pomoću image_tag, napravite površine za dodir od najmanje 24 piksela, a najbolje oko 44, skratite menije, izbegavajte pop-up prozore preko celog ekrana i uključite dugmad za brzo plaćanje. Zatim testirajte na pravim telefonima i pratite rezultate po uređaju.

Koje su dobre Core Web Vitals vrednosti za Shopify prodavnicu na mobilnom?

LCP od 2,5 sekunde ili manje, INP od 200 milisekundi ili manje i CLS od 0,1 ili manje, mereno na 75. percentilu stvarnih poseta sa mobilnih uređaja. Shopify izveštaji o brzini sajta prikazuju ove vrednosti za vašu prodavnicu i mogu da se filtriraju po tipu uređaja.

Da li Shopify automatski optimizuje slike za mobilni?

Delimično. Shopify CDN šalje WebP ili AVIF kada ih pregledač podržava, a image_tag pravi responzivan srcset i odloženo učitava slike niže na stranici. Vaša tema i dalje mora pravilno da koristi ove filtere, da da prednost glavnoj slici i da je ne učitava odloženo.

Koliko velika treba da budu dugmad u Shopify prodavnici na mobilnom?

Najmanje 24 sa 24 CSS piksela, što je minimum po WCAG 2.2 AA i zahtev Shopify Theme Store-a. Za glavne akcije, kao što su Add to cart i ikonica menija, ciljajte oko 44 sa 44 piksela, uz razmak između susednih linkova.

Da li se AMP isplati za Shopify prodavnicu u 2026?

Ne. Google više ne zahteva AMP ni za jednu funkciju pretrage, a Shopify ga ne podržava direktno. Brza tema koja prolazi Core Web Vitals daje istu korist bez druge verzije stranica.

Koja je Shopify tema najbolja za mobilni?

Ne postoji jedna najbolja tema. Svaka tema iz Theme Store-a ispunjava Shopify minimume za mobilni prikaz i brzinu, ali stvarna brzina zavisi od vaših slika, aplikacija i sadržaja. Testirajte nekoliko kandidata na telefonu sa svojim proizvodima ili napravite laganu prilagođenu temu ako su vam potrebe specifične.