Prethodno učitavanje slika na Shopify-ju: vodič korak po korak (2026)

Da biste na Shopify-ju unapred učitali sliku, pronađite sliku koja je vaš Largest Contentful Paint (LCP) element i prikažite je filterom image_tag, uz trenutno (eager) učitavanje i fetchpriority="high". Dodajte preload: true ili tag <link rel="preload"> samo kada pregledač tu sliku pronalazi kasno, na primer kada je ona CSS pozadina ili dolazi iz JavaScript slajdera.

Preload je nagoveštaj koji pregledaču kaže da počne preuzimanje pre nego što bi sam pronašao fajl. Na jednom ili dva fajla ubrzava LCP. Na mnogo fajlova usporava stranicu, jer se svi takmiče za isti protok. Ovaj vodič prolazi kroz LCP sliku, fetchpriority, Shopify filtere image_tag i preload_tag, fontove i slučajeve u kojima ne treba ništa unapred učitavati. Svi Liquid primeri prate aktuelnu Shopify dokumentaciju za teme.

Prethodno učitavanje na Shopify-ju ukratko

Šta prethodno učitavanje radi za Core Web Vitals?

Prethodno učitavanje menja trenutak u kome pregledač otkriva fajl. Ne smanjuje fajl i ne ubrzava server. Shopify dokumentacija razliku objašnjava jasno: preload otkriva resurs koji bi pregledač inače pronašao prekasno, a fetchpriority="high" podiže prioritet resursa za koji pregledač već zna.

Core Web Vitals u 2026. čine tri metrike, merene na 75. percentilu učitavanja stranica:

INP je 12. marta 2024. zamenio First Input Delay (FID) kao Core Web Vital. Stariji vodiči koji tvrde da preload skripti poboljšava FID su zastareli: FID se više ne meri, a unapred učitan JavaScript ne popravlja spore interakcije.

Google-ov web.dev vodič za LCP deli ga na četiri dela: vreme do prvog bajta, kašnjenje početka učitavanja resursa, trajanje učitavanja resursa i kašnjenje iscrtavanja elementa. Po njihovoj smernici, oba dela sa kašnjenjem treba da budu blizu nule, a najveći deo vremena treba da ode na učitavanje HTML-a i same slike. Preload i fetchpriority napadaju kašnjenje početka učitavanja: razmak između dolaska HTML-a i trenutka kada pregledač počne da preuzima LCP sliku.

Korak 1: Kako da pronađete LCP sliku u svojoj Shopify prodavnici?

Počnite od podataka stvarnih korisnika, a zatim element potvrdite laboratorijskim testom.

1. Shopify admin. Otvorite Analytics > Reports i potražite „contentful” da biste otvorili LCP izveštaj. Pregled performansi možete otvoriti i iz Online Store > Themes. Podaci dolaze od stvarnih poseta u poslednjih 30 dana i prikazani su na 75. percentilu.
2. PageSpeed Insights. Proverite početnu stranicu, stranicu proizvoda i stranicu kolekcije. Izveštaj navodi LCP element za svaki URL.
3. Chrome DevTools. Snimite učitavanje u panelu Performance i otvorite Insights. Videćete LCP element i kašnjenje početka njegovog učitavanja. U panelu Network uključite kolonu Priority da proverite da li se slika preuzima sa prioritetom High.

Naš besplatni Shopify test brzine daje brzu prvu procenu pre nego što otvorite DevTools.

Na većini Shopify tema LCP element zavisi od tipa stranice:

Mobilni prikaz proverite posebno. LCP element na telefonu se često razlikuje od onog na desktopu, posebno kada tema prikazuje posebnu mobilnu hero sliku.

Korak 2: Učitajte LCP sliku odmah, uz fetchpriority="high"

Pregledač podrazumevano otkriva svaku sliku sa niskim prioritetom (Low). Tek posle izračunavanja rasporeda zaključuje koje su slike u vidnom polju i podiže im prioritet. Shopify dokumentacija za teme preporučuje fetchpriority="high" na LCP slici da bi se to čekanje uklonilo. To je izmena u jednom redu i u većini tema donosi više od preload taga, jer slike koje Liquid upiše u HTML pregledačev preload skener ionako rano pronalazi.

Pravila iz Shopify smernica:

• Koristite ga na jednoj slici po stranici: na hero slici ili na glavnoj slici proizvoda.
• Kombinujte ga sa loading="eager" ili bez atributa loading. Nikada ga ne kombinujte sa loading="lazy".
• Prednost ima prva sekcija (section.index == 1).
• Ne skrivajte LCP sliku iza animacije pojavljivanja. LCP događaj čeka animaciju čak i kada je slika već preuzeta.

Ovo je obrazac za hero sekciju ili sekciju sa banerom. Shopify tema Horizon prioritet postavlja na isti način, na osnovu section.index:

{%- liquid
  assign hero_loading = 'eager'
  assign hero_priority = 'auto'
  if section.index == 1
    assign hero_priority = 'high'
  elsif section.index > 3
    assign hero_loading = 'lazy'
  endif
-%}
{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
      loading: hero_loading,
      fetchpriority: hero_priority,
      widths: '600, 900, 1200, 1600',
      sizes: '100vw'
}}

Granu za lenjo učitavanje napišite kao pozitivan uslov, section.index > 3. U editoru teme, u statičnim sekcijama i u odgovorima Section Rendering API-ja, section.index je nil. Uslov kao section.index <= 3 za nil nije ispunjen, pa bi hero sliku lenjo učitao baš u tim slučajevima.

U mreži proizvoda na kolekciji, trenutno učitajte samo kartice koje kupac prve vidi:

{% for product in collection.products %}
  {%- liquid
    if forloop.index <= 4
      assign image_loading = 'eager'
    else
      assign image_loading = 'lazy'
    endif
  -%}
  {{ product.featured_image
    | image_url: width: 400
    | image_tag:
        loading: image_loading,
        widths: '200, 300, 400',
        sizes: '(min-width: 1200px) calc(25vw - 2rem), (min-width: 768px) calc(33vw - 2rem), calc(50vw - 2rem)'
  }}
{% endfor %}

Kandidatima za LCP uvek dajte izričit atribut sizes. Ako biblioteka za lenjo učitavanje računa sizes JavaScript-om, pregledač ne može da izabere pravi fajl dok se ta skripta ne izvrši.

Ako vaša tema i dalje koristi stari filter img_url ili ručno sastavljene CDN adrese, kao u mnogim starijim uputstvima, pređite na image_url i image_tag. Filter img_url je zastareo, a image_tag umesto vas dodaje width, height i srcset.

Korak 3: Kada koristiti image_tag sa preload: true?

Filter image_tag prima parametar preload. Kada je postavljen na true, Shopify šalje HTTP zaglavlje Link sa rel=preload, uključujući imagesrcset i imagesizes koji odgovaraju atributima srcset i sizes taga. Sam tag <img> se ne menja.

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
      preload: true,
      fetchpriority: 'high',
      widths: '600, 900, 1200, 1600',
      sizes: '100vw'
}}

Shopify ove Liquid preload-ove pretvara u zaglavlja Link, koja mogu da stignu kao Early Hints (HTTP 103) pre samog HTML-a. To zvuči kao besplatna dobit, ali postoji ograničenje. Shopify šalje najviše 10 preload zaglavlja Link po odgovoru i popunjava ih ovim redosledom:

1. Automatski preload za skripte i stilove u <head> koji blokiraju prikaz
2. Preload stilova iz stylesheet_tag: preload: true
3. Ostali preload-ovi, uključujući fontove iz preload_tag
4. Preload skripti
5. Preload slika iz image_tag: preload: true

Sve posle desetog unosa se odbacuje, a slike dolaze poslednje. Tema sa 10 ili više fajlova koji blokiraju prikaz u <head> nema mesta za preload slike. Ako se preload koji ste dodali ne pojavljuje u zaglavlju Link odgovora za dokument, prvo prebrojte fajlove koji blokiraju prikaz.

Koristite preload: true na slici kada važi sve od sledećeg:

• Slika je LCP element na toj stranici.
• Pregledač je pronalazi kasno, što se vidi u Network prikazu.
• Test pre i posle izmene, sa više merenja, pokazuje brži LCP.

Web.dev takođe navodi da pregledači možda ne podržavaju responzivne slike u preload-u preko zaglavlja, što je još jedan razlog da testirate umesto da pretpostavljate. Ako je slika već u HTML-u pri vrhu stranice, fetchpriority="high" je bolji alat.

Korak 4: Popravite slike koje pregledač ne može rano da otkrije

Tri obrasca u temama kriju LCP sliku od preload skenera. Prvo popravite obrazac. Preload koristite samo ako to nije moguće.

CSS pozadinske slike

Hero postavljen kao background-image pronalazi se tek kada se CSS preuzme i obradi. Shopify umesto toga preporučuje <img> sa apsolutnim pozicioniranjem i object-fit: cover, a tako hero medije grade i Dawn i Horizon. Ako pozadina mora da ostane, unapred učitajte iste fajlove koje koristi CSS, sa istim veličinama:

<link
  rel="preload"
  as="image"
  fetchpriority="high"
  href="{{ section.settings.image | image_url: width: 1600 }}"
  imagesrcset="{{ section.settings.image | image_url: width: 800 }} 800w,
               {{ section.settings.image | image_url: width: 1200 }} 1200w,
               {{ section.settings.image | image_url: width: 1600 }} 1600w"
  imagesizes="100vw"
>

Tag postavite na vrh koda sekcije, pre elementa koji koristi pozadinu. Pregledač tada pronalazi sliku čim obradi sekciju, umesto da čeka CSS. Ako se adrese ili veličine ne poklapaju sa onim što CSS zaista koristi, pregledač preuzima i drugu sliku, pa preload samo dodaje težinu.

JavaScript biblioteke za lenjo učitavanje i slajderi

Biblioteke kao što je lazysizes zamenjuju src sa data-src, pa pregledač ne vidi adresu slike dok se skripta ne izvrši. Zamenite data-src sa src, za slike van prvog prikaza koristite izvorno loading="lazy" i uklonite biblioteku. U slajderu samo prvi slajd može biti LCP element. Njemu dajte trenutno učitavanje, a ostale slajdove učitavajte lenjo.

Odvojene mobilne i desktop hero slike

Mnoge teme prikazuju dve hero slike i jednu sakrivaju CSS-om. Pregledač preuzima obe, a često samo desktop slika dobije fetchpriority. Koristite jedan element <picture> sa mobilnim <source> i stavite fetchpriority="high" na unutrašnji <img>, kako bi važio za izvor koji pregledač izabere.

Korak 5: Da li treba unapred učitavati fontove na Shopify-ju?

Font unapred učitajte samo ako ga koristi tekst u prvom prikazu i ako ga pregledač pronalazi kasno. Font koji se pominje unutar posebnog CSS fajla je prvi ispravan slučaj upotrebe koji Shopify dokumentacija navodi za preload, jer ga pregledač ne vidi dok se CSS ne preuzme i obradi.

Za font izabran u editoru teme, filter font_url vraća woff2 fajl sa Shopify CDN-a, obično pod putanjom /cdn/fonts/ na vašem domenu. Shopify primer za zaglavlje layout-a, zasnovan na temi Horizon, izgleda ovako:

{%- unless settings.type_body_font.system? -%}
  {{ settings.type_body_font | font_url | preload_tag: as: 'font', type: 'font/woff2' }}
{%- endunless -%}

Preload fonta mora da bude u CORS režimu, čak i za fontove na vašem domenu. Bez atributa crossorigin pregledač preuzima font dva puta. preload_tag sam dodaje crossorigin="anonymous" kada je as postavljen na font, pa ga nemojte ponovo prosleđivati. Ako pišete običan tag, kao što to radi Dawn, dodajte ga sami:

<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>

Još nekoliko pravila za fontove u Shopify temama:

• Unapred učitajte najviše jedan ili dva fajla fonta, obično font za tekst ili font za naslove iz prvog prikaza. Nemojte unapred učitavati i podebljane i kurzivne varijante.
• Za licencirani font koji nije u Shopify biblioteci, otpremite woff2 fajl u /assets i unapred ga učitajte sa asset_url | preload_tag. Shopify to preporučuje umesto učitavanja sa Google Fonts, jer se uklanja veza ka još jednom domenu.
• Koristite font_face: font_display: 'swap' kako bi se tekst prikazao rezervnim fontom dok se web font učitava, a rezervni font podesite sa size-adjust da biste smanjili pomeranje rasporeda pri zameni.
• Preload fontova i osnovni stylesheet postavite iznad {{ content_for_header }}. Shopify većinu stranica prodavnice šalje u delovima (streaming), a sve iznad tog taga stiže do pregledača dok se sekcije još obrađuju.

Šta ne treba unapred učitavati na Shopify-ju?

Shopify smernica je da preload koristite za jedan ili dva resursa koje pregledač otkriva kasno i da svaku izmenu testirate. Ovo izostavite:

• CSS i JavaScript u <head> koji blokiraju prikaz. Shopify u svakom odgovoru pregleda generisani head i automatski unapred učitava do 10 takvih fajlova. Vaš preload za isti fajl troši jedno mesto.
• Slike koje su već u HTML-u pri vrhu. Preload skener ih pronalazi. Umesto toga stavite fetchpriority="high" na LCP sliku.
• Više od dva resursa. Ako je previše fajlova visokog prioriteta, nijedan to zapravo nije. Ovo zamenjuje savet „dve do pet slika po stranici” koji su davali stariji vodiči, uključujući i prvu verziju ovog teksta.
• Slike ispod prvog ekrana, sličice galerije, drugi i kasniji slajdovi karusela i dekorativne pozadine.
• Pogrešan prelomni ekran. Desktop hero unapred učitan na mobilnom je čist gubitak.
• JavaScript, da biste popravili spore interakcije. To ne pomaže INP-u. Koristite defer za skripte koje nisu ključne, uklonite aplikacije koje više ne koristite i kod učitavajte tek na interakciju.
• Preconnect ka cdn.shopify.com. Shopify ga već šalje, a fajlovi teme se sada učitavaju sa putanje /cdn na vašem domenu. Preconnect koristite samo za domene trećih strana koji se otkrivaju kasno, kao što je servis za video.

Chrome prikazuje upozorenje u konzoli oko tri sekunde posle događaja load kada unapred učitan fajl nije iskorišćen. Takvo upozorenje tretirajte kao grešku koju treba ispraviti.

Preload, prefetch, prerender i preconnect: u čemu je razlika?

Shopify navodi da njegova podrazumevana pravila za prefetch ubrzavaju navigaciju unutar istog sajta u Chromium pregledačima za oko 220 ms po medijani na desktopu i za oko 20 ms na mobilnom. Safari i Firefox za sada ignorišu speculation rules.

Kako da proverite da li je prethodno učitavanje uspelo?

1. Zabeležite polaznu vrednost. Zapišite LCP na 75. percentilu iz Shopify izveštaja o performansama i PageSpeed Insights rezultat za ista tri tipa stranica.
2. Menjajte jednu stvar odjednom. Prvo dodajte fetchpriority, a preload testirajte samo ako se slika i dalje kasno otkriva.
3. Proverite Network prikaz. U DevTools panelu Network LCP slika treba da počne rano i da u koloni Priority ima vrednost High.
4. Proverite zaglavlje Link u odgovoru za dokument. U njemu je svaki preload koji je Shopify poslao, pa vidite da li je vaš prošao ograničenje od 10 unosa.
5. Proverite konzolu zbog upozorenja o neiskorišćenom preload-u.
6. Uporedite više merenja. Laboratorijski rezultati variraju od merenja do merenja, pa izračunajte prosek nekoliko njih.
7. Potvrdite u podacima sa terena. Shopify izveštaj pokriva poslednjih 30 dana stvarnih poseta, pa izmeni dajte nekoliko nedelja pre nego što je ocenite.

Prethodno učitavanje je samo jedan deo brže prodavnice. Naš vodič za ubrzanje Shopify sajta pokriva aplikacije, skripte i Liquid, a kontrolna lista za optimizaciju slika na Shopify-ju pokriva veličine i formate fajlova.

Može li aplikacija da reši prethodno učitavanje umesto vas?

Aplikacija za slike može da kompresuje i konvertuje fajlove, što skraćuje trajanje učitavanja resursa. Ne može da odluči koja je slika LCP element na svakom šablonu i ne može da popravi hero napravljen kao CSS pozadina. Taj posao je u kodu teme. Kada pravimo ili prerađujemo temu, LCP sliku, fetchpriority, preload fontova i redosled u head-u podešavamo za svaki šablon, a rezultat proveravamo u podacima sa terena. Ako je to potrebno vašoj temi, pogledajte našu uslugu razvoja Shopify tema.

FAQ

Kako da unapred učitam sliku na Shopify-ju?

Glavnu sliku pri vrhu stranice prikažite filterom image_tag i postavite loading: 'eager' i fetchpriority: 'high'. To je obično dovoljno, jer pregledač rano pronalazi sliku koja je u HTML-u. Dodajte preload: true u image_tag, ili <link rel="preload" as="image">, samo kada se slika otkriva kasno, na primer kao CSS pozadina, i samo ako test pokaže brži LCP.

Koliko slika treba unapred učitati na jednoj Shopify stranici?

Obično nijednu ili jednu. Shopify smernica je da se po stranici unapred učitaju samo jedan ili dva ključna resursa ukupno, računajući i fontove. Na jednu LCP sliku stavite fetchpriority="high", a sve ispod prvog ekrana učitavajte lenjo.

Da li prethodno učitavanje poboljšava Shopify SEO?

Može da poboljša LCP, a to je jedna od Core Web Vitals metrika koje Google koristi kao signal za rangiranje. Ipak, brži LCP sam po sebi neće mnogo pomeriti pozicije. Sadržaj, linkovi i dostupnost za pretraživače su važniji, a loš preload može i da pogorša LCP. Izmenu izmerite u podacima sa terena umesto da pretpostavite da je pomogla.

Da li Shopify automatski lenjo učitava slike?

Da, kada koristite image_tag bez atributa loading. Slikama u prve tri sekcije dodeljuje loading="eager", a od četvrte sekcije naniže loading="lazy". Slike učitava odmah i kada je section.index jednak nil, na primer u editoru teme. Teme koje na hero slici ručno upisuju loading="lazy" poništavaju ovo ponašanje i usporavaju LCP.

Da li svi pregledači podržavaju fetchpriority?

Podržavaju ga svi aktuelni glavni pregledači. Web.dev navodi podršku od verzija Chrome i Edge 102, Firefox 132 i Safari 17.2. Stariji pregledači ignorišu atribut, pa njegovo dodavanje nema rizika.

Koja je razlika između preload i prefetch?

Preload odmah i sa visokim prioritetom preuzima fajl koji je potreban trenutnoj stranici. Prefetch sa niskim prioritetom preuzima ono što će kupcu verovatno trebati na sledećoj stranici. Shopify već radi prefetch stranica kada kupac pritisne ili dodirne link, pa većina prodavnica ne mora ručno da dodaje prefetch nagoveštaje.