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í.

Atributy responzivních obrázků: srcset a sizes

23. 5. 2017 v příručce

Nové atributy elementu img, které řeší potřebu autorů stránek zobrazovat v různých stavech responzivního designu různé varianty obrázků. Přečtěte si zcela novou verzi článku.

Kompletní průvodce obrázky v responzivním designu

17. 5. 2017 v příručce

V responzivním designu často potřebujeme volit mezi různými variantami jednoho obsahového obrázku.

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.

1. června 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í