Shopify greičio optimizavimas 2026: Visapusis Core Web Vitals ir našumo vadovas

January 15, 2026 (1mo ago)

Shopify greičio optimizavimas 2026: Visapusis Core Web Vitals ir našumo vadovas

Puslapio greitis tiesiogiai veikia jūsų pajamas. Tyrimai rodo, kad:

Tačiau vidutinė Shopify parduotuvė kraunasi 5–7 sekundes – per lėtai. Optimizavęs daugiau nei 20 Shopify parduotuvių, nuosekliai pasiekiau 2–3 sekundžių krovimo laiką su konversijų padidėjimu 15–40 %.

Šiame išsamiame vadove tiksliai parodysiu, kaip optimizuoti jūsų Shopify parduotuvę maksimaliam greičiui ir našumui.

Turinys

  1. Kodėl greitis svarbus
  2. Core Web Vitals supratimas
  3. Dabartinio greičio matavimas
  4. Vaizdų optimizavimas
  5. Temos optimizavimas
  6. Programėlių auditas ir valymas
  7. Kodo optimizavimas
  8. Trečiųjų šalių skriptai
  9. Pažangios technikos
  10. Stebėjimas ir priežiūra

Kodėl greitis svarbus

Poveikis verslui

Realūs duomenys iš mano klientų:

Klientas A (mados parduotuvė):

Klientas B (CBD parduotuvė):

Poveikis SEO

Google patvirtino 2021 m., kad Core Web Vitals yra reitingavimo veiksniai. Lėtos svetainės reitinguojamos prasčiau:

Parduotuvės su gerais Core Web Vitals mato 20–30 % aukštesnius organinius reitingus.

Poveikis vartotojo patirčiai

Vartotojų elgsena pagal krovimo laiką:

Mobilus dar kritiškesnis:

Core Web Vitals supratimas

Google Core Web Vitals matuoja realią vartotojo patirtį:

1. LCP (Largest Contentful Paint)

Ką matuoja: Laiką, kol pagrindinis turinys užsikrauna

Tikslas:

Dažni LCP elementai:

Kaip pagerinti:

2. FID (First Input Delay)

Ką matuoja: Laiką, kol puslapis tampa interaktyvus

Tikslas:

Dažnos prasto FID priežastys:

Kaip pagerinti:

3. CLS (Cumulative Layout Shift)

Ką matuoja: Vizualinį stabilumą (elementų poslinkis krovimo metu)

Tikslas:

Dažnos priežastys:

Kaip pagerinti:

Dabartinio greičio matavimas

Naudotini įrankiai

1. Google PageSpeed Insights (nemokamai)

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

Privalumai:

Kaip naudoti:

  1. Įveskite savo parduotuvės URL
  2. Palaukite analizės
  3. Patikrinkite balus (siekite 90+ tiek mobiliems, tiek staliniams)
  4. Peržiūrėkite galimybes ir diagnostiką

Tiksliniai balai:

2. GTmetrix (nemokamai)

URL: https://gtmetrix.com/

Privalumai:

Pagrindiniai rodikliai:

3. WebPageTest (nemokamai)

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

Privalumai:

Naudojimas: Giliems techniniams tyrimams

4. Shopify Admin (integruotas)

Eikite į: Online Store > Themes > Actions > View Speed Report

Rodo:

Ką matuoti

Pagrindiniai puslapiai:

  1. ✅ Pagrindinis puslapis (didžiausias srautas)
  2. ✅ Kolekcijų puslapiai
  3. ✅ Produktų puslapiai (didžiausias ketinimas)
  4. ✅ Krepšelio puslapis

Testuokite iš kelių vietų:

Pradinės būklės nustatymas

Prieš optimizavimą užfiksuokite:

Pavyzdinė pradinė būklė:

Pagrindinis puslapis (prieš optimizavimą)
- Mobilusis našumas: 42
- Stalinio kompiuterio našumas: 68
- Krovimo laikas: 6,8 s
- Puslapio svoris: 4,2 MB
- Užklausos: 127
- LCP: 5,2 s
- FID: 280 ms
- CLS: 0,18

