# Měření rychlosti na eshopu: Komplexní průvodce optimalizací rychlosti pro Shoptetu – Core Web Vitals

> Komplexní průvodce měřením a optimalizací rychlosti Shoptet e-shopu: proč na rychlosti záleží, jak ji měřit přes Core Web Vitals a jak ji zlepšit.

- **Zdroj:** https://www.webotvurci.cz/navody/obecne-navody-pro-shoptet/mereni-rychlosti-na-eshopu-komplexni-pruvodce-optimalizaci-rychlosti-pro-shoptetu-core-web-vitals/
- **Doplněk / kategorie:** Obecné návody pro Shoptet (https://www.webotvurci.cz/navody/obecne-navody-pro-shoptet/)
- **Datum:** 2024-11-27
- **Autor:** Webotvůrci (https://www.webotvurci.cz/)

---

### Proč by mě měla rychlost zajímat?

Pro vás jakožto manažera nebo majitele eshopu má rychlost webu zásadní vlivy na následující body.

#### 1. Vliv na SEO (Optimalizace pro vyhledávače)

Cílem každého eshopu je aby byl při vyhledávání jeho produktů zobrazen co nejvýše.

- **Algoritmy vyhledávačů**: Google a další vyhledávače používají rychlost načítání jako jeden z hlavních bodů pro hodnocení stránek. Od roku 2021 Google zahrnul **Core Web Vitals** do svého algoritmu pro určení pozice ve vyhledávání.
- **Indexování stránek**: Pomalejší stránky mohou být méně často indexovány, což vede k nižší viditelnosti ve vyhledávání.
- **Mobilní první indexování**: Vyhledávače nyní upřednostňují mobilní verzi v hodnocení webu před verzí pro počítače.

#### 2. Vliv na PPC (Placená reklama)

- **Kvalitní skóre reklam**: Rychlost stránky ovlivňuje **Quality Score** v Google Ads. Vyšší skóre může snížit **CPC** a zlepšit pozici reklamy.
- **Míra opuštění**: Pomalé načítání vede k vyšší míře opuštění vstupní stránky.
- **Uživatelská zkušenost**: Rychlá stránka zvyšuje pravděpodobnost konverze z placené reklamy.

#### 3. Vliv na konverzní poměr

- **Trpělivost uživatelů**: 53 % mobilních uživatelů opustí stránku, pokud se načítá déle než 3 sekundy.
- **Důvěryhodnost**: Rychlé stránky působí profesionálněji a budují důvěru zákazníků.
- **Opakované návštěvy**: Spokojení zákazníci se s větší pravděpodobností vrátí.

---

### Jak rychlost změřit?

#### 1. Google Search Console

**Google Search Console** je nástroj dostupný na adrese: [https://search.google.com/search-console](https://search.google.com/search-console)

- **Core Web Vitals Report**: Zobrazuje metriky založené na reálných uživatelských datech z posledních 28 dnů.
- **Přehled problémů**: Identifikuje stránky s problémy a poskytuje doporučení pro zlepšení.

![Přehled Core Web Vitals v Google Search Console s grafy počtu URL s dobrými výsledky pro mobilní zařízení i počítač](https://www.webotvurci.cz/uploads/navody/mereni-rychlosti-01-search-console.png)

#### 2. Core Web Vitals

**Core Web Vitals** jsou sada klíčových metrik, které hodnotí uživatelskou zkušenost v oblasti načítání, interaktivity a vizuální stability.

##### a) Largest Contentful Paint (LCP)

- **Měří**: Čas, za který se načte největší viditelný obsah na stránce.
- **Doporučená hodnota**: **≤ 2.5 sekundy**.
- **Jak zlepšit**:
  - Načítání kritických zdrojů s vysokou prioritou.
  - Komprese a optimalizace obrázků.

##### b) Interaction to Next Paint (INP)

- **Měří**: Celkovou dobu odezvy stránky na veškeré interakce uživatele.
- **Doporučená hodnota**: **≤ 200 milisekund**.
- **Jak zlepšit**:
  - Optimalizace reakcí na uživatelské interakce.
  - Minimalizace zátěže hlavního vlákna.

##### c) Cumulative Layout Shift (CLS)

- **Měří**: Míru nečekaných posunů rozložení stránky během načítání.
- **Doporučená hodnota**: **≤ 0.1**.
- **Jak zlepšit**:
  - Rezervace místa pro obrázky a videa pomocí atributů rozměrů.
  - Vyhnutí se vkládání obsahu nad existující obsah.

![Ukázka Cumulative Layout Shift na mobilu – po načtení se nad obsah vsune tlačítko „Click Me!" a text stránky se posune dolů](https://www.webotvurci.cz/uploads/navody/mereni-rychlosti-02-cls.png)

#### 3. Další nástroje pro měření

- **PageSpeed Insights**: Poskytuje jak laboratorní data, tak reálná data uživatelů s konkrétními doporučeními.
- **Lighthouse**: Nástroj integrovaný v Chrome DevTools pro hloubkovou analýzu výkonu.
- **WebPageTest**: Umožňuje detailní testování s různými parametry (lokalita, zařízení, rychlost připojení).

![Výsledky PageSpeed Insights pro mobil s vyhodnocením metrik Core Web Vitals – hodnoty LCP, INP, CLS, FCP a TTFB z reálných uživatelských dat](https://www.webotvurci.cz/uploads/navody/mereni-rychlosti-03-nastroje.png)

---

### Jak to vyřešit?

#### 1. Optimalizace kódu

##### a) Minimalizace a komprese souborů

- **Minifikace**: Odstranění zbytečných znaků z HTML, CSS a JavaScript souborů.
- **Gzip/Brotli komprese**: Aktivace komprese na serveru pro zmenšení velikosti přenášených souborů.

##### b) Asynchronní a odložené načítání skriptů

- **Async a Defer atributy**: Použití atributů `<script async>` a `<script defer>` pro neblokující načítání JavaScriptu.
- **Kritický CSS**: Inlinování kritických stylů v hlavičce stránky a odložení ostatních.

##### c) Odstranění nepoužívaného kódu

- **Audit kódu**: Použití nástrojů k identifikaci a odstranění nepoužívaných stylů.
- **Modulární JavaScript**: Rozdělení kódu na menší části a načítání pouze potřebných modulů.

##### d) Prioritizace CSS kódu – inlining critical CSS

- **Klíčové CSS:** CSS, která blokují a způsobují zvětšení metriky **CLS**.

#### 2. Optimalizace obrázků

##### a) Komprese bez ztráty kvality

- **Nástroje**: **TinyPNG**, **ImageOptim**, **Squoosh**.
- **Automatizace**: Implementace komprese jako součásti build procesu.

##### b) Použití moderních formátů

- **WebP**: Nabízí lepší kompresi než tradiční JPEG a PNG.
- **AVIF**: Ještě efektivnější než WebP, ale s omezenější podporou prohlížečů.

##### c) Responsive obrázky

- **Srcset a Sizes atributy**: Poskytují různé velikosti obrázků pro různá zařízení.
- **Obrázky na pozadí**: Optimalizace CSS obrázků pomocí media queries.

##### d) Lazy Loading

- **Native Lazy Loading**: Použití atributu `loading="lazy"` v `<img>` tagu.
- **JavaScriptové knihovny**: Např. **LazyLoad** pro pokročilé funkce.

#### 3. Využití CloudFlare

##### a) Content Delivery Network (CDN)

- **Geografické rozmístění**: Servery po celém světě zajišťují rychlé doručení obsahu.
- **Snížení latence**: Obsah je načítán z nejbližšího serveru k uživateli.

##### b) Caching

- **Statický obsah**: Ukládání obrázků, CSS a JavaScriptu pro rychlejší načítání.
- **Dynamický obsah**: Pomocí technologie **Railgun** lze cacheovat i dynamický obsah.

##### c) Optimalizace výkonu

- **Automatická minifikace**: CloudFlare může minifikovat HTML, CSS a JavaScript.
- **Rocket Loader**: Zrychluje načítání JavaScriptu.

##### d) Bezpečnost

- **Ochrana proti DDoS**: Zabraňuje útokům, které by mohly zpomalit eshop.
- **SSL Certifikáty**: Bezpečné připojení pomocí HTTPS ovlivňuje SEO.

#### 4. Odebrání doplňků

##### a) Audit nainstalovaných modulů

- **Identifikace náročných doplňků**: Zjistěte, které přidávají nejvíce k času načítání.
- **Analýza přínosu**: Zvažte, zda funkce převažuje nad negativním dopadem na výkon.

##### b) Optimalizace nezbytných doplňků

- **Aktualizace**: Ujistěte se, že všechny doplňky jsou aktuální.
- **Kontaktování vývojářů**: Pokud doplněk zpomaluje eshop, obraťte se s žádostí o optimalizaci.

##### c) Alternativy a integrace

- **Vlastní kód**: Někdy může být efektivnější implementovat funkci přímo.
- **Externí služby**: Zvažte použití externích služeb.

#### 6. Obecné doporučení

1. **Zmenšení velikosti fontů** – Omez počet typů písma a jejich vah.
2. **Redukuj počet přesměrování** – Zajisti, aby URL vedly přímo na cílovou stránku.

#### 7. Externí služby

##### a) Externí služby – zvážit jejich přínosnost na rychlost webu

- Clarity, Hotjar – skutečně je potřeba aby běžely nepřetržitě?
- Chat
- Notifikace a sledovače

#### 8. Další pokročilé techniky

##### a) Preloading, Prefetching a Preconnecting

**Preload**: Načítá kritické zdroje předem.

```html
<link rel="preload" href="styles.css" as="style">
```

**Prefetch**: Načítá zdroje pro budoucí navigaci.

```html
<link rel="prefetch" href="next-page.html">
```

**Preconnect**: Navazuje spojení s externími zdroji předem.

```html
<link rel="preconnect" href="https://example.com">
```

##### b) HTTP/2 a HTTP/3

- **Multiplexing**: Umožňuje současné načítání více zdrojů přes jedno spojení.
- **Server Push**: Server může poslat zdroje předem.

##### c) Analýza hlavního vlákna

- **Chrome DevTools**: Použití nástroje **Performance** k identifikaci blokujících skriptů.
- **Rozdělení úloh**: Rozložení náročných operací pomocí **requestIdleCallback** nebo **setTimeout**.

---

### Praktické kroky pro Shoptet eshopy

#### 1. Využití nativních funkcí Shoptetu

- **Šablony**: Vyberte si lehkou a rychlou šablonu.
- **Obrázkové galerie**: Používejte vestavěné nástroje pro optimalizaci obrázků.

#### 2. Spolupráce s vývojáři

- **Konzultace**: Pokud nemáte technické znalosti, obraťte se na odborníky.
- **Customizace**: Přizpůsobení eshopu může vyžadovat pokročilé zásahy do kódu.

#### 3. Monitoring a kontinuální zlepšování

- **Pravidelné kontroly**: Nastavte si harmonogram pro testování rychlosti.

---

### Závěr

Optimalizace rychlosti eshopu na platformě Shoptet je komplexní úkol vyžadující systematický přístup. Rychlý eshop zlepšuje uživatelskou zkušenost a pozitivně ovlivňuje SEO, efektivitu PPC kampaní a konverzní poměr.

Implementací výše uvedených strategií a pravidelným monitorováním lze dosáhnout významných zlepšení.

---

### Zdroje

1. **Google Developers – Web Vitals** - [https://web.dev/vitals](https://web.dev/vitals)
2. **Google Search Console – Core Web Vitals Report** - [https://support.google.com/webmasters/answer/9205520](https://support.google.com/webmasters/answer/9205520)
3. **PageSpeed Insights** - [https://developers.google.com/speed/pagespeed/insights](https://developers.google.com/speed/pagespeed/insights)
4. **Shoptet – Nápověda a Podpora** - [https://podpora.shoptet.cz](https://podpora.shoptet.cz)
5. **CloudFlare – Performance Overview** - [https://cloudflare.com/performance](https://cloudflare.com/performance)
6. **Mozilla Developer Network** - [developer.mozilla.org/en-US/docs/Web/Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
7. **WebPageTest** - [webpagetest.org](https://www.webpagetest.org/)
8. **Chrome DevTools – Performance Analysis** - [https://developers.google.com/web/tools/chrome-devtools/evaluate-performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance)
9. **Image Optimization** - [https://web.dev/fast/use-improved-image-formats/](https://web.dev/fast/use-improved-image-formats/)
10. **Understanding INP** - [https://web.dev/inp/](https://web.dev/inp/)

---

*Návod pochází z webu Webotvůrci — Zlatý a Premium partner Shoptetu.*
*Všechny návody: https://www.webotvurci.cz/navody/ · Kontakt: jsme@webotvurci.cz*