Shopify Sebesség Optimalizálás 2026: Teljes Útmutató a Core Web Vitals-hoz és Teljesítményhez

January 15, 2026 (1mo ago)

Shopify Sebesség Optimalizálás 2026: Teljes Útmutató a Core Web Vitals-hoz és Teljesítményhez

Az oldal sebessége közvetlenül befolyásolja a bevételt. Tanulmányok kimutatták, hogy:

Mégis az átlagos Shopify webáruház 5-7 másodperc alatt tölt be – ami túl lassú. 20+ Shopify webáruház optimalizálása után következetesen 2-3 másodperces betöltési időket értem el, 15-40%-os konverziónövekedéssel.

Ebben az átfogó útmutatóban pontosan megmutatom, hogyan optimalizálja Shopify webáruházát a maximális sebesség és teljesítmény érdekében.

Tartalomjegyzék

  1. Miért Számít a Sebesség
  2. A Core Web Vitals Megértése
  3. Jelenlegi Sebesség Mérése
  4. Képoptimalizálás
  5. Téma Optimalizálás
  6. Alkalmazás Audit és Takarítás
  7. Kód Optimalizálás
  8. Harmadik Féltől Származó Szkriptek
  9. Haladó Technikák
  10. Monitorozás és Karbantartás

Miért Számít a Sebesség

Az Üzleti Hatás

Valós adatok ügyfelimtől:

A Ügyfél (Divatüzlet):

B Ügyfél (CBD Üzlet):

A SEO Hatás

A Google 2021-ben megerősítette, hogy a Core Web Vitals rangsorolási tényezők. A lassú oldalak rosszabbul rangsorolnak:

A jó Core Web Vitals értékekkel rendelkező webáruházak 20-30%-kal magasabb organikus rangsorolást érnek el.

A Felhasználói Élmény Hatása

Felhasználói viselkedés betöltési idő szerint:

A mobil még kritikusabb:

A Core Web Vitals Megértése

A Google Core Web Vitals a valós felhasználói élményt méri:

1. LCP (Largest Contentful Paint)

Mit mér: Az idő, amíg a fő tartalom betöltődik

Cél:

Gyakori LCP elemek:

Hogyan javítsuk:

2. FID (First Input Delay)

Mit mér: Az idő, amíg az oldal interaktívvá válik

Cél:

A rossz FID gyakori okai:

Hogyan javítsuk:

3. CLS (Cumulative Layout Shift)

Mit mér: Vizuális stabilitás (elemek elmozdulása betöltés közben)

Cél:

Gyakori okok:

Hogyan javítsuk:

Jelenlegi Sebesség Mérése

Használandó Eszközök

1. Google PageSpeed Insights (Ingyenes)

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

Előnyök:

Használati útmutató:

  1. Írja be webáruháza URL-jét
  2. Várja meg az elemzést
  3. Ellenőrizze a pontszámokat (célozzon 90+-ra mobilon és asztalin is)
  4. Tekintse át a lehetőségeket és diagnosztikát

Cél Pontszámok:

2. GTmetrix (Ingyenes)

URL: https://gtmetrix.com/

Előnyök:

Fő Metrikák:

3. WebPageTest (Ingyenes)

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

Előnyök:

Használja: Mélyreható technikai elemzéshez

4. Shopify Admin (Beépített)

Menjen: Online Store > Themes > Actions > View Speed Report

Megmutatja:

Mit Mérjünk

Kulcs Oldalak:

  1. ✅ Kezdőlap (legnagyobb forgalom)
  2. ✅ Gyűjtemény oldalak
  3. ✅ Termék oldalak (legnagyobb szándék)
  4. ✅ Kosár oldal

Teszteljen több helyről:

Kiindulási Alap Megállapítása

Optimalizálás előtt dokumentálja:

Példa Kiindulási Alap:

Kezdőlap (Optimalizálás Előtt)
- Mobil Teljesítmény: 42
- Asztali Teljesítmény: 68
- Betöltési Idő: 6,8 mp
- Oldalméret: 4,2MB
- Kérések: 127
- LCP: 5,2 mp
- FID: 280 ms
- CLS: 0,18

Képoptimalizálás

A képek jellemzően az oldalméret 50-70%-át teszik ki. Ez a legnagyobb lehetőség.

1. Válassza a Megfelelő Formátumot

Formátum Összehasonlítás:

| Formátum | Felhasználás | Tömörítés | |----------|-------------|-----------| | WebP | Legjobb a legtöbb képhez | 25-35%-kal kisebb, mint JPG | | AVIF | Következő generáció (nem teljesen támogatott) | 50%-kal kisebb, mint JPG | | JPG | Fotók, összetett képek | Jó tömörítés | | PNG | Logók, átlátszóság szükséges | Nagyobb fájlok | | SVG | Ikonok, logók (vektor) | Legkisebb |

Ajánlás: Használjon WebP-t JPG tartalékkal.

A Shopify automatikusan WebP-t szolgáltat a támogatott böngészőknek – csak töltsön fel jó minőségű JPG-ket.

2. Tömörítse a Képeket

Soha ne töltsön fel képeket közvetlenül a kameráról/tervezőtől.

Tömörítési Eszközök:

Online (Ingyenes):

Mac Alkalmazások:

Shopify Alkalmazások:

Cél Méretek:

3. Megfelelő Képméret Beállítása

Ne töltsön fel 4000x3000px képeket 800px-es megjelenítéshez.

Shopify Képméretek:

| Képtípus | Ajánlott Méret | |----------|----------------| | Terméképek | 2048 x 2048px (Shopify max) | | Hero képek | 1920 x 1080px (asztali) | | Gyűjtemény képek | 1200 x 800px | | Miniatűrök | 400 x 400px | | Ikonok | 100 x 100px vagy SVG |

A Shopify automatikusan létrehozza ezeket a méreteket:

Használja a megfelelő méretet a kontextushoz:

{% raw %}
<!-- Termék miniatűr -->
<img src="{{ product.featured_image | img_url: 'medium' }}" loading="lazy">
 
<!-- Termék részletes oldal -->
<img src="{{ product.featured_image | img_url: '1024x1024' }}">
 
<!-- Teljes szélességű hero -->
<img src="{{ section.settings.image | img_url: '1920x' }}">
{% endraw %}

4. Implementálja a Lazy Loading-ot

A lazy loading késlelteti a képek betöltését, amíg a felhasználó közelébe nem görget.

Natív lazy loading (legegyszerűbb):

<img src="product.jpg" loading="lazy" alt="Terméknév">

A Shopify témáknak alapértelmezés szerint tartalmazniuk kell ezt. Ellenőrizze:

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

Prioritásos betöltés a hajtás feletti képekhez:

<!-- Hero kép - azonnali betöltés -->
<img src="hero.jpg" loading="eager" fetchpriority="high">

5. Használjon Reszponzív Képeket

Szolgáltasson különböző méreteket a képernyőméret alapján:

<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="Terméknév"
>

A Shopify image_tag szűrője ezt automatikusan elvégzi:

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

6. Távolítsa el a Nem Használt Képeket

Auditálja a Shopify Fájlokat:

  1. Menjen a Settings > Files menüpontra
  2. Rendezze méret szerint
  3. Törölje a nem használt képeket

Sok webáruházban több száz MB feltöltött, de soha nem használt kép van.

Téma Optimalizálás

1. Válasszon Gyors Témát

Leggyorsabb Shopify Témák (2026):

  1. Dawn (Ingyenes) - A Shopify alapértelmezett témája, kiváló teljesítmény
  2. Sense (Ingyenes) - Minimalista, gyors
  3. Impulse ($350) - Prémium, optimalizált
  4. Turbo ($350) - Nem véletlenül hívják "Turbo"-nak
  5. Egyedi Téma - Legjobb teljesítmény, ha helyesen készül

Kerülje:

Migráció: Ha a témája lassú, a Dawn-ra váltás jellemzően 20-30 ponttal javítja a pontszámot.

2. Távolítsa el a Nem Használt Szekciókat

Sok téma tartalmaz szekciókat, amelyeket soha nem használ:

  1. Menjen az Online Store > Themes > Customize menüpontra
  2. Menjen végig minden oldalon
  3. Törölje a nem használt szekciókat
  4. Minden szekció kódsúlyt ad hozzá

3. Optimalizálja a Téma Kódját

Gyakori téma problémák:

Renderelést Blokkoló CSS

Probléma: A CSS blokkolja az oldal renderelését

Megoldás: Ágyazza be a kritikus CSS-t, halassza el a nem kritikusat

{% raw %}
<!-- Kritikus CSS beágyazása -->
<style>
  {{ 'critical.css' | asset_url | stylesheet_tag }}
</style>
 
<!-- Nem kritikus CSS elhalasztása -->
<link rel="preload" href="{{ 'non-critical.css' | asset_url }}" as="style" onload="this.rel='stylesheet'">
{% endraw %}

Nem Használt CSS

Probléma: CSS betöltése olyan komponensekhez, amelyek nincsenek az oldalon

Megoldás: Használjon eszközöket, mint a PurgeCSS, vagy manuálisan távolítsa el

JavaScript Blokkolás

Probléma: Nagy JS fájlok blokkolják a renderelést

Megoldás: Halassza el vagy aszinkron módon töltse be a nem kritikus szkripteket

<!-- Elhalasztott szkript (megtartja a végrehajtási sorrendet) -->
<script src="script.js" defer></script>
 
<!-- Aszinkron szkript (azonnal betölt, nem blokkol) -->
<script src="analytics.js" async></script>

4. Betűtípus Optimalizálás

Az egyedi betűtípusok 500+ ms-ot adhatnak a betöltési időhöz.

Legjobb Gyakorlatok:

1. Korlátozza a betűtípus variációkat:

/* Rossz: 8 betűtípus fájl betöltése */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800');
 
/* Jó: 2 betűtípus fájl betöltése */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700');

2. Töltse be előre a betűtípusokat:

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

3. Használja a font-display tulajdonságot:

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap; /* Tartalék betűtípust mutat betöltés közben */
}

4. Rendszer betűtípusok (leggyorsabb):

/* Nulla betöltési idő */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

Alkalmazás Audit és Takarítás

Minden Shopify alkalmazás hozzáad:

A 20+ alkalmazással rendelkező webáruházak gyakran < 30 pontot kapnak a PageSpeed-ben.

Alkalmazás Audit Folyamat

1. Listázza az összes telepített alkalmazást:

Menjen az Apps menüpontra a Shopify Adminban

2. Minden alkalmazásnál kérdezze meg:

3. Kategorizálja az alkalmazásokat:

Elengedhetetlen (Tartsa meg):

Hasznos (Értékelje):

Felesleges (Távolítsa el):

Teljesítményhatás Alkalmazás Típusonként

Legnehezebb Alkalmazások (Kerülje ha lehetséges):

Közepes Alkalmazások (Szelektíven használja):

Könnyű Alkalmazások (Használható):

Könnyű Alternatívák

Nehéz értékelő alkalmazások helyett:

Felugró ablak alkalmazások helyett:

Oldalépítők helyett:

Alkalmazások Helyes Eltávolítása

Ne csak távolítsa el a telepítést!

  1. Távolítsa el az alkalmazást a Shopify-ból
  2. Ellenőrizze a téma kódját a maradék kódrészletekért
  3. Távolítsa el az alkalmazás beágyazásokat a téma beállításokból
  4. Törölje az alkalmazás fájlokat a téma eszközökből
  5. Tesztelje a webhelyet, hogy semmi nem romlott el

Ellenőrizze a maradék kódot:

Menjen az Online Store > Themes > Actions > Edit Code menüpontra

Keresse az alkalmazás nevét a következőkben:

Kód Optimalizálás

1. CSS/JS Minifikálás

A minifikálás eltávolítja:

Eredmény: 30-50%-kal kisebb fájlok

Hogyan: A legtöbb modern téma ezt automatikusan elvégzi. Ellenőrizze a téma build folyamatát.

2. Fájlok Egyesítése

Ahelyett, hogy:

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

Tegye:

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

Kevesebb kérés = gyorsabb betöltés.

3. Nem Használt Liquid Kód Eltávolítása

Gyakori felesleges kód:

{% raw %}
<!-- Ne iteráljon az összes terméken, ha csak 4-et mutat -->
{% for product in collections.all.products limit: 4 %}
  <!-- Használjon inkább 4 termékes gyűjteményt -->
{% endfor %}
 
<!-- Ne rendereljen HTML-t rejtett elemekhez -->
{% if section.settings.show_feature %}
  <!-- Csak akkor renderelje, ha tényleg megjelenik -->
{% endif %}
{% endraw %}

4. Adatbázis Lekérdezés Optimalizálás

Korlátozza a lekérdezett gyűjtemények/termékek számát:

{% raw %}
<!-- Rossz: Az összes terméket betölti (lehet ezer is) -->
{% assign products = collections.all.products %}
 
<!-- Jó: Csak a szükségeseket tölti be -->
{% assign products = collections.featured.products | limit: 8 %}
{% endraw %}

5. Dinamikus Tartalom Gyorsítótárazása

Ritkán változó tartalomhoz:

{% raw %}
{% cache 'homepage_featured', expires_in: '24 hours' %}
  <!-- Költséges Liquid műveletek itt -->
{% endcache %}
{% endraw %}

Megjegyzés: A Liquid {% cache %} tag csak Shopify Plus-on érhető el.

Harmadik Féltől Származó Szkriptek

A harmadik féltől származó szkriptek gyakran a legnagyobb teljesítmény gyilkos:

Harmadik Fél Szkriptek Auditálása

Derítse ki, mi töltődik be:

  1. Nyissa meg a Chrome DevTools-t (F12)
  2. Menjen a Network fülre
  3. Töltse be a webhelyét
  4. Rendezze Size szerint (csökkenő)
  5. Azonosítsa a harmadik féltől származó domaineket

Gyakori bűnösök:

Optimalizálási Stratégiák

1. Töltse Be a Szkripteket Aszinkron Módon

<!-- Blokkolja a renderelést -->
<script src="analytics.js"></script>
 
<!-- Nem blokkol (jobb) -->
<script src="analytics.js" async></script>

2. Halassza El a Nem Kritikus Szkripteket

Töltse be felhasználói interakció után:

// Csak akkor töltse be a chat widgetet, ha a felhasználó 50%-ot görgetett
let chatLoaded = false;
window.addEventListener('scroll', () => {
  if (!chatLoaded && window.scrollY > document.body.scrollHeight * 0.5) {
    loadChatWidget();
    chatLoaded = true;
  }
});

3. Használja a Google Tag Managert

Ahelyett, hogy:

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

Tegye:

<script src="gtm.js" async></script>
<!-- Kezelje az összes taget a GTM irányítópultról -->

Előnyök:

4. Hosztoljon Kritikus Szkripteket Saját Maga

Ahelyett, hogy a jQuery-t CDN-ről töltené:

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

Saját hosztolás:

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

Előnyök:

Hátrányok:

Haladó Technikák

1. HTTP/2 és HTTP/3

A Shopify alapértelmezés szerint HTTP/2-t használ (nincs szükség teendőre).

Előnyök:

Ellenőrzés: Ellenőrizze a DevTools Network fülön (a Protocol oszlopnak "h2"-t kell mutatnia)

2. Előzetes Kapcsolódás Külső Domainekhez

Gyorsítsa fel a harmadik féltől származó erőforrásokat:

<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: Korai kapcsolatot létesít (kritikus erőforrásokhoz használja) DNS-prefetch: Csak a DNS-t oldja fel (kevésbé kritikus erőforrásokhoz)

3. Következő Oldal Előtöltése

Termék oldalaknál töltse elő a valószínű következő oldalt:

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

Amikor a felhasználó a link fölé viszi az egeret:

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 Workerek és Gyorsítótárazás

Haladó felhasználóknak: Implementáljon service worker-t agresszív gyorsítótárazáshoz.

Előnyök:

Bonyolultság: Magas (egyedi fejlesztést igényel)

5. Kép CDN Optimalizálás

A Shopify CDN-je jó, de tovább optimalizálható:

{% raw %}
<!-- Kép transzformációk hozzáadása URL-en keresztül -->
{{ image | image_url: width: 800, crop: 'center', format: 'pjpg' }}
{% endraw %}

Paraméterek:

6. Átirányítások Csökkentése

Minden átirányítás ~200 ms-ot ad hozzá.

Gyakori problémák:

Ellenőrzés: Használja a Redirect Mapper eszközt

Javítás:

Monitorozás és Karbantartás

Folyamatos Monitorozás

Hetente:

Havonta:

Negyedévente:

Teljesítmény Költségvetés

Állítson be célokat és tartsa be őket:

Teljesítmény Költségvetés
- Oldalméret: < 2MB
- Kérések: < 50
- Betöltési Idő: < 3 mp
- PageSpeed Pontszám: > 90
- LCP: < 2,5 mp
- FID: < 100 ms
- CLS: < 0,1

Új funkciók/alkalmazások hozzáadása előtt:

Automatizált Monitorozás

Eszközök:

Regresszió Megelőzés

Teljesítmény regresszió akkor történik, amikor:

Megelőzés:

Valós Optimalizálási Munkafolyamat

Példa: Divatüzlet Optimalizálás

Előtte:

1. Lépés: Képoptimalizálás (1. Hét)

2. Lépés: Alkalmazás Takarítás (2. Hét)

3. Lépés: Téma Optimalizálás (3. Hét)

4. Lépés: Kód Optimalizálás (4. Hét)

Végeredmények:

Üzleti Hatás:

Befektetett idő: 40 óra 4 hét alatt ROI: 18 500 €/hó × 12 = 222 000 €/év 40 óra munkáért

Következtetés

A sebesség optimalizálás nem opcionális. Elengedhetetlen a következőkhöz:

Prioritásos Cselekvési Terv:

1. Hét:

2. Hét:

3. Hét:

4. Hét:

Cél Eredmények:

Szakértői segítségre van szüksége? 20+ Shopify webáruházat optimalizáltam átlagosan 50+ pontos PageSpeed javulással. Lépjen kapcsolatba egy ingyenes sebesség auditért.

Gyakran Ismételt Kérdések

Mi a jó PageSpeed pontszám Shopify-hoz?

Célozzon 90+-ra mobilon, 95+-ra asztalin. 80 feletti jó, 50 alatti munkát igényel.

Mennyi ideig tart az optimalizálás?

2-4 hét az átfogó optimalizáláshoz. Gyors győzelmek (képtömörítés) egy nap alatt elvégezhetők.

Ez hatással lesz a SEO-mra?

Igen – pozitívan! A gyorsabb webhelyek jobban rangsorolnak és több organikus forgalmat kapnak.

Meg tudom csinálni magam?

Igen, ha technikailag képzett. A képoptimalizálás és alkalmazás takarítás könnyű. A téma/kód optimalizálás fejlesztőt igényelhet.

Mennyibe kerül?

DIY: Ingyenes (csak idő) Fejlesztő: 1 500-5 000 € Ügynökség: 5 000-15 000 € A ROI jellemzően 1-3 hónap alatt megtérül.

A Shopify Plus gyorsabban tölt be?

Nem önmagában, de a Plus olyan funkciókat tartalmaz, mint a Shopify Flow és jobb API limitek. A sebesség a témától, alkalmazásoktól és optimalizálástól függ.

A Szerzőről: Francis Silva Shopify Plus fejlesztő, aki a teljesítmény optimalizálásra specializálódott. 20+ optimalizált webáruházzal és átlagosan 90+ PageSpeed pontszámmal segíti a vállalkozásokat a bevétel maximalizálásában gyorsabb betöltési időkkel. Tudjon meg többet a shopifydev.eu oldalon.