Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2018. Harry Roberts. FaCSSt: CSS & Performance

147 views

Published on

*

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2018. Harry Roberts. FaCSSt: CSS & Performance

  1. 1. FaCSSt:
 CSS and Performance Harry Roberts • @csswizardry
  2. 2. Hey! I’m Harry.
  3. 3. “ “The Trainline reduced latency by 0.3 seconds […] and customers spent an extra £8.1m a year.” — csswz.it/2FQHt2S
  4. 4. CSS
  5. 5. Performance CSS
  6. 6. Performance CSS 😍
  7. 7. Why Does it Even Matter?
  8. 8. SERVER HTML CSS DOM CSSOM JS RendeR TREE
  9. 9. File Size
  10. 10. Larger files take longer to download…
  11. 11. Any idea how long to parse a 1MB stylesheet on a Moto G4?
  12. 12. iLight could travel 59,958km
  13. 13. Base64
  14. 14. background-image: url(/assets/masthead.jpg); background-image: url(data:image/jpeg;base64,...);
  15. 15. data:image/ svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxOTBweCIgaGVpZ2h0PSI4MXB4IiB2aWV3Qm94PSIwIDAgMTkwIDgxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPnJlbmRlci0yPC90aXRsZT4gICAgPGRlc2M+Q3 JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlJlbmRlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0i8J+RiS1kZXNrdG9wLWNvcHktMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODEuMDAwMDAwLCAtNjUuMDAwMDAwKSIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICA gICA8ZyBpZD0icmVuZGVyLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MS4wMDAwMDAsIDY1LjAwMDAwMCkiPiAgICAgICAgICAgICAgICA8ZyBpZD0iWE1MSURfMTM1M18iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk0LjAwMDAwMCwgMjUuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCwxMC4xNDg4MDk1IEwxLjM4ODE5NjIzLDEwLjE0ODgwOTUgTDEuNjMwOTEzMjEs MTMuNDcwMjM4MSBMMS43NTQ4MDc1NSwxMy40NzAyMzgxIEMzLjA3NDg5ODExLDExLjI1NTk1MjQgNS4wMTM3MzU4NSw5LjM1NTM1NzE0IDcuMzY0ODMwMTksOS4zNTUzNTcxNCBDOC4xMDc0NzE3LDkuMzU1MzU3MTQgOC42ODQ5MjA3NSw5LjUwNDQ1MjM4IDkuMzQ0OTY2MDQsOS44NDAyODU3MSBMOC45MzIzNDcxNywxMS41NTM3NzM4IEM4LjI3MjMwMTg5LDExLjMwMTcxNDMgNy45NDk4ODY3OSwxMS4yMzM4MDk1IDcuM TY2MzA5NDMsMTEuMjMzODA5NSBDNS4zOTIzMDE4OSwxMS4yMzM4MDk1IDMuMjYwMzc3MzYsMTIuNjM2OTI4NiAxLjgxMTMyMDc1LDE2LjQxODkyODYgTDEuODExMzIwNzUsMzAuMDc3MzgxIEwwLDMwLjA3NzM4MSBMMCwxMC4xNDg4MDk1IFoiIGlkPSJYTUxJRF8xMzU0XyI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjgzNzUyNDUsOS40ODQ4OTI4NiBDMjIuNTQwMDc1NSw5LjQ4NDg5Mjg2ID I1LjQyNzY4MywxMi45NjY0ODgxIDI1LjQyNzY4MywxOC44OTE5MTY3IEMyNS40Mjc2ODMsMTkuMzk2MDM1NyAyNS40Mjc2ODMsMTkuNzQ0MDQ3NiAyNS4zNDU0NDkxLDIwLjQ4MjE0MjkgTDExLjA3MjYwMzgsMjAuNDgyMTQyOSBDMTEuMTU1MiwyNS4yNzk3NjE5IDE0LjA4NDEwNTcsMjkuMTQ1NTM1NyAxOC41Mzg4Njc5LDI5LjE0NTUzNTcgQzIwLjY4NDE5NjIsMjkuMTQ1NTM1NyAyMi4zNzUyNDUzLDI4LjM5MjMwOTU gMjMuODYwMTY2LDI3LjI5OTkyODYgTDI0LjYwMjgwNzUsMjguNzA5MzIxNCBDMjMuMDM1MjkwNiwyOS42NzU4NTcxIDIxLjI2MTI4MywzMC42NzQ4NjkgMTguMzc0MDM3NywzMC42NzQ4NjkgQzEzLjMwMDE2NiwzMC42NzQ4NjkgOS4yMTYsMjYuNzE5Nzg1NyA5LjIxNiwyMC4xMjE5NTI0IEM5LjIxNiwxMy41MjQxMTkgMTMuNDI0MDYwNCw5LjQ4NDg5Mjg2IDE3LjgzNzUyNDUsOS40ODQ4OTI4NiBaIE0yMy42OTU2OTgx LDE5LjAwNTk1MjQgQzIzLjY5NTY5ODEsMTMuNDcwMjM4MSAyMS40MjY4Mzc3LDExLjE4OTUyMzggMTcuODc5MTg0OSwxMS4xODk1MjM4IEMxNC40OTYzNjIzLDExLjE4OTUyMzggMTEuNDg1MjIyNiwxMy44MzkyODU3IDExLjA3Mjk2NiwxOS4wMDU5NTI0IEwyMy42OTU2OTgxLDE5LjAwNTk1MjQgWiIgaWQ9IlhNTElEXzEzNTZfIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTgxMTMyMSwxM C4xNDg4MDk1IEwzMC41NzUwOTQzLDEwLjE0ODgwOTUgTDMwLjczOTkyNDUsMTMuMTAxMTkwNSBMMzAuODYzODE4OSwxMy4xMDExOTA1IEMzMi44ODUyNTI4LDExLjI1NTk1MjQgMzUuMDM4NTUwOSw5LjQ4NiAzNy43NjEzMjgzLDkuNDg2IEM0MS44NDUxMzIxLDkuNDg2IDQzLjgzMzk2MjMsMTIuMDA2NTk1MiA0My44MzM5NjIzLDE3LjIxNzU0NzYgTDQzLjgzMzk2MjMsMzAuMDc3MzgxIEw0MS42NjAzNzc0LDMwLjA3Nz M4MSBMNDEuNjYwMzc3NCwxNy40Njk2MDcxIEM0MS42NjAzNzc0LDEzLjE4MzExOSA0MC40MTM0NjQyLDExLjE2NjI3MzggMzcuMTk1ODM0LDExLjE2NjI3MzggQzM0Ljg0NDM3NzQsMTEuMTY2MjczOCAzMy42OTA1NjYsMTIuNDI2OTQwNSAzMC43OTI0NTI4LDE0Ljk0ODI3MzggTDMwLjc5MjQ1MjgsMzAuMDc3MzgxIEwyOC45ODExMzIxLDMwLjA3NzM4MSBMMjguOTgxMTMyMSwxMC4xNDg4MDk1IEwyOC45ODExMzIxLDE wLjE0ODgwOTUgWiIgaWQ9IlhNTElEXzEzNTlfIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNTUuNTcyNzY5OCw5LjQ4NDg5Mjg2IEM1Ny45NjU1MjQ1LDkuNDg0ODkyODYgNTkuNjMwODUyOCwxMC40MDk3MjYyIDYxLjYxMDk4ODcsMTEuOTY0NTIzOCBMNjEuNTg0OTA1Nyw4LjI2NjI5NzYyIEw2MS41ODQ5MDU3LDAuMTg0NTIzODEgTDYzLjM5NjIyNjQsMC4xODQ1MjM4MSBMNjMuMzk2MjI2NCwz MC4wNzczODEgTDYxLjcxOTMwNTcsMzAuMDc3MzgxIEw2MS41NTQ0NzU1LDI3Ljg2MzA5NTIgTDYxLjQzMDU4MTEsMjcuODYzMDk1MiBDNTkuODIxNzY2LDI5LjMzOTI4NTcgNTcuNjM1NTAxOSwzMC44MTkxNjY3IDU0Ljk5NTMyMDgsMzAuODE5MTY2NyBDNTAuMDA0MDQ1MywzMC44MTkxNjY3IDQ2Ljc4NjQxNTEsMjcuMDAyMTA3MSA0Ni43ODY0MTUxLDIwLjE5NDI4NTcgQzQ2Ljc4NjQxNTEsMTMuNjgwMjI2MiA1MC44N zAyMTg5LDkuNDg0ODkyODYgNTUuNTcyNzY5OCw5LjQ4NDg5Mjg2IFogTTU1LjI5OTI2MDQsMjkuMDI1OTY0MyBDNTcuNDg1NTI0NSwyOS4wMjU5NjQzIDU5LjQxMTMyMDgsMjcuODQ5NDQwNSA2MS41ODQ5MDU3LDI1LjcwNjAxMTkgTDYxLjU4NDkwNTcsMTMuNzI5MzA5NSBDNTkuNDExMzIwOCwxMS44MzgzMDk1IDU3LjY5MjAxNTEsMTEuMTIzODMzMyA1NS43NTMxNzc0LDExLjEyMzgzMzMgQzUxLjc5MjkwNTcsMTEuMT IzODMzMyA0OC43ODE3NjYsMTUuMDMyMDQ3NiA0OC43ODE3NjYsMjAuMTE2Nzg1NyBDNDguNzgxNzY2LDI1LjQ1NDMyMTQgNTEuMDkxOTI0NSwyOS4wMjU5NjQzIDU1LjI5OTI2MDQsMjkuMDI1OTY0MyBaIiBpZD0iWE1MSURfMTM2MV8iPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03NS4wODM1OTI1LDkuNDg0ODkyODYgQzc5Ljc4NjE0MzQsOS40ODQ4OTI4NiA4Mi42NzM3NTA5LDEyLjk2NjQ4ODE gODIuNjczNzUwOSwxOC44OTE5MTY3IEM4Mi42NzM3NTA5LDE5LjM5NjAzNTcgODIuNjczNzUwOSwxOS43NDQwNDc2IDgyLjU5MTUxNywyMC40ODIxNDI5IEw2OC4zMTg2NzE3LDIwLjQ4MjE0MjkgQzY4LjQwMTI2NzksMjUuMjc5NzYxOSA3MS4zMzAxNzM2LDI5LjE0NTUzNTcgNzUuNzg0OTM1OCwyOS4xNDU1MzU3IEM3Ny45MzAyNjQyLDI5LjE0NTUzNTcgNzkuNjIxMzEzMiwyOC4zOTIzMDk1IDgxLjEwNjIzNCwyNy4y OTk5Mjg2IEw4MS44NDg4NzU1LDI4LjcwOTMyMTQgQzgwLjI4MTM1ODUsMjkuNjc1ODU3MSA3OC41MDczNTA5LDMwLjY3NDg2OSA3NS42MjAxMDU3LDMwLjY3NDg2OSBDNzAuNTQ2MjM0LDMwLjY3NDg2OSA2Ni40NjI0MzAyLDI2LjcxOTc4NTcgNjYuNDYyNDMwMiwyMC4xMjE5NTI0IEM2Ni40NjI0MzAyLDEzLjUyNDExOSA3MC42Njk3NjYsOS40ODQ4OTI4NiA3NS4wODM1OTI1LDkuNDg0ODkyODYgWiBNODAuOTQxNDAzO CwxOS4wMDU5NTI0IEM4MC45NDE0MDM4LDEzLjQ3MDIzODEgNzguNjcyNTQzNCwxMS4xODk1MjM4IDc1LjEyNDg5MDYsMTEuMTg5NTIzOCBDNzEuNzQyNDMwMiwxMS4xODk1MjM4IDY4LjczMDkyODMsMTMuODM5Mjg1NyA2OC4zMTg2NzE3LDE5LjAwNTk1MjQgTDgwLjk0MTQwMzgsMTkuMDA1OTUyNCBaIiBpZD0iWE1MSURfMTM3MV8iPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04Ni4yMTg4Njc5LD EwLjE0ODgwOTUgTDg3LjgyMDgsMTAuMTQ4ODA5NSBMODcuOTg1NjMwMiwxMy40NzAyMzgxIEw4OC4xMDk1MjQ1LDEzLjQ3MDIzODEgQzg5LjQyOTYxNTEsMTEuMjU1OTUyNCA5MS4zNjg0NTI4LDkuMzU1MzU3MTQgOTMuNzE5NTQ3Miw5LjM1NTM1NzE0IEM5NC40NjIxODg3LDkuMzU1MzU3MTQgOTUuMDM5NjM3Nyw5LjUwNDQ1MjM4IDk1LjY5OTY4Myw5Ljg0MDI4NTcxIEw5NS4yODcwNjQyLDExLjU1Mzc3MzggQzk0LjY yNzAxODksMTEuMzAxNzE0MyA5NC4yMzY0OTgxLDExLjIzMzgwOTUgOTMuNDUyOTIwOCwxMS4yMzM4MDk1IEM5MS42Nzg5MTMyLDExLjIzMzgwOTUgODkuODQxMTQ3MiwxMi42MzY5Mjg2IDg4LjAyOTgyNjQsMTYuNDE4OTI4NiBMODguMDI5ODI2NCwzMC4wNzczODEgTDg2LjIxODUwNTcsMzAuMDc3MzgxIEw4Ni4yMTg1MDU3LDEwLjE0ODgwOTUgTDg2LjIxODg2NzksMTAuMTQ4ODA5NSBaIiBpZD0iWE1MSURfMTM3OV8i PjwvcGF0aD4gICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgICAgICA8ZyBpZD0iWE1MSURfMTEzN18iPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIyLjMwODU3MTQsMzkuMTY0NTg0OCBDMTUuMzYsNDEuMjMwODA4IDguNzc3MTQyODYsNDMuMjk0ODYxNiAxLjgyODU3MTQzLDQ1LjM1OTI3NjggQzEuODI4NTcxNDMsNDQuOTUxMzgzOSAxLjgyODU3MTQzLDkuMjQzNzYzMzkgMS44Mjg1NzE0Myw4Ljg3O TI2MzM5IEM4Ljc3NzE0Mjg2LDkuOTU1MDQ0NjQgMTUuMzYsMTEuMDMwODI1OSAyMi4zMDg1NzE0LDEyLjEwODA1MzYgQzIyLjMwODU3MTQsMjEuMTMwMTUxOCAyMi4zMDg1NzE0LDMwLjEzMTYzODQgMjIuMzA4NTcxNCwzOS4xNjQ1ODQ4IFoiIGlkPSJYTUxJRF8xMTUyXyIgZmlsbD0iIzMzNjJDQSI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEuODI4NTcxNDMsNjkuODU0NTQ0NiBDMS44Mjg1Nz E0Myw2Mi40MDI5MDYzIDEuODI4NTcxNDMsNTQuOTgyMDA0NSAxLjgyODU3MTQzLDQ3LjUyNjM4ODQgQzguNzc3MTQyODYsNDguOTI1NDQ2NCAxNS4zNiw1MC4zMjE2MTE2IDIyLjMwODU3MTQsNTEuNzE2MzMwNCBDMjIuMzA4NTcxNCw1My4wMTk5MjQxIDIyLjMwODU3MTQsNjMuNDA1NjQyOSAyMi4zMDg1NzE0LDYzLjc1MDI1NDUgQzE1LjM2LDY1Ljc4NzU0OTEgOC43NzcxNDI4Niw2Ny44MDk2NTYyIDEuODI4NTcxNDM sNjkuODU0NTQ0NiBaIiBpZD0iWE1MSURfMTE1MV8iIGZpbGw9IiMzMzYyQ0EiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNzE5OTUwODkgQzAsNy41MjY4NTI2OCAwLjA0NDI1MTQyODYsNy4yNjI4Nzk0NiAwLjM0NDEzNzE0Myw3LjE3NjQ1NTM2IEMwLjczOTEwODU3MSw3LjA2MjkxMDcxIDE1LjE5MzYsMi42NjcyMTQyOSAyMS44NjcxNTQzLDAuNjQxNDkxMDcxIEMyMi4xMjcxNzcxLDAu NTYyNjYwNzE0IDIyLjM3NjU5NDMsMC40NzY1OTgyMTQgMjIuNjM0MDU3MSwwLjM4OTgxMjUgQzIyLjkyNDgsMC4yOTIxNzg1NzEgMjMuMDM0MTQ4NiwwLjM0MDYzMzkyOSAyMy4yMjQ2ODU3LDAuMzc0MjYzMzkzIEMyMy45NDgwNjg2LDAuNDk0MzE2OTY0IDI0LjY2OTk4ODYsMC42MTIyMDA4OTMgMjUuMzkzNzM3MSwwLjczMTg5Mjg1NyBDMjcuNzE5NjgsMS4xMTYyODEyNSAzMC4wNDQ1MjU3LDEuNTAxNzU0NDYgMzIuM zcwODM0MywxLjg4NTQxOTY0IEMzNC42NTk4NCwyLjI2MjkzNzUgMzYuOTQ5MjExNCwyLjYzNzkyNDExIDM5LjIzODIxNzEsMy4wMTY1MjY3OSBDNDEuMTY1NTMxNCwzLjMzNTEwMjY4IDQzLjA5MDY1MTQsMy42NjM0NDE5NiA0NS4wMTkwNjI5LDMuOTc1ODcwNTQgQzQ3LjM2NTg1MTQsNC4zNTU5MTk2NCA0OS42MDAzNjU3LDUuMDcyMjYzMzkgNTEuNzAyMTI1Nyw2LjE3MDQ2NDI5IEM1Ni4xMDI3NjU3LDguNDY5NTYyNS A1OS4zOTQ1NiwxMS44MzIxNDczIDYxLjQ2Nzc5NDMsMTYuMzEyODIxNCBDNjIuOTMwNjUxNCwxOS40NzQzNTI3IDYzLjU0Njg4LDIyLjgyMTc1IDYzLjY5ODY1MTQsMjYuMjkxMzcwNSBDNjMuNzA0MTM3MSwyNi40MTU0MDE4IDYzLjYzNDI4NTcsMjYuNTM5MDcxNCA2My42MzQyODU3LDI2LjY2Mjc0MTEgQzYzLjYzNDI4NTcsMjcuNTk2NDEwNyA2My42MzQyODU3LDI4LjUzMDQ0MiA2My42MzQyODU3LDI5LjQ2NDExMTY gQzYzLjYzNDI4NTcsMjkuNTQzMzAzNiA2My43MDM3NzE0LDI5LjYyMjQ5NTUgNjMuNzAzNDA1NywyOS43MDIwNDkxIEM2My42OTI4LDMxLjA1MzM3NSA2My42MDkwNTE0LDMyLjM5MzQ5MTEgNjMuMzg4NTI1NywzMy43MjYwMTM0IEM2My4xNjM5NzcxLDM1LjA4MjA0MDIgNjIuODQ1ODA1NywzNi40MDU4ODM5IDYyLjMyNjQ5MTQsMzcuNjgyNzE4OCBDNjEuNjEwMDU3MSwzOS40NDU1NTM2IDYwLjYwMTc4MjksNDEuMDA3 Njk2NCA1OS4yMDYyMTcxLDQyLjMyMjUgQzU4LjExMDkwMjksNDMuMzU0NTI2OCA1Ni44NjA4OTE0LDQ0LjE0OTcwMDkgNTUuNTA0NDU3MSw0NC44MDEzMTcgQzUzLjYyOTgwNTcsNDUuNzAxMzU3MSA1MS43MDI0OTE0LDQ2LjQ2NTc5NDYgNDkuNzM4OTcxNCw0Ny4xNTE0MDE4IEM0OS42NjUwOTcxLDQ3LjE3NzA3NTkgNDkuNTk0MTQ4Niw0Ny4yMDc4MTI1IDQ5LjUwNzEwODYsNDcuMjQxNDQyIEM0OS41NjMwNjI5LDQ3L jM0OTkyNDEgNDkuNjA2NTgyOSw0Ny40MzUyNjM0IDQ5LjY1MTIsNDcuNTE5NTE3OSBDNTQuMDU3NjkxNCw1NS44MDQ2NjA3IDU4LjQ2NDU0ODYsNjQuMDg5NDQyIDYyLjg3MTA0LDcyLjM3NDU4NDggQzYyLjk2MTczNzEsNzIuNTQ0OTAxOCA2My4wNTgyODU3LDcyLjcxMjY4NzUgNjMuMTQwMjA1Nyw3Mi44ODczNDM4IEM2My4zMjE5NjU3LDczLjI3NTcwOTggNjMuMTk0MzMxNCw3My43MjAxMjUgNjIuODM1NTY1Nyw3My 45NDEwNjcgQzYyLjc0MTk0MjksNzMuOTk4NTYyNSA2Mi42MzMzMjU3LDc0LjAzNjE2OTYgNjIuNTI3MjY4Niw3NC4wNzAxNjA3IEM1OS43Njk3ODI5LDc0Ljk0NTYxMTYgNTcuMDExOTMxNCw3NS44MTk2MTYxIDU0LjI1NDA4LDc2LjY5MzYyMDUgQzUwLjAzNDgzNDMsNzguMDMwNDgyMSA0NS44MTU5NTQzLDc5LjM2NzM0MzggNDEuNTk3MDc0Myw4MC43MDUyOTAyIEM0MS4wNTM2MjI5LDgwLjg1MTM3OTUgNDAuNzgwMDY 4Niw4MS4wMDU3ODU3IDQwLjQ1MDU2LDgwLjQyMDcwNTQgQzM2LjQwOTc4MjksNzIuODA5MjM2NiAzMi4xNTc2MjI5LDY0LjgzMDM3NSAyOC4xMTA5OTQzLDU3LjIyMjE2MDcgQzI3LjI5NTQ1MTQsNTUuNjg4NTg0OCAyNi40NzgwOCw1NC4xNTYwOTM4IDI1LjY2NzY1NzEsNTIuNjE5OTg2NiBDMjUuNTk0MTQ4Niw1Mi40ODExMjk1IDI1LjUwNTI4LDUyLjQxMTMzOTMgMjUuMzUwMjE3MSw1Mi4zODM4NTcxIEMyNC45Mzgw NTcxLDUyLjMxMDA4OTMgMjQuNTQ2NzQyOSw1Mi4yMjAwNDkxIDI0LjEzNjA0NTcsNTIuMTM3MjQxMSBDMjQuMDQzMTU0Myw1Mi4xMTg0Mzc1IDIzLjg0ODk2LDUyLjA4MjYzODQgMjMuODQ4OTYsNTIuMDgyNjM4NCBDMjMuODQ4OTYsNTIuMDgyNjM4NCAyMy44NDA5MTQzLDYwLjIyMjc3NjggMjMuODQ4OTYsNjQuMTY0Mjk0NiBDMjMuODUwMDU3MSw2NC42MTEyNDExIDIzLjYwNzU4ODYsNjUuMDMwNzA1NCAyMy4xMDY5M jU3LDY1LjE4MDA0OTEgQzE2Ljc2MDMyLDY3LjA3Mzc4NTcgMTAuNDEyMjUxNCw2OC45NzY5MjQxIDQuMDY3NDc0MjksNzAuODc3ODkyOSBDMy4wNzkzMTQyOSw3MS4xNzQwNDkxIDIuNjg1NDQsNzEuMzA0OTUwOSAxLjY5NjU0ODU3LDcxLjU5Nzg1MjcgQzAuMzE5MjY4NTcxLDcxLjk3NDY0NzMgMCw3MS4wNjk5MDYzIDAsNzAuMjU0MTIwNSBDMCw2OC43MjQ4ODM5IDAsNy43OTExODc1IDAsNy43MTk5NTA4OSBaIE0zOC 4xNTQ5NzE0LDQ4LjY3ODEwNzEgQzM4LjIzNjE2LDQ4LjY2NTQ1MDkgMzguMjg2MjYyOSw0OC42NjE0NzMyIDM4LjMzNDUzNzEsNDguNjQ5OTAxOCBDMzguNzkyNzc3MSw0OC41MzkyNSAzOS4yNTA2NTE0LDQ4LjQyODk1OTggMzkuNzA4MTYsNDguMzE1NDE1MiBDNDIuNjQ4ODY4Niw0Ny41ODM4ODM5IDQ1LjU3MTY1NzEsNDYuNzkwODc5NSA0OC40NDQzNDI5LDQ1LjgyNjQ3MzIgQzUwLjczNTkwODYsNDUuMDU2OTczMiA 1Mi45ODY4OCw0NC4xODgzOTI5IDU1LjE1MTU0MjksNDMuMTExMTY1MiBDNTcuNzcwMDU3MSw0MS44MDc5MzMgNTkuNjQ2NTM3MSwzOS44Mjc3NzIzIDYwLjc1NDI4NTcsMzcuMTM4NSBDNjEuNDU4NjUxNCwzNS40MjgwOTgyIDYxLjgxNzQxNzEsMzMuNjM4ODY2MSA2MS45OTI1OTQzLDMxLjgxMDU4MDQgQzYyLjA3MTU4ODYsMzAuOTg1MDMxMyA2Mi4xMTA3MiwzMC4xNTU1MDQ1IDYyLjE0NTgyODYsMjkuMzI2NzAwOSBD NjIuMjE1NjgsMjcuNjgwNjY1MiA2Mi4xNjMzODI5LDI2LjAzODYwNzEgNjEuOTYzMzM3MSwyNC40MDEyNSBDNjEuNzY4MDQ1NywyMi44MDE4NjE2IDYxLjQzMDg1NzEsMjEuMjMzMjA5OCA2MC45NjEyOCwxOS42OTA5NTU0IEM1OS45NTU5MzE0LDE2LjM4OTQ4MjEgNTguMjM0NTE0MywxMy41MTMyNTg5IDU1LjczNjMyLDExLjEwMTMzOTMgQzUzLjIxODM3NzEsOC42NzA2MTYwNyA1MC4yNTM1MzE0LDcuMDA1Nzc2NzkgN DYuODY0NDU3MSw2LjA3NTM2MTYxIEM0NS45MTc2MjI5LDUuODE1MzY2MDcgNDQuOTUxNDA1Nyw1LjY1MTU1ODA0IDQzLjk4MzM2LDUuNDkzMTc0MTEgQzQzLjc1ODgxMTQsNS40NTY2NTE3OSA0My41NDk5ODg2LDUuNDQ4Njk2NDMgNDMuMzIzMjQ1Nyw1LjUxOTkzMzA0IEMzNy40MjM5MDg2LDcuMzcxMzYxNjEgMzEuNTIyMDExNCw5LjIxNTU1ODA0IDI1LjYyMDg0NTcsMTEuMDYxNTYyNSBDMjUuNTI2MTI1NywxMS4wOT EyMTQzIDI1LjQzMjg2ODYsMTEuMTI1OTI4NiAyNS4zMDI2NzQzLDExLjE3MDc2NzkgQzI1LjQxMDU2LDExLjIwOTgyMTQgMjUuNDc4OTQ4NiwxMS4yMzY5NDIgMjUuNTQ5MTY1NywxMS4yNTkzNjE2IEMyOS40MzE5NTQzLDEyLjUxNDUgMzIuODI0MzIsMTQuNTY0NDUwOSAzNS42NTcxNDI5LDE3LjQ3MzU4MDQgQzQwLjIxMTc0ODYsMjIuMTUwNjA3MSA0Mi41NDE3MTQzLDI3Ljc1MTE3ODYgNDIuNjM0OTcxNCwzNC4yNDg 1MzU3IEM0Mi42NTk4NCwzNS45OTE0ODIxIDQyLjU2MzY1NzEsMzcuNzI5MDA0NSA0Mi4zMDY5MjU3LDM5LjQ1NjA0MDIgQzQyLjA5MjYxNzEsNDAuODk1OTU5OCA0MS43Njc4NjI5LDQyLjMwODAzNTcgNDEuMjYzOTA4Niw0My42Nzc0NDIgQzQwLjU4OTUzMTQsNDUuNTA5MzQzOCAzOS42MjgwNjg2LDQ3LjE2ODM5NzMgMzguMjQwNTQ4Niw0OC41Njk5ODY2IEMzOC4yMTYwNDU3LDQ4LjU5NTY2MDcgMzguMTk2NjYyOSw0 OC42MjU2NzQxIDM4LjE1NDk3MTQsNDguNjc4MTA3MSBaIE0yMi4zMDg1NzE0LDM5LjE2NDU4NDggQzIyLjMwODU3MTQsMzAuMTMxNjM4NCAyMi4zMDg1NzE0LDIxLjEzMDUxMzQgMjIuMzA4NTcxNCwxMi4xMDc2OTIgQzE1LjM2LDExLjAzMDQ2NDMgOC43NzcxNDI4Niw5Ljk1NDY4MzA0IDEuODI4NTcxNDMsOC44Nzg5MDE3OSBDMS44Mjg1NzE0Myw5LjMwNjY4MzA0IDEuODI4NTcxNDMsNDUuMTM2NTI2OCAxLjgyODU3M TQzLDQ1LjM0MzM2NjEgQzguNzc3MTQyODYsNDMuMjc5MzEyNSAxNS4zNiw0MS4yMzA0NDY0IDIyLjMwODU3MTQsMzkuMTY0NTg0OCBaIE00Ny44ODA0MTE0LDQ3Ljc3NDA4OTMgQzQ3LjgxNDU4MjksNDcuNzkzNjE2MSA0Ny43Nzk0NzQzLDQ3LjgwMzc0MTEgNDcuNzQ0MzY1Nyw0Ny44MTQyMjc3IEM0Ni42MjYzNzcxLDQ4LjE0NjE4MyA0NS41MTE2OCw0OC40ODk3MDk4IDQ0LjM4OTY2ODYsNDguODA4Mjg1NyBDNDEuND Y4MzQyOSw0OS42Mzc4MTI1IDM4LjUxMDA4LDUwLjMyNDE0MjkgMzUuNTU3MzAyOSw1MS4wMzE0NDY0IEMzNC41NzU3MjU3LDUxLjI2NjQ5MTEgMzMuNjA0Mzg4Niw1MS41NDIzOTczIDMyLjYyNDI3NDMsNTEuNzgzNTg5MyBDMzEuOTU2ODQ1Nyw1MS45NDgxMjA1IDMxLjI4NTM5NDMsNTIuMTAxODAzNiAzMC42MDk5Miw1Mi4yMjk4MTI1IEMyOS42NTk0Mjg2LDUyLjQxMDI1NDUgMjguNjk0Njc0Myw1Mi40NzcxNTE4IDI 3LjcyOTU1NDMsNTIuNTMwNjY5NiBDMjcuNjczOTY1Nyw1Mi41MzM5MjQxIDI3LjYxODM3NzEsNTIuNTQ1MTMzOSAyNy41MzgyODU3LDUyLjU1NTk4MjEgQzMyLjIyNTY0NTcsNjEuMzY5MDcxNCAzNi45MDIwMzQzLDcwLjE2MDgyNTkgNDEuNTgwNjE3MSw3OC45NTc2NDI5IEM0OC4xMTcwMjg2LDc2Ljg4NjM1NzEgNTQuNjI3ODQsNzQuODIzMDI2OCA2MS4xNjU3MTQzLDcyLjc1MTAxNzkgQzU2LjczMjE2LDY0LjQxNzA1 OCA1Mi4zMTAzMDg2LDU2LjEwMjYyNSA0Ny44ODA0MTE0LDQ3Ljc3NDA4OTMgWiBNMzkuODQ4OTYsNDIuNTI0NjM4NCBDMzkuODczNDYyOSw0Mi40NTM0MDE4IDM5LjkwMTYyMjksNDIuNDEyMTc4NiAzOS45MTQ3ODg2LDQyLjM3MDU5MzggQzQwLjMwODY2MjksNDEuMTI5OTE5NiA0MC41NzM4MDU3LDM5Ljg2MDMxNyA0MC43MTQyNCwzOC41Njk3NDExIEM0MC44MDc4NjI5LDM3LjcwODc1NDUgNDAuODc1MTU0MywzNi44N DM0Mjg2IDQwLjkxODMwODYsMzUuOTc4MTAyNyBDNDAuOTgzNzcxNCwzNC42NTk2ODMgNDAuOTY0MDIyOSwzMy4zNDE2MjUgNDAuODI1NDE3MSwzMi4wMjY0NTk4IEM0MC42NTU3MjU3LDMwLjQxNDQxNTIgNDAuMzE5NjM0MywyOC44Mzg1MzEzIDM5Ljc5ODQ5MTQsMjcuMzAyNDI0MSBDMzguNDU2MzIsMjMuMzQ2MDgwNCAzNi4xODEyMTE0LDIwLjAwNDQ2ODggMzIuOTkwMzU0MywxNy4yNzgzMTI1IEMzMC4zNjQ4OTE0LD E1LjAzNTI2MzQgMjcuMzQ0NDU3MSwxMy40NjQwODA0IDIzLjk5ODUzNzEsMTIuNTUyMTA3MSBDMjMuOTM2MzY1NywxMi41MzUxMTE2IDIzLjc3MTQyODYsMTIuNTI1NzA5OCAyMy43NzE0Mjg2LDEyLjUxMDE2MDcgQzIzLjc3MTQyODYsMjEuMzg2MTY5NiAyMy43NzE0Mjg2LDMwLjI0MDEyMDUgMjMuNzcxNDI4NiwzOS4xMDUyODEzIEMyOS4yNTcxNDI5LDQwLjI0NDcwNTQgMzQuNDg2ODU3MSw0MS4zODIzMjE0IDM5Ljg 0ODk2LDQyLjUyNDYzODQgWiBNMS44Mjg1NzE0Myw2OS44NTQ1NDQ2IEM4Ljc3NzE0Mjg2LDY3LjgwOTY1NjMgMTUuMzYsNjUuNzg3NTQ5MSAyMi4zMDg1NzE0LDYzLjc1MDI1NDUgQzIyLjMwODU3MTQsNjMuNDUwNDgyMSAyMi4zMDg1NzE0LDUzLjQ1MDk1OTggMjIuMzA4NTcxNCw1MS43MTYzMzA0IEMxNS4zNiw1MC4zMjE2MTE2IDguNzc3MTQyODYsNDguOTI1ODA4IDEuODI4NTcxNDMsNDcuNTI2Mzg4NCBDMS44Mjg1 NzE0Myw1NC45ODIwMDQ1IDEuODI4NTcxNDMsNjIuNDAyOTA2MyAxLjgyODU3MTQzLDY5Ljg1NDU0NDYgWiBNNC4yNDAwOTE0Myw0Ni4zNDI0ODY2IEM0LjM1NDU2LDQ2LjM3MTQxNTIgNC40MTE2MTE0Myw0Ni4zODg0MTA3IDQuNDcwMTI1NzEsNDYuNDAwMzQzOCBDNi42MzIyMjg1Nyw0Ni44NDQzOTczIDguNzkzOTY1NzEsNDcuMjg4MDg5MyAxMC45NTYwNjg2LDQ3LjczMTc4MTIgQzE1LjE0NzE1NDMsNDguNTkxNjgzI DE5LjMzODI0LDQ5LjQ1MTk0NjQgMjMuNTI5MzI1Nyw1MC4zMTE4NDgyIEMyNC4yNTQ5MDI5LDUwLjQ2MDgzMDQgMjQuOTc5NzQ4Niw1MC42MTM3OTAyIDI1LjcwNjQyMjksNTAuNzU2MjYzNCBDMjYuMDIwOTM3MSw1MC44MTgwOTgyIDI2LjMzMDMzMTQsNTAuOTAyMzUyNyAyNi42NTg3NDI5LDUwLjg5NTEyMDUgQzI4LjEzNjU5NDMsNTAuODYzMjk5MSAyOS42MDY0LDUwLjc1ODQzMyAzMS4wNTYwOTE0LDUwLjQ1NDMyMT QgQzMyLjQxMjUyNTcsNTAuMTY5NzM2NiAzMy43MDg5ODI5LDQ5LjcyNzEyOTUgMzQuOTExMDg1Nyw0OS4wMzMyMDU0IEMzNi44ODg4Njg2LDQ3Ljg5MTI1IDM4LjI3ODk0ODYsNDYuMjM2ODk3MyAzOS4yMjU0MTcxLDQ0LjE5NTYyNSBDMzkuMjM2NzU0Myw0NC4xNzA2NzQxIDM5LjIzODIxNzEsNDQuMTQxMzgzOSAzOS4yNDYyNjI5LDQ0LjEwNTIyMzIgQzM5LjE2NjE3MTQsNDQuMDg1MzM0OCAzOS4wOTQ4NTcxLDQ0LjA 2NTQ0NjQgMzkuMDIyMDgsNDQuMDQ5ODk3MyBDMzYuNDE3NDYyOSw0My40OTQ4MzA0IDMzLjgxMjExNDMsNDIuOTQwODQ4MiAzMS4yMDc0OTcxLDQyLjM4NTc4MTMgQzI4LjUzNzA1MTQsNDEuODE2NjExNiAyNS44NjY2MDU3LDQxLjI0NjM1NzEgMjMuMTk2NTI1Nyw0MC42NzUwMTc5IEMyMy4wNjg1MjU3LDQwLjY0NzUzNTcgMjIuOTUwMDM0Myw0MC42NTI5NTk4IDIyLjgyMzg2MjksNDAuNjkxMjkwMiBDMTYuNzI5MjM0 Myw0Mi41NDI3MTg4IDEwLjYzMzg3NDMsNDQuMzkxNjE2MSA0LjUzODUxNDI5LDQ2LjI0MTIzNjYgQzQuNDU0MDM0MjksNDYuMjY2OTEwNyA0LjM3MTAxNzE0LDQ2LjI5ODAwODkgNC4yNDAwOTE0Myw0Ni4zNDI0ODY2IFogTTM5Ljg0NDU3MTQsNC44NiBDMzkuODQwNTQ4Niw0Ljg0NTg5NzMyIDM5LjgzNjE2LDQuODMxNDMzMDQgMzkuODMyMTM3MSw0LjgxNzMzMDM2IEMzOS43ODI0LDQuODA2NDgyMTQgMzkuNzMzMzk0M yw0Ljc5Mjc0MTA3IDM5LjY4MzI5MTQsNC43ODQ3ODU3MSBDMzguNzUyNTQ4Niw0LjYzMTEwMjY4IDM3LjgyMTgwNTcsNC40Nzg1MDQ0NiAzNi44OTE0Mjg2LDQuMzI0NDU5ODIgQzM1LjUwMzE3NzEsNC4wOTQ0Nzc2OCAzNC4xMTUyOTE0LDMuODYxOTY0MjkgMzIuNzI2Njc0MywzLjYzMjM0Mzc1IEMzMS4xNjEwNTE0LDMuMzczNDMzMDQgMjkuNTk1MDYyOSwzLjExNzA1MzU3IDI4LjAyOTQ0LDIuODU4ODY2MDcgQzI2Lj QzNDE5NDMsMi41OTU2MTYwNyAyNC44Mzg1ODI5LDIuMzMzMDg5MjkgMjMuMjQ0NDM0MywyLjA2NDA1MzU3IEMyMy4wOTA0Njg2LDIuMDM4MDE3ODYgMjIuOTUyOTYsMi4wNDk5NTA4OSAyMi44MDYzMDg2LDIuMDk0NDI4NTcgQzE4Ljg3ODkwMjksMy4yODg4MTY5NiAxNC45NTA3NjU3LDQuNDgxMDM1NzEgMTEuMDIyNjI4Niw1LjY3Mjg5Mjg2IEM4Ljk2MTgyODU3LDYuMjk4MTExNjEgNi45MDEwMjg1Nyw2LjkyMjI0NTU 0IDQuODQwNTk0MjksNy41NDc4MjU4OSBDNC43NzQ3NjU3MSw3LjU2NzcxNDI5IDQuNTYxNTU0MjksNy42MzYwNTgwNCA0LjU2MTU1NDI5LDcuNjM2MDU4MDQgQzQuNTYxNTU0MjksNy42MzYwNTgwNCA0LjY5NTc3MTQzLDcuNjY3MTU2MjUgNC43MTU4ODU3MSw3LjY3MDQxMDcxIEM1Ljc4MDg0NTcxLDcuODM3ODM0ODIgNi44NDU4MDU3MSw4LjAwMzgxMjUgNy45MTA3NjU3MSw4LjE3MTk1OTgyIEMxMC4xNjYxMjU3LDgu NTI3NzgxMjUgMTIuNDIxMTIsOC44ODQ2ODc1IDE0LjY3NjQ4LDkuMjQwODcwNTQgQzE3LjAyMDM0MjksOS42MTExNTYyNSAxOS4zNjQ5MzcxLDkuOTc4OTEwNzEgMjEuNzA4MDY4NiwxMC4zNTQ5ODIxIEMyMS45NzA2NTE0LDEwLjM5NzI5MDIgMjIuMjA3NjM0MywxMC4zODc4ODg0IDIyLjQ2ODM4ODYsMTAuMzA2MTY1MiBDMjcuODc0Mzc3MSw4LjYwNTUyNjc5IDMzLjI4NDAyMjksNi45MTYwOTgyMSAzOC42OTI5MzcxL DUuMjIzNzc2NzkgQzM5LjA3NjkzNzEsNS4xMDM3MjMyMSAzOS40NjA1NzE0LDQuOTgxNSAzOS44NDQ1NzE0LDQuODYgWiIgaWQ9IlhNTElEXzExNDJfIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzguMTU0OTcxNCw0OC42NzgxMDcxIEMzOC4xOTY2NjI5LDQ4LjYyNTY3NDEgMzguMjE2MDQ1Nyw0OC41OTU2NjA3IDM4LjI0MDU0ODYsNDguNTcwNzA5OCBDMzkuNjI4MD Y4Niw0Ny4xNjkxMjA1IDQwLjU4OTUzMTQsNDUuNTEwMDY3IDQxLjI2MzkwODYsNDMuNjc4MTY1MiBDNDEuNzY3ODYyOSw0Mi4zMDkxMjA1IDQyLjA5MjYxNzEsNDAuODk2NjgzIDQyLjMwNjkyNTcsMzkuNDU2NzYzNCBDNDIuNTY0MDIyOSwzNy43Mjk3Mjc3IDQyLjY2MDIwNTcsMzUuOTkyMjA1NCA0Mi42MzQ5NzE0LDM0LjI0OTI1ODkgQzQyLjU0MTcxNDMsMjcuNzUxNTQwMiA0MC4yMTE3NDg2LDIyLjE1MDk2ODggMzU uNjU3MTQyOSwxNy40NzQzMDM2IEMzMi44MjQzMiwxNC41NjUxNzQxIDI5LjQzMTU4ODYsMTIuNTE1MjIzMiAyNS41NDkxNjU3LDExLjI2MDA4NDggQzI1LjQ3OTMxNDMsMTEuMjM3MzAzNiAyNS40MTA1NiwxMS4yMTAxODMgMjUuMzAyNjc0MywxMS4xNzE0OTExIEMyNS40MzI4Njg2LDExLjEyNjY1MTggMjUuNTI2MTI1NywxMS4wOTE5Mzc1IDI1LjYyMDg0NTcsMTEuMDYyMjg1NyBDMzEuNTIyMDExNCw5LjIxNjI4MTI1 IDM3LjQyMzkwODYsNy4zNzIwODQ4MiA0My4zMjMyNDU3LDUuNTIwNjU2MjUgQzQzLjU0OTk4ODYsNS40NDk0MTk2NCA0My43NTg4MTE0LDUuNDU3Mzc1IDQzLjk4MzM2LDUuNDkzODk3MzIgQzQ0Ljk1MTA0LDUuNjUxOTE5NjQgNDUuOTE3NjIyOSw1LjgxNjA4OTI5IDQ2Ljg2NDQ1NzEsNi4wNzYwODQ4MiBDNTAuMjUzNTMxNCw3LjAwNjUgNTMuMjE4MDExNCw4LjY3MDk3NzY4IDU1LjczNjMyLDExLjEwMjA2MjUgQzU4L jIzNDUxNDMsMTMuNTEzNjIwNSA1OS45NTU5MzE0LDE2LjM5MDIwNTQgNjAuOTYxMjgsMTkuNjkxNjc4NiBDNjEuNDMwODU3MSwyMS4yMzM5MzMgNjEuNzY4MDQ1NywyMi44MDI1ODQ4IDYxLjk2MzMzNzEsMjQuNDAxOTczMiBDNjIuMTYzMzgyOSwyNi4wMzkzMzA0IDYyLjIxNTY4LDI3LjY4MTM4ODQgNjIuMTQ1ODI4NiwyOS4zMjc0MjQxIEM2Mi4xMTA3MiwzMC4xNTYyMjc3IDYyLjA3MTU4ODYsMzAuOTg2MTE2MSA2MS 45OTI1OTQzLDMxLjgxMTMwMzYgQzYxLjgxNzQxNzEsMzMuNjM5NTg5MyA2MS40NTg2NTE0LDM1LjQyODgyMTQgNjAuNzU0Mjg1NywzNy4xMzkyMjMyIEM1OS42NDY1MzcxLDM5LjgyODQ5NTUgNTcuNzcwMDU3MSw0MS44MDg2NTYzIDU1LjE1MTU0MjksNDMuMTExODg4NCBDNTIuOTg2ODgsNDQuMTg5MTE2MSA1MC43MzYyNzQzLDQ1LjA1NzY5NjQgNDguNDQ0MzQyOSw0NS44MjcxOTY0IEM0NS41NzE2NTcxLDQ2Ljc5MTY wMjcgNDIuNjQ4ODY4Niw0Ny41ODQ2MDcxIDM5LjcwODE2LDQ4LjMxNjEzODQgQzM5LjI1MTAxNzEsNDguNDMwMDQ0NiAzOC43OTI3NzcxLDQ4LjUzOTk3MzIgMzguMzM0NTM3MSw0OC42NTA2MjUgQzM4LjI4NjI2MjksNDguNjYxNDczMiAzOC4yMzYxNiw0OC42NjU0NTA5IDM4LjE1NDk3MTQsNDguNjc4MTA3MSBaIiBpZD0iWE1MSURfMTE0MV8iIGZpbGw9IiM3N0UwRkQiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAg IDxwYXRoIGQ9Ik00Ny44ODA0MTE0LDQ3Ljc3NDA4OTMgQzUyLjMwOTk0MjksNTYuMTAyNjI1IDU2LjczMjE2LDY0LjQxNzA1OCA2MS4xNjQ5ODI5LDcyLjc1MTM3OTUgQzU0LjYyNzEwODYsNzQuODIzMDI2OCA0OC4xMTYyOTcxLDc2Ljg4NjM1NzEgNDEuNTc5ODg1Nyw3OC45NTgwMDQ1IEMzNi45MDEzMDI5LDcwLjE2MTU0OTEgMzIuMjI1MjgsNjEuMzY5Nzk0NiAyNy41Mzc1NTQzLDUyLjU1NjM0MzggQzI3LjYxODAxM TQsNTIuNTQ1NDk1NSAyNy42NzMyMzQzLDUyLjUzNDI4NTcgMjcuNzI4ODIyOSw1Mi41MzEwMzEzIEMyOC42OTM5NDI5LDUyLjQ3NzE1MTggMjkuNjU5MDYyOSw1Mi40MTAyNTQ1IDMwLjYwOTE4ODYsNTIuMjMwMTc0MSBDMzEuMjg0NjYyOSw1Mi4xMDIxNjUyIDMxLjk1NjExNDMsNTEuOTQ4MTIwNSAzMi42MjM1NDI5LDUxLjc4Mzk1MDkgQzMzLjYwMzY1NzEsNTEuNTQyNzU4OSAzNC41NzQ5OTQzLDUxLjI2Njg1MjcgMz UuNTU2NTcxNCw1MS4wMzE4MDggQzM4LjUwOTM0ODYsNTAuMzI0NTA0NSA0MS40Njc5NzcxLDQ5LjYzODE3NDEgNDQuMzg4OTM3MSw0OC44MDg2NDczIEM0NS41MTA5NDg2LDQ4LjQ5MDA3MTQgNDYuNjI1NjQ1Nyw0OC4xNDY1NDQ2IDQ3Ljc0MzYzNDMsNDcuODE0NTg5MyBDNDcuNzc5NDc0Myw0Ny44MDM3NDExIDQ3LjgxNDk0ODYsNDcuNzkzNjE2MSA0Ny44ODA0MTE0LDQ3Ljc3NDA4OTMgWiIgaWQ9IlhNTElEXzExNDB fIiBmaWxsPSIjNzdFMEZEIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNC4yNDAwOTE0Myw0Ni4zNDI0ODY2IEM0LjM3MDY1MTQzLDQ2LjI5ODAwODkgNC40NTM2Njg1Nyw0Ni4yNjY5MTA3IDQuNTM4NTE0MjksNDYuMjQxMjM2NiBDMTAuNjMzODc0Myw0NC4zOTE2MTYxIDE2LjcyOTIzNDMsNDIuNTQyMzU3MSAyMi44MjM4NjI5LDQwLjY5MTI5MDIgQzIyLjk1MDAzNDMsNDAuNjUyOTU5OCAyMy4w Njg1MjU3LDQwLjY0NzUzNTcgMjMuMTk2NTI1Nyw0MC42NzUwMTc5IEMyNS44NjY2MDU3LDQxLjI0NjcxODggMjguNTM3MDUxNCw0MS44MTY2MTE2IDMxLjIwNzQ5NzEsNDIuMzg1NzgxMyBDMzMuODEyMTE0Myw0Mi45NDEyMDk4IDM2LjQxNzA5NzEsNDMuNDk1MTkyIDM5LjAyMjA4LDQ0LjA0OTg5NzMgQzM5LjA5NDQ5MTQsNDQuMDY1NDQ2NCAzOS4xNjYxNzE0LDQ0LjA4NTMzNDggMzkuMjQ2MjYyOSw0NC4xMDUyMjMyI EMzOS4yMzgyMTcxLDQ0LjE0MTM4MzkgMzkuMjM2NzU0Myw0NC4xNzA2NzQxIDM5LjIyNTQxNzEsNDQuMTk1NjI1IEMzOC4yNzg5NDg2LDQ2LjIzNjUzNTcgMzYuODg4ODY4Niw0Ny44OTEyNSAzNC45MTEwODU3LDQ5LjAzMzIwNTQgQzMzLjcwOTM0ODYsNDkuNzI3MTI5NSAzMi40MTI1MjU3LDUwLjE2OTczNjYgMzEuMDU2MDkxNCw1MC40NTQzMjE0IEMyOS42MDY0LDUwLjc1ODQzMyAyOC4xMzY1OTQzLDUwLjg2MzI5OT EgMjYuNjU4NzQyOSw1MC44OTUxMjA1IEMyNi4zMzAzMzE0LDUwLjkwMjM1MjcgMjYuMDIwOTM3MSw1MC44MTgwOTgyIDI1LjcwNjQyMjksNTAuNzU2MjYzNCBDMjQuOTc5NzQ4Niw1MC42MTM0Mjg2IDI0LjI1NDkwMjksNTAuNDYwODMwNCAyMy41MjkzMjU3LDUwLjMxMTg0ODIgQzE5LjMzODI0LDQ5LjQ1MTk0NjQgMTUuMTQ3MTU0Myw0OC41OTIwNDQ2IDEwLjk1NjA2ODYsNDcuNzMxNzgxMyBDOC43OTM5NjU3MSw0Ny4 yODgwODkzIDYuNjMxODYyODYsNDYuODQ0Mzk3MyA0LjQ3MDEyNTcxLDQ2LjQwMDM0MzggQzQuNDExOTc3MTQsNDYuMzg4NDEwNyA0LjM1NDU2LDQ2LjM3MTQxNTIgNC4yNDAwOTE0Myw0Ni4zNDI0ODY2IFoiIGlkPSJYTUxJRF8xMTM5XyIgZmlsbD0iI0ZERTI0OCI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM5Ljg0NDU3MTQsNC44NiBDMzkuNDYwNTcxNCw0Ljk4MTUgMzkuMDc2OTM3MSw1LjEw MzcyMzIxIDM4LjY5MjU3MTQsNS4yMjM3NzY3OSBDMzMuMjgzNjU3MSw2LjkxNTczNjYxIDI3Ljg3NDAxMTQsOC42MDU1MjY3OSAyMi40NjgwMjI5LDEwLjMwNjE2NTIgQzIyLjIwNzI2ODYsMTAuMzg4MjUgMjEuOTcwMjg1NywxMC4zOTcyOTAyIDIxLjcwNzcwMjksMTAuMzU0OTgyMSBDMTkuMzY0NTcxNCw5Ljk3ODkxMDcxIDE3LjAyMDM0MjksOS42MTExNTYyNSAxNC42NzYxMTQzLDkuMjQwODcwNTQgQzEyLjQyMDc1N DMsOC44ODQ2ODc1IDEwLjE2NTc2LDguNTI3NzgxMjUgNy45MTA0LDguMTcxOTU5ODIgQzYuODQ1NDQsOC4wMDM4MTI1IDUuNzgwNDgsNy44Mzc4MzQ4MiA0LjcxNTUyLDcuNjcwNDEwNzEgQzQuNjk1NDA1NzEsNy42NjcxNTYyNSA0LjU2MTE4ODU3LDcuNjM2MDU4MDQgNC41NjExODg1Nyw3LjYzNjA1ODA0IEM0LjU2MTE4ODU3LDcuNjM2MDU4MDQgNC43NzQ0LDcuNTY3NzE0MjkgNC44NDAyMjg1Nyw3LjU0NzgyNTg5IE M2LjkwMDY2Mjg2LDYuOTIyMjQ1NTQgOC45NjE4Mjg1Nyw2LjI5ODExMTYxIDExLjAyMjI2MjksNS42NzI4OTI4NiBDMTQuOTUwNCw0LjQ4MTAzNTcxIDE4Ljg3ODUzNzEsMy4yODg4MTY5NiAyMi44MDU5NDI5LDIuMDk0NDI4NTcgQzIyLjk1MjIyODYsMi4wNDk5NTA4OSAyMy4wOTAxMDI5LDIuMDM4MDE3ODYgMjMuMjQ0MDY4NiwyLjA2NDA1MzU3IEMyNC44Mzg1ODI5LDIuMzMzMDg5MjkgMjYuNDMzODI4NiwyLjU5NTY xNjA3IDI4LjAyOTA3NDMsMi44NTg4NjYwNyBDMjkuNTk0Njk3MSwzLjExNzA1MzU3IDMxLjE2MDY4NTcsMy4zNzM0MzMwNCAzMi43MjYzMDg2LDMuNjMyMzQzNzUgQzM0LjExNDU2LDMuODYxOTY0MjkgMzUuNTAyODExNCw0LjA5NDExNjA3IDM2Ljg5MTA2MjksNC4zMjQ0NTk4MiBDMzcuODIxNDQsNC40Nzg4NjYwNyAzOC43NTI1NDg2LDQuNjMxMTAyNjggMzkuNjgyOTI1Nyw0Ljc4NDc4NTcxIEMzOS43MzMwMjg2LDQu NzkzMTAyNjggMzkuNzgyNCw0LjgwNjQ4MjE0IDM5LjgzMTc3MTQsNC44MTczMzAzNiBDMzkuODM2MTYsNC44MzE0MzMwNCAzOS44NDAxODI5LDQuODQ1ODk3MzIgMzkuODQ0NTcxNCw0Ljg2IFoiIGlkPSJYTUxJRF8xMTM4XyIgZmlsbD0iI0ZERTI0OCI+PC9wYXRoPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+
  16. 16. !Base64 is an
 anti-pattern
  17. 17. It increases file sizes…
  18. 18. …that increase is on your Critical Path
  19. 19. An Experiment
  20. 20. Time(ms) 0 100 200 300 400 500 600 700 800 Regular Base64 41.55ms 33.86ms 629ms 280ms 0.84ms0.083ms Parse First Paint Decode Desktop
  21. 21. Time(ms) 0 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 9,000 Regular Base64 48.16ms 88.33ms 7,950ms 774ms 2.02ms0.063ms Parse First Paint Decode Mobile
  22. 22. Key Findings 🖥 parsing was over 10× slower 📱 parsing was over 32× slower 🖥 first paint Base64 was 2.25× slower 📱 first paint was 10.27× slower
  23. 23. Key Findings 🖥 parsing was over 10× slower 📱 parsing was over 32× slower 🖥 first paint Base64 was 2.25× slower 📱 first paint was 10.27× slower
  24. 24. Key Findings 🖥 parsing was over 10× slower 📱 parsing was over 32× slower 🖥 first paint Base64 was 2.25× slower 📱 first paint was 10.27× slower
  25. 25. Key Findings 🖥 parsing was over 10× slower 📱 parsing was over 32× slower 🖥 first paint Base64 was 2.25× slower 📱 first paint was 10.27× slower
  26. 26. Key Findings 🖥 parsing was over 10× slower 📱 parsing was over 32× slower 🖥 first paint Base64 was 2.25× slower 📱 first paint was 10.27× slower
  27. 27. csswz.it/2FVsnJB Read thecase study
  28. 28. @import
  29. 29. @import "https://fonts.googleapis.com/css?family=Open+Sans";
  30. 30. @import "reset.css"; @import "typography.css"; @import "grid.css"; @import "components.css";
  31. 31. Style.css Style.css Reset.css Client Server typography.cssgrid.csscomponents.css Reset.css typography.css grid.css components.css
  32. 32. <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="reset.css" /> <link rel="stylesheet" href="typography.css" /> <link rel="stylesheet" href="grid.css" /> <link rel="stylesheet" href="components.css" />
  33. 33. Loadtime(ms) 0 275 550 825 1,100 @import <link />
  34. 34. Loadtime(ms) 0 275 550 825 1,100 @import <link />
  35. 35. Loadtime(ms) 0 275 550 825 1,100 @import <link /> 412ms
  36. 36. Selector Performance
  37. 37. ! This is the last thing on your list of things to optimise
  38. 38. .from > #right .to-left {}
  39. 39. .from > #right .to-left {}
  40. 40. .from > #right .to-left {} The Key Selector
  41. 41. Key Selector
  42. 42. .nav__item {} .sidebar p {} .icon * {} * {}
  43. 43. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast!
  44. 44. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast!
  45. 45. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast! A little slower
  46. 46. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast! A little slower
  47. 47. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast! A little slower Much slower
  48. 48. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast! A little slower Much slower
  49. 49. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast! A little slower Much slower Actually really fast
  50. 50. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast! A little slower Much slower Actually really fast
  51. 51. .nav > ul > li > a {} .nav ul li a {} Which is Faster?
  52. 52. .nav > ul > li > a {} .nav ul li a {} Which is Faster?
  53. 53. csswz.it/2FWUszW Join the
 discussion
  54. 54. “ “Roughly 50% of the time used to calculate the computed style for an element is used to match selectors…” — csswz.it/2GIs8l4
  55. 55. Alphabetic CSS
  56. 56. ! This isn’t even on your list of things to optimise
  57. 57. .c-btn { display: inline-block; padding: 0.5em 1em; background-color: #f43059; color: #fff; cursor: pointer; text-align: center; vertical-align: middle; font: inherit; }
  58. 58. .c-btn { background-color: #f43059; color: #fff; cursor: pointer; display: inline-block; font: inherit; padding: 0.5em 1em; text-align: center; vertical-align: middle; }
  59. 59. Size(bytes) 0 1,150 2,300 3,450 4,600 Regular CSS Alpha CSS
  60. 60. Size(bytes) 0 1,150 2,300 3,450 4,600 Regular CSS Alpha CSS 🔬
  61. 61. 3.24% smaller
  62. 62. aaabbbccc
  63. 63. aaabbbccc 3a3b3c
  64. 64. aaabbbccc 3a3b3c cbcaabbac
  65. 65. aaabbbccc 3a3b3c cbcaabbac cbc2a2bac
  66. 66. aaabbbccc 3a3b3c cbcaabbac cbc2a2bac This is a very crude
 over-simplifIcation
  67. 67. iGzip loves repetition and consistency
  68. 68. Mixin vs. @extend
  69. 69. .btn { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; } .btn-primary { @extend .btn; background-color: green; color: white; } .btn-secondary { @extend .btn; background-color: red; color: white; } @mixin btn() { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; } .btn { @include btn(); } .btn-primary { @include btn(); background-color: green; color: white; } .btn-secondary { @include btn(); background-color: red; color: white; } @extend 20 LoC Mixin 24 LoC
  70. 70. .btn, .btn-primary, .btn-secondary { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; } .btn-primary { background-color: green; color: white; } .btn-secondary { background-color: red; color: white; } .btn { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; } .btn-primary { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; background-color: green; color: white; } .btn-secondary { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; background-color: red; color: white; } @extend18 LoC Mixin 30 LoC
  71. 71. .btn, .btn-primary, .btn-secondary { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; } .btn-primary { background-color: green; color: white; } .btn-secondary { background-color: red; color: white; } .btn { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; } .btn-primary { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; background-color: green; color: white; } .btn-secondary { display: inline-block; padding: 1em 2em; font: inherit; cursor: pointer; text-align: center; vertical-align: middle; background-color: red; color: white; }
  72. 72. CompressionDelta(%) 0 25 50 75 100 @extend Mixin 68.15% 44.83% (Higher is better) 23.32%
  73. 73. i Mixins are better for performance than @extend
  74. 74. !That was a very
 non-scientific demo
  75. 75. Filesize(Kb) 0 45 90 135 180 Before Gzip After Gzip 12Kb 108Kb 18kb 72kb @extend Mixin
  76. 76. “ “My tests showed pretty conclusively that mixins end up being better for network performance than using @extend. “The way gzip works means that we get better savings even when our uncompresssed files are substantially larger.” — csswz.it/2jNxNMh
  77. 77. Asset Domains
  78. 78. <link rel="stylesheet" href="/assets/style.min.css" />
  79. 79. <link rel="stylesheet" href="https://st1.skybet.net/style.min.css" />
  80. 80. <link rel="stylesheet" href="https://st1.skybet.net/style.min.css" />
  81. 81. 0 0.5 1.0 2.0 CSS on an Asset Domain
  82. 82. 0 0.5 1.0 2.0 CSS on an Asset Domain
  83. 83. 0 0.5 1.0 2.0 Back on the Host Domain
  84. 84. “ “Make CSS small, minify, compress, load from the same hostname even (no DNS) and inline, if small enough.” — Stoyan Stefanov, csswz.it/2fYM2ei
  85. 85. Loading CSS and JS
  86. 86. iInline scripts block on CSSOM construction
  87. 87. <head> <link rel="stylesheet" href="style.css" /> <script> var script = document.createElement('script'); script.src = "script.js"; document.getElementsByTagName('head')[0].appendChild(script); </script> </head>
  88. 88. <head> <link rel="stylesheet" href="style.css" /> <script> var script = document.createElement('script'); script.src = "script.js"; document.getElementsByTagName('head')[0].appendChild(script); </script> </head>
  89. 89. <head> <script> var script = document.createElement('script'); script.src = "script.js"; document.getElementsByTagName('head')[0].appendChild(script); </script> <link rel="stylesheet" href="style.css" /> </head>
  90. 90. iLoad the JS with the async attribute
  91. 91. Basically…
  92. 92. 1.Optimise your critical path 2.Keep blocking CSS to a minimum 3.Avoid Base64 4.@import is evil 5.So is @extend 6.Alphabetic CSS is better 7.Get your head straight Basically…
  93. 93. 1.Optimise your critical path 2.Keep blocking CSS to a minimum 3.Avoid Base64 4.@import is evil 5.So is @extend 6.Alphabetic CSS is better 7.Get your head straight Basically… Except for a
 handful of exceptions
  94. 94. 1.Optimise your critical path 2.Keep blocking CSS to a minimum 3.Avoid Base64 4.@import is evil 5.So is @extend 6.Alphabetic CSS is better 7.Get your head straight Basically… For many
 reasons other
 than Performance Except for a
 handful of exceptions
  95. 95. 1.Optimise your critical path 2.Keep blocking CSS to a minimum 3.Avoid Base64 4.@import is evil 5.So is @extend 6.Alphabetic CSS is better 7.Get your head straight Basically… Only for performance For many
 reasons other
 than Performance Except for a
 handful of exceptions
  96. 96. Thank You!
  97. 97. Thank You! @csswizardry csswizardry@gmail.com speakerdeck.com/csswizardry harry.is/for-hire

×