
Jak eliminovat zdroje blokující vykreslení
Jak eliminovat zdroje blokující vykreslení? Jak zrychlit načítání webovch stránek, jak poznat kritické zdroje a jak...
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.
V jednoduchosti jde o JavaScript a CSS, který je vložený přímo do <head> bez jakéhokoliv dalšího nastavení.
<script src=“…“>, který:
<link rel=“stylesheet“ src=“…“>, který:
Š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 ✅ |
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.
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.
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.
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.
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>.
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.
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ů.
Tato stránka je chráněna službou reCaptcha a platí zásadyochrany osobních údajů a smluvní podmínky společnosti Google.