DesignGrid CZ Logo DesignGrid CZ Kontaktujte nás
Kontaktujte nás

Core Web Vitals: Optimalizace pro Google

Pochopte, jak se měří rychlost a výkon webu. Konkrétní kroky ke zlepšení LCP, FID a CLS vašich stránek.

13 min čtení Pokročilý Březen 2026
Analytický dashboard s grafy výkonu webu, světlá témata s barevnými datovými body

Proč na Core Web Vitals záleží

Google začal měřit zkušenost uživatele jinak. Není to už jen o tom, jak rychle se stránka načte. Jde o to, jak se cítí při jejím používání. Když máte pomalý web, lidé odejdou. A Google to ví.

Core Web Vitals jsou tři klíčové metriky, kterými Google nyní hodnotí weby. Pokud je zanedbáte, můžete přijít o pozice ve vyhledávání. Ale nejde jen o SEO — jde o to, aby vaši návštěvníci měli dobrou zkušenost.

Počítač s otevřeným vývojářským nástrojem a metrikami výkonu v Chrome DevTools

Tři metriky, kterým musíte porozumět

Každá metrika měří jinou část uživatelské zkušenosti. Všechny tři jsou stejně důležité.

LCP (Largest Contentful Paint)

Jak dlouho trvá, než se na stránce objeví hlavní obsah. Měli byste dosáhnout pod 2,5 sekundy. To je čas od kliknutí na odkaz do chvíle, kdy se načte největší prvek na obrazovce.

FID (First Input Delay)

Jak dlouho čeká uživatel, než se stránka odpoví na jeho interakci. Klik na tlačítko, zadání do pole — všechno by mělo být do 100 milisekund. Jestliže je to pomalejší, bude to pro návštěvníky frustrující.

CLS (Cumulative Layout Shift)

Jak moc se prvky na stránce pohybují, zatímco se načítají. Když se stránka posunuje poté, co jste připraveni kliknout, je to otravné. Měl by být pod 0,1. To znamená téměř žádný posun.

Zlepšení LCP: Načtení obsahu

LCP je o rychlosti. Když člověk čeká na obsah, každá vteřina se počítá. Existují konkrétní věci, které můžete dělat.

Nejdříve optimalizujte obrázky. Nepotřebujete obrázky o velikosti 5MB. Použijte moderní formáty jako WebP — ty jsou o 30 % menší než JPEG. Také zvažte lazy loading. To znamená, že obrázky mimo obrazovku se nebudou načítat, dokud si na ně uživatel neposune.

Druhá věc je server. Pokud váš server reaguje pomalu, nemůžete nic dělat na klientské straně. Zvažte CDN — síť serverů po celém světě, která doručuje váš obsah blíž uživatelům. Rozdíl je obrovský, zvlášť pokud máte návštěvníky z různých zemí.

  • Optimalizujte obrázky na WebP formát
  • Implementujte lazy loading pro off-screen obrázky
  • Zmenšujte CSS a JavaScript soubory
  • Používejte CDN pro doručování obsahu
Graf znázorňující dobu načtení stránky s různými optimalizacemi, časová osa v sekundách
Mobilní telefon s interaktivním prvkem, prstem na tlačítku, responsivní animace

Zlepšení FID: Interaktivita

FID měří, jak dlouho čeká uživatel na odpověď. Klik na tlačítko, zadání textu — všechno by mělo být okamžité. Pokud váš JavaScript běží příliš dlouho, blokuje hlavní vlákno a stránka se nemůže odezva.

Problém je často v tom, že máte příliš JavaScript kódu. Třetí strany — analytika, reklamy, chat boti — všechny si vezou svůj kód. A když se všechny spustí dohromady, je to pomalu.

Řešení? Načítejte JavaScript asynchronně. To znamená, že se skript načte bez blokování zbytku stránky. Také oddělujte kritický JavaScript od zbytku. A upřímně — zamyslete se, zda opravdu potřebujete všechny ty skripty. Jednoduší web je často rychlejší web.

Tip: Použijte atribut defer nebo async na své script značky. defer znamená, že se skript spustí až po načtení HTML.

Zlepšení CLS: Stabilita rozvržení

CLS je nejjednodušší na opravu — ale také nejjednodušší na přehlédnutí. Jde o to, když se stránka pohybuje. Když klikáte na odkaz a stránka se posune, jste zmateni. Nebo si přečtete obsah a ten se posune pryč.

Nejčastější příčinou je načítání obrázků bez určené výšky. Prohlížeč neví, jak velký bude obrázek, takže vyhradí prostor až poté, co se obrázek načte. Výsledek? Obsah se posune dolů.

Oprava je snadná. Vždy zadejte šířku a výšku pro obrázky. V CSS to znamená aspect-ratio: 16 / 9; nebo konkrétní rozměry. Také pozor na prvky, které se načítají ze strany. Reklamy, chat okna, pop-upy — všechny mohou způsobit posun. Vyhraďte si pro ně prostor předem.

Vizuální ukázka posunu prvků na stránce, červené šipky ukazující pohyb obsahu

Nástroje pro měření

Jak víte, jestli jste udělali dobrou práci? Musíte měřit. Tady jsou nejlepší nástroje.

Google PageSpeed Insights

Zdarma od Googlu. Zadejte URL a vidíte Core Web Vitals skóre. Má také konkrétní doporučení, co opravit. Používejte toto pravidelně — ideálně po každé větší změně.

Chrome DevTools

Vestavěné vývojářské nástroje v Chrome. Otevřete F12, jděte na záložku Performance. Tam vidíte vše — jak dlouho trvá co načíst, kde se čeká. Je to trochu složitější, ale mnohem detailnější.

Lighthouse

Také od Googlu, integrován v Chrome DevTools. Spustí komplexní audit vaší stránky. Nejen výkon — také přístupnost, SEO, best practices. Skvělý pro celkový přehled.

WebPageTest

Pokročilejší nástroj. Testuje z různých míst na světě, různé připojení. Vidíte filmy o tom, jak se stránka načítá. Super pro diagnostiku problémů na pomalém internetu.

Začněte dnes

Core Web Vitals nejsou těžké pochopit. Jsou to tři jednoduché metriky — jak rychle se stránka načte, jak brzy reaguje, jak moc se pohybuje. A všechny tři se dají zlepšit.

Nejdůležitější věc? Začněte měřit. Použijte PageSpeed Insights, zjistěte, kde jste teď. Pak si vezměte jednu metriku a pracujte na ní. Optimalizujte obrázky. Zmenšujte JavaScript. Vyhraďte si prostor pro prvky. Postupně se to zlepší.

A pamatujte — není to jen o Googlu. Je to o vašich uživatelích. Když se jim web líbí, zůstanou, vrátí se, koupi. To je důvod, proč na tom záleží.

Poznámka o obsahu

Tento článek je informativní materiál určený pro vzdělání a porozumění Core Web Vitals a optimalizaci výkonu webu. Konkrétní výsledky se mohou lišit v závislosti na vašem webu, serveru a technické konfiguraci. Doporučujeme testovat změny ve vašem prostředí a monitorovat výsledky. Při složitějších optimalizacích se poraďte se zkušeným webovým vývojářem.