Martin Michálek Martin Michálek  – 4. 6. 2015

Vkládání nezbytného CSS v inline podobě přímo do HTML kódu.

Tato technika může významně zlepšit rychlost zobrazení stránky. Na celkovou rychlost načtení nemá skoro žádný vliv.

Tohle je přepis toho nejdůležitějšího z obsahu přednášky na Frontendistech. Tady je její videozáznam.

Proč to dělat?

Prohlížeč totiž s renderováním stránky čeká na kompletní načtení CSS souborů. Proto čekání na zobrazení stránky s bílou obrazovkou na pomalejších připojeních.

Jak prohlížeč načítá stránku?

Dá se to hacknout tím, že CSS načtete asynchronně pomocí javascriptu. Aby ale prohlížeč nezobrazil stránky ve svém vychozím stylování, potřebujete mu poskytnout nějaké základní CSS v inline podobě:

<style>
  /* Nezbytné CSS … */
</style>

<script>
  loadCSS("style.css");
</script>

Na přednášce jsem ukazoval tento příklad.

Co k tomu potřebujeme?

Testovací nástroje

Chrome DevTools pro takové to domácí testování, pak ještě WebPagetest.org. Ten ukáže zajímavá čísla – SpeedIndex (obdoba PageRanku pro kodéry; čím je nižší tím lépe) a Start Render (čas kdy prohlížeč začal renderovat stránku). Viz také výsledky pro původní stav naší stránky. Více v článku o nástrojích pro analýzu rychlosti.

Něco na vygenerování nezbytného CSS

Osvědčil se mi grunt-criticalcss. Pro Gulpaře je určen critical Addyho Osmaniho.

U grunt-criticalcss je dobré myslet na forceInclude parametr pro :hover stavy elementů a pak dát pozor na na zkratky CSS vlastností jako background.

Enhance.js

Enhance je šablona s utilitami pro postupné načítání stránky od Filament Group. Nás zajímá hlavně funkce loadCSS(), ale doporučuji Enhance prozkoumat celé.

Výsledek

I u takto jednoduché stránky se nám rychlost zobrazení podařilo významně posunout:

Před: SpeedIndex 11314; po SpeedIndex 4078

Co dál?

  • Cookie – kritické CSS se hodí pro první návštěvu stránky. Jakmile se ale uživatel dostane na další stránku, měl už by mít cookie a critical CSS vůbec nedostat. To ošklivé velké CSS už totiž má v cache prohlížeče.
  • Webfonty: efekt schovávání textu (FOIT) je vidět i na naši optimalizované stránce. Dá se vyřešit.
  • JavaScripty je dobré rozdělit na kritické (např. polyfilly, které inlinujeme v <head>) a nekritické (všechny ostatní).
  • Lazyload pro <iframe> třetích stran. Externí elementy sice zhorší jen rychlost načtení, ale odsunou nám načítání našich důležitých elementů jako jsou právě webfonty nebo důležité obrázky v CSS.
  • Optimalizovat obrázky pomocí srcset/sizes a <picture>.
  • O Critical CSS psal také Petr Soukup.

Problematiku do detailu řeším na školení Pokročilý responzivní design.

Komentáře

Máte doplnění, komentář nebo jste našli chybu?
Pro přidání názoru se prosím
přihlaste nebo si zřiďte účet.