Widgety a rychlost webu: co ovlivňují a co ne

25.10.2026 | Marek Kučera | Doba čtení: 4 min | Jak na to

Kdo jednou řešil pomalý e-shop, dívá se na každý další skript nedůvěřivě. Oprávněně: chat, recenze, reklamní pixely a doplňky se sčítají. V tomto článku popisujeme, jak se widget Product Widgets načítá, co to znamená pro rychlost a vyhledávače a co můžete udělat sami.

Jak se widget načítá

Na stránce je widget jeden krátký skript s atributem async. Prohlížeč ho stahuje souběžně s načítáním stránky a nečeká na něj s vykreslením obsahu. Text článku nebo produktu se tak zobrazí, i když widget ještě není hotový.

Skript pak na své místo vloží obsah widgetu do takzvaného Shadow DOM. Styly widgetu jsou tím oddělené od stylů e-shopu. Šablona e-shopu nerozbije vzhled widgetu a CSS widgetu neovlivní nic dalšího na stránce.

Na Shoptetu můžete widget vložit i shortcodem. Ten po načtení stránky nahradí skript, který se do e-shopu přidá při instalaci doplňku, a dál se widget načítá stejně.

Zobrazení a prokliky widgetu se počítají přes navigator.sendBeacon, tedy na pozadí, bez čekání na odpověď a bez vlivu na klikání.

Co vidí Google

Google stránky před indexací vykresluje v prohlížeči Chromium a spouští na nich JavaScript. Podle jeho dokumentace podporuje webové komponenty a při vykreslení „zploští“ Shadow DOM a běžný obsah stránky dohromady. Odkazy najde, pokud jsou to prvky <a> s atributem href, a to platí i pro odkazy vložené JavaScriptem.

Widget vkládá odkazy na produkty, kategorie a články právě jako <a href>. Pro Google jsou to tedy interní odkazy jako jiné. Dvě věci ale mějte na paměti:

• Hlavní text stránky nepatří do widgetu. Popis produktu nebo text článku má být přímo v HTML stránky. Widget je doplněk, ne obsah, podle kterého má Google stránku pochopit.
• Vykreslení může chvíli trvat. Google zařadí stránku do fronty na vykreslení, které proběhne o něco později než stažení HTML. Pro odkazy na produkty to nevadí, pro hlavní obsah stránky ano, a proto patří do HTML.

Rychlost: na co se dívat

Rychlost stránky z pohledu návštěvníka měří Google třemi metrikami Core Web Vitals. Za dobré hodnoty považuje:

Asynchronní skript widgetu nebrzdí zobrazení textu stránky. Pokud ale widget stojí v horní části stránky, kde je zároveň největší obrázek nebo nadpis, může se do LCP započítat i jeho načtení. U většiny e-shopů je widget pod popisem produktu nebo uvnitř článku, kde LCP neovlivňuje.

Nejvíc pozornosti si zaslouží CLS, posun obsahu. Widget se do stránky vloží až po načtení skriptu. Pokud v tu chvíli návštěvník čte text pod ním, text poskočí dolů.

Jak posunu obsahu předejít

1. Neumisťujte widget do prvního odstavce. Vložte ho až po první užitečné odpovědi v článku nebo pod popis produktu. Tam ho návštěvník obvykle uvidí až po posunutí stránky a vložení widgetu nic neposune ve viditelné části.
2. Rezervujte místo. Pokud widget vkládáte HTML kódem, obalte ho prvkem s minimální výškou podle toho, jak je widget vysoký na mobilu a na počítači. Přesně to doporučuje Google na webu web.dev pro reklamy, vložený obsah a další prvky, které se načítají později.

<div style="min-height: 380px">
  <!-- sem vložte HTML kód widgetu -->
</div>

1. Hlídejte počet widgetů nad sebou. Tři widgety v jednom článku jsou v pořádku, pokud je mezi nimi text. Deset widgetů na jedné stránce znamená deset skriptů a deset bloků obsahu, které se dočítají.
2. Zvolte režim pro mobil. V editoru widgetu vyberete, jestli se položky, které se nevejdou na šířku, posouvají (posuvník nebo carousel), zalomí pod sebe, nebo skryjí. Posuvník a carousel drží widget nízký, zalomení ho na mobilu prodlouží.

Jak to změřit u sebe

• PageSpeed Insights (pagespeed.web.dev): vložte adresu článku nebo produktu s widgetem. Pokud má stránka dost návštěv, uvidíte i data od skutečných návštěvníků.
• Search Console, přehled Core Web Vitals: ukáže skupiny stránek, které mají horší hodnoty, za celý web.
• Porovnání se stránkou bez widgetu: změřte podobný článek s widgetem a bez něj. Výsledky jednoho měření kolísají, změřte každou stránku několikrát.

Shrnutí

• Widget se načítá asynchronně a nebrzdí zobrazení textu stránky.
• Styly widgetu jsou oddělené od stylů e-shopu.
• Google odkazy ve widgetu najde, hlavní text stránky ale patří do HTML.
• Největší riziko je posun obsahu. Umístěte widget níž nebo mu rezervujte místo.

Kam widget na produktové stránce umístit a co nechat v popisu, rozebírá článek Widgety u produktu, nebo popis?

Zdroje

1. Google Search Central: Základy SEO pro JavaScript (vykreslování, webové komponenty a Shadow DOM, odkazy).
2. web.dev: Cumulative Layout Shift (CLS) a Optimize Cumulative Layout Shift.
3. web.dev: Web Vitals (prahové hodnoty LCP, INP a CLS).