Optimizacija brzine Shopifyja 2026.: Kompletan vodič za Core Web Vitals i performanse

January 15, 2026 (1mo ago)

Optimizacija brzine Shopifyja 2026.: Kompletan vodič za Core Web Vitals i performanse

Brzina stranice izravno utječe na vaš prihod. Studije pokazuju da:

Ipak, prosječna Shopify trgovina učitava se za 5-7 sekundi - daleko presporo. Nakon optimizacije 20+ Shopify trgovina, dosljedno sam postizao vrijeme učitavanja od 2-3 sekunde s povećanjem konverzija od 15-40%.

U ovom sveobuhvatnom vodiču pokazat ću vam točno kako optimizirati svoju Shopify trgovinu za maksimalnu brzinu i performanse.

Sadržaj

  1. Zašto je brzina važna
  2. Razumijevanje Core Web Vitals
  3. Mjerenje trenutne brzine
  4. Optimizacija slika
  5. Optimizacija teme
  6. Revizija i čišćenje aplikacija
  7. Optimizacija koda
  8. Skripte trećih strana
  9. Napredne tehnike
  10. Praćenje i održavanje

Zašto je brzina važna

Poslovni utjecaj

Podaci iz stvarnog života mojih klijenata:

Klijent A (modna trgovina):

Klijent B (CBD trgovina):

SEO utjecaj

Google je potvrdio 2021. da su Core Web Vitals faktori rangiranja. Spore stranice se lošije pozicioniraju:

Trgovine s dobrim Core Web Vitals bilježe 20-30% bolje organske pozicije.

Utjecaj na korisničko iskustvo

Ponašanje korisnika prema vremenu učitavanja:

Mobilno je još kritičnije:

Razumijevanje Core Web Vitals

Googleovi Core Web Vitals mjere stvarno korisničko iskustvo:

1. LCP (Largest Contentful Paint)

Što mjeri: Vrijeme do učitavanja glavnog sadržaja

Cilj:

Česti LCP elementi:

Kako poboljšati:

2. FID (First Input Delay)

Što mjeri: Vrijeme do interaktivnosti stranice

Cilj:

Česti uzroci lošeg FID-a:

Kako poboljšati:

3. CLS (Cumulative Layout Shift)

Što mjeri: Vizualnu stabilnost (pomicanje elemenata tijekom učitavanja)

Cilj:

Česti uzroci:

Kako poboljšati:

Mjerenje trenutne brzine

Alati za korištenje

1. Google PageSpeed Insights (besplatan)

URL: https://pagespeed.web.dev/

Prednosti:

Kako koristiti:

  1. Unesite URL svoje trgovine
  2. Pričekajte analizu
  3. Provjerite rezultate (ciljajte 90+ na mobilnom i desktopu)
  4. Pregledajte prilike i dijagnostiku

Ciljani rezultati:

2. GTmetrix (besplatan)

URL: https://gtmetrix.com/

Prednosti:

Ključne metrike:

3. WebPageTest (besplatan)

URL: https://www.webpagetest.org/

Prednosti:

Koristite za: Duboku tehničku analizu

4. Shopify Admin (ugrađen)

Idite na: Online Store > Themes > Actions > View Speed Report

Prikazuje:

Što mjeriti

Ključne stranice:

  1. ✅ Početna stranica (najviše prometa)
  2. ✅ Stranice kolekcija
  3. ✅ Stranice proizvoda (najveća namjera)
  4. ✅ Stranica košarice

Testirajte s više lokacija:

Uspostavljanje polazne točke

Prije optimizacije, dokumentirajte:

Primjer polazne točke:

Početna stranica (prije optimizacije)
- Mobilne performanse: 42
- Desktop performanse: 68
- Vrijeme učitavanja: 6,8s
- Veličina stranice: 4,2MB
- Zahtjevi: 127
- LCP: 5,2s
- FID: 280ms
- CLS: 0,18

Optimizacija slika

Slike obično čine 50-70% veličine stranice. Ovo je najveća prilika.

1. Odaberite pravi format

Usporedba formata:

| Format | Slučaj korištenja | Kompresija | |--------|-------------------|------------| | WebP | Najbolji za većinu slika | 25-35% manji od JPG | | AVIF | Sljedeća generacija (nije potpuno podržan) | 50% manji od JPG | | JPG | Fotografije, složene slike | Dobra kompresija | | PNG | Logotipi, potrebna prozirnost | Veće datoteke | | SVG | Ikone, logotipi (vektorski) | Najmanje |

Preporuka: Koristite WebP s JPG zamjenom.

Shopify automatski servira WebP podržanim preglednicima - samo postavite JPG slike visoke kvalitete.

2. Komprimirajte slike

Nikada ne postavljajte slike izravno s fotoaparata/dizajnera.

Alati za kompresiju:

Online (besplatno):

Mac aplikacije:

Shopify aplikacije:

Ciljane veličine:

3. Pravilno promijenite veličinu slika

Ne postavljajte 4000x3000px slike za 800px prikaz.

Veličine Shopify slika:

| Vrsta slike | Preporučena veličina | |-------------|---------------------| | Slike proizvoda | 2048 x 2048px (Shopify maksimum) | | Hero slike | 1920 x 1080px (desktop) | | Slike kolekcija | 1200 x 800px | | Minijature | 400 x 400px | | Ikone | 100 x 100px ili SVG |

Shopify automatski stvara ove veličine:

Koristite pravu veličinu za kontekst:

{% raw %}
<!-- Minijatura proizvoda -->
<img src="{{ product.featured_image | img_url: 'medium' }}" loading="lazy">
 
<!-- Stranica detalja proizvoda -->
<img src="{{ product.featured_image | img_url: '1024x1024' }}">
 
<!-- Hero slika pune širine -->
<img src="{{ section.settings.image | img_url: '1920x' }}">
{% endraw %}

4. Implementirajte lazy učitavanje

Lazy učitavanje odgađa učitavanje slika dok korisnik ne dođe do njih.

Nativno lazy učitavanje (najlakše):

<img src="product.jpg" loading="lazy" alt="Naziv proizvoda">

Shopify teme bi to trebale uključiti prema zadanim postavkama. Provjerite:

{% raw %}
{{ image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{% endraw %}

Prioritetno učitavanje za slike iznad pregiba:

<!-- Hero slika - učitaj odmah -->
<img src="hero.jpg" loading="eager" fetchpriority="high">

5. Koristite responzivne slike

Servirajte različite veličine ovisno o veličini ekrana:

<img
  srcset="
    product-small.jpg 400w,
    product-medium.jpg 800w,
    product-large.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="product-medium.jpg"
  alt="Naziv proizvoda"
>

Shopifyjev image_tag filter to radi automatski:

{% raw %}
{{ product.featured_image | image_url: width: 1200 | image_tag:
  widths: '200, 400, 600, 800, 1000, 1200' }}
{% endraw %}

6. Uklonite nekorištene slike

Revidirajte svoje Shopify datoteke:

  1. Idite na Settings > Files
  2. Sortirajte po veličini
  3. Izbrišite nekorištene slike

Mnoge trgovine imaju stotine MB postavljenih, ali nikad korištenih slika.

Optimizacija teme

1. Odaberite brzu temu

Najbrže Shopify teme (2026.):

  1. Dawn (besplatna) - Shopifyjeva zadana, izvrsne performanse
  2. Sense (besplatna) - Minimalistička, brza
  3. Impulse ($350) - Premium, optimizirana
  4. Turbo ($350) - Nazvana "Turbo" s razlogom
  5. Prilagođena tema - Najbolje performanse ako je ispravno izrađena

Izbjegavajte:

Migracija: Ako je vaša tema spora, migracija na Dawn obično poboljšava rezultate za 20-30 bodova.

2. Uklonite nekorištene sekcije

Mnoge teme uključuju sekcije koje nikad ne koristite:

  1. Idite na Online Store > Themes > Customize
  2. Prođite kroz svaku stranicu
  3. Izbrišite nekorištene sekcije
  4. Svaka sekcija dodaje težinu koda

3. Optimizirajte kod teme

Česti problemi s temama:

CSS koji blokira renderiranje

Problem: CSS blokira renderiranje stranice

Rješenje: Inline kritični CSS, odgodite nekritični

{% raw %}
<!-- Inline kritični CSS -->
<style>
  {{ 'critical.css' | asset_url | stylesheet_tag }}
</style>
 
<!-- Odgodite nekritični CSS -->
<link rel="preload" href="{{ 'non-critical.css' | asset_url }}" as="style" onload="this.rel='stylesheet'">
{% endraw %}

Nekorišteni CSS

Problem: Učitavanje CSS-a za komponente koje nisu na stranici

Rješenje: Koristite alate poput PurgeCSS ili ručno uklonite

JavaScript koji blokira

Problem: Velike JS datoteke blokiraju renderiranje

Rješenje: Odgodite ili asinkrono učitajte nekritične skripte

<!-- Odgođena skripta (održava redoslijed izvršavanja) -->
<script src="script.js" defer></script>
 
<!-- Asinkrona skripta (učitava se čim može, ne blokira) -->
<script src="analytics.js" async></script>

4. Optimizacija fontova

Prilagođeni fontovi mogu dodati 500ms+ na vrijeme učitavanja.

Najbolje prakse:

1. Ograničite varijacije fontova:

/* Loše: Učitavanje 8 datoteka fontova */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800');
 
/* Dobro: Učitavanje 2 datoteke fontova */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700');

2. Prethodno učitajte fontove:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

3. Koristite font-display:

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap; /* Prikazuje zamjenski font tijekom učitavanja */
}

4. Sistemski fontovi (najbrže):

/* Nulto vrijeme učitavanja */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

Revizija i čišćenje aplikacija

Svaka Shopify aplikacija dodaje:

Trgovine s 20+ aplikacija često postižu < 30 na PageSpeed.

Proces revizije aplikacija

1. Popis svih instaliranih aplikacija:

Idite na Apps u Shopify Admin

2. Za svaku aplikaciju, pitajte se:

3. Kategorizirajte aplikacije:

Ključne (zadržite):

Korisne (procijenite):

Nepotrebne (uklonite):

Utjecaj na performanse po vrsti aplikacije

Najteže aplikacije (izbjegavajte ako je moguće):

Umjerene aplikacije (koristite selektivno):

Lagane aplikacije (u redu za korištenje):

Lagane alternative

Umjesto teških aplikacija za recenzije:

Umjesto aplikacija za skočne prozore:

Umjesto page buildera:

Pravilno uklanjanje aplikacija

Ne samo deinstalirajte!

  1. Deinstalirajte aplikaciju iz Shopifyja
  2. Provjerite kod teme za preostale isječke
  3. Uklonite ugradnje aplikacije iz postavki teme
  4. Izbrišite datoteke aplikacije iz resursa teme
  5. Testirajte stranicu kako biste osigurali da se ništa nije pokvarilo

Provjerite preostali kod:

Idite na Online Store > Themes > Actions > Edit Code

Pretražite naziv aplikacije u:

Optimizacija koda

1. Minificirajte CSS/JS

Minifikacija uklanja:

Rezultat: 30-50% manje datoteke

Kako: Većina modernih tema to radi automatski. Provjerite proces izgradnje vaše teme.

2. Kombinirajte datoteke

Umjesto:

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="product.css">
<link rel="stylesheet" href="footer.css">

Učinite:

<link rel="stylesheet" href="combined.css">

Manje zahtjeva = brže učitavanje.

3. Uklonite nekorišteni Liquid kod

Česti nepotrebni kod:

{% raw %}
<!-- Ne iterirajte kroz sve proizvode ako prikazujete samo 4 -->
{% for product in collections.all.products limit: 4 %}
  <!-- Koristite kolekciju s 4 proizvoda umjesto toga -->
{% endfor %}
 
<!-- Ne renderirajte HTML za skrivene elemente -->
{% if section.settings.show_feature %}
  <!-- Renderirajte samo ako se stvarno prikazuje -->
{% endif %}
{% endraw %}

4. Optimizacija upita baze podataka

Ograničite dohvaćane kolekcije/proizvode:

{% raw %}
<!-- Loše: Učitava sve proizvode (mogu biti tisuće) -->
{% assign products = collections.all.products %}
 
<!-- Dobro: Učitava samo ono što je potrebno -->
{% assign products = collections.featured.products | limit: 8 %}
{% endraw %}

5. Cachiranje dinamičkog sadržaja

Za sadržaj koji se ne mijenja često:

{% raw %}
{% cache 'homepage_featured', expires_in: '24 hours' %}
  <!-- Skupe Liquid operacije ovdje -->
{% endcache %}
{% endraw %}

Napomena: Liquid {% cache %} oznaka dostupna je samo na Shopify Plus.

Skripte trećih strana

Skripte trećih strana često su najveći ubojica performansi:

Revizija skripti trećih strana

Pronađite što se učitava:

  1. Otvorite Chrome DevTools (F12)
  2. Idite na karticu Network
  3. Učitajte svoju stranicu
  4. Sortirajte po Size (silazno)
  5. Identificirajte domene trećih strana

Česti krivci:

Strategije optimizacije

1. Asinkrono učitavanje skripti

<!-- Blokira renderiranje -->
<script src="analytics.js"></script>
 
<!-- Ne blokira (bolje) -->
<script src="analytics.js" async></script>

2. Odgodite nekritične skripte

Učitajte nakon korisničke interakcije:

// Učitajte chat widget samo kad korisnik scrolla 50%
let chatLoaded = false;
window.addEventListener('scroll', () => {
  if (!chatLoaded && window.scrollY > document.body.scrollHeight * 0.5) {
    loadChatWidget();
    chatLoaded = true;
  }
});

3. Koristite Google Tag Manager

Umjesto:

<script src="analytics.js"></script>
<script src="facebook-pixel.js"></script>
<script src="tiktok-pixel.js"></script>
<script src="pinterest-tag.js"></script>

Učinite:

<script src="gtm.js" async></script>
<!-- Upravljajte svim oznakama iz GTM nadzorne ploče -->

Prednosti:

4. Hostajte kritične skripte sami

Umjesto učitavanja jQuery s CDN-a:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Hostajte sami:

<script src="{{ 'jquery.min.js' | asset_url }}"></script>

Prednosti:

Nedostaci:

Napredne tehnike

1. HTTP/2 i HTTP/3

Shopify koristi HTTP/2 prema zadanim postavkama (nije potrebna radnja).

Prednosti:

Provjerite: U DevTools Network kartici (stupac Protocol trebao bi prikazivati "h2")

2. Preconnect na vanjske domene

Ubrzajte resurse trećih strana:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://cdn.shopify.com">

Preconnect: Uspostavlja ranu vezu (koristite za kritične resurse) DNS-prefetch: Samo rješava DNS (koristite za manje kritične resurse)

3. Prefetch sljedeće stranice

Za stranice proizvoda, prefetch vjerojatnu sljedeću stranicu:

<link rel="prefetch" href="/products/next-product">

Kad korisnik zadrži pokazivač nad linkom:

document.querySelectorAll('a.product-link').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = link.href;
    document.head.appendChild(prefetchLink);
  });
});

4. Service Workers i cachiranje

Za napredne korisnike: Implementirajte service worker za agresivno cachiranje.

Prednosti:

Složenost: Visoka (zahtijeva prilagođeni razvoj)

5. Optimizacija CDN-a za slike

Shopifyjev CDN je dobar, ali može se dodatno optimizirati:

{% raw %}
<!-- Dodajte transformacije slika putem URL-a -->
{{ image | image_url: width: 800, crop: 'center', format: 'pjpg' }}
{% endraw %}

Parametri:

6. Smanjite preusmjeravanja

Svako preusmjeravanje dodaje ~200ms.

Česti problemi:

Provjerite: Koristite Redirect Mapper alat

Popravite:

Praćenje i održavanje

Kontinuirano praćenje

Tjedno:

Mjesečno:

Kvartalno:

Budžet za performanse

Postavite ciljeve i držite ih se:

Budžet za performanse
- Veličina stranice: < 2MB
- Zahtjevi: < 50
- Vrijeme učitavanja: < 3s
- PageSpeed rezultat: > 90
- LCP: < 2,5s
- FID: < 100ms
- CLS: < 0,1

Prije dodavanja novih značajki/aplikacija:

Automatizirano praćenje

Alati:

Sprječavanje regresije

Regresije performansi nastaju kada:

Spriječite s:

Tijek rada optimizacije iz stvarnog života

Primjer: Optimizacija modne trgovine

Prije:

Korak 1: Optimizacija slika (tjedan 1)

Korak 2: Čišćenje aplikacija (tjedan 2)

Korak 3: Optimizacija teme (tjedan 3)

Korak 4: Optimizacija koda (tjedan 4)

Konačni rezultati:

Poslovni utjecaj:

Uloženo vrijeme: 40 sati tijekom 4 tjedna ROI: 18.500€/mjesečno × 12 = 222.000€/godišnje za 40 sati rada

Zaključak

Optimizacija brzine nije opcionalna. Ključna je za:

Prioritetni plan akcije:

Tjedan 1:

Tjedan 2:

Tjedan 3:

Tjedan 4:

Ciljani rezultati:

Trebate stručnu pomoć? Optimizirao sam 20+ Shopify trgovina s prosječnim poboljšanjem PageSpeed-a od 50+ bodova. Get in touch za besplatnu reviziju brzine.

Često postavljana pitanja

Koji je dobar PageSpeed rezultat za Shopify?

Ciljajte 90+ na mobilnom, 95+ na desktopu. Sve iznad 80 je dobro, ispod 50 treba rad.

Koliko vremena traje optimizacija?

2-4 tjedna za sveobuhvatnu optimizaciju. Brze pobjede (kompresija slika) mogu se napraviti za 1 dan.

Hoće li to utjecati na moj SEO?

Da - pozitivno! Brže stranice se bolje pozicioniraju i dobivaju više organskog prometa.

Mogu li to učiniti sam?

Da, ako ste tehnički. Optimizacija slika i čišćenje aplikacija su laki. Optimizacija teme/koda može zahtijevati programera.

Koliko to košta?

Samostalno: Besplatno (samo vrijeme) Angažiranje programera: 1.500-5.000€ Agencija: 5.000-15.000€ ROI se obično postiže za 1-3 mjeseca.

Učitava li se Shopify Plus brže?

Nužno ne, ali Plus uključuje značajke poput Shopify Flow i boljih API ograničenja. Brzina ovisi o temi, aplikacijama i optimizaciji.

O autoru: Francis Silva je Shopify Plus programer specijaliziran za optimizaciju performansi. S 20+ optimiziranih trgovina koje postižu prosječne PageSpeed rezultate od 90+, pomaže tvrtkama maksimizirati prihod bržim učitavanjem. Saznajte više na shopifydev.eu.