facsst performance meetup notes

facsst-meetup-notes.md

faCSST - Entire Presentation

Base64 increases critical rendering in your path

Notes:

After gzip Mixins and repetition are much smaller

Notes:

Mixins are much smaller after gzip

Notes:

• https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=60
  • https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=62 - reason why

Critical css should be 14kb

Notes:

Add links in body - can create modular components

Notes:

• Browsers do not render anything until all CSS has been retreived
• https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=79 - split everything but still render blocking
• Browsers only block rendering of subsequent content
• https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=81 - niiice 8)
• This is no worse then how browsers that do not support it handle all css in head now

https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=42 - which is faster slide? https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=43 - which is faster slide part 2 https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=46 - 50% of time used to calculate the computed style for an element to match selectors... ---here is the doc explaining it in heavy detail (if you're bored)

JS before CSS!

• https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=93 - inline js after css in head
• https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=96 - after

Takeaways

• https://speakerdeck.com/csswizardry/facsst-css-and-performance-1?slide=100