Kontrolni seznam za Shopify Core Web Vitals 2026

Večina Shopify trgovin, ki jih revidiram, ni počasna zato, ker bi bil Shopify počasen. Počasne so zaradi odločitev, sprejetih nad Shopifyjem — paketa aplikacij, strukture teme, skriptov tretjih oseb in (ne)reda pri obdelavi slik. Liquid je hiter; težave sedijo eno plast višje.

To je enak postopek revizije, kot ga izvajam na plačanem projektu, v vrstnem redu, v katerem ga izvajam. Sledite mu od vrha navzdol; zgodnji koraki najbolj premaknejo LCP.

Korak 0 — Najprej izmerite, oboje: lab in field

Pred kakršnimi koli spremembami potrebujete dve podatkovni točki:

• Lab (sintetično): PageSpeed Insights. Zaženite mobile + desktop za domačo stran, kolekcijo in stran produkta. Zabeležite LCP, INP, CLS, TBT, oceno zmogljivosti in panel “Priložnosti”.
• Field (resnični uporabniki): Shopify Admin → Online Store → Themes → “View report” za hitrostno oceno, in Google Search Console → Experience → Core Web Vitals. Field podatki imajo ~28-dnevno zamudo, vendar je to številka, na podlagi katere Google razvršča.

Shranite te številke. Vsaka sprememba, ki jo naredite, se mora nanje sklicevati.

Korak 1 — Revizija paketa aplikacij

To je skoraj vedno največja pridobitev pri LCP. Vsaka nameščena Shopify aplikacija v vašo temo doda vsaj eno script oznako.

Inventar

V Shopify Admin → Apps naštejte vsako nameščeno aplikacijo. Nato v theme.liquid in layout/theme.liquid poiščite bloke aplikacij ({% render 'app...' %}), vstavke aplikacij in vse script oznake, vstavljene prek bloka aplikacije.

Za vsako aplikacijo se vprašajte:

1. Je aktivno uporabljena? (Onemogočite jo in 48 ur opazujte seje.)
2. Se script nalaga na vsaki strani ali samo na strani, kjer je potrebna?
3. Ponuja aplikacija “odloži do interakcije” ali “naloži samo na košarici”? Večina sodobnih Shopify aplikacij to ponuja.

Najpogostejši krivci

• Aplikacije za ocene, ki nalagajo ocene na domačo stran samo zato, da prikažejo značko “ocenjeno 4.9”. Značko zamenjajte s statično sliko.
• Več analitičnih skriptov (Shopify analytics + GA4 + Meta Pixel + TikTok Pixel + Klaviyo). Konsolidirajte prek Google Tag Managerja z upravljanjem privolitev.
• Pop-up aplikacije, ki se nalagajo na first paint, da po 8 sekundah prikažejo modalno okno. Odložite.
• Heatmap aplikacije (Hotjar, Mouseflow) — vzorčite samo 10–20 % sej; nalagajte pogojno glede na user agent.

Realna ocena: vsaka neobvezna aplikacija stane 100–400 ms izvajanja JS na mobilnih napravah. Odstranitev petih obrobnih aplikacij običajno prinese 1–2 sekundi LCP.

Korak 2 — Disciplina pri slikah

LCP element na domači strani Shopify trgovine je skoraj vedno slika — hero banner, prva slika produkta ali slideshow. Brskalnik LCP ne more izrisati, dokler ta slika ni prenesena in dekodirana.

Pravila za hero sliko

• Širina: pošljite točno upodobljeno širino, ne 2× ali 3×. Hero širine 1440 px, upodobljen pri 100vw na 414-pt telefonu, potrebuje ~830 px (414 × 2 device pixel ratio).
• Format: WebP s kakovostjo 80 je običajno za 60–70 % manjši od enakovrednega JPEG-a. Shopifyjev filter image_url to obvladuje, če mu posredujete format: 'webp'.
• Prednostne namige: na hero sliko nastavite fetchpriority="high" in loading="eager". Uporabite loading="lazy" na vsem pod foldom.
• Responsive srcset: pošljite 3–4 velikosti (480w, 800w, 1200w, 1600w) in pustite brskalniku, da izbere.