Vaizdų optimizavimas

Vaizdai paprastai sudaro 50–70 % puslapio svorio. Tai didžiausia galimybė.

1. Pasirinkite tinkamą formatą

Formatų palyginimas:

| Formatas | Naudojimo atvejis | Suspaudimas | |----------|-------------------|-------------| | WebP | Geriausias daugumai vaizdų | 25–35 % mažesnis nei JPG | | AVIF | Naujos kartos (ne visiškai palaikomas) | 50 % mažesnis nei JPG | | JPG | Nuotraukos, sudėtingi vaizdai | Geras suspaudimas | | PNG | Logotipai, reikia permatomumo | Didesni failai | | SVG | Ikonos, logotipai (vektoriniai) | Mažiausi |

Rekomendacija: Naudokite WebP su JPG atsargine versija.

Shopify automatiškai pateikia WebP palaikančioms naršyklėms – tiesiog įkelkite aukštos kokybės JPG.

2. Suspaudkite vaizdus

Niekada neįkelkite vaizdų tiesiai iš fotoaparato/dizainerio.

Suspaudimo įrankiai:

Internetiniai (nemokami):

Mac programos:

Shopify programėlės:

Tiksliniai dydžiai:

3. Teisingai pakeiskite vaizdų dydį

Neįkelkite 4000x3000px vaizdų 800px rodymui.

Shopify vaizdų dydžiai:

| Vaizdo tipas | Rekomenduojamas dydis | |--------------|-----------------------| | Produktų vaizdai | 2048 x 2048px (Shopify maksimumas) | | Hero vaizdai | 1920 x 1080px (staliniai) | | Kolekcijų vaizdai | 1200 x 800px | | Miniatiūros | 400 x 400px | | Ikonos | 100 x 100px arba SVG |

Shopify automatiškai sukuria šiuos dydžius:

Naudokite tinkamą dydį kontekstui:

{% raw %}
<!-- Produkto miniatiūra -->
<img src="{{ product.featured_image | img_url: 'medium' }}" loading="lazy">
 
<!-- Produkto detalių puslapis -->
<img src="{{ product.featured_image | img_url: '1024x1024' }}">
 
<!-- Pilno pločio hero -->
<img src="{{ section.settings.image | img_url: '1920x' }}">
{% endraw %}

4. Įdiekite tingų krovimą

Tingus krovimas atideda vaizdų krovimą, kol vartotojas prislenka prie jų.

Natyvus tingus krovimas (paprasčiausia):

<img src="product.jpg" loading="lazy" alt="Produkto pavadinimas">

Shopify temos turėtų tai įtraukti pagal numatytuosius nustatymus. Patikrinkite:

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

Prioritetinis krovimas virš lenkimo linijos esantiems vaizdams:

<!-- Hero vaizdas – kraukite iš karto -->
<img src="hero.jpg" loading="eager" fetchpriority="high">

5. Naudokite responsyvius vaizdus

Pateikite skirtingus dydžius pagal ekrano dydį:

<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="Produkto pavadinimas"
>

Shopify image_tag filtras tai atlieka automatiškai:

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

6. Pašalinkite nenaudojamus vaizdus

Audituokite savo Shopify failus:

  1. Eikite į Settings > Files
  2. Rūšiuokite pagal dydį
  3. Ištrinkite nenaudojamus vaizdus

Daugelyje parduotuvių yra šimtai MB įkeltų, bet niekada nenaudotų vaizdų.

Temos optimizavimas

1. Pasirinkite greitą temą

Greičiausios Shopify temos (2026):

  1. Dawn (nemokama) – numatytoji Shopify, puikus našumas
  2. Sense (nemokama) – minimalistinė, greita
  3. Impulse (350 $) – premium, optimizuota
  4. Turbo (350 $) – pavadinta „Turbo" ne be priežasties
  5. Individuali tema – geriausias našumas, jei sukurta teisingai

Venkite:

Migracija: Jei jūsų tema lėta, perkėlimas į Dawn paprastai pagerina balus 20–30 punktų.

2. Pašalinkite nenaudojamus skyrius

Daugelis temų turi skyrius, kurių niekada nenaudojate:

  1. Eikite į Online Store > Themes > Customize
  2. Peržiūrėkite kiekvieną puslapį
  3. Ištrinkite nenaudojamus skyrius
  4. Kiekvienas skyrius prideda kodo svorio

3. Optimizuokite temos kodą

Dažnos temos problemos:

Atvaizdavimą blokuojantis CSS

Problema: CSS blokuoja puslapio atvaizdavimą

Sprendimas: Įterpkite kritinį CSS, atidėkite nekritinį

{% raw %}
<!-- Įterpti kritinį CSS -->
<style>
  {{ 'critical.css' | asset_url | stylesheet_tag }}
</style>
 
<!-- Atidėti nekritinį CSS -->
<link rel="preload" href="{{ 'non-critical.css' | asset_url }}" as="style" onload="this.rel='stylesheet'">
{% endraw %}

Nenaudojamas CSS

Problema: Kraunamas CSS komponentams, kurių nėra puslapyje

Sprendimas: Naudokite įrankius kaip PurgeCSS arba pašalinkite rankiniu būdu

JavaScript blokavimas

Problema: Dideli JS failai blokuoja atvaizdavimą

Sprendimas: Atidėkite arba asinchronizuokite nekritinius skriptus

<!-- Atidėtas skriptas (išlaiko vykdymo tvarką) -->
<script src="script.js" defer></script>
 
<!-- Asinchroninis skriptas (kraunasi kuo greičiau, neblokuoja) -->
<script src="analytics.js" async></script>

4. Šriftų optimizavimas

Individualūs šriftai gali pridėti 500 ms+ prie krovimo laiko.

Geriausios praktikos:

1. Ribokite šriftų variacijas:

/* Blogai: Kraunami 8 šriftų failai */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800');
 
/* Gerai: Kraunami 2 šriftų failai */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700');

2. Iš anksto įkelkite šriftus:

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

3. Naudokite font-display:

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap; /* Rodo atsarginį šriftą kol kraunasi */
}

4. Sisteminiai šriftai (greičiausi):

/* Nulinis krovimo laikas */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

Programėlių auditas ir valymas

Kiekviena Shopify programėlė prideda:

Parduotuvės su 20+ programėlių dažnai gauna < 30 PageSpeed balų.

Programėlių audito procesas

1. Surašykite visas įdiegtas programėles:

Eikite į Apps Shopify Admin

2. Kiekvienai programėlei paklauskite:

3. Suskirstykite programėles:

Esminės (palikti):

Naudingos (įvertinti):

Nereikalingos (pašalinti):

Našumo poveikis pagal programėlės tipą

Sunkiausios programėlės (venkite, jei įmanoma):

Vidutinės programėlės (naudokite pasirinktinai):

Lengvos programėlės (galima naudoti):

Lengvos alternatyvos

Vietoj sunkių atsiliepimų programėlių:

Vietoj iššokančių langų programėlių:

Vietoj puslapių kūriklių:

Tinkamas programėlių šalinimas

Neužtenka tiesiog pašalinti!

  1. Pašalinkite programėlę iš Shopify
  2. Patikrinkite temos kodą dėl likusių fragmentų
  3. Pašalinkite programėlių įterpimus iš temos nustatymų
  4. Ištrinkite programėlės failus iš temos išteklių
  5. Testuokite svetainę, kad niekas nesugedo

Patikrinkite likusį kodą:

Eikite į Online Store > Themes > Actions > Edit Code

Ieškokite programėlės pavadinimo:

Kodo optimizavimas

1. Minifikuokite CSS/JS

Minifikavimas pašalina:

Rezultatas: 30–50 % mažesni failai

Kaip: Dauguma modernių temų tai daro automatiškai. Patikrinkite savo temos kūrimo procesą.

2. Sujunkite failus

Vietoj:

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

Darykite:

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

Mažiau užklausų = greitesnis krovimas.

3. Pašalinkite nenaudojamą Liquid kodą

Dažnas nereikalingas kodas:

{% raw %}
<!-- Nekartokite per visus produktus, jei rodote tik 4 -->
{% for product in collections.all.products limit: 4 %}
  <!-- Geriau naudokite kolekciją su 4 produktais -->
{% endfor %}
 
<!-- Nekurkite HTML paslėptiems elementams -->
{% if section.settings.show_feature %}
  <!-- Kurkite tik jei tikrai rodoma -->
{% endif %}
{% endraw %}

4. Duomenų bazės užklausų optimizavimas

Ribokite gaunamas kolekcijas/produktus:

{% raw %}
<!-- Blogai: Krauna visus produktus (gali būti tūkstančiai) -->
{% assign products = collections.all.products %}
 
<!-- Gerai: Krauna tik tai, ko reikia -->
{% assign products = collections.featured.products | limit: 8 %}
{% endraw %}

5. Dinaminio turinio talpykla

Turiniui, kuris keičiasi retai:

{% raw %}
{% cache 'homepage_featured', expires_in: '24 hours' %}
  <!-- Resursų reikalaujančios Liquid operacijos čia -->
{% endcache %}
{% endraw %}

Pastaba: Liquid {% cache %} žyma prieinama tik Shopify Plus.

Trečiųjų šalių skriptai

Trečiųjų šalių skriptai dažnai yra didžiausias našumo žudikas:

Trečiųjų šalių skriptų auditas

Sužinokite, kas kraunasi:

  1. Atidarykite Chrome DevTools (F12)
  2. Eikite į Network skirtuką
  3. Įkraukite svetainę
  4. Rūšiuokite pagal Size (mažėjančia tvarka)
  5. Identifikuokite trečiųjų šalių domenus

Dažni kaltininkai:

Optimizavimo strategijos

1. Kraukite skriptus asinchroniškai

<!-- Blokuoja atvaizdavimą -->
<script src="analytics.js"></script>
 
<!-- Neblokuoja (geriau) -->
<script src="analytics.js" async></script>

2. Atidėkite nekritinius skriptus

Kraukite po vartotojo sąveikos:

// Kraukite pokalbio valdiklį tik kai vartotojas paslenka 50 %
let chatLoaded = false;
window.addEventListener('scroll', () => {
  if (!chatLoaded && window.scrollY > document.body.scrollHeight * 0.5) {
    loadChatWidget();
    chatLoaded = true;
  }
});

3. Naudokite Google Tag Manager

Vietoj:

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

Darykite:

<script src="gtm.js" async></script>
<!-- Valdykite visas žymas iš GTM valdymo skydo -->

Privalumai:

4. Savarankiškai prieglobstykite kritinius skriptus

Vietoj jQuery krovimo iš CDN:

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

Savarankiškai prieglobstykite:

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

Privalumai:

Trūkumai:

Pažangios technikos

1. HTTP/2 ir HTTP/3

Shopify pagal numatytuosius nustatymus naudoja HTTP/2 (jokių veiksmų nereikia).

Privalumai:

Patikrinimas: Žiūrėkite DevTools Network skirtuke (Protocol stulpelis turėtų rodyti „h2")

2. Išankstinis prisijungimas prie išorinių domenų

Pagreitinkite trečiųjų šalių išteklius:

<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: Užmezga ankstyvą ryšį (naudokite kritiniams ištekliams) DNS-prefetch: Tik DNS peržvalga (naudokite mažiau kritiniams ištekliams)

3. Kito puslapio išankstinis gavimas

Produktų puslapiams, iš anksto gaukite tikėtiną kitą puslapį:

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

Kai vartotojas užveda pelę ant nuorodos:

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 ir talpykla

Pažengusiems vartotojams: Įdiekite service worker agresyviai talpyklai.

Privalumai:

Sudėtingumas: Aukštas (reikia individualaus kūrimo)

5. Vaizdų CDN optimizavimas

Shopify CDN yra geras, tačiau galima optimizuoti toliau:

{% raw %}
<!-- Pridėkite vaizdo transformacijas per URL -->
{{ image | image_url: width: 800, crop: 'center', format: 'pjpg' }}
{% endraw %}

Parametrai:

6. Sumažinkite peradresavimus

Kiekvienas peradresavimas prideda ~200 ms.

Dažnos problemos:

Patikrinimas: Naudokite Redirect Mapper įrankį

Sprendimas:

Stebėjimas ir priežiūra

Nuolatinis stebėjimas

Kas savaitę:

Kas mėnesį:

Kas ketvirtį:

Našumo biudžetas

Nustatykite tikslus ir jų laikykitės:

Našumo biudžetas
- Puslapio svoris: < 2 MB
- Užklausos: < 50
- Krovimo laikas: < 3 s
- PageSpeed balas: > 90
- LCP: < 2,5 s
- FID: < 100 ms
- CLS: < 0,1

Prieš pridedant naujas funkcijas/programėles:

Automatizuotas stebėjimas

Įrankiai:

Regresijos prevencija

Našumo regresijos atsiranda, kai:

Prevencijai:

Realaus pasaulio optimizavimo darbo eiga

Pavyzdys: Mados parduotuvės optimizavimas

Prieš:

1 žingsnis: Vaizdų optimizavimas (1 savaitė)

2 žingsnis: Programėlių valymas (2 savaitė)

3 žingsnis: Temos optimizavimas (3 savaitė)

4 žingsnis: Kodo optimizavimas (4 savaitė)

Galutiniai rezultatai:

Poveikis verslui:

Investuotas laikas: 40 valandų per 4 savaites ROI: 18 500 €/mėn. × 12 = 222 000 €/metus už 40 valandų darbo

Išvada

Greičio optimizavimas nėra neprivalomas. Jis esminis dėl:

Prioritetinis veiksmų planas:

1 savaitė:

2 savaitė:

3 savaitė:

4 savaitė:

Tiksliniai rezultatai:

Reikia eksperto pagalbos? Esu optimizavęs daugiau nei 20 Shopify parduotuvių su vidutiniu PageSpeed pagerinimu 50+ punktų. Susisiekite dėl nemokamo greičio audito.

DUK

Koks yra geras PageSpeed balas Shopify?

Siekite 90+ mobiliame, 95+ staliniame. Viskas virš 80 yra gerai, žemiau 50 reikia darbo.

Kiek laiko užtrunka optimizavimas?

2–4 savaitės išsamiam optimizavimui. Greitos pergalės (vaizdų suspaudimas) gali būti atliktos per 1 dieną.

Ar tai paveiks mano SEO?

Taip – teigiamai! Greitesnės svetainės reitinguojamos geriau ir gauna daugiau organinio srauto.

Ar galiu tai padaryti pats?

Taip, jei esate techniškas. Vaizdų optimizavimas ir programėlių valymas yra lengvi. Temos/kodo optimizavimui gali prireikti kūrėjo.

Kiek tai kainuoja?

Savarankiškai: Nemokamai (tik laikas) Samdyti kūrėją: 1 500–5 000 € Agentūra: 5 000–15 000 € ROI paprastai pasiekiamas per 1–3 mėnesius.

Ar Shopify Plus kraunasi greičiau?

Ne iš prigimties, tačiau Plus apima tokias funkcijas kaip Shopify Flow ir geresnius API limitus. Greitis priklauso nuo temos, programėlių ir optimizavimo.

Apie autorių: Francis Silva yra Shopify Plus kūrėjas, besispecializuojantis našumo optimizavime. Su daugiau nei 20 optimizuotų parduotuvių, pasiekiančių vidutinį 90+ PageSpeed balą, jis padeda verslams maksimizuoti pajamas greitesniu krovimo laiku. Sužinokite daugiau shopifydev.eu.