Ubrzanje Shopify trgovine: tema, aplikacije, slike

Svaka Shopify trgovina radi na istim poslužiteljima i istom CDN-u, pa je spora trgovina spora zbog onoga što učitava: teme, skripti aplikacija, slika i videa. Ubrzanje na Shopifyju znači uklanjanje i smanjivanje toga, a ne promjenu hostinga. U većini trgovina najveći dobici dolaze od uklanjanja nekorištenog koda aplikacija, komprimiranja glavne slike i kasnijeg učitavanja widgeta.

Ovaj vodič pokazuje kako pravilno izmjeriti brzinu, a zatim prolazi kroz popravke redoslijedom kojim se obično isplate. Dio je vodiča SEO za Shopify.

Mjerite prave stranice

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

Google PageSpeed Insights daje laboratorijske rezultate za jedno učitavanje i, ako trgovina ima dovoljno posjetitelja, stvarne Core Web Vitals podatke korisnika Chromea za zadnjih 28 dana. Google koristi upravo brojke stvarnih korisnika.
Izvješće Core Web Vitals u Search Consoleu grupira URL-ove po statusu, pa vidite dijele li sve stranice proizvoda isti problem.
Shopifyjevo izvješće o performansama weba u Analytics prikazuje iste metrike stvarnih korisnika kroz vrijeme, što pomaže provjeriti je li promjena pomogla.

Usredotočite se na tri Core Web Vitals metrike: Largest Contentful Paint (koliko se brzo pojavi glavna slika ili tekst), Interaction to Next Paint (koliko brzo stranica reagira na dodir) i Cumulative Layout Shift (koliko elementi poskakuju). 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 trgovine. Svaka koja dira izlog trgovine može dodati JavaScript i CSS na svaku stranicu.

Popišite aplikacije koje imate. Deinstalirajte one koje više ne koristite.
Deinstalacija ne uklanja uvijek kod koji je aplikacija dodala u temu. Pretražite datoteke teme (Online Store > Themes > Edit code) po nazivu aplikacije i uklonite zaostale isječke i script tagove.
Birajte aplikacije koje koriste proširenja teme (app blocks koje dodajete u uređivaču teme). Pri deinstalaciji se čisto uklanjaju i učitavaju se samo tamo gdje ih postavite.
Za aplikacije koje zadržavate provjerite učitavaju li se na svakoj stranici. Tablica veličina treba samo stranice proizvoda.

2. Popravite najveću sliku

Na većini stranica proizvoda i kolekcija najveći element je fotografija proizvoda ili glavni banner. Neka bude brz:

Prenosite razumne datoteke. Prije prijenosa smanjite fotografije na širinu od oko 2.000 do 2.500 piksela i komprimirajte ih. Shopifyjev CDN automatski poslužuje smanjene verzije i moderne formate poput WebP-a, ali golem izvornik i dalje košta vremena.
Ne koristite lazy loading za prvu sliku. Slike na vrhu stranice trebaju se učitati odmah. Lazy loading je za slike niže na stranici.
Koristite responzivne slike. Aktualne teme koriste Shopifyjeve filtre image_url i image_tag kako bi svakom zaslonu poslužile pravu veličinu. Starije teme mogu svakom uređaju poslužiti jednu veliku veličinu.
Izbjegavajte automatsko pokretanje videa u glavnom dijelu. Ako vam treba video, najprije prikažite sliku naslovnice, a video učitajte poslije.

3. Učitajte widgete kasnije

Recenzije, chat oblačići, skočni prozori, vrtuljci za dodatnu prodaju i feedovi s društvenih mreža rijetko se trebaju učitati prije proizvoda.

Chat i skočne prozore učitajte nakon što stranica postane interaktivna ili nakon odgode.
Widgete recenzija stavite ispod prvog zaslona kako ne bi blokirali 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 aktualnu temu

Teme izrađene za Online Store 2.0, uključujući Shopifyjeve besplatne teme temeljene na Dawnu, osmišljene su oko app blocks, responzivnih slika i lakšeg JavaScripta. Tema od prije nekoliko godina s teškim sliderima i jQueryjem može biti spora bez obzira na to što uklonite.

Prije promjene testirajte demo stranicu proizvoda nove teme u PageSpeed Insightsu. Tema koja je spora u vlastitom demu bit će spora i s vašim proizvodima.

5. Zaustavite pomicanje rasporeda

Sadržaj koji poskakuje dok se stranica učitava šteti metrici Cumulative Layout Shift i smeta kupcima.

Slikama zadajte širinu i visinu (Shopifyjev filtar image_tag ih dodaje).
Rezervirajte prostor za bannere i trake s obavijestima koje se pojave nakon učitavanja.
Prilagođene fontove učitavajte s font-display: swap i ograničite broj debljina.

Što ne pomaže puno

Aplikacije za ubrzanje. Većina na stranicu dodaje vlastitu skriptu. Uklanjanje koda bolje je od dodavanja.
Promjena hostinga ili CDN-a. Na Shopifyju to ne možete, a ni ne trebate.
Minificiranje nekoliko kilobajta CSS-a. Rijetko pomakne metrike stvarnih korisnika u usporedbi s uklanjanjem aplikacije ili popravkom glavne slike.

Održavajte brzinu

Brzina pada kako dodajete aplikacije i odjeljke. Ponovno provjerite stranicu proizvoda nakon svake nove aplikacije i jednom mjesečno pogledajte izvješće Core Web Vitals. Revizija weba, poput one u zaDoju, označava spore stranice i prevelike slike u cijeloj trgovini, pa ne morate testirati stranicu po stranicu.

Pitanja koja ljudi postavljaju

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

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

Zašto je moja Shopify trgovina spora na mobitelu? Mobiteli imaju sporije procesore i veze, pa im teški JavaScript iz aplikacija šteti puno više. Najprije testirajte na mobitelu.