Primer v Liquidu:

{% assign hero = section.settings.hero_image %}
<img
  src="{{ hero | image_url: width: 1200, format: 'webp' }}"
  srcset="
    {{ hero | image_url: width: 480, format: 'webp' }} 480w,
    {{ hero | image_url: width: 800, format: 'webp' }} 800w,
    {{ hero | image_url: width: 1200, format: 'webp' }} 1200w,
    {{ hero | image_url: width: 1600, format: 'webp' }} 1600w"
  sizes="100vw"
  width="1200"
  height="600"
  alt="{{ hero.alt | escape }}"
  loading="eager"
  fetchpriority="high"
  decoding="async"
/>

Past slideshowov pri LCP

Slideshowi so klasični LCP morilec. Prvi slide je kandidat za LCP, vendar slideshow aplikacije njegovo izrisovanje pogosto zakasnijo za JS init korakom. Dva popravka:

1. Strežniško izrišite prvi slide kot navadno sliko; pustite slideshow JS-u, da prevzame ob hidraciji.
2. Opustite slideshow. Podatki o konverzijah ga redko upravičijo. Če ga morate obdržati, lazy-init prek requestIdleCallback.

Korak 3 — Nalaganje pisav

Naslovi na večini trgovin uporabljajo posebne pisave. Dokler datoteka pisave ne prispe, je besedilo naslova nevidno (FOIT) ali stilizirano s fallback pisavo (FOUT). LCP je vezan na to, kar tema izbere.

Hitre zmage

• font-display: swap na vsakem @font-face. Liquid datoteke teme to skoraj vedno imajo; preverite.
• Preload samo tisti font weight, ki blokira LCP. Če je vaš h1 Sora 700, naložite vnaprej sora-700.woff2. Ne nalagajte vnaprej vseh 6 weights — zapravite pasovno širino.

<link rel="preload" as="font" type="font/woff2"
      href="{{ 'sora-700.woff2' | asset_url }}" crossorigin>

• Lastno gostovanje, kjer je mogoče. Google Fonts doda iskanje DNS + TLS handshake do fonts.gstatic.com, ki teče zaporedno z vsem drugim. Samogostovane pisave delijo povezavo trgovine.

• Subset. 80 KB latinska pisava postane ~25 KB s pravilnim subsettingom. Orodja: glyphhanger, fontkit. Ali uporabite Fontsource, ki pošilja subset glede na lokalizacijo.

Korak 4 — Disciplina pri skriptih tretjih oseb

Odprite DevTools → Network → filter JS. Razvrstite po velikosti. Karkoli nad 50 KB, kar ni Shopify core bundle, si zasluži pregled.

Pravilo “odloži vse, kar lahko”

Brskalnik se ustavi pri sinhronih skriptih. Vsak nekritični skript označite z defer ali async:

• defer — teče po vrstnem redu, po obdelavi HTML-ja. Uporabite za temo JS.
• async — teče, kakor hitro prenese, brez garancije vrstnega reda. Uporabite za analitiko, pixle.

Izjeme, ki jih ni mogoče odložiti:

• Shopifyjev Shopify.theme payload.
• Karkoli, kar mora teči pred izrisom LCP (redko — skoraj vedno napačno).
• A/B testirni skripti, ki utripajo, če so zakasnjeni (sprejemljivo, če zakasnitev prekine eksperiment; bolje refaktorirati test).

Pogosti težki krivci (in lažje zamenjave)

Težek skript	Lažja zamenjava
Klaviyo full bundle na vsaki strani	Klaviyojev “On-site” stub, polni paket samo na obrazcih za prijavo
jQuery + jQuery UI	Vanilla JS, ali povlecite 2–3 funkcije, ki jih uporabljate
Lottie player za eno animirano ikono	4-vrstična CSS animacija ali statični SVG
Full-page chat widget na vsaki strani	Povezava do strani s pomočjo; chat widget samo na /pages/contact

Korak 5 — INP (Interaction to Next Paint)

INP je leta 2024 nadomestil FID in je pogosto tihi morilec na Shopify temah, zgrajenih pred 2023. INP meri najdaljšo zakasnitev vnosa med sejo — običajno dotik, ki sproži JS-intenzivno kodo (dodaj v košarico, izbiralnik variant, mega-meni).

Pogosti popravki INP

• Cart drawer: če izvaja sinhrono ponovno gradnjo DOM-a ob dodajanju v košarico, preklopite na pridobivanje HTML fragmenta (Section Rendering API) in morf DOM samo znotraj vsebnika drawerja.
• Izbiralnik variant: če sprememba variante znova zažene celoten JS produktnega obrazca, omejite posodobitve samo na ceno + gumb + sliko. Referenca je Shopifyjeva Dawn tema, ki to dobro počne.
• Mega-meni: mega-meniji, ki ob hover izrišejo vse otroke vseh elementov najvišje ravni, so INP nočna mora. Otroke izrišite enkrat ob prvem hoveru, nato cache.

Profilirajte, ne ugibajte

Chrome DevTools → Performance → posnemite, medtem ko kliknete Dodaj v košarico v počasnem mobilnem profilu. Dolga naloga, ki se pojavi, je vaš INP problem. Skoraj vedno gre za eno od: aplikacije skript, JS za ponovno gradnjo košarice ali analitičnega event handlerja.

Korak 6 — CLS (Cumulative Layout Shift)

CLS je na Shopifyju skoraj vedno ena od treh stvari:

1. Slike brez atributov width/height. Dodajte jih. Vedno.
2. Spletne pisave se zamenjajo z večjo od fallback pisave. Ujemajte se z size-adjust fallback pisave (CSS Font Metric Override).
3. Promocijski banneri vstavljeni z JS nad foldom. Najprej rezervirajte prostor v CSS, nato napolnite z JS.

Popravek sta običajno dva CSS pravila in width/height na vsakem <img>. CLS je najcenejša CWV zmaga na seznamu.

Korak 7 — Caching headers

Shopify večinoma obvladuje caching, vendar pazite na:

• URL-ji datotek morajo biti postreženi z ?v=… poizvedbo, ki jo Shopify doda. Nekateri bloki aplikacij to obidejo. Preglejte Cache-Control na datotekah teme v DevTools → Network.
• Aplikacije, gostovane na CDN, lahko privzeto pošiljajo no-cache headerje. Opustite aplikacijo ali jo zavijte v lastno statično datoteko, če licenca to dovoljuje.

Korak 8 — Ponovno izmerite

Ponovno zaženite PageSpeed Insights proti istim URL-jem, ki ste jih izmerili v Koraku 0. Zajemite nove številke. Lab izboljšava je običajno vidna takoj; field podatki (CrUX) potrebujejo približno 28 dni, da odražajo spremembe.

Če je lab izboljšava majhna ali nič po resni rundi sprememb, je to znak, da prevladujoči strošek leži tam, kamor še niste pogledali — običajno skript tretje osebe, ki ste ga spregledali, ali strežniška zakasnitev (TTFB), skrita za Cloudflare cacheom. Profilirajte z Lighthouse “View Treemap”, da vidite razčlenitev JS-a po viru.

Realna pričakovanja

Shopify tema brez angažmaja pri zmogljivosti običajno dosega 30–50 na mobilnem PageSpeed Insightsu. Po eni osredotočeni seji zgoraj omenjenih korakov bi morali biti pri 70–85. Doseganje od 85 do 95+ običajno zahteva težje kompromise: opustitev aplikacije, ki je marketing ekipi všeč, ali prepis sekcije v vanilla JS. To je pogovor, vreden pogovora.

Izboljšanje LCP za 1 sekundo v podatkih realnih uporabnikov, na katerih Google razvršča, je po mojih izkušnjah običajno vredno 2–5 % organske konverzije. Matematika upravičuje inženirski čas pri katerikoli pomembni vrednosti naročila.

---

Potrebujete plačan pregled konkretne Shopify trgovine? Sodelujem s trgovci po Sloveniji in EU prav v tem obsegu. Stopite v stik.