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

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

comments powered by Disqus

Podobné články

zařazené v kategoriích Responzivní design, Rychlost načítání.

Vkládaná média se zachováním poměru stran

19. 7. 2017 v příručce

Jak zařídit, aby se obrázky, video a prvky vkládané přes `&lt;iframe&gt;` přizpůsobovaly šířce rodičovského elementu a ještě k tomu zachovávaly poměr stran?

Responzivní SVG

26. 6. 2017 v příručce

Další ukázka z e-booku „Vzhůru do (responzivního) webdesignu“. Jak bez hacků zařídit pružné zobrazování SVG ve všech prohlížečích? A jak na plně responzivní SVG s přizpůsobivým obsahem?

Veřejná školení

Optimalizace rychlosti načítání

Optimalizace rychlosti načítání

Většina responzivních webů má problém. Umí se sice dobře přizpůsobit různě velkým obrazovkám, ale na mobilech se načítá pomalu. Příští termín: 5. října.

14. září Mistrovský vývoj webů na WordPressu
27. září Dnešní webová kodéřina
19. října SVG
16. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací