Tentokrát nahlédneme do světa Next.js a zhodnotíme si HTTP/3. Ve Woltu vymysleli plugin s názvem BlurHash, tak si rozebereme, k čemu je to dobré a do diářů si na příští rok vyznačíme červeně měsíc květen.

## Next.js conf

Na Next.js konferenci byla představena nová 10 verze tohoto populáního React frameworku, který přináší několik zajímavých novinek. První z nich jsou [vlastní performance metriky](https://nextjs.org/analytics), souhrnně nazývané jako RES - real experience score.

![](/uploads/yourtruelighthouse-001.jpeg "    ")

Druhou zásadní novinkou je [Image komponenta](https://nextjs.org/docs/basic-features/image-optimization), která má řešit všechny běžné neduhy s obrázky spojené. Na druhou stranu je vývojáři kritizována, že jde o “black box” bez kontroly. Podrobněji vše rozebíráme ve videu níže.

## HTTP/3

Google implementoval již [třetí verzi protokolu](https://blog.chromium.org/2020/10/chrome-is-deploying-http3-and-ietf-quic.html) pohánějící naše weby. Zlepšit by se měla datová propustnost a latence. Naopak se upustilo od [prioritizace zdrojů](https://http3-explained.haxx.se/en/h3/h3-h2).

## BlurHash

Pokud vás stejně jako designéry z Woltu nebaví nudné šedé načítací plochy, můžete zkusit jejich nejnovější [plugin BlurHash](https://blurha.sh/). Na druhou stranu pozor na celkovou dobu času dekódování, kterou BlurHash spotřebuje.

## Core Web Vitals jako parametr pro výsledky vyhledávání

Květen 2021 bychom si měli pečlivě poznamenat do diářů. Google oznámil, že od tohoto data začne zahrnovat Core Web Vitals jako [parametr pro řazení výsledků vyhledávání](https://webmasters.googleblog.com/2020/11/timing-for-page-experience.html). Vývojářům tedy zbývá poslední půlrok rychlost webů vyladit.

Všechna témata jsme podrobně rozebrali na našem livestreamu Na rychlosti záleží, ze kterého přinášíme sestříhaný záznam.

<div class="video"><div class="video__holder"><iframe width="560" height="315" src="https://www.youtube.com/embed/Rlif-ARLy_o" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>![](/uploads/novinky-cover-2.jpg)</div></div>

Rozhovory, případové studie, živé ukázky nástrojů, detailní tipy, ale také novinky. A právě o novinkách, které jsme si ukázali v prvním díle je tento článek.

Cílem je dostat téma rychlosti webů mezi širší odbornou veřejnost a hlavně pomoci našim sledujícím dělat své weby rychlejší.

## První článek na našem blogu - proč mít rychlý web?

Přečtěte si [nejnovější článek ](https://pagespeed.cz/blog/proc-mit-rychly-web)od Martina Michálka, který shrnuje, proč je důležité mít rychlý web. Od psychologie, vlivu na konverze až po velmi často zmiňovaný Google.

![](/uploads/pagespeed_16-9-001.jpeg " ")

## PageSpeed.cz - aktualizace nástroje pro testování

Do našeho nástroje [pro testování webů](https://pagespeed.cz/) jsme přidali několik nových vlastností.

Výsledky syntetických testů jsou nyní podrobnější. Kromě Lighthouse performance score (LPS) se můžete nově podívat i na hodnoty jednotlivých metrik, se kterých se LPS počítá.

**![ ](/uploads/pagespeed_16-9-002.jpeg " ")**

Také výsledky z Chrome UX reportu se dočkaly aktualizace. Nově je možné sledovat **metriky v čase.** K tomu slouží nové grafy.

**![ ](/uploads/pagespeed_16-9-003.jpeg " ")**

[Změřte si svůj web](https://pagespeed.cz/) a omrkněte tyto novinky.

Detailně si vše brzy představíme v některém z dalších článků, kde odhalíme i možnost, jak si zobrazit detailní report z Lighthouse pro kterýkoliv den.

## Lighthouse Score for All

Pokud znáte [LPS](https://www.vzhurudolu.cz/prirucka/metrika-lps) jako jedno číslo, pak pro vás bude zajímavé [tohle video](https://www.youtube.com/watch?v=TT-2rQsHyqQ) z Jamstack Conf. Henri Helvetica ve své přednášce ukazuje, z čeho se LPS skládá a jak se počítá.

Na závěr pak přidává několik velmi zajímavých statistik.

## Glyphhanger - nástroj pro optimalizaci fontů

Blížíme se do finále. Dalším tipem je „utilitka“ [Glyphanger](https://github.com/filamentgroup/glyphhanger). Díky tomuto nástroji můžete rychle optimalizovat fonty ve vašem projektu. I se základním nastavením můžete dosáhnout uspokojivých výsledků.

A pokud jste fajnšmekři, můžete se pustit i do detailního nastavení a vymačkat optimalizaci na maximum. Pokud vás zajímá jak na to, navštivte webinář Michala Matušky [o variabilních fontech](https://www.vzhurudolu.cz/kurzy/webinar-variabilni-fonty).

## Označování rychlosti webu v mobilním Chrome

Pomyslná třešnička na dortu. Mobilní Chrome od verze 85 přidává badge s hodnocením rychlosti navštěvovaného webu. [V článku](https://speedcurve.com/blog/fast-badging-for-better-ux/), který o této novince píše, jsou pak zmíněné další koncepty, jak s tímto označením pracovat.

Líbí se vám tento nápad? My jsme se o tom společně chvíli bavili, udělali anketu mezi diváky a zjistili jsme, že je to věc, která minimálně teď vyvolává spoustu zajímavých otázek, názorů a rozporů.

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FPageSpeed.cz%2Fvideos%2F696614464290152%2F&t=510" width="100%" height="500" scrolling="no" frameBorder="0" allowTransparency allowFullScreen></iframe>

Hranice lidské mysli pro rozpoznání okamžité reakce rozhraní leží na nízkých stovkách milisekund. Většina dnešních webů ji při načítání pokořit nezvládne, ale každé zlepšení se počítá.

Zrychlení webu vám proto pravděpodobně **zvýší konverze**, říkají to všechny možné případové studie. I proto se Google rozhodl, že bude rychlé weby podporovat a výsledkem je, že vám rychlost může **pomoci i s návštěvností** nebo třeba **cenou za reklamu**.

![](/uploads/img000.png "Obrázek: Google rychlé weby podporuje, protože rychlost má vliv na konverze. A také proto, že lidská mysl nedisponuje nekonečnou trpělivostí.")

Podívejme se nejprve na jádro pudla, které leží v psychologii lidské trpělivosti při práci s uživatelským rozhraním.

## **Psychologie**

Když v roce 1968 dělal R. B. Miller první testy, které měly zjistit jak uživatelé tehdejších sálový počítačů vnímají rychlost odezvy terminálových rozhraní, pravděpodobně netušil, že [jeho studie](https://www.nngroup.com/articles/response-times-3-important-limits/) bude jednou z nejcitovanějších v oblasti i po více než padesáti letech.

Kromě jiného ve své práci přišel s tím, že magická hranice, kdy reakci rozhraní vnímáme jako okamžitou, leží kolem 100 milisekund.

![](/uploads/psychologie.png "     ")

Pana Millera by nejspíš dost překvapilo, že ani v roce 2020 neumíme načíst a vykreslit weby tak, aby na ně uživatelé nemuseli nervózně čekat. Jako uživatelé bohužel všichni víme, že do stovek milisekund máme s weby sakramentsky daleko.

<div class="b-tip b-tip--lg"><div class="b-tip__inner"><svg viewBox="0 0 28 38"><path d="M14 0c-.9 0-1.9.1-2.8.3-5.5 1.1-9.9 5.5-11 11-1 5.2 1 10 4.4 13.1.9.8 1.4 1.9 1.4 3V32c0 2.2 1.8 4 4 4h.6c.7 1.2 2 2 3.4 2s2.8-.8 3.4-2h.6c2.2 0 4-1.8 4-4v-4.6c0-1.1.4-2.2 1.3-2.9C26.2 21.9 28 18.2 28 14c0-7.7-6.3-14-14-14zm4 32h-8v-2h8v2zm0-4h-8v-2h8v2zm-3-11.2V22h-2v-5.2l-3.7-3.6 1.4-1.4L14 15l3.2-3.2 1.4 1.4-3.6 3.6z" fill="#fec245"></path></svg><p>Jen <a href="https://groups.google.com/a/chromium.org/g/chrome-ux-report/c/MP3_Q_BOJ8s/m/lFwNz8TxAgAJ" target="_blank">47 % webů</a> splňuje doporučený limit prvního vykreslení obsahu.</p></div></div>

Technologie se od dob terminálů sálových počítačů k moderním webům ve smartphonech razantně posunuly, lidská psychologie však ne.

Z nastavení lidské mysli však také vyplývá, že pokud uživatelské rozhraní zrychlíte, bude lépe plnit své cíle.

## **Vliv na konverze**

Souvislosti rychlosti webů s konverzním poměrem je fakt, který vychází ze zjištění R. B. Millera a dalších, ale také z praktických případových studií, které v posledních deseti letech přibývají jako houby po dešti.

Všechny studie dokládají, že se **zrychlení pozitivně projevilo na byznysu nebo cílech majitele webu**.

### **Míra okamžitého opuštění**

„Bounce rate“ patří k nejsledovanějším obecným analytickým metrikám. Z čísel a grafů se má za to, že zrychlením úvodního vykreslení webu zlepšíme také míru okamžitého opuštění.

![](/uploads/pasted-image-0-2.png "Obrázek: Korelace rychlosti a bounce rate na webu Vzhůru dolů (Zdroj: SpeedCurve)")

Pro příklady vlivu rychlosti na míru okamžitého opuštění se vydáme do světa:

* 53 % návštěv bude pravděpodobně ukončeno, pokud se stránka načítá déle než 3 sekundy. Jedna z nejznámějších případových studí pochází z roku 2016 od DoubleClick, který je dnes již součástí Googlu. ([Zdroj](https://www.thinkwithgoogle.com/intl/en-154/marketing-strategies/app-and-mobile/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/))
* Na webu Radins.com zlepšili rychlost vykreslení první obrazovky na desktopu a snížili tím míru okamžitého opuštění o 25 %. ([Zdroj](https://wpostats.com/2019/10/01/radins-conversion.html))

### **Počet shlédnutých stránek**

V některých oborech, zejména těch živených reklamou, rozhoduje počet shlédnutých stránek o byznysovém úspěchu či neúspěchu.

> _„V BBC jsme si všimli, že za každou sekundu, o kterou se zpozdí načtení stránky, odchází 10 % uživatelů. Pokud web BBC zpomaluje kvůli načtení, určité funkce se automaticky vypnou, aby se rychlost znovu zvýšila.“_
>
> — Matthew Clark, lead technical architect v BBC

Jaké známe případové studie o vlivu rychlosti na „pageviews“?

* Když Shopzilla snížila načtení stránky o pět vteřin, získala o 12 % lepší konverzní poměr a o 25 % více shlédnutí stránek.
* Ve Financial Times přidali ke každému zobrazení stránky zpoždění o jednu sekundu a zaznamenali pokles o 4,9 % v počtu shlédnutých stránek. Třísekundové zpoždění vedlo k poklesu o 7,2 %. ([Zdroj](https://medium.com/ft-product-technology/a-faster-ft-com-10e7c077dc1c))

### **Konverzní poměr**

Když se rychlost zlepšuje, konverzní poměr s tím jde ruku v ruce. Pokud provozujete e-shop, tohle vás bude zajímat. U našich klientů není obvykle snadné izolovat vliv optimalizace rychlosti od jiných vlivů, ale jednou jsme měli štěstí.

![](/uploads/pasted-image-0-3.png "Obrázek: Českému porovnávači nabídky e-shopů Srovname.cz pomohl náš Martin Michálek zrychlením webu pomohli zvýšit konverzní poměr na mobilech o 25 % - [Zdroj](https://www.vzhurudolu.cz/blog/58-rychlost-srovname-cz)")

* Na webu Rossignol.com zlepšili dobu načítání o 1,9 sekundy, což ve srovnání s předchozím rokem přispělo k 94 % zlepšení konverzního poměru. ([Zdroj](https://www.fasterize.com/en/blog/fasterize-helps-rossignol-divide-its-web-page-load-time-by-10/))
* Walmart si už v roce 2012 spočítal, že každé zrychlení načtení homepage o vteřinu zvýší konverze jejich webu o 2 %. ([Zdroj](https://www.slideshare.net/devonauerswald/walmart-pagespeedslide/46))

Případových studií je na světě ale celá řada, hezky je sbírá web [wpostats.com](https://wpostats.com/).

Jak je z uvedených čísel vidět, rychlost má vliv na celou řadu důležitých metrik. To je důvod, proč se lidé v Googlu rozhodli na tento dobře měřitelný faktor uživatelské zkušenosti zaměřit.

## **Argument Googlem**

Občas jsme svědky podobných rozhovorů:

> _— „A proč vlastně máte v úmyslu rychlost řešit?“_
>
> _— „Chce to po nás Google“_

Může z nich vyplývat představa, že celý obor rychlosti webů je postavený na výstupu několika interních korporátních schůzek v Googleplexu. Představujeme si, že by na nich bylo přítomno několik manažerů, inženýrů a hlavně jedna velká křišťálová koule.

<div class="b-tip b-tip--lg"><div class="b-tip__inner"><svg viewBox="0 0 28 38"><path d="M14 0c-.9 0-1.9.1-2.8.3-5.5 1.1-9.9 5.5-11 11-1 5.2 1 10 4.4 13.1.9.8 1.4 1.9 1.4 3V32c0 2.2 1.8 4 4 4h.6c.7 1.2 2 2 3.4 2s2.8-.8 3.4-2h.6c2.2 0 4-1.8 4-4v-4.6c0-1.1.4-2.2 1.3-2.9C26.2 21.9 28 18.2 28 14c0-7.7-6.3-14-14-14zm4 32h-8v-2h8v2zm0-4h-8v-2h8v2zm-3-11.2V22h-2v-5.2l-3.7-3.6 1.4-1.4L14 15l3.2-3.2 1.4 1.4-3.6 3.6z" fill="#fec245"></path></svg><p>Google v rámci Chrome UX Report sleduje rychlost <a href="https://groups.google.com/a/chromium.org/g/chrome-ux-report/c/MP3_Q_BOJ8s/m/lFwNz8TxAgAJ" target="_blank">takřka 8 miliónů</a>.</p></div></div>

Jsou doporučení Googlu směrem k rychlosti webů postavená na vodě? Nic nemůže být dále od pravdy.

Největší vyhledávač světa zaměstnává vynikající experty v oblasti technologie rychlosti, ale i výzkumníky, za kterými stojí data. Příkladem z poslední doby může být text [The Science Behind Web Vitals](https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html), který ukazuje, na jakých datech se stavěla doporučení ohledně nových metrik.

Google prostě staví na datech a ta stále silněji ukazují provázanost dobrého uživatelského prožitku s rychlostí načítání a interakcí s webem.

### **Web Vitals a Page Experience Signal**

V nedávném blogpostu [Evaluating page experience for a better web](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html) lidé z Googlu oznámili, že pracují na novém hodnotícím signálu „Page Experience“, v němž bude rychlost hrát významnou roli.

![](/uploads/pasted-image-0-10.png "Obrázek: Google se v signálu „Page Experience“ zaměří na bezpečnost, uživatelský zážitek a taky rychlost.")

Není to poprvé, kdy vyhledávač oznámil, že bude na rychlost hledět.
Je to ale poprvé, kdy narovinu řekl, jak bude rychlost měřit. Zaměří se na metriky [Web Vitals](https://www.vzhurudolu.cz/prirucka/web-vitals), získané od přímo od uživatelů prohlížeče Chrome a uložené v [Chrome UX Report](https://www.vzhurudolu.cz/prirucka/chrome-ux-report).

![](/uploads/pasted-image-0-9.png "Obrázek: Nejdůležitější metriky rychlosti pro každý web – Core Web Vitals.")

Nasazovat nový signál bude Google během roku 2021, takže neuškodí se na to připravit.

<div class="b-tip b-tip--lg"><div class="b-tip__inner"><svg viewBox="0 0 28 38"><path d="M14 0c-.9 0-1.9.1-2.8.3-5.5 1.1-9.9 5.5-11 11-1 5.2 1 10 4.4 13.1.9.8 1.4 1.9 1.4 3V32c0 2.2 1.8 4 4 4h.6c.7 1.2 2 2 3.4 2s2.8-.8 3.4-2h.6c2.2 0 4-1.8 4-4v-4.6c0-1.1.4-2.2 1.3-2.9C26.2 21.9 28 18.2 28 14c0-7.7-6.3-14-14-14zm4 32h-8v-2h8v2zm0-4h-8v-2h8v2zm-3-11.2V22h-2v-5.2l-3.7-3.6 1.4-1.4L14 15l3.2-3.2 1.4 1.4-3.6 3.6z" fill="#fec245"></path></svg><p>O Web Vitals máme <a href="https://pagespeed.cz/web-vitals.pdf" target="_blank">hezkou příručku v PDF</a>.</p></div></div>

S našimi klienty jsme se na Web Vitals už zaměřili. Podívejme se na jednotlivé metriky a doplňme je několika našimi úspěšnými optimalizacemi.

[LCP](https://www.vzhurudolu.cz/prirucka/metrika-lcp) (Largest Contentful Paint, aneb Vykreslení největšího obsahu):

![](/uploads/pasted-image-0-8.png "E-shopu ČistéDřevo.cz jsme pomohli odhalit problémy na backendu. Po úpravě se metrika LCP takto hezky zlepšila.")

[FID](https://www.vzhurudolu.cz/prirucka/metrika-fid) (First Input Delay, aneb První nečinnost procesoru):

![](/uploads/pasted-image-0-7.png "Sazce jsme pomohli identifikovat potíže v javascriptovém výkonu, které měl na svědomí kód v Google Tag Manageru a měla tedy negativní vliv na metriku FID. ")

[CLS](https://www.vzhurudolu.cz/prirucka/metrika-cls) (Cumulative Layout Shift, aneb Kumulativní posun layoutu):

![](/uploads/pasted-image-0-6.png "V rámci spolupráce s Pet Hardware náš Michal Matuška identifikoval a odstranil problémy s nechtěnými posuny layoutu během vykreslování.")

### **Google Ads a Mobile Speed Score**

Pokud investujete do reklamy provozované Googlem, jisté znáte [Mobile Speed Score](https://support.google.com/google-ads/answer/9069088), kterým Google hodnotí jednotlivé cílové stránky pro vaše kampaně.

Skóre rychlosti má vliv na cenu a pozici vašich inzerátů, takže vůbec není od věci se na něj trochu zaměřit.

Během jedné fáze spolupráce s našim největším klientem, [Livesport.cz](https://www.livesport.cz/), který nabízí rychlý servis pro sportovní výsledky, se s přispěním našich rad povedlo jejich skvělému týmu za půl roku výrazně vylepšit první vykreslení obsahu (FCP):
![](/uploads/pasted-image-0-5.png "Obrázek: Vývoj metriky FCP na Livesport.cz u uživatelů do února 2020.")

Následné vylepšení Speed Score v Google Ads bylo více než potěšující:

|  | srpen 2018 | leden 2019 |
| --- | --- | --- |
| Evropa | 4-7 | 9-10 |
| Japonsko | 1-2 | 10 |
| Afrika | 1-2 | 6-7 |
| Austrálie | 1 | 7-9 |
| Brazílie | 1-2 | 7 |

### **Výhody AMP webů**

U obsahových, a obzvláště zpravodajských webů, živených reklamou, často není efektivní optimalizace rychlosti možná.

V takových případech doporučujeme připravit extra verzi pomocí [technologie AMP](https://www.vzhurudolu.cz/prirucka/amp).

![](/uploads/pasted-image-0-4.png "Obrázek: AMP je v některých segmentech, jako je zpravodajství, Googlem upřednostňován. To má sice časem skončit, ale razantní zrychlení doručení obsahu pomocí AMP zůstává.")

Jeden náš klient například po nasazení AMP viděl více než trojnásobný růst návštěvnosti v některých jazykových mutacích jeho obsahového webu.

### **Vliv na pozice ve vyhledávačích**

Než Google nasadí signál Page Experience do praxe, bude možné o přímém vlivu rychlosti webu na SEO dlouze diskutovat.

Rychlost totiž není možné snadno izolovat od jiných signálů a studii korelace rychlosti s jejich umístěním ve vyhledávačích bychom tedy museli dělat na porovnání webů, které jsou prakticky totožné. Až takové weby najdeme, dáme vám vědět.

Ptáte na náš názor? Z veškeré komunikace Googlu jasně vyplývá, že rychlost považují za důležitý signál. Takže být výrazně pomalejší než vaše konkurence bychom vám rozhodně nedoporučovali.

Pokud ale vynecháme psychologické a byznysové důvody pro rychlost a zůstaneme u SEO, komunita se shoduje na jedné věci – je dobré mít rychlý server.

![](/uploads/pasted0-1.png "Obrázek: Korelace času TTFB (Time To First Byte) s pozicemi v Google. - [Zdroj](https://neilpatel.com/blog/does-speed-impact-rankings/)")

Metrika TTFB, tedy zjednodušeně rychlost serveru a infrastruktury, je podstatná nejen pro celkovou rychlost webu, ale pravděpodobně i pro umístění stránky ve vyhledávačích a také „crawl budget“, množství stránek z webu, které je schopen Google zpracovat.

![](/uploads/image-0.png "Naše doporučení zaměřit se na backend u tohoto celosvětově působícího klienta razantně zlepšilo metriky.")

Rychlost serveru, ale i klientského kódu má samozřejmě také vliv na další faktor, který vyhledávače hodnotí – [Dwell Time](https://www.collabim.cz/akademie/seofaktory/dwell-time/), dobu, která uplyne mezi proklikem z výsledků vyhledávání na vaši stránku a návratem zpět.

## **Jak začít řešit rychlost webu?**

Možností, kde začít, je hodně. Postup je ale vždycky stejný. Nejdůležitější je zjistit, jak na tom jste, sledovat vývoj v čase, v různých kontextech a najít správné příležitosti ke zlepšení:

1. Změřte si rychlost, nejlépe spolu s vaší přímou konkurencí v našem [testeru rychlosti webu](https://pagespeed.cz/).
2. Tester vám rychlost testovaných webů každý den změří, uložte si proto URL adresy vašich testů nebo se přihlaste a my vám jednou měsíčně pošleme zprávu o stavu.

Pokud vidíte, že v rychlosti máte rezervy, objednejte si [audit rychlosti webu](https://pagespeed.cz/audit/), který obsahuje rady na míru vašemu projektu. Nebo se prostě ozvěte – [info@pagespeed.cz](mailto:info@pagespeed.cz).


Budeme se snažit zde tvořit zajímavý obsah pro všechny lidi od webařského fochu – techniky, ale i netechniky.

## **O čem budeme psát?**

Můžete se těšit na následující typy obsahu:

1. Případové studie a zkušenosti z práce pro naše milé klienty.
2. Konkrétní optimalizační techniky a tipy, rozebrané do detailu.
3. Novinky z oblasti rychlosti webů, ale i vývoj kolem našeho [testovacího nástroje](https://pagespeed.cz/).

Na tvorbu obsahu jsme v týmu čtyři – Zuzana Šumlanská, Michal Matuška a Tomáš Hejč ze [SUPERKODERS](https://superkoders.com/) a Martin Michálek ze [Vzhůru dolů](https://www.vzhurudolu.cz/martin).

Začínáme zostra, článkem [Proč se zabývat rychlostí](https://pagespeed.cz/blog/proc-mit-rychly-web), který je přesně tak dlouhý, jak si tohle téma zaslouží.

Těšíme se, co nového společně s vámi objevíme a jaké weby spolu zrychlíme!

Tým PageSpeed.cz

PS: Zůstaňme v pravidelném kontaktu. Odebírejte nás na [Twitteru](https://twitter.com/pagespeedcz), [Facebooku](https://www.facebook.com/PageSpeed.cz) nebo [LinkedIn](https://www.linkedin.com/company/42805034/).

Blog

Tipy a novinky ze světa rychlosti vol. 2

Tipy a novinky ze světa rychlosti vol. 1

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

Začínáme s blogem. Na co se tady můžete těšit?