Optimalizace rychlosti Shopify 2026: Kompletní průvodce Core Web Vitals a výkonem

January 15, 2026 (1mo ago)

Optimalizace rychlosti Shopify 2026: Kompletní průvodce Core Web Vitals a výkonem

Rychlost stránky přímo ovlivňuje vaše příjmy. Studie ukazují, že:

Přesto se průměrný Shopify obchod načítá za 5–7 sekund – příliš pomalu. Po optimalizaci více než 20 Shopify obchodů jsem konzistentně dosahoval 2–3 sekund načítání s nárůstem konverzí o 15–40 %.

V tomto komplexním průvodci vám ukážu přesně, jak optimalizovat váš Shopify obchod pro maximální rychlost a výkon.

Obsah

  1. Proč záleží na rychlosti
  2. Porozumění Core Web Vitals
  3. Měření aktuální rychlosti
  4. Optimalizace obrázků
  5. Optimalizace šablony
  6. Audit a čištění aplikací
  7. Optimalizace kódu
  8. Skripty třetích stran
  9. Pokročilé techniky
  10. Monitoring a údržba

Proč záleží na rychlosti

Dopad na podnikání

Data z praxe od mých klientů:

Klient A (módní obchod):

Klient B (CBD obchod):

Dopad na SEO

Google potvrdil v roce 2021, že Core Web Vitals jsou faktory hodnocení. Pomalé weby se umisťují hůře:

Obchody s dobrými Core Web Vitals mají o 20–30 % vyšší organické pozice.

Dopad na uživatelský zážitek

Chování uživatelů podle doby načítání:

Mobil je ještě kritičtější:

Porozumění Core Web Vitals

Core Web Vitals od Google měří skutečný uživatelský zážitek:

1. LCP (Largest Contentful Paint)

Co měří: Čas do načtení hlavního obsahu

Cíl:

Běžné LCP elementy:

Jak zlepšit:

2. FID (First Input Delay)

Co měří: Čas do interaktivity stránky

Cíl:

Běžné příčiny špatného FID:

Jak zlepšit:

3. CLS (Cumulative Layout Shift)

Co měří: Vizuální stabilita (posouvání elementů během načítání)

Cíl:

Běžné příčiny:

Jak zlepšit:

Měření aktuální rychlosti

Nástroje k použití

1. Google PageSpeed Insights (zdarma)

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

Výhody:

Jak používat:

  1. Zadejte URL svého obchodu
  2. Počkejte na analýzu
  3. Zkontrolujte skóre (cílte na 90+ pro mobil i desktop)
  4. Projděte příležitosti a diagnostiku

Cílové skóre:

2. GTmetrix (zdarma)

URL: https://gtmetrix.com/

Výhody:

Klíčové metriky:

3. WebPageTest (zdarma)

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

Výhody:

Použijte pro: Hloubkovou technickou analýzu

4. Shopify Admin (vestavěný)

Přejděte na: Online Store > Themes > Actions > View Speed Report

Zobrazuje:

Co měřit

Klíčové stránky:

  1. ✅ Domovská stránka (nejvyšší provoz)
  2. ✅ Stránky kolekcí
  3. ✅ Produktové stránky (nejvyšší záměr)
  4. ✅ Stránka košíku

Testujte z více lokací:

Stanovení výchozího stavu

Před optimalizací zdokumentujte:

Příklad výchozího stavu:

Domovská stránka (před optimalizací)
- Mobilní výkon: 42
- Desktopový výkon: 68
- Doba načítání: 6,8 s
- Velikost stránky: 4,2 MB
- Požadavky: 127
- LCP: 5,2 s
- FID: 280 ms
- CLS: 0,18

Optimalizace obrázků

Obrázky tvoří typicky 50–70 % velikosti stránky. Toto je největší příležitost.

1. Vyberte správný formát

Srovnání formátů:

| Formát | Použití | Komprese | |--------|---------|----------| | WebP | Nejlepší pro většinu obrázků | O 25–35 % menší než JPG | | AVIF | Nová generace (není plně podporován) | O 50 % menší než JPG | | JPG | Fotografie, složité obrázky | Dobrá komprese | | PNG | Loga, potřeba průhlednosti | Větší soubory | | SVG | Ikony, loga (vektory) | Nejmenší |

Doporučení: Používejte WebP s JPG jako zálohou.

Shopify automaticky servíruje WebP podporovaným prohlížečům – stačí nahrát kvalitní JPG.

2. Komprimujte obrázky

Nikdy nenahrávejte obrázky přímo z fotoaparátu/od designéra.

Kompresní nástroje:

Online (zdarma):

Mac aplikace:

Shopify aplikace:

Cílové velikosti:

3. Správně nastavte rozměry obrázků

Nenahrávejte obrázky 4000×3000 px pro zobrazení 800 px.

Velikosti obrázků v Shopify:

| Typ obrázku | Doporučená velikost | |--------------|---------------------| | Obrázky produktů | 2048 × 2048 px (maximum Shopify) | | Hero obrázky | 1920 × 1080 px (desktop) | | Obrázky kolekcí | 1200 × 800 px | | Náhledy | 400 × 400 px | | Ikony | 100 × 100 px nebo SVG |

Shopify automaticky vytváří tyto velikosti:

Používejte správnou velikost pro daný kontext:

{% raw %}
<!-- Náhled produktu -->
<img src="{{ product.featured_image | img_url: 'medium' }}" loading="lazy">
 
<!-- Detailní stránka produktu -->
<img src="{{ product.featured_image | img_url: '1024x1024' }}">
 
<!-- Hero na celou šířku -->
<img src="{{ section.settings.image | img_url: '1920x' }}">
{% endraw %}

4. Implementujte líné načítání

Líné načítání odkládá načítání obrázků, dokud uživatel neposcrolluje k nim.

Nativní líné načítání (nejsnazší):

<img src="product.jpg" loading="lazy" alt="Product name">

Shopify šablony by to měly obsahovat ve výchozím nastavení. Ověřte:

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

Prioritní načítání pro obrázky nad záhybem:

<!-- Hero obrázek – načtěte okamžitě -->
<img src="hero.jpg" loading="eager" fetchpriority="high">

5. Používejte responzivní obrázky

Servírujte různé velikosti podle velikosti obrazovky:

<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="Product name"
>

Shopify filtr image_tag to dělá automaticky:

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

6. Odstraňte nepoužívané obrázky

Proveďte audit souborů Shopify:

  1. Přejděte na Nastavení > Soubory
  2. Seřaďte podle velikosti
  3. Smažte nepoužívané obrázky

Mnoho obchodů má stovky MB nahraných, ale nikdy nepoužitých obrázků.

Optimalizace šablony

1. Vyberte rychlou šablonu

Nejrychlejší Shopify šablony (2026):

  1. Dawn (zdarma) – výchozí od Shopify, vynikající výkon
  2. Sense (zdarma) – minimalistická, rychlá
  3. Impulse (350 $) – prémiová, optimalizovaná
  4. Turbo (350 $) – pojmenovaná „Turbo" z dobrého důvodu
  5. Vlastní šablona – nejlepší výkon, pokud je správně vytvořena

Vyhněte se:

Migrace: Pokud je vaše šablona pomalá, migrace na Dawn typicky zlepší skóre o 20–30 bodů.

2. Odstraňte nepoužívané sekce

Mnoho šablon obsahuje sekce, které nikdy nepoužíváte:

  1. Přejděte na Online Store > Themes > Customize
  2. Projděte každou stránku
  3. Smažte nepoužívané sekce
  4. Každá sekce přidává váhu kódu

3. Optimalizujte kód šablony

Běžné problémy šablon:

CSS blokující vykreslování

Problém: CSS blokuje vykreslování stránky

Řešení: Vložte kritické CSS inline, odložte nekritické

{% raw %}
<!-- Vložení kritického CSS inline -->
<style>
  {{ 'critical.css' | asset_url | stylesheet_tag }}
</style>
 
<!-- Odložení nekritického CSS -->
<link rel="preload" href="{{ 'non-critical.css' | asset_url }}" as="style" onload="this.rel='stylesheet'">
{% endraw %}

Nepoužívané CSS

Problém: Načítání CSS pro komponenty, které na stránce nejsou

Řešení: Použijte nástroje jako PurgeCSS nebo ručně odeberte

JavaScript blokující vykreslování

Problém: Velké JS soubory blokující vykreslování

Řešení: Odložte nebo asynchronně načtěte nekritické skripty

<!-- Odložený skript (zachovává pořadí spouštění) -->
<script src="script.js" defer></script>
 
<!-- Asynchronní skript (načte se co nejdříve, neblokuje) -->
<script src="analytics.js" async></script>

4. Optimalizace fontů

Vlastní fonty mohou přidat 500 ms+ k době načítání.

Nejlepší postupy:

1. Omezte varianty fontů:

/* Špatně: Načítání 8 souborů fontů */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800');
 
/* Správně: Načítání 2 souborů fontů */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700');

2. Přednačtěte fonty:

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

3. Používejte font-display:

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap; /* Zobrazí záložní font při načítání */
}

4. Systémové fonty (nejrychlejší):

/* Nulová doba načítání */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

Audit a čištění aplikací

Každá Shopify aplikace přidává:

Obchody s 20+ aplikacemi často mají skóre < 30 na PageSpeed.

Proces auditu aplikací

1. Seznam všech nainstalovaných aplikací:

Přejděte na Apps v Shopify Admin

2. Pro každou aplikaci se zeptejte:

3. Kategorizujte aplikace:

Nezbytné (ponechat):

Užitečné (zhodnotit):

Nepotřebné (odebrat):

Dopad na výkon podle typu aplikace

Nejtěžší aplikace (vyhněte se pokud možno):

Střední aplikace (používejte selektivně):

Lehké aplikace (v pořádku používat):

Lehčí alternativy

Místo těžkých aplikací pro recenze:

Místo popup aplikací:

Místo page builderů:

Správné odebrání aplikací

Nestačí jen odinstalovat!

  1. Odinstalujte aplikaci ze Shopify
  2. Zkontrolujte kód šablony na zbytky
  3. Odeberte vkládání aplikací z nastavení šablony
  4. Smažte soubory aplikace z assets šablony
  5. Otestujte web, abyste se ujistili, že nic nerozbilo

Kontrola zbytkového kódu:

Přejděte na Online Store > Themes > Actions > Edit Code

Hledejte název aplikace v:

Optimalizace kódu

1. Minifikace CSS/JS

Minifikace odstraňuje:

Výsledek: O 30–50 % menší soubory

Jak: Většina moderních šablon to dělá automaticky. Zkontrolujte build proces vaší šablony.

2. Sloučení souborů

Místo:

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

Udělejte:

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

Méně požadavků = rychlejší načítání.

3. Odstranění nepoužívaného Liquid kódu

Běžný zbytečný kód:

{% raw %}
<!-- Neprocházejte všechny produkty, pokud zobrazujete jen 4 -->
{% for product in collections.all.products limit: 4 %}
  <!-- Místo toho použijte kolekci se 4 produkty -->
{% endfor %}
 
<!-- Nevykreslujte HTML pro skryté elementy -->
{% if section.settings.show_feature %}
  <!-- Vykreslujte pouze pokud je skutečně zobrazeno -->
{% endif %}
{% endraw %}

4. Optimalizace databázových dotazů

Omezte načítání kolekcí/produktů:

{% raw %}
<!-- Špatně: Načte všechny produkty (může jich být tisíce) -->
{% assign products = collections.all.products %}
 
<!-- Správně: Načte jen to, co je potřeba -->
{% assign products = collections.featured.products | limit: 8 %}
{% endraw %}

5. Cachování dynamického obsahu

Pro obsah, který se často nemění:

{% raw %}
{% cache 'homepage_featured', expires_in: '24 hours' %}
  <!-- Náročné Liquid operace zde -->
{% endcache %}
{% endraw %}

Poznámka: Liquid tag {% cache %} je dostupný pouze na Shopify Plus.

Skripty třetích stran

Skripty třetích stran jsou často největší zabijáci výkonu:

Audit skriptů třetích stran

Zjistěte, co se načítá:

  1. Otevřete Chrome DevTools (F12)
  2. Přejděte na záložku Network
  3. Načtěte svůj web
  4. Seřaďte podle Size (sestupně)
  5. Identifikujte domény třetích stran

Běžní viníci:

Strategie optimalizace

1. Asynchronní načítání skriptů

<!-- Blokuje vykreslování -->
<script src="analytics.js"></script>
 
<!-- Neblokuje (lepší) -->
<script src="analytics.js" async></script>

2. Odložení nekritických skriptů

Načtěte po interakci uživatele:

// Načtěte chat widget pouze když uživatel poscrolluje 50 %
let chatLoaded = false;
window.addEventListener('scroll', () => {
  if (!chatLoaded && window.scrollY > document.body.scrollHeight * 0.5) {
    loadChatWidget();
    chatLoaded = true;
  }
});

3. Používejte Google Tag Manager

Místo:

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

Udělejte:

<script src="gtm.js" async></script>
<!-- Spravujte všechny tagy z GTM dashboardu -->

Výhody:

4. Vlastní hosting kritických skriptů

Místo načítání jQuery z CDN:

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

Vlastní hosting:

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

Výhody:

Nevýhody:

Pokročilé techniky

1. HTTP/2 a HTTP/3

Shopify používá HTTP/2 ve výchozím nastavení (žádná akce nutná).

Výhody:

Ověření: Zkontrolujte v DevTools záložce Network (sloupec Protocol by měl ukazovat „h2")

2. Preconnect k externím doménám

Zrychlete zdroje třetích stran:

<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: Naváže připojení předem (použijte pro kritické zdroje) DNS-prefetch: Pouze přeloží DNS (použijte pro méně kritické zdroje)

3. Prefetch další stránky

Pro produktové stránky přednačtěte pravděpodobnou další stránku:

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

Když uživatel najede na odkaz:

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 a cachování

Pro pokročilé uživatele: Implementujte service worker pro agresivní cachování.

Výhody:

Složitost: Vysoká (vyžaduje vlastní vývoj)

5. Optimalizace obrazového CDN

CDN Shopify je dobré, ale lze dále optimalizovat:

{% raw %}
<!-- Přidejte transformace obrázků přes URL -->
{{ image | image_url: width: 800, crop: 'center', format: 'pjpg' }}
{% endraw %}

Parametry:

6. Snížení přesměrování

Každé přesměrování přidává ~200 ms.

Běžné problémy:

Kontrola: Použijte nástroj Redirect Mapper

Oprava:

Monitoring a údržba

Průběžný monitoring

Týdně:

Měsíčně:

Čtvrtletně:

Rozpočet výkonu

Nastavte cíle a dodržujte je:

Rozpočet výkonu
- Velikost stránky: < 2 MB
- Požadavky: < 50
- Doba načítání: < 3 s
- Skóre PageSpeed: > 90
- LCP: < 2,5 s
- FID: < 100 ms
- CLS: < 0,1

Před přidáním nových funkcí/aplikací:

Automatizovaný monitoring

Nástroje:

Prevence regresí

Regrese výkonu nastávají při:

Předejděte tomu:

Reálný optimalizační workflow

Příklad: Optimalizace módního obchodu

Před:

Krok 1: Optimalizace obrázků (týden 1)

Krok 2: Čištění aplikací (týden 2)

Krok 3: Optimalizace šablony (týden 3)

Krok 4: Optimalizace kódu (týden 4)

Konečné výsledky:

Dopad na podnikání:

Investovaný čas: 40 hodin během 4 týdnů Návratnost investice: 18 500 €/měsíc × 12 = 222 000 €/rok za 40 hodin práce

Závěr

Optimalizace rychlosti není volitelná. Je nezbytná pro:

Prioritní akční plán:

Týden 1:

Týden 2:

Týden 3:

Týden 4:

Cílové výsledky:

Potřebujete odbornou pomoc? Optimalizoval jsem více než 20 Shopify obchodů s průměrným zlepšením PageSpeed o 50+ bodů. Kontaktujte mě pro bezplatný audit rychlosti.

FAQ

Jaké je dobré skóre PageSpeed pro Shopify?

Cílte na 90+ na mobilu, 95+ na desktopu. Cokoli nad 80 je dobré, pod 50 potřebuje práci.

Jak dlouho trvá optimalizace?

2–4 týdny pro komplexní optimalizaci. Rychlé výhry (komprese obrázků) lze udělat za 1 den.

Ovlivní to mé SEO?

Ano – pozitivně! Rychlejší weby se umisťují lépe a získávají více organického provozu.

Zvládnu to sám?

Ano, pokud jste technicky zdatní. Optimalizace obrázků a čištění aplikací jsou snadné. Optimalizace šablony/kódu může vyžadovat vývojáře.

Kolik to stojí?

Udělej si sám: Zdarma (jen čas) Najměte vývojáře: 1 500–5 000 € Agentura: 5 000–15 000 € Návratnost investice se typicky dosáhne za 1–3 měsíce.

Načítá se Shopify Plus rychleji?

Ne ze své podstaty, ale Plus zahrnuje funkce jako Shopify Flow a lepší API limity. Rychlost závisí na šabloně, aplikacích a optimalizaci.

O autorovi: Francis Silva je Shopify Plus vývojář specializující se na optimalizaci výkonu. S více než 20 optimalizovanými obchody dosahujícími průměrného skóre PageSpeed 90+ pomáhá firmám maximalizovat příjmy díky rychlejšímu načítání. Více na shopifydev.eu.