Rychlost mobilních stránek: kde se ztrácejí sekundy a návštěvníci

Rozhovor s Kateřinou Horáčkovou, frontend vývojářkou specializující se na výkon

Jak se liší práce s rychlostí webu pro mobil oproti desktopu?

Základní princip je stejný, ale prioritizace se liší. Na desktopu si můžeš dovolit 200 KB JavaScriptu navíc a uživatel to nepocítí. Na mobilu je každý kilobajt navíc potenciálně 300 ms čekání na 4G síti a víc na slabém připojení.

Co konkrétně nejvíc škodí mobilnímu LCP?

Render-blocking resources. Fonty načítané bez font-display: swap, CSS soubory bez preload hints, a hlavně obrázky bez explicitních rozměrů. Prohlížeč na mobilu musí přepočítat layout pokaždé, když přijde nový element s neznámou velikostí. To je Cumulative Layout Shift plus zpomalení LCP najednou.

Jak to vypadá v číslech?

Testoval jsem e-shop, kde samotná oprava font loadingu a přidání width a height atributů na obrázky snížila LCP z 4,2 na 2,6 sekundy. Žádný velký refactoring, jen správné HTML atributy. Organická návštěvnost z mobilu vzrostla o 18 % za 6 týdnů.

Co třeba lazy loading?

Přehnaně používaný. Vidím weby, kde mají lazy loading na obrázcích v první viditelné oblasti stránky. To je přesně naopak, než jak by to mělo fungovat. Obrázky above the fold by se měly načítat okamžitě, ideálně s fetchpriority="high".

Jak přistupuješ k měření?

Real User Monitoring přes CrUX data, ne jen Lighthouse. Lighthouse je laboratorní test za ideálních podmínek. CrUX ti ukáže, jak tvůj web funguje na skutečných zařízeních skutečných návštěvníků. To jsou data, která Google používá pro hodnocení.