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

comments powered by Disqus

Podobné články

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

Weby versus aplikace

20. 4. 2017 v příručce

Zkouším se zamýšlet, kdy je lepší použít web a kdy nativní aplikaci. A definuji nativní, hybridní, progresivní a univerzální aplikace.

Rychlost webu je záležitostí designéra

8. 3. 2017 na blogu

Cíle webových grafiků a designérů se moc nemění. Co se ale změnilo, jsou naše znalosti o významu rychlosti webu pro jeho výslednou úspěšnost.

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: 29. května.

1. června Mistrovský vývoj webů na WordPressu
26. září Dnešní webová kodéřina
19. října SVG
2. listopadu Bootstrap pro pokročilé
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.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč