Know-how

To nejdůležitější o rychlosti webu.

📄️ Proč rychlost webu?

Psychologie, konverze a Google. Proč byste měli i vy mít rychlý web?

📄️ Proč monitoring?

Měření rychlosti jednou za čas nestačí. Bez kontinuálního monitoringu rychlosti neodhalíte skryté problémy, nebudete mít historii dat pro analýzu a snadno přehlédnete trendy, které mohou stát váš web konverze a návštěvníky.

📄️ LCP element

Pro optimalizaci LCP je zásadní umět najít „prvek LCP“, což je největší prvek ve viditelné části prohlížeče.

📄️ LCP optimalizace

Pojďme se společně podívat, jaké problémy s metrikou Largest Contentful Paint (LCP) vás mohou potkat a jak metriku také co nejefektivněji optimalizovat.

📄️ CLS optimalizace

Pojďme se společně podívat, jak se problémům s CLS vyvarovat a také, jak je můžete odstranit, když už se stanou.

📄️ INP optimalizace

INP není úplně nejjednodušší metrikou k optimalizaci, proto jsme z naší praxe vybrali nejčastější problémy a způsoby jak je vyřešit.

📄️ BFcache

Back/forward cache (nebo BFcache) je optimalizace prohlížeče, která umožňuje okamžitou navigaci zpět a vpřed. Výrazně zlepšuje zážitek z prohlížení, zejména pro uživatele s pomalejšími sítěmi nebo zařízeními.

📄️ Komprese Gzip a Brotli

V PageSpeed.cz často rozebíráme velmi konkrétní problémy. I tak se nestačím divit, do jakých detailů se dostaneme. Stejné to bylo s kompresí dat, na kterou se podíváme v tomto článku.

📄️ Navigation Types

Znát různé typy navigace je důležité, protože některé z nich jsou daleko rychlejší než jiné. Cílem z pohledu optimalizace rychlosti webu je převést co nejvíce uživatelů na rychlé typy navigace.

📄️ Speculation Rules

Speculation Rules API nám přináší možnost jak přednačíst, nebo dokonce předběžně vykreslit jinou stránku. Tímto způsobem můžeme dosáhnout téměř instantního načtení stránky, na kterou uživatel přechází a zlepšit tak jeho celkový zážitek z webu.

📄️ CLS: Jak držet výšku?

V tomto textu se dozvíte, proč a jak je potřeba na úrovni HTML nebo CSS zajistit rozměry elementů, které se do stránky vkládají asynchronně, jako jsou prvky <img>, <iframe> nebo javascriptové komponenty.

📄️ Efektivní DOM

Velká a neefektivní struktura stránky (Document Object Model, tedy DOM) může výrazně zpomalit váš web a negativně ovlivnit metriky Core Web Vitals. Udržet ji v rozumné velikosti a maximálně efektivní je naprosto zásadní pro celkovou technickou výkonnost vašeho projektu a bude mít vliv na rychlost odezvy interakcí (metrika INP).

📄️ Optimalizace webfontů

Svět webových fontů je jako salón krásy - všichni si chceme dopřát to nejlepší, ale ne vždycky jsme ochotni čekat, než kadeřník dokončí svou práci. A vaši návštěvníci? Ti jsou obzvlášť netrpěliví.

📄️ LCP: Lazy load obrázků

Líné načtení obrázků a dalších prvků doporučujeme jako jednu ze základních a zároveň velmi efektivních metod optimalizace rychlosti načtení stránky. Doporučujeme vám konzervativně odložit načtení všech obrázků mimo první viewport. Dejte si pozor na aplikaci líného načtení na obrázky, které jsou LCP elementem, což může rychlost naopak zhoršit.

📄️ Web Vitals v prohlížeči

Core Web Vitals jsou Metriky, které používáme k hodnocení výkonu webových stránek v oblastech jako jsou rychlost načítání, interaktivita a stabilita layoutu. Tyto metriky jsou stále více důležité pro zajištění dobré uživatelské zkušenosti a Google je používá jako jedno z hledisek pro umístění ve výsledcích vyhledávání.

📄️ INP a setTimeout()

Metoda s použitím funkce setTimeout() slouží k optimalizaci dlouhých úloh v JavaScriptu, které blokují uživatelské interakce a zhoršují tím metriky jako Total Blocking Time (TBT) nebo Interaction to Next Paint (INP), která je důležitou součástí sady Core Web Vitals.

📄️ Optimalizace obrázků

I vy, obyčejní smrtelníci, můžete zkrotit své obrázky a přimět je, aby pracovaly pro vás, ne proti vám. Stačí použít WebP nebo AVIF, dobře komprimovat a nezapomenout na lazy loading.

📄️ Optimalizace Reactu

React je oblíbený nástroj pro vývoj moderních webů, ale rychlost a interaktivita nemusí být vždy automatická. V tomto článku představíme klíčové techniky pro optimalizaci Core Web Vitals – od hydratace přes až po práci s DOMem – a ukážeme vám, jak je využít k zrychlení vašich React projektů.

📄️ Optimalizace backendu

Backend hraje v optimalizaci rychlosti webu zásadní roli, protože správná optimalizace na straně kódu a serveru může eliminovat zpoždění, které často vzniká při zpracování požadavků a doručování obsahu.

📄️ Optimalizace rychlosti WordPressu

Rychlost webu není jen kosmetický detail – je to zásadní faktor ovlivňující úspěšnost vašeho online podnikání. Za pomalý WordPress často může špatná volba pluginů, nabobtnalé šablony nebo nedostatek znalostí o optimalizaci rychlosti webu.

📄️ Cookie lišty a rychlost webu

Máte vyladěnou rychlost webu? Výborně, ale to jste možná ještě nenasadili cookie lištu.

📄️ HTML <head> a rychlost

Máme rádi WebExpo a máme rádi performance. A navíc máme rádi Harryho Robertse, protože jeho přednášky a články jdou vždy do hloubky.

📄️ WebP obrázky

Rychlost načítání webu je často otázkou vteřin. A právě obrázkový formát WebP může být tajnou zbraní, jak ušetřit kilobajty a přiblížit se dokonalému výkonu.

📄️ Studie: Chaty a rychlost

Live chat používá dvacet procent provozovatelů českých e-shopů. Jak ale tyto komponenty ovlivní rychlost webu?

📄️ Studie: CSS jeden nebo více?

V týmu PageSpeed.cz máme hned několik „evergreen“ diskuzí, na kterých se neshodne celý tým. Jedná z věčných otázek zní: Je rychlejší mít hodně malých CSS souborů rozdělených po komponentách, nebo jeden velký?

📄️ Synth vs. CrUX vs. RUM

Pojďme si v tomto textu ujasnit rozdíly mezi různými typy měření rychlosti webu. Pobavme se o syntetice („synth“), datech od uživatelů Googlu („CrUX“) a datech od všech uživatelů („RUM“).

📄️ Chrome UX Report (CrUX)

Chrome UX Report (CrUX) je veřejný datový soubor poskytovaný společností Google, který shromažďuje a anonymně analyzuje údaje o skutečné uživatelské zkušenosti při prohlížení webu pomocí prohlížeče Chrome.

📄️ Performance budgets

Performance budgets je metodika, který slouží pro udržení rychlosti webových stránek na námi stanovené úrovni. Představme si „budget“ jako limit hodnot pro různé metriky.