Srovnejte si to v <head>

21. 10. 2021

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.

Harry na letošním ročníku WebExpa přednášel, jak pouhé pořadí prvků v <head> dokáže pohnout s rychlostí webu.

Otestujte si správně pořadí prvků v <head>

V přednášce byl uveden příklad, kdy jedna taková drobnost připravovala jeho klienty potenciálně o miliony dolarů. Takový dopad na vaše weby nečekejte, Harryho příklad považujeme za jehlu v kupce sena. Výhru v optimalizační loterii.

Nicméně – pokud si myslíte, že velké věci v oblasti rychlosti už máte vyřešené, nebo prostě jen chcete otestovat, zda je všechno správně, využijte jeho nástroj CT.CSS.

Jde o kousek CSS, který vás upozorní na případné chyby v pořadí prvků v oblasti <head>:

Přidejte si to CSS přímo do stránky.
Použijte bookmarklet.
Uložte si to do Snippets v rámci Chrome DevTools.

Je to na vás. Jste nedočkaví? Mrkněte se na demo.

My jsme to udělali u několika webů. Příklady:

Na obrázku vidíte jeden velmi navštěvovaný český web. Poznáte jej? :-)

Pokud byste viděli červeně rámované upozornění, berte to vážně. Může se stát, že zrovna ten váš bude jedním z webů, u kterých může mít oprava i zásadnější vliv.

Možná ale také zjistíte, že zde zakopaný pes rychlosti vašeho webu neleží.

Jaké je správné pořadí prvků v <head>?

Podívejme se, jak by to mělo být správně, alespoň podle Harryho:

<meta charset | http-equiv | viewport>
<title>

<!-- Preconnect (https://www.vzhurudolu.cz/prirucka/preconnect) -->
<link rel="preconnect">

<!-- Asynchronní JS (analytika atd.) -->
<script src="" async></script>

<!-- CSS, které obsahují @import -->
<link rel="stylesheet" href="…">

<!-- Synchronní JS: -->
<script src="…"></script>

<!-- Synchronní CSS: -->
<link rel="stylesheet" href="…">

<!-- Preload (https://www.vzhurudolu.cz/prirucka/preload): -->
<link rel="preload">

<!-- Asynchronní JS s nízkou prioritou: -->
<script src="" defer></script>

<!-- Prefetch a prerender: -->
<link rel="prefetch">
<link rel="prerender">

<!-- ATD: SEO, meta značky, ikony, Open Graph… -->

Zajímá vás více? Mrkněte se na slajdy k Harryho přednášce.

Martin MichálekMartin je hlavní kontakt pro vás. Znáte jej také jako autora blogu Vzhůru dolů, publikací pro webaře a propagátora rychlosti.

Jak je rychlý váš web?

Jak rychlý je váš web v porovnání s vaší konkurencí? To zjistíte
pomocí našeho online testeru.

Další související články k tématu

31. 3. 202125 minut čtení

Checklist rychlosti webu 2021

Vše, co potřebujete vědět pro tvorbu rychlých webů na jednom místě.Číst dále

12. 7. 20219 minut čtení

Nejčastější chyby, které kazí Web Vitals

Nedávno jsem měla příležitost přednášet na historicky první české frontendové konferenci. Jelikož je rychlost webů téma, kterým se aktuálně zabývám dennodenně, téma přednášky bylo jasné.Číst dále

16. 5. 20238 minut čtení

Nejrychlejší český eshop má Hornbach, 3v1 a T-shock

Který český e-shop je nejrychlejší? Mohou být dostatečně rychlé i velké e-shopy? A jak to změřit?Číst dále