Critical CSS
Critical CSS (neboli kritické CSS) je technika, která spočívá ve vyčlenění a vložení jen těch nejdůležitějších CSS stylů přímo do hlavičky stránky. Tyto styly se týkají pouze prvků, které jsou viditelné uživatelům ihned po načtení stránky — tedy takzvané above-the-fold části. Cílem je výrazně urychlit prvotní zobrazení webu, protože prohlížeč nemusí čekat na načtení velkých externích CSS souborů.
Použití critical CSS má zásadní vliv na rychlost načítání, Core Web Vitals i celkový dojem z webu. Uživatel vidí první obsah rychleji, což snižuje míru okamžitého opuštění a zlepšuje konverze. Critical CSS se často kombinuje s asynchronním načítáním zbytku stylů, díky čemuž je výsledný proces velmi efektivní a zároveň zachovává plnou funkčnost webu.
K čemu se critical CSS hodí:
- urychlení načtení první obrazovky – prohlížeč má hned k dispozici klíčové styly
- zlepšení skóre PageSpeed Insights
- optimalizace pro mobilní zařízení
- snížení CLS (layout shift) způsobeného pozdě načtenými styly
Ukázka jednoduché implementace critical CSS — vložení nutných stylů do hlavičky a načtení kompletního stylesheetu asynchronně:
<head>
<style>
/* Critical CSS – jen pro prvky viditelné po načtení */
header {
background: #f5f5f5;
padding: 20px;
}
.intro-title {
font-size: 2rem;
margin: 0;
}
</style>
<!-- Asynchronní načtení hlavního CSS souboru -->
<link
rel="preload"
href="/css/main.css"
as="style"
onload="this.rel='stylesheet'"
>
<noscript>
<link rel="stylesheet" href="/css/main.css">
</noscript>
</head>
Critical CSS se obvykle generuje pomocí nástrojů jako PurgeCSS, Critical nebo Webpack plugins, které automaticky analyzují HTML šablony a vyberou pouze nejnutnější styly. Správné použití critical CSS je jednou z nejefektivnějších optimalizačních technik a může mít výrazný dopad na rychlost načtení webu i na jeho SEO.
Tvoříme úspěšná webová řešení na míru, která jsou na internetu opravdu vidět. Projekt podpoříme kvalitním SEO a PPC kampaněmi s promyšleným konceptem. Sídlíme v Plzni, ale působíme po celé České republice.