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.

Reklama: Vzhůru do lepší práce

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

Efektivní ladění responzivních webů

27. 6. 2016 v příručce

Jak si poradit s dnešní škálou prohlížečů a zařízení? A jak s nepřítomností pořádných vývojářských nástrojů na mobilech? Svatý grál neznám, ale pár tipů ze své praxe bych měl.

Případová studie Srovname.cz: jaký vliv má zrychlení webu na konverzní poměr?

12. 5. 2016 na blogu

Srovname.cz jsem pomáhal se zrychlením webu. Na mobilech se tím povedlo zvýšit konverzní poměr o jednu čtvrtinu.

Kurz „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: 27. října.

Termíny dalších veřejných školení

29. září SVG
6. října Dnešní webová kodéřina
13. října Responzivní design
10. listopadu Bootstrap
24. 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č