Optimizacija brzine Shopifyja: tema, aplikacije

Svaka Shopify prodavnica radi na istim serverima i CDN-u, pa je spora prodavnica spora zbog onoga što učitava: teme, skripti aplikacija, slika i videa. Optimizacija brzine na Shopifyju znači uklanjanje i smanjivanje tih stvari, a ne promenu hostinga. U većini prodavnica najveći dobici su uklanjanje nekorišćenog koda aplikacija, kompresija glavne slike i kasnije učitavanje widgeta.

Ovaj vodič pokazuje kako da pravilno izmerite brzinu, a zatim prolazi kroz popravke redosledom kojim se obično isplate. Deo je vodiča SEO za Shopify.

Merite prave stranice

Testirajte stranicu proizvoda i stranicu kolekcije, a ne samo početnu. To su stranice koje se rangiraju i na koje kupci stižu.

• Google PageSpeed Insights daje laboratorijske rezultate za jedno učitavanje i, ako vaša prodavnica ima dovoljno posetilaca, prave Core Web Vitals od korisnika Chromea za poslednjih 28 dana. Brojevi pravih korisnika su oni koje Google koristi.
• Izveštaj Core Web Vitals u Search Consoleu grupiše vaše URL-ove po statusu, pa vidite da li sve stranice proizvoda imaju isti problem.
• Shopify izveštaj o veb performansama u Analyticsu prikazuje iste metrike pravih korisnika kroz vreme, što je korisno da proverite da li je promena pomogla.

Fokusirajte se na tri Core Web Vitals metrike: Largest Contentful Paint (koliko brzo se pojavi glavna slika ili tekst), Interaction to Next Paint (koliko brzo stranica reaguje na dodir) i Cumulative Layout Shift (koliko se elementi pomeraju). Laboratorijski rezultati variraju od testa do testa; ne jurite savršenih 100.

1. Uklonite kod aplikacija koje ne koristite

Aplikacije su najčešći uzrok spore Shopify prodavnice. Svaka koja dira prodavnicu može da doda JavaScript i CSS na svaku stranicu.

• Napravite listu svojih aplikacija. Deinstalirajte one koje više ne koristite.
• Deinstaliranje ne uklanja uvek kod koji je aplikacija dodala u temu. Pretražite fajlove teme (Online Store > Themes > Edit code) po imenu aplikacije i uklonite zaostale snippete i script tagove.
• Birajte aplikacije koje koriste theme app extensions (app blokove koje dodajete u editoru teme). One se čisto uklanjaju kada ih deinstalirate i učitavaju se samo tamo gde ih postavite.
• Za aplikacije koje zadržavate proverite da li se učitavaju na svakoj stranici. Tabeli veličina trebaju samo stranice proizvoda.

2. Popravite najveću sliku

Na većini stranica proizvoda i kolekcija najveći element je fotografija proizvoda ili glavni baner. Ubrzajte ga:

• Otpremajte razumne fajlove. Smanjite fotografije na oko 2.000 do 2.500 piksela širine pre otpremanja i kompresujte ih. Shopify CDN automatski šalje smanjene verzije i moderne formate kao što je WebP, ali ogroman original i dalje troši vreme.
• Ne učitavajte prvu sliku odloženo (lazy load). Slike na vrhu stranice treba da se učitaju odmah. Lazy loading je za slike niže na stranici.
• Koristite responzivne slike. Aktuelne teme koriste Shopify filtere image_url i image_tag da bi poslale pravu veličinu za svaki ekran. Starije teme mogu da šalju jednu veliku veličinu svakom uređaju.
• Izbegavajte video koji se sam pokreće na vrhu stranice. Ako vam treba video, prvo prikažite poster sliku, a video učitajte posle.

3. Učitavajte widgete kasnije

Recenzije, čet oblačići, iskačući prozori, karuseli za dodatnu prodaju i feedovi društvenih mreža retko treba da se učitaju pre proizvoda.

• Čet i iskačuće prozore učitavajte kada stranica postane interaktivna ili posle kašnjenja.
• Stavite widgete za recenzije ispod prvog ekrana da ne blokiraju glavni sadržaj. Tekst recenzija zadržite u HTML-u stranice zbog SEO-a.
• Uklonite piksele za praćenje trećih strana koje više ne gledate. Svaki je još jedna skripta.

4. Koristite aktuelnu temu

Teme napravljene za Online Store 2.0, uključujući besplatne Shopify teme zasnovane na Dawnu, projektovane su oko app blokova, responzivnih slika i lakšeg JavaScripta. Tema od pre nekoliko godina sa teškim slajderima i jQueryjem može biti spora šta god da uklonite.

Pre promene testirajte demo stranicu proizvoda nove teme u PageSpeed Insights. Tema koja je spora u sopstvenom demou biće spora i sa vašim proizvodima.

5. Zaustavite pomeranje rasporeda

Sadržaj koji skače dok se stranica učitava kvari Cumulative Layout Shift i nervira kupce.

• Dajte slikama širinu i visinu (Shopify filter image_tag ih dodaje).
• Rezervišite prostor za banere i trake sa obaveštenjima koji se pojavljuju posle učitavanja.
• Učitavajte prilagođene fontove sa font-display: swap i ograničite broj debljina.

Šta ne pomaže mnogo

• Aplikacije za ubrzanje. Većina dodaje sopstvenu skriptu na stranicu. Uklanjanje koda je bolje od dodavanja.
• Promena hostinga ili CDN-a. Na Shopifyju to ne možete, a i ne treba vam.
• Minifikovanje nekoliko kilobajta CSS-a. Retko pomera metrike pravih korisnika u poređenju sa uklanjanjem aplikacije ili popravkom glavne slike.

Održite brzinu

Brzina opada kako dodajete aplikacije i sekcije. Ponovo proverite stranicu proizvoda posle svake nove aplikacije i jednom mesečno pogledajte izveštaj Core Web Vitals. Audit sajta, kao što je zaDojo audit, označava spore stranice i prevelike slike u celoj prodavnici, pa ne morate da testirate stranicu po stranicu.

Česta pitanja

Da li brzina Shopifyja utiče na SEO? Da, malo. Core Web Vitals su signal za rangiranje, ali sadržaj i relevantnost su važniji. Brzina je važnija za prodaju: kupci napuštaju spore stranice proizvoda.

Koji je dobar rezultat brzine za Shopify? Ciljajte „Good" Core Web Vitals u podacima pravih korisnika (Largest Contentful Paint ispod 2,5 sekundi, Interaction to Next Paint ispod 200 milisekundi, Cumulative Layout Shift ispod 0,1). Laboratorijski rezultat od 100 je smernica, a ne cilj.

Zašto je moja Shopify prodavnica spora na mobilnom? Telefoni imaju sporije procesore i veze, pa težak JavaScript iz aplikacija tamo mnogo više šteti. Prvo testirajte na mobilnom.