Rychlost patří mezi hodnoticí faktory Google a přímo ovlivňuje konverze. Všechny tipy a úpravy, které v článku popisujeme, zvládnete provést sami v administraci ByznysWebu. Ať už jde o obsah, média nebo bloky. O hardware infrastrukturu cloudu, servery a pravidelné aktualizace softwaru se staráme my spolu s našimi partnery.

V článku shrnujeme nejčastější chyby, které se opakují při auditech šablon e-shopů a přidáváme konkrétní návody, jak je odstranit. Dostanete praktická doporučení, jak udržet výkon e-shopu na vysoké úrovni.

3 nejčastější překážky rychlého e-shopu

1. Úvodní stránka přetížená daty

Pokud má homepage tisíce prvků, prohlížeč musí zpracovávat složitý strom uzlů, což zpomaluje načítání. Nepřeplňujte homepage, pokud máte na úvodní stránce stovky produktů, více sliderů a mnoho sekcí, stránka se načte pomaleji. Snižte počet prvků v hlavičce a patičce.

Dlouhý text patří spíše do sekce „Výhody“ nebo pod patičku na podstránkách, ne do hlavního banneru.

Plánujte vzdušnou titulní stránku s jasnými CTA prvky.

2. Navigační menu s příliš mnoha položkami první úrovně

Menu by mělo být stručné. Na první úrovni nechte jen to nejdůležitější. Další odkazy (např. Reference, Platba, Doprava, Reklamace, Obchodní podmínky) přesuňte pod „O nás“. Výsledkem bude přehlednější menu i rychlejší zobrazení webu.

3. Bannery a logo v nadměrném rozlišení

Banner a logo přiměřené velikosti. Častým problémem pomalého načtení jsou příliš velké hero obrázky a neúměrně velké logo. Menší logo = rychlejší načtení hlavičky.

Tipy pro bannery:

• Připravte mobilní verzi (např. poměr stran 1:1), aby byla dobře čitelná.
• Pro fotky v bannerech nepoužívejte PNG – lepší je JPG nebo WebP (JPG kolem 30 kB, WebP cca 20–25 kB).
• Pokud vkládáte nové bannery/obrázky, rychle je zkomprimujte například. v bezplatném nástroji RIOT.

Další návody:

• Optimalizace obrázků
• Obrázky WebP v ByznysWebu

Obrázky v produktech a kategoriích: nejčastější problém

• Nahrajte přiměřeně velké obrázky, ByznysWeb si pak sám vytvoří zmenšeniny pro jednotlivá umístění v šabloně e-shopu.
• U galerií a výpisů produktů držte rozumný počet náhledů.
• Videa a další prvky načítejte jen tam, kde dávají smysl (ne hned na homepage).

Skripty a doplňky třetích stran: kontrola „hygieny“

Pomalé načítání e-shopu často způsobuje příliš mnoho externích kódů. V administraci zkontrolujte:

Google Analytics: nenechávejte zároveň starý UA a GA4, nechte jen GA4.

Google Tag Manager, pixely: smažte duplicity a nepoužívané skripty.

Mapy a widgety (chat, recenze): nedávejte je na každou stránku. Mapa patří jen do „Kontakt“, ne do oblasti „Nad patičku“ na všech podstránkách.

Google PageSpeed Insights v praxi

Pro audity využíváme nástroj Google PageSpeed Insights (PSI) a metriky Core Web Vitals.

PSI je bezplatný nástroj od Google, který otestuje konkrétní URL na mobilu i desktopu, přiřadí její skóre 0–100 a ukáže, co přesně zpomaluje stránku. Zároveň zvýrazní metriky Core Web Vitals – LCP (rychlost načtení hlavního obsahu), INP (odezva na kliky) a CLS (stabilita rozložení).

Příklad analýzy reálného webu:

• Východiskový stav: PSI skóre desktop 97, mobil 62; Core Web Vitals: desktop OK, mobil těsně nesplněno.
• Krok 1 – výměna hlavního banneru + optimalizace velkých obrázků → mobil 81 ((zlepšení viditelné i bez dalších zásahů).
• Krok 2 – další drobné úpravy titulky a šablony e-shopu (odlehčení obsahu, mobilní banner 1:1, úprava menu, vyčištění skriptů) → PSI skóre desktop 99, mobil 91.

Reálná čísla se mohou měnit podle typu šablony a obsahu, ale v praxi platí: pár rozumných zásahů přinese výrazné zrychlení zejména na mobilu

Doporučujeme ověřovat v PSI homepage e-shopu, kategorii produktů a detail produktu. Zaměřte se na: mobil.

Řeště doporučení s největší úsporou času: velikost a formát obrázků (JPG/WebP), mobilní verze banneru 1:1, snížení počtu prvků na titulce, vyčištění 3. stran (pouze GA4, bez duplicit).

Poznámka: Serverovou infrastrukturu (cache, škálování, sdílení) řešíme centrálně v ByznysWebu. Vy v administraci víte nejvíce získat úpravou obsahu, obrázků, bannerů a skriptů.

Po úpravách na e-shopu zopakujte test v Google PageSpeed ​​Insights a výsledky si uložte (vidíte trend). 

Nejde o honění se za 100/100. Cíl je, aby se stránka načítala rychle hlavně na mobilu a aby byly splněny Core Web Vitals.

Co řeší ByznysWeb za vás

E-shop systém od ByznysWebu je navržen tak, aby běžel rychle a spolehlivě: víceúrovňové cache, lazyloading pro obrázky, škálovatelné servery, pravidelné výkonové aktualizace, optimalizace výpisů kategorií i databází. To vše řešíme centrálně.

Vy se soustřeďte na obsah a prodej. My zajistíme technické požadavky na moderní e-shop.

Když chcete jistotu výsledku

Pokud chcete, abychom se na váš e-shop podívali detailně a navrhli konkrétní zásahy, podívejte se na naši službu Analýza rychlosti webu. Rádi propojíme is kolegy na SEO, bude-li třeba. Stačí kontaktovat ByznysWeb.cz.

Audit rychlosti e-shopu uděláme za vás a dáme vám jasná doporučení se seznamem priorit a po dohodě rovnou úpravy nasadíme.

Služba ByznysWeb Partner

Dostatečná kapacita pro maximální výkon a spolehlivost pro expandující e-shopy. Posuňte svůj e-shop na novou úroveň s našimi řešeními cloudu na míru a využijte výhod hotového systému!

Chcete-li mít u sebe spolehlivého partnera, který vám pomůže budovat výkonný e-shop, doporučuji využít služby ByznysWeb Partner.

Úkolem redakčního systému je usnadnit provozovateli e-shopu jeho práci i v tomto směru tak, aby vůbec nemusel pracovat s kódem a aby systém generoval vše tak, jak je to potřebné. Proto i v ByznysWeb.cz najdete nastavení pro jednotlivé jazykové verze e-shopu se souhrnným názvem Strukturovaná data. Připravili jsme pro vás podrobnější článek na toto téma.

V tomto článku se dozvíte více informací o tom:

Co jsou strukturovaná data a proč jsou důležitá?

Strukturovaná data jsou informace, které jsou uspořádány a označeny tak, aby je dokázaly správně číst a zpracovat různé systémy, zejména vyhledávače. Představte si je jako podrobný popis vašeho webu a jeho obsahu, který je srozumitelný nejen pro lidi, ale i pro roboty. Když správně využijete strukturovaná data, můžete zlepšit šance, že vaše stránky budou zobrazeny ve výsledcích vyhledávání s bohatšími informacemi, například s cenami produktů, hodnoceními či dostupností na skladě.

Tato data se používají i pro lidské zákazníky a mohou být použita v blízké budoucnosti i pro další funkce jako např. e-maily pro zákazníky, ale neméně důležité je i jejich využití pro přesný popis vašeho byznysu pro Google a další.

Proč vyplňovat strukturovaná data?

Z praktického hlediska chceme dosáhnout např. toho, aby Google zobrazil pro náš obchod v SERP (ve výsledcích vyhledávání) výsledky, které budou více než jen odkaz a strojově určený nadpis a souhrnný text – u produktů můžeme dosáhnout zobrazení ceny, zařazení do kategorií přes breadcrumbs, skladový status a další. Při vyhledání vaší firmy může zobrazit odkazy nejen na váš web, ale i kontaktní telefon nebo e-mail a odkazy na sociální sítě vašeho byznysu. Samozřejmě, toto chování nelze od Google ani jiných vynutit, ale první krok musí být od webové stránky.

Lepší porozumění obsahu webu

Sémanticky správně napsaný a označený web, který má správné rozdělení textu na odstavce s nadpisy, zvýraznění textu a odkazů, správné použití seznamů, tabulek, ale i použití HTML5 značek na organizaci celého webu, pomůže porozumět obsahu oběma typům návštěvníků, ale pro ty robotické je vhodné poslat důležité údaje explicitně. 

Jak strukturovaná data ovlivňují SEO a výsledky vyhledávání?

Představme si výsledky vyhledávání například v Google. Protože vyhledávače používají strukturovaná data k lepšímu pochopení obsahu vašich stránek, správně označená data mohou výrazně zvýšit viditelnost vašich stránek v SERP.

Může se klidně stát, že pokud má váš produkt lépe strukturovaný a poutavý snippet, bude mít váš odkaz vyšší míru prokliku (CTR), protože uživatelé vidí více relevantních informací už přímo v SERP. Vyšší CTR může do budoucna zlepšit pozici vašeho webu ve vyhledávání, což znamená více návštěvníků a potenciálních zákazníků = vyšší konverze. Více o strukturovaných datech v Google Search.

V tomto článku popíšeme všechna strukturovaná data, která jsou posílána na webstránkách a e-shopech od ByznysWeb.cz

Nejprve si ale povězme o 2 základních technologiích, které umožňují definovat texty, produkty, ale i vás jako provozovatele webu přes zmíněná Strukturovaná data. Jsou to Mikrodata a JSON-LD. Obě fungují na stejném principu: označíme položku, kterou chceme definovat, abychom dali najevo exaktní typ položky, uvedeme URL na definici typu této položky (její tzv. schéma) a pak definujeme chtěné vlastnosti položky, které podle schématu může, nebo dokonce musí mít.

Mikrodata

Jedná se o označení elementů HTML, které obsahují hodnoty, přímo přes atributy těchto elementů. Ve zdrojovém kódu stránky je můžete rozpoznat podle názvů itemprop, itemscope a itemtype, případně i itemref. Položky jsou tedy označovány přímo v textu stránky, který vidí i lidský návštěvník. Položky, které nejsou přímo uvedeny v textu v požadovaném formátu nebo je obtížné je označit, můžeme poslat pomocí tagu <meta>.

Příklad mikrodat – článek v bloku Novinky

Mikrodata jsou použita ve starších šablonách Default a Flat, ale také v šabloně Verona.

JSON-LD

Jedná se o definici dat ve formátu JSON, tedy Javascriptová objektová notace, opět definovaná podle URL se schématem pro položky, které chceme označit. LD v názvu je zkratka pro Linked Data, tedy připojená data, protože obsah stránky je popsaný mimo text stránky. Je tedy jednodušší na zpracování (protože extrahování dat je pro robota jednodušší), ale je nutné se ujistit, že definice JSON-LD a obsah webové stránky mají stejný smysl a hodnoty. Je to nejvíce doporučovaný formát pro strukturovaná data.

Příklad JSON-LD – článek v bloku Novinky

JSON-LD je použit v šablonách Paris a Barcelona, ale také v ostatních šablonách pro schéma popisující vlastníka webu (Organization).

Další příbuzné technologie 

schema.org

Jak bylo zmíněno, mikrodata i JSON-LD potřebují URL s definicemi schémat položek. Aby byly tyto schémata sjednoceny napříč prohlížeči a webovými aplikacemi, velké společnosti založily a spolupracují na sladění definic napříč webem. Výsledkem tohoto úsilí je schema.org, která obsahuje dokumentaci schémat, která velké vyhledávače jako Google, Bing, Yahoo! a Yandex podporují, a proto je používají i další společnosti a webové aplikace.

Schémata

Schémata využívaná pro části stránek, tj. jaké obsahují vlastnosti. Pokud je to možné, jsou posílány bez ohledu na to, zda schéma na dané šabloně používá mikrodata nebo JSON-LD.

Internetové obchody a webové stránky od ByznysWeb.cz obsahují následující schémata vlastností:

Produkt – použito v Detailu produktu.

Schéma typu Product, obsahující vlastnosti name, image (seznam obsahující hlavní obrázek a obrázky produktové galerie), description, brand (typu Brand s name a url), sku (nastavený identifikátor), review (recenze typu Review, může obsahovat reviewRating, autor, datePublished, name a reviewBody), aggregateRating (všechna hodnocení produktu, i ta bez přidružené recenze) a offers (což je schéma typu buď AggregateOffer nebo Offer, které popisují cenu produktu),

typ AggregateOffer – je zobrazen, pokud jde o zobrazení detailu produktu, který obsahuje více kombinací variant v různých cenách. Má vlastnosti offerCount, lowPrice a highPrice,

typ Offer – obsahuje vlastnosti url, price, availability (skladem nebo ne), priceValidUntil (nastavené buď hodnota produktu zobrazené do, nebo +1 rok od aktuálního dne), priceCurrency a itemCondition (pokud je nastaveno, že jde o prodej použitého produktu)..

Podívejte se, jak by mohl vypadat výsledek vyhledávání (SERP) pro konkrétní produkt:

Breadcrumbs (Domů > Drobečky > Chleba 🙂) – použito v detailu produktu, stránkách, kategoriích, článcích.

Schéma typu BreadcrumbsList s položkami obsahujícími position, name a item (odkaz na stránku).

Článek v bloku Novinky

Schéma typu Article, obsahuje vlastnosti headline, description, author.name, publisher.name, publisher.logo, interactionCount, image, url, thumbnailUrl, discussionUrl, dateModified, datePublished.

Seznam článků bloku Novinky

Schéma typu itemList (seznam položek) s položkami obsahujícími url.

Organizácia (generováno ze strukturovaných dat) – použité v hlavičce na každé stránce.

Schéma typu Organization s vlastnostmi url, logo, name, sameAs (pole odkazů na sociální sítě), email, telephone, contactPoint (který obsahuje opět telephone a email) a address (typ PostalAddress).

Typ PostalAddress obsahuje vlastnosti streetAddress, addressLocality, addressCountry, addressRegion a postalCode.

Ilustrační obrázek zobrazení Organizace přímo od Google:

(Zdroj: https://developers.google.com/search/docs/appearance/structured-data/organization)

Webová stránka – použité v hlavičce na každé stránce.

Schéma typu WebPage s name (titulka stránky), description a image (buď obrázky z Nastavení stránky, kategorie nebo hlavní obrázky Detailu produktu nebo článku v bloku Novinky).

Je to ekvivalent vlastností na sdílení odkazů na sociální sítě, tedy ekvivalent dat posílaných přes Facebook Open Graph.

Ukázka, kde se vyplňují Vlastnosti stránky – záložka SEO v ByznysWeb.cz:

Galerie v bloku Galerie

Schéma typu itemList (seznam položek) a typu imageObject (obrázkový objekt).

Vlastnosti imageObject: url, name, image.

Facebook Open Graph

Trochu odlišnou technologií na sdílení informací o stránce je Facebook Open Graph, ale ten slouží k zásadně omezenějšímu cíli, a to zobrazení odkazů přidaných na sociální sítě, hlavně tedy pro Facebook. Chce definovat pouze informace jako název a popis stránky s reprezentativním obrázkem nebo videem. Nedefinuje např. e-commerce data. Tyto hodnoty pro podstránky, které mohou být takto shrnuty, jako např. Detail produktu, článek z bloku Novinky mají i stránky a e-shopy od ByznysWebu, ale nejde o mikrodata nebo JSON-LD.

Ukázka, kde se vyplňují Vlastnosti stránky – záložka Hlavní v ByznysWeb.cz:

Příklad Facebook Open Graph na homepage e-shopu:

Kam vkládat strukturovaná data v ByznysWebu?

V ByznysWeb.cz nastavíte strukturovaná data pro jednotlivé jazykové verze e-shopu, kterými popíšete váš e-shop, co prodává, logo, kontaktní údaje a odkazy na vaše sociální sítě. Přístup ke strukturovaným datům pro schéma typu Organization je přímo v hlavním seznamu jazykových verzí. Pokud v sekci Stránky nebo Produkty přejedete myší nad řádkem s jazykem, zobrazí se na hover efekt možnost upravit strukturovaná data pro danou jazykovou verzi.

Ukázka, kde vkládat strukturovaná data v ByznysWeb.cz:

Více info návod: https://www.byznysweb.cz/a/1404/strukturovana-data-pro-jazykove-verze

Jak si mohu zkontrolovat strukturovaná data?

Použijte nástroj na testování strukturovaných dat: Google Rich Results Test
https://search.google.com/test/rich-results?hl=cs

Závěr

Implementace strukturovaných dat na váš web je klíčová pro zlepšení jeho viditelnosti a porozumění obsahu roboty i lidskými návštěvníky. Mikrodata a JSON-LD jsou dvě základní technologie, které vám umožní definovat a sdílet důležité informace o vašem byznysu efektivním způsobem. Kromě toho, využití schema.org zajišťuje, že vaše data budou kompatibilní s největšími vyhledávači. Facebook Open Graph umožňuje efektivní sdílení obsahu na sociálních sítích. Investice do správné struktury a označení dat může vést k lepšímu SEO a vyšší míře prokliků, čímž zvýšíte svou konkurenceschopnost a úspěšnost na internetu.