Lekce 13: Výkon & SEO — Kurz pro dospělé

⚡ Kapitola 1

Core Web Vitals

Google od 2021 hodnotí weby pomocí tří klíčových metrik výkonu — Core Web Vitals. Přímo ovlivňují pozici ve výsledcích vyhledávání.

LCP

≤ 2.5s

Largest Contentful Paint
Jak rychle se zobrazí největší prvek stránky (hero obrázek, nadpis)

INP

≤ 200ms

Interaction to Next Paint
Odezva na interakci uživatele (kliknutí, klávesnice). Od 2024 nahradil FID.

CLS

≤ 0.1

Cumulative Layout Shift
Jak moc se obsah posouvá při načítání (reklamy, fonty, obrázky bez rozměrů)

🔧

Jak měřit: Chrome DevTools → Lighthouse (F12 → Lighthouse → Analyze page load). Nebo online nástroj pagespeed.web.dev. Měřte na produkci, ne na localhost!

Kapitola 1 / 8 Další: Obrázky →

🖼️ Kapitola 2

Optimalizace obrázků

Obrázky tvoří průměrně 50–60 % velikosti stránky. Správná optimalizace je největší single win pro výkon.

Formát	Kdy použít	Výhody
WebP	Fotografie, složité grafiky	25–35 % menší než JPEG, podpora průhlednosti
AVIF	Moderní weby, high-quality foto	50 % menší než JPEG, nejlepší komprese
SVG	Ikony, loga, ilustrace	Vektorový, nekonečně škálovatelný, tiny size
PNG	Průhlednost, screenshoty	Bezztrátový, ale velký
JPEG	Fotografie (fallback)	Široká podpora, dobré pro foto

<!-- ✅ Moderní responzivní obrázek -->
<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img
    src="hero.jpg"
    alt="Popis obsahu obrázku"
    width="1200"          <!-- VŽDY uvádějte rozměry! -->
    height="600"          <!-- Zabrání CLS -->
    loading="lazy"        <!-- Odložené načtení -->
    decoding="async"      <!-- Asynchronní dekódování -->
    fetchpriority="high"  <!-- Pro LCP obrázek (hero) -->
  >
</picture>

<!-- ✅ Preload hero obrázku v <head> -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- CSS obrázky -->
.hero {
  background-image: image-set(
    url("hero.avif") type("image/avif"),
    url("hero.webp") type("image/webp"),
    url("hero.jpg")  type("image/jpeg")
  );
  aspect-ratio: 16/9; /* Zachová prostor = žádný CLS */
}

💡

Nástroje pro konverzi: Squoosh (squoosh.app) — online, drag & drop, AVIF/WebP výstup. CLI: sharp (Node.js), cwebp, avifenc. Vite plugin: vite-plugin-imagemin.

🧠 Kvíz: Proč je důležité uvádět atributy `width` a `height` u každého `<img>`?

Prohlížeč jinak obrázek nezobrazí Prohlížeč rezervuje místo pro obrázek ještě před jeho načtením — zabrání CLS (poskakování layoutu) Zrychlí stahování obrázku ze serveru Je to povinné pro HTML validaci

Kapitola 2 / 8 Další: JS & CSS výkon →

🚀 Kapitola 3

JS & CSS výkon

Resource hints — předběžné načítání

<!-- v <head> -->

<!-- preconnect — navázat TCP spojení dopředu -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com" crossorigin>

<!-- preload — načíst kritický zdroj dopředu -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- prefetch — načíst příští stránku do cache -->
<link rel="prefetch" href="/o-nas">

<!-- DNS prefetch — rychlejší DNS pro external zdroje -->
<link rel="dns-prefetch" href="https://analytics.google.com">

JavaScript — defer a async

<!-- ❌ Blokuje parsování HTML! -->
<script src="app.js"></script>

<!-- ✅ defer — stáhne paralelně, spustí po parsování HTML -->
<script src="app.js" defer></script>

<!-- ✅ async — stáhne paralelně, spustí ihned (nezávislé skripty) -->
<script src="analytics.js" async></script>

<!-- ✅ type="module" — automaticky defer, ES modules -->
<script type="module" src="app.js"></script>

CSS — critical path

<!-- Critical CSS inline v <head> (above-the-fold styly) -->
<style>
  /* Jen styly pro první viewport — ostatní načíst async */
  body { font-family: sans-serif; margin: 0; }
  .hero { background: #1a1a2e; color: white; padding: 4rem 2rem; }
</style>

<!-- Zbytek CSS načíst neblokujícím způsobem -->
<link rel="stylesheet" href="styles.css"
  media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Fonty — font-display

@font-face {
  font-family: 'MůjFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Zobrazí fallback font ihned, zamení po načtení */
  /* optional: nezobrazí font vůbec pokud se nestáhne rychle */
  /* block: čeká na font (špatné pro LCP) */
}

/* Preload fontu v HTML */
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Kapitola 3 / 8 Další: SEO →

🔍 Kapitola 4

On-page SEO

SEO (Search Engine Optimization) je souhrn technik, které pomáhají vyhledávačům pochopit a správně zobrazit váš web. Technické SEO začíná ve správném HTML.

Hierarchie nadpisů

<!-- ✅ Správně — jedna H1 na stránku, logická hierarchie -->
<h1>Kapesní nože — Nejlepší výběr 2025</h1>
  <h2>Nerezové nože</h2>
    <h3>Victorinox Swiss Army</h3>
    <h3>Gerber Gear</h3>
  <h2>Lovecké nože</h2>

<!-- ❌ Špatně — přeskakování úrovní, více H1 -->
<h1>Nože</h1>
<h1>Produkty</h1> <!-- Druhé H1! -->
<h3>Victorinox</h3> <!-- Přeskočilo H2 -->

URL struktura

❌ Špatně	✅ Správně
`/p?id=42&cat=3`	`/kapesni-noze/victorinox-classic`
`/KapesniNoze`	`/kapesni-noze` (lowercase, pomlčky)
`/page1.html`	`/o-nas` (popisná URL)
různé URL pro stejný obsah	canonical URL: `<link rel="canonical" href="...">`

Interní prolinkování a alt text

<!-- Popisné anchor texty -->
<a href="/kapesni-noze/victorinox">Victorinox Classic nůž</a>
<!-- Ne: <a href="...">klikněte zde</a> -->

<!-- Alt texty popisují obsah obrázku -->
<img src="victorinox.webp" alt="Victorinox Classic červený kapesní nůž 58mm">
<!-- Ne: alt="nůž" nebo alt="img_001.jpg" -->

<!-- robots.txt -->
User-agent: *
Disallow: /admin/
Disallow: /cart/
Allow: /

<!-- Sitemap -->
<link rel="sitemap" type="application/xml" href="/sitemap.xml">

🧠 Kvíz: Co je `<link rel="canonical">` a kdy ho použijete?

Odkaz na hlavní stylesheet stránky Říká vyhledávačům, která URL je "hlavní" — zabraňuje penalizaci za duplicitní obsah Odkaz na favicon stránky Definuje hlavní navigaci stránky

Kapitola 4 / 8 Další: Meta tagy →

🏷️ Kapitola 5

Meta tagy & Open Graph

Meta tagy v <head> poskytují informace o stránce pro vyhledávače, sociální sítě a sdílení odkazů.

Kompletní <head> šablona pro SEO

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Kapesní nože | Victorinox, Gerber | MůjShop.cz</title>

<meta property="og:type"        content="website">
  <meta property="og:title"       content="Kapesní nože — MůjShop.cz">
  <meta property="og:description" content="Nejlepší výběr kapesních nožů za nejlepší ceny.">
  <meta property="og:image"       content="https://www.mujshop.cz/og-noze.jpg">
  
  <meta property="og:url"         content="https://www.mujshop.cz/kapesni-noze">
  <meta property="og:locale"      content="cs_CZ">
  <meta property="og:site_name"   content="MůjShop.cz">

<meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:title"       content="Kapesní nože — MůjShop.cz">
  <meta name="twitter:description" content="Nejlepší výběr kapesních nožů.">
  <meta name="twitter:image"       content="https://www.mujshop.cz/og-noze.jpg">

<link rel="icon"             href="/favicon.ico" sizes="any">
  <link rel="icon"             href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest"         href="/manifest.webmanifest">

<link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" as="image" href="/hero.webp">
</head>
<body>
  <h1>Kapesní nože — nejlepší výběr</h1>
  <p>Stránka s kompletním SEO <head>.</p>
  <p style="margin-top:1rem;font-size:0.85rem;color:#666">
    Zkontrolujte zdroj stránky (Ctrl+U) pro přehled.
  </p>
</body>
</html>

Kapitola 5 / 8 Další: Schema.org →

🗂️ Kapitola 6

Strukturovaná data — Schema.org

Strukturovaná data (JSON-LD) říkají vyhledávačům přesně, co je váš obsah. Google je může zobrazit jako "rich snippets" — hodnocení hvězdičkami, cena produktu, FAQ přímo ve výsledcích.

<!-- JSON-LD v <head> nebo na konci <body> -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Victorinox Classic SD",
  "description": "Kapesní nůž Victorinox Classic s pilníkem a nůžkami.",
  "image": "https://www.mujshop.cz/victorinox-classic.jpg",
  "brand": {
    "@type": "Brand",
    "name": "Victorinox"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "CZK",
    "price": "299",
    "availability": "https://schema.org/InStock",
    "url": "https://www.mujshop.cz/victorinox-classic"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "127"
  }
}
</script>

<!-- FAQ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Jak se čistí kapesní nůž?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Kapesní nůž čistěte vlhkým hadříkem, nikdy v myčce..."
      }
    }
  ]
}
</script>

🧪

Testování: Google Rich Results Test — search.google.com/test/rich-results. Schema.org Validator — validator.schema.org. Google Search Console → Vylepšení → strukturovaná data.

🧠 Kvíz: Jaký je doporučený formát pro vkládání strukturovaných dat Schema.org?

Microdata (atributy itemscope, itemprop v HTML) RDFa atributy přímo v HTML elementech JSON-LD ve <script type="application/ld+json"> XML soubor přiložený v <head>

Kapitola 6 / 8 Další: Cvičení →

💪 Kapitola 7

Praktické cvičení — Optimalizovaná produktová stránka

Vytvořte HTML stránku produktu s kompletním SEO headem (title, description, og:*, canonical), správnou H1/H2 hierarchií, Schema.org Product JSON-LD, a optimalizovaným obrázkem (picture, loading="lazy", width, height).

📋

Checklist: <title> (50–60 znaků), <meta name="description"> (150–160 znaků), og:title/description/image/url, <link rel="canonical">, jedna <h1>, <picture> s WebP a fallback, Schema.org Product, správný alt text.

Vaše řešení

🏅

Odznak: Web Performance Expert

Zvládáte Core Web Vitals, optimalizaci obrázků, SEO a strukturovaná data.

Kapitola 7 / 8 Další: Taháček →

📌 Kapitola 8

Taháček — rychlá reference

Výkon — checklist

✅ Obrázky v WebP/AVIF, width+height, loading="lazy"
✅ <link rel="preconnect"> pro CDN, fonty, API
✅ <script defer> nebo type="module" pro JS
✅ font-display: swap pro webové fonty
✅ Gzip/Brotli komprese na serveru
✅ Cache-Control hlavičky pro statické soubory

SEO — checklist

✅ <title> 50–60 znaků, klíčové slovo první
✅ <meta name="description"> 150–160 znaků
✅ <link rel="canonical"> na každé stránce
✅ Jedna <h1>, logická hierarchie H2/H3
✅ Popisné alt texty u obrázků
✅ URL: lowercase, pomlčky, popisné

Open Graph šablona

<meta property="og:type"        content="website">
<meta property="og:title"       content="Název stránky">
<meta property="og:description" content="Popis stránky">
<meta property="og:image"       content="https://domena.cz/og.jpg">
<meta property="og:url"         content="https://domena.cz/stranka">

Schema.org produkt (zkráceno)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Název produktu",
  "offers": { "@type": "Offer", "price": "299", "priceCurrency": "CZK" },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "reviewCount": "100" }
}
</script>

Lekce 13 dokončena! Lekce 14: Deployment →

Výkon webu
& SEO

Core Web Vitals

🎮 Lighthouse Score Simulátor

Optimalizace obrázků

🧠 Kvíz: Proč je důležité uvádět atributy `width` a `height` u každého `<img>`?

JS & CSS výkon

Resource hints — předběžné načítání

JavaScript — defer a async

CSS — critical path

Fonty — font-display

On-page SEO

Hierarchie nadpisů

URL struktura

Interní prolinkování a alt text

🧠 Kvíz: Co je `<link rel="canonical">` a kdy ho použijete?

Meta tagy & Open Graph

Strukturovaná data — Schema.org

🧠 Kvíz: Jaký je doporučený formát pro vkládání strukturovaných dat Schema.org?

Praktické cvičení — Optimalizovaná produktová stránka

Odznak: Web Performance Expert

Taháček — rychlá reference

Výkon — checklist

SEO — checklist

Open Graph šablona

Schema.org produkt (zkráceno)

Výkon webu& SEO

Core Web Vitals

🎮 Lighthouse Score Simulátor

Optimalizace obrázků

🧠 Kvíz: Proč je důležité uvádět atributy width a height u každého <img>?

JS & CSS výkon

Resource hints — předběžné načítání

JavaScript — defer a async

CSS — critical path

Fonty — font-display

On-page SEO

Hierarchie nadpisů

URL struktura

Interní prolinkování a alt text

🧠 Kvíz: Co je <link rel="canonical"> a kdy ho použijete?

Meta tagy & Open Graph

Strukturovaná data — Schema.org

🧠 Kvíz: Jaký je doporučený formát pro vkládání strukturovaných dat Schema.org?

Praktické cvičení — Optimalizovaná produktová stránka

Odznak: Web Performance Expert

Taháček — rychlá reference

Výkon — checklist

SEO — checklist

Open Graph šablona

Schema.org produkt (zkráceno)

Výkon webu
& SEO

🧠 Kvíz: Proč je důležité uvádět atributy `width` a `height` u každého `<img>`?

🧠 Kvíz: Co je `<link rel="canonical">` a kdy ho použijete?