Domů / Optimalizace / Jak eliminovat zdroje blokující vykreslení

Jak eliminovat zdroje blokující vykreslení

20. 6. 2022

PageSpeed Insights je asi jeden z nejznámějších a nejlepších nástrojů pro analýzu rychlosti načítání webových stránek. Díky němu získáte přehled o tom, jak si váš web vede a jestli je nutné něco změnit. Jedním z nejčastějším problémem, který vaše skóre v PageSpeed Insights stahuje dolů, jsou zdroje blokující vykreslování. V tomhle článku se podíváme, jak tento problém vyřešit a zrychlit načítání webových stránek.

Které assety jsou označeny jako zdroje blokující vykreslování?

V jednoduchosti jde o JavaScript a CSS, který je vložený přímo do <head> bez jakéhokoliv dalšího nastavení.

<script src=“…“>, který:

Je v <head>
Nemá defer atribut
Nemá async atribut

<link rel=“stylesheet“ src=“…“>, který:

Nemá disabled atribut
Je specifikovaný pro zařízení uživatele pomocí atributu media, napříkald media=“all“

Špatné řešení ❗

<!-- Zdroje blokující vykreslování -->
<head>
  <script src="/script.js"></script>
  <script src="/app.js"></script>
</head>

Správné řešení ✅

<!-- Zdroje neblokující vykreslování -->
<head>
  <script src="/script.js" async></script>
  <script src="/app.js" defer></script>
</head>

Způsob vložení	Blokuje zobrazení?
`<script>`	Ano ❌
`<script defer>`	Ne ✅
`<script async>`	Ne ✅
`<script>` před značkou `</body>`	Ne ✅

Jak identifikovat kritické zdroje

Prvním krokem je identifikovat kritické zdroje, které jsou nutné pro bezchybný běh aplikace. K tomu můžeme využití nástroj coverage v Chrome DevTools.

Zelené (kritické) – assety, které jsou vyžadovány pro prvotní vykreslení, důležité pro základní funkce stránky
Červené (nekritické) – assety, které se vztahují na obsah stránky, který není okmažitě viditelný. Styly nejsou důležité pro základní funkce stránky.

Jak odstranit skripty blokující vykreslování

Nejprve musíme identifikovat kritické zdroje, které oddělíme od nekritických zdrojů a načteme je co nejdříve. Vložíme je do samostatného souboru nebo jako inline.

Pro zdroje, které jsou nekritické, můžeme použít atributy async nebo defer.

<head>
  <!-- Kritické zdroje -->
  <script>
      alert("Kritcký zdroj");
  </script>
  <script src="/critic.js"></script>

  <!-- Zdroje neblokující vykreslování -->
  <script src="/script.js" async></script>
  <script src="/app.js" defer></script>
</head>

Kód, který se vůbec nepoužívá, by měl být úplně odstraněn.

Jak odstranit CSS (kaskádové styly) blokujících vykreslování

Podobně jako odstranění skriptů, které blokují vykreslování. Styly, které jsou kritické pro načtení stránky, vložíme do samostatného souboru, případně jako inline styly, které umístíme přímo do <head>.

Zbytek stylů, které nejsou kritické, načteme asynchroně pomocí atributu preload.

<head>
   <!-- Kritické styly -->
  <style type="text/css">
      body: background:white;h1: font-size: 2rem; color: black;
  </style>

  <!-- Nekritické styly -->
  <link rel="preload" href="/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/app.css"></noscript>
</head>

Další možností, jak odstranit styly blokující vykreslování je rozdělit styly do různých souborů dle media query. To znamená, že budeme mít samostatné soubory pro desktop, tablet a mobilní zobrazení.

Abychom dosáhli co nejlepšího výsledku, je také nutné minifikovat CSS styly. To znamená, že se odstraní všechny přebytečné mezery a znaky. Díky tomu dosáhneme co nejmenší velikosti souboru a uživateli se nebudou muset stahovat zbytečně velká data.

Rozdíl mezi defer a async

<script>

Začněme tím, že definujeme, co dělá bez jakýchkoli atributů. Soubor HTML bude načítán do té chvíle, než narazí na soubor typu <script>. V tomto okamžiku se parsování HTML dokumentu zastaví a prohlížeč odešle požadavek na načtení souboru (pokud je externí). Skript se poté spustí a až po jeho spuštění dojde k obnovením parsování HTML dokumentu.

<script async>

Pokud máme script označený atributem async, tak se soubor stáhne během parsování HTML dokumentu a po dokončení stahování souboru typu <script async> dojde k jeho puštění a pozastavení parsování HTML dokumentu. Atribut async nám nezaručuje, že stažené soubory budou spuštěny ve stejném pořadí, v jakém jsou uvdené v HTML dokumentu.

Používáme pouze pro kritické skripty nebo tehdy, pokud se skript nachází na konci dokumentu před značkou </body>.

<script defer>

V případě použítí atributu defer dojde během parsování dokumentu pouze k jeho stažení. Stažený skript se spustí až po dokončení parsování HTML. Atribut defer nám také zaručuje, že soubory budou spuštěny v pořadí, v jakém se objevují v dokumentu.

Rozdíl mezi async a defer — _{Zdroj: www.growingwiththeweb.com}

Pro optimalizaci assetů je nutné pochopit všechny možnost vkládání <script> do stránky, naučit se pracovat s prioritami a neopomenout ani na odložení načítání kaskádových stylů a minifikaci souborů.