Srovnejte si to v <head>

21. 10. 2021

Article

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álek

Martin MichálekZnáte jej jako autora blogu Vzhůru dolů, publikací pro webaře a propagátora rychlosti. Martin je hlavní kontakt pro naše klienty.

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

Checklist rychlosti webu 2021

Checklist rychlosti webu 2021

Cookie lišty nasazené bez optimalizací rychlosti představují docela závažné ohrožení rychlosti a tedy i metrik Web Vitals. V tomhle článku se s vámi podělíme o zkušenosti, které jsme získali při práci pro naše klienty.Číst dále

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

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

Cookie lišty nasazené bez optimalizací rychlosti představují docela závažné ohrožení rychlosti a tedy i metrik Web Vitals. V tomhle článku se s vámi podělíme o zkušenosti, které jsme získali při práci pro naše klienty.Číst dále

Měření rychlosti webu pro marketéry krok za krokem

Měření rychlosti webu pro marketéry krok za krokem

Cookie lišty nasazené bez optimalizací rychlosti představují docela závažné ohrožení rychlosti a tedy i metrik Web Vitals. V tomhle článku se s vámi podělíme o zkušenosti, které jsme získali při práci pro naše klienty.Číst dále