- [Case Studies](https://www.mergado.cz/kategorie/case-studies)
- [E‑commerce tipy](https://www.mergado.cz/kategorie/e-commerce-tipy)
- [E‑shopová řešení a platformy](https://www.mergado.cz/kategorie/e-shopova-reseni-a-platformy)
- [Mergado Pack](https://www.mergado.cz/kategorie/mergado-pack)
- [Mergado tipy](https://www.mergado.cz/kategorie/mergado-tipy)
- [Novinky v Mergadu](https://www.mergado.cz/kategorie/novinky-v-mergadu)
- [Novinky ze srovnávačů](https://www.mergado.cz/kategorie/novinky-ze-srovnavacu)
- [Pracujeme s Mergadem](https://www.mergado.cz/kategorie/pracujeme-s-mergadem)
- [Rozhovory](https://www.mergado.cz/kategorie/rozhovory)
- [Rozšíření](https://www.mergado.cz/kategorie/aplikace)
- [S Mergadem do zahraničí](https://www.mergado.cz/kategorie/s-mergadem-do-zahranici)
- [Ze života Mergada](https://www.mergado.cz/kategorie/ze-zivota-mergada)
1. [ Úvod ](https://www.mergado.cz/)
2. [ Blog ](https://www.mergado.cz/blog)
3. [ E‑shopová řešení a platformy ](https://www.mergado.cz/kategorie/e-shopova-reseni-a-platformy)
4. **Všechno, co potřebujete vědět o spuštění e‑shopu na WooCommerce: Technické nastavení stránky**
# **Všechno, co potřebujete vědět o spuštění e‑shopu na WooCommerce: Technické nastavení stránky**
[  Petra Marková ](https://www.mergado.cz/blog/petra-markova) [E‑shopová řešení a platformy](https://www.mergado.cz/kategorie/e-shopova-reseni-a-platformy)
22. 5. 2020
3 minuty čtení
Vybudujte si funkční e‑shop na [WooCommerce](https://www.mergado.cz/shopsystemy/woocommerce) i po technické stránce. Na první pohled nenápadné nastavení cache nebo optimalizace obrázků přinese nakupujícím **lepší uživatelskou zkušenost** s webem. Přečtěte si čtvrtý díl našich tipů a připravte váš obchod na bezchybné spuštění.
function tableOfContents() {
return {
headings_menu: [],
heading_active: '', // Added to track the active section
shouldBeSticky: false,
generateToC() {
const headings = document.querySelectorAll('.js-article-full-headings h2, .js-article-full-headings h3');
let headingMap = {};
headings.forEach((heading) => { // Use an arrow function to maintain `this` context
// Normalize heading text to remove diacritics, then replace non-alphanumeric characters with dashes
var normalizedText = heading.textContent.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); // Remove diacritics
var id = heading.id ? heading.id : normalizedText.trim().toLowerCase()
.split(' ').join('-').replace(/[^a-z0-9\-]/ig, ''); // Updated regex to replace non-alphanumeric characters
headingMap[id] = headingMap[id] !== undefined ? ++headingMap[id] : 0;
// Use the updated `id` with diacritics removed for the heading id and the TOC
const finalId = headingMap[id] ? `${id}-${headingMap[id]}` : id;
this.headings_menu.push({
id: finalId,
title: heading.textContent,
level: heading.tagName.toLowerCase(), // Track heading level
active: false, // Initially set active to false
});
heading.id = finalId;
});
},
checkStickyNeeded() {
const ul = this.$el.querySelector('ul');
if (ul) {
this.shouldBeSticky = ul.scrollHeight < window.innerHeight;
}
},
setActiveHeading() {
// disabled not working with active state on click
// add @scroll.window="setActiveHeading()" to the parent div
// const headings = document.querySelectorAll('.js-article-full-headings h2');
// let activeHeading = '';
// let closestHeadingDistance = Infinity;
// headings.forEach((heading) => {
// const rect = heading.getBoundingClientRect();
// const offset = rect.top - window.innerHeight / 2; // Consider heading in the middle of the screen as active
// if (offset < 0 && Math.abs(offset) < closestHeadingDistance) {
// activeHeading = heading.id;
// closestHeadingDistance = Math.abs(offset);
// }
// });
// // Update the active state in headings_menu
// if (activeHeading !== this.heading_active) {
// this.headings_menu = this.headings_menu.map(item => ({
// ...item,
// active: item.id === activeHeading,
// }));
// this.heading_active = activeHeading;
// }
},
setActiveItem(clickedId) {
this.headings_menu.forEach(item => {
item.active = (item.id === clickedId);
});
this.heading_active = clickedId; // Optionally update the heading_active property if used
},
};
}
1. —
Vybudujte si funkční e‑shop na [WooCommerce](https://www.mergado.cz/shopsystemy/woocommerce) i po technické stránce. Na první pohled nenápadné nastavení cache nebo optimalizace obrázků přinese nakupujícím **lepší uživatelskou zkušenost** s webem. Přečtěte si čtvrtý díl našich tipů a připravte váš obchod na bezchybné spuštění.
[  ](https://www.mergado.cz/sites/default/files/perm/paragraph-image/screenshot-woocommercecom-20200522-125012.png)
## Při budování e‑shopu myslete o krok napřed
Pronikněte do technického zákoutí webu krok za krokem. **Ušetříte si tím mnoho práce** v budoucnosti. Přinášíme vám rady pro tři důležité oblasti, které byste neměli vynechat.
- ### 1. Nastavení cache
Pomalé načítání stránky, obrázků nebo produktů dokáže zákazníka odradit. Používaním cache **snížíte** **náročnost** vyvolání nové stránky a urychlíte její otvírání. Jeho hlavní výhodou je, že vygeneruje jednu verzi webu do dočasné paměti serveru, kterou následně posílá jeho návštěvníkům.
Cesta k pohodlné návštěvě e‑shopu vede ve WooCommerce přes přidané pluginy. Jakmile si je nainstalujte, prohlížení na e‑shopu bude **dynamičtější**. Mezi často využívané pluginy patří bezplatný [WP Super Cache](https://cs.wordpress.org/plugins/wp-super-cache/) nebo [WP Rocket](https://cs.wordpress.org/plugins/wp-super-cache/). Jejich pomocí urychlíte načítání webu pro **opakované i nové návštěvy**.
Dalším přínosným pluginem je [Autoptimize](https://cs.wordpress.org/plugins/autoptimize/). Existuje ve free i v placené verzi a kromě cachování také umí minifikovat HTML a CSS. V jeho nabídce navíc najdete **speciální funkci** [Lazy Load](https://cs.wordpress.org/plugins/optimole-wp/), která spustí načítání obrázků při jejich rolování.
Novinkou mezi technologiemi je pokročilá cache [AMP](https://www.vzhurudolu.cz/prirucka/amp), která běží na Google serverech. Uživatel ji dovede snadno zprovoznit pomocí pluginů a vytvořit tak AMP verze svých stránek.
##### *Proces přechodu a optimalizace AMP stránky k uživateli. Zdroj: *
- ### 2. Optimalizace obrázků
Při nahrávání obrázků na e‑shop si v první řadě dejte pozor na jejich velikost. Všeobecně platí, že **čím jsou obrázky menší, tím lépe** bude vaše stránka fungovat. I v tomto případě pro optimalizaci a zrychlení webu využijte nabídku nástrojů.
Uživatelé často používají plugin [OptiMole](https://cs.wordpress.org/plugins/optimole-wp/), který přímo ve WordPressu **zmenší velikost nebo upraví rozměry** obrázků podle zvolených kritérií. Další možností je nastavení ztrátovosti kvality či zapnutí dříve zmíněného [Lazy Load](https://cs.wordpress.org/plugins/optimole-wp/).
Funkce navíc funguje v režimu [CDN](https://jecas.cz/cdn) (síť pro doručování obsahu). Tato služba distribuuje data požadovaná návštěvníky po celém světě. Tím, že je nebudete posílat pouze na jeden server, **zachováte rychlost webu**, protože CDN zátěž rozloží na více stran.
##### *Úprava fotky pomocí pluginu OptiMole. Zdroj: *
Optimalizaci obrázků pro obsah e‑shopu také zabezpečují pluginy [Tinyjpg](https://tinyjpg.com/) a [Tinypng](https://tinypng.com/).
- ### 3. Zálohování
Pojistěte si to nejhlavnější už při vytváření e‑shopu a využijte možnost **automatické** **zálohy**. Variantou je přímé zálohování na webhostingu, nebo instalace dalšího pluginu. [Updraft](https://updraftplus.com/) nabízí časově nastavené zálohování propojené na Google platformy, klonování nebo rozdílové zálohování. Možnosti pluginů jsou široké a poskytují **zálohování na servery, subdomény či přímo do počítače uživatele**.
##### *Možnosti zálohování pluginu Updraft. Zdroj: *
Důležitou součástí rychlého načítání webu je i **pravidelná kontrola pluginů**. Projděte si vaši stránku a zkontrolujte, jestli všechny fungují a jsou aktualizované. Užitečné informace o testování pluginů najdete i na [fóru WooCommerce](https://woocommerce.com/blog/).
E‑shop, který je z technického hlediska perfektně nachystaný, je jedním z pilířů úspěchu. Spravujte inzerci na Woocommerce pomocí [Mergado Packu](https://www.mergado.cz/kategorie/mergado-pack). Nastavení e‑shopařských úkonů s ním dokážete provádět [hromadně a automatizovaně](https://www.mergado.cz/kategorie/mergado-pack).
### **Mohlo by vás zajímat:**
[ 
### Zahajte festivalovou sezónu nadupanou konferencí Mergado Fest
](https://www.mergado.cz/blog/zahajte-festivalovou-sezonu-na-mergado-festu)
[ 
### Jak optimalizace feedu zvýšila výkon Meta Ads bez navýšení rozpočtu
](https://www.mergado.cz/blog/optimalizace-feedu-pro-Meta-Ads)
[ 
### Jak úspěšně prodávat na idealo
](https://www.mergado.cz/blog/uspesny-prodej-na-idealo)
- [ WooCommerce ](https://www.mergado.cz/tema/woocommerce)
[  ](https://www.mergado.cz/blog/petra-markova)### [ Petra Marková ](https://www.mergado.cz/blog/petra-markova)
Slovenský trh a libozvučnou slovenštinu má v Mergadu na starosti content specialistka Petra. Textuje, bloguje, překládá a s vášní tvoří obsah na sociální sítě. A když zrovna nehledá ta správná slova, věnuje svůj čas své bytové džungli, pečení, kavárnám nebo cestování.
## Mohlo by vás *zajímat*
[ 
### Jak jsme s Mergadem převedli e‑shop ze Shoptetu na Shopify: kompletní migrace bez ztráty dat
](https://www.mergado.cz/blog/jak-jsme-s-mergadem-prevedli-e-shop-ze-shoptetu-na-shopify-kompletni-migrace-bez-ztraty-dat)
[ 
### Kompletní průvodce prodeje na marketplaces
](https://www.mergado.cz/blog/prodeje-marketplaces-pruvodce)
[ 
### Prodávejte na Allegru.pl. Je to nejpoužívanější polská e‑commerce platforma
](https://www.mergado.cz/blog/seznamte-se-s-allegrem)
## Ať vám *nic neunikne*
Přihlašte se do našeho newsletteru
Přihlášením souhlasíte, že vaše údaje zpracujeme v souladu s podmínkami o [ochraně osobních údajů](https://www.mergado.cz/prohlaseni-o-cookies).
Děkujeme, úspěšně jste se připojili k našemu seznamu odběratelů.
function ml_webform_success_5807248() {
var r = ml_jQuery || jQuery
r('.ml-subscribe-form-5807248 .row-success').show(), r('.ml-subscribe-form-5807248 .row-form').hide()
}