FaCSSt: CSS & Performance

Ahh… CSS and performance. Two of my favourite things! But how well do they play together? It depends…

In this very matter-of-fact talk, we’ll be looking at all of the different ways CSS can make our websites faster or slower. From the common and perhaps more obvious, to the unusual and obscure ways in which CSS can impact performance for better or worse.

Transcript

1. FaCSSt:
 CSS and Performance Harry Roberts • @csswizardry
2. Hey! I’m Harry.
3. Hey! I’m Harry. Consultant Performance Engineer Leeds, UK csswizardry.com @csswizardry
5. “ “The Trainline reduced latency by 0.3 seconds […] and customers spent an extra £8.1m a year.” — csswz.it/2FQHt2S
6. Performance CSS
7. Why Does it Even Matter?
9. SERVER HTML CSS DOM CSSOM JS RendeR TREE
10. File Size
11. Larger files take longer to download…
12. Any idea how long to parse a 1MB stylesheet on a Moto G4?
14. i Light could travel 59,958km
17. Base64
18. background-image: url(/assets/masthead.jpg); background-image: url(data:image/jpeg;base64,...);
19. PHN2ZyB3aWR0aD0iNzg1IiBoZWlnaHQ9IjI2OSIgdmlld0JveD0iMCAwIDc4NSAyNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPmxvZ28tMjAxODwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBmaWxsLXJ1bGU9Im5vbnplcm8iPjxwYXRoIGQ9Ik04NC4wMjQgMT MuNzk0Yy0zOC44NTMgMC03MC40NjIgMzEuNjA4LTcwLjQ2MiA3MC40NjEgMCAzOC44NTMgMzEuNjA5IDcwLjQ2MSA3MC40NjIgNzAuNDYxIDM4Ljg1MiAwIDcwLjQ2MS0zMS42MDggNzAuNDYxLTcwLjQ2MSAwLTM4Ljg1My0zMS42MDktNzAuNDYxLTcwLjQ2MS03MC40NjF6bTAgMTU0LjA3NUMzNy45MTggMTY3Ljg2OS40MDkgMTMw LjM2LjQwOSA4NC4yNTUuNDA5IDM4LjE1IDM3LjkxOC42NDEgODQuMDI0LjY0MWM0Ni4xMDUgMCA4My42MTQgMzcuNTA5IDgzLjYxNCA4My42MTQgMCA0Ni4xMDUtMzcuNTA5IDgzLjYxNC04My42MTQgODMuNjE0eiIgZmlsbD0iI0RGNTMzNiIvPjxwYXRoIGZpbGw9IiNERjUzMzYiIGQ9Ik01OC41NzkgNDEuMTc2aDYyLjU0NnYyMS 45NDZIODIuNTgzdjE2Ljg3aDM1Ljc5OXYyMS45NDZIODIuNTgzdjI5LjA3OEg1OC41Nzl2LTg5Ljg0Ii8+PHBhdGggZmlsbD0iIzMyM0M0QiIgZD0iTTIzOC4xMjQgOC45MDJoNDcuMjQydjE1LjA3OWgtMzAuNjg1djE1LjI5MWgyOC41Nzd2MTUuMDc5aC0yOC41Nzd2MjMuNjIxaC0xNi41NTdWOC45MDJtNzYuMTM5IDE1LjA3OXYx OC40NTRoMTQuNTUyYzUuNTg5IDAgOC4zMy00LjAwNyA4LjMzLTkuNTk1IDAtNS4zOC0yLjg0Ny04Ljg1OS04LjMzLTguODU5aC0xNC41NTJ6bS0xNi41NTcgNTMuOTkxVjguOTAyaDMzLjk1NWMxMy43MDkgMCAyMi40NjIgOS4xNzQgMjIuNDYyIDIyLjg4MSAwIDkuMzg4LTMuMTY0IDE3LjI5Ni05LjM4NSAyMS44MjkgMS43OTMgMi 4yMTYgMy4yNjkgNC43NDcgNC40MjkgNy40ODhsNy4wNjUgMTYuODcySDMzOC40MWwtNC42MzktMTIuMjMxYy0xLjU4Mi0zLjc5Ny0zLjY5MS03LjM4Mi03LjQ4Ny04LjEyMmgtMTIuMDIxdjIwLjM1M2gtMTYuNTU3ek00MTUuNzEgNDMuNDljMC0xMS4yODUtNi4yMjMtMjAuMzUzLTE3LjUwNi0yMC4zNTMtMTEuMjgzIDAtMTcuMzk5 IDkuMDY4LTE3LjM5OSAyMC4zNTMgMCAxMS4xNzkgNi4yMjIgMjAuMjQ3IDE3LjM5OSAyMC4yNDcgMTEuMjgzIDAgMTcuNTA2LTguOTY0IDE3LjUwNi0yMC4yNDd6bS01MS44ODIgMGMwLTIwLjg4IDEzLjQ5OC0zNS45NTkgMzQuMzc2LTM1Ljk1OSAyMC44OCAwIDM0LjQ4MyAxNS4wNzkgMzQuNDgzIDM1Ljk1OSAwIDIwLjg3OC0xMy 42MDMgMzUuODUzLTM0LjQ4MyAzNS44NTMtMjAuNzc0IDAtMzQuMzc2LTE1LjA4LTM0LjM3Ni0zNS44NTN6bTgwLjY3My0zNC41ODhoMTYuNTU1bDI2Ljg5IDQyLjQ5N1Y4LjkwMmgxNi41NTZ2NjkuMDdoLTE2LjU1NmwtMjYuODktNDIuMzl2NDIuMzloLTE2LjU1NVY4LjkwMm03MC4zMzggMGg1OC43Mzd2MTUuMDc5aC0yMC45ODV2 NTMuOTkxaC0xNi41NTZWMjMuOTgxaC0yMS4xOTZWOC45MDJtNjkuMTc5IDBoNDkuODc4djE1LjA3OWgtMzMuMzIydjExLjkxNmgzMS4yMTR2MTUuMDhoLTMxLjIxNHYxMS45MTZoMzMuNjM5djE1LjA3OWgtNTAuMTk1VjguOTAybTYzLjI3MSAwaDE2LjU1OWwyNi44ODkgNDIuNDk3VjguOTAyaDE2LjU1NHY2OS4wN2gtMTYuNTU0bC 0yNi44ODktNDIuMzl2NDIuMzloLTE2LjU1OVY4LjkwMm05MS43NDkgMTUuMDc5djM4LjkxMmgxMC43NTRjMTAuOTY5IDAgMTcuNjEyLTguNDM3IDE3LjYxMi0xOS41MDkgMC0xMC45NjYtNi41MzgtMTkuNDAzLTE3LjUwNi0xOS40MDNoLTEwLjg2ek03MjIuNDgxIDguOTAyaDI3LjQxN2MyMC40NTggMCAzNC40ODMgMTQuMDI2IDM0 LjQ4MyAzNC40ODIgMCAyMC40NTctMTQuMTI5IDM0LjU4OC0zNC41ODkgMzQuNTg4aC0yNy4zMTFWOC45MDJ6TTI0OC43NzUgOTUuOTE2djQzLjU1MmMwIDEyLjY1NCA5LjA2OSAxOC4wMyAxOS4wODcgMTguMDMgOS44MDcgMCAxOC4wMzItNS42OTIgMTguMDMyLTE4LjAzVjk1LjkxNmg5LjM4NXY0NC4xODNjMCAxNy42MTItMTIuMz M4IDI2LjI1OC0yNy40MTcgMjYuMjU4LTE1LjUwMiAwLTI4LjQ3Mi04LjMzLTI4LjQ3Mi0yNi4yNThWOTUuOTE2aDkuMzg1bTY0Ljk2MSAwaDkuMzg2bDM3LjU0MSA1NC43MjlWOTUuOTE2aDkuMzg0djY5LjA3MWgtOS4zODRsLTM3LjU0MS01NC42MjV2NTQuNjI1aC05LjM4NlY5NS45MTZtNzUuNTA2IDY5LjA3MWg5LjM4NVY5NS45 MTZoLTkuMzg1em0yMS44MjktNjkuMDcxaDU2Ljk0NHY4LjY0OGgtMjMuNjIxdjYwLjQyM2gtOS4zODZ2LTYwLjQyM2gtMjMuOTM3di04LjY0OG02OS4zODkgMGg0Ny4yNDJ2OC42NDhoLTM3Ljg1N3YyMS4wODloMzUuNzQ5djguNTQxaC0zNS43NDl2MjIuMTQ0aDM4LjE3M3Y4LjY0OUg0ODAuNDZWOTUuOTE2bTcyLjg2OSA4LjY0OH Y1MS43NzRoMTUuNzExYzE1LjE4NSAwIDI0LjU3MS0xMC44NTkgMjQuNTcxLTI1Ljk0IDAtMTQuOTc1LTguOTY0LTI1LjgzNC0yMy45MzgtMjUuODM0aC0xNi4zNDR6bS05LjM4Ni04LjY0OGgyNS43M2MyMC4zNTIgMCAzMy42NCAxNC4wMjQgMzMuNjQgMzQuNDgyIDAgMjAuNTY0LTEzLjYwNCAzNC41ODktMzQuMjczIDM0LjU4OWgt MjUuMDk3Vjk1LjkxNnptLTM1Mi40OTQgNjMuNDk4aDEzLjE1M1Y5LjA5NmgtMTMuMTUzeiIvPjwvZz48cGF0aCBkPSJNMjIwLjI4OCAyNjUuMzEyYzQuODY0IDAgOC45MTItLjkxMiAxMi4xNDQtMi43MzYgMy4yMzItMS44MjQgNS43NzYtNC4yMDggNy42MzItNy4xNTIgMS44NTYtMi45NDQgMy4xNjgtNi4yODggMy45MzYtMTAuMD MyYTU2LjQ2NyA1Ni40NjcgMCAwIDAgMS4xNTItMTEuMzc2VjE5OS44NGgzLjI2NHYzNC4xNzZjMCA0LjU0NC0uNDggOC44OTYtMS40NCAxMy4wNTYtLjk2IDQuMTYtMi41NDQgNy44MjQtNC43NTIgMTAuOTkyLTIuMjA4IDMuMTY4LTUuMDg4IDUuNjk2LTguNjQgNy41ODQtMy41NTIgMS44ODgtNy45NTIgMi44MzItMTMuMiAyLjgz Mi01LjM3NiAwLTkuODcyLS45OTItMTMuNDg4LTIuOTc2LTMuNjE2LTEuOTg0LTYuNTEyLTQuNTkyLTguNjg4LTcuODI0LTIuMTc2LTMuMjMyLTMuNzI4LTYuOTEyLTQuNjU2LTExLjA0YTU3LjM3OCA1Ny4zNzggMCAwIDEtMS4zOTItMTIuNjI0VjE5OS44NGgzLjM2djM0LjE3NmMwIDMuOTY4LjM4NCA3LjgyNCAxLjE1MiAxMS41Nj guNzY4IDMuNzQ0IDIuMTEyIDcuMDcyIDQuMDMyIDkuOTg0czQuNDY0IDUuMjY0IDcuNjMyIDcuMDU2YzMuMTY4IDEuNzkyIDcuMTUyIDIuNjg4IDExLjk1MiAyLjY4OHptNjQuOC4zODRjLS4xMjguMDY0LS40NDguMjQtLjk2LjUyOC0uNTEyLjI4OC0xLjIuNjA4LTIuMDY0Ljk2LS44NjQuMzUyLTEuODU2LjY1Ni0yLjk3Ni45MTIt MS4xMi4yNTYtMi4zNTIuMzg0LTMuNjk2LjM4NC0yLjQ5NiAwLTQuNjU2LS43Mi02LjQ4LTIuMTYtMS44MjQtMS40NC0yLjczNi0zLjQ3Mi0yLjczNi02LjA5NlYyMjAuOTZoLTcuMTA0di0yLjg4aDcuMTA0di0xNy4xODRoMy4yNjR2MTcuMTg0aDExLjgwOHYyLjg4SDI2OS40NHYzOC43ODRjLjEyOCAxLjg1Ni44MzIgMy4yNjQgMi 4xMTIgNC4yMjQgMS4yOC45NiAyLjc1MiAxLjQ0IDQuNDE2IDEuNDQgMS4wMjQgMCAyLS4xMTIgMi45MjgtLjMzNi45MjgtLjIyNCAxLjc0NC0uNDggMi40NDgtLjc2OGExNS4wMiAxNS4wMiAwIDAgMCAxLjcyOC0uODE2Yy40NDgtLjI1Ni43MDQtLjQxNi43NjgtLjQ4bDEuMjQ4IDIuNjg4em0zMS4xMDQtNDQuNTQ0Yy00LjYwOC4x OTItOC42MDggMS42NDgtMTIgNC4zNjgtMy4zOTIgMi43Mi01Ljc2IDYuNDE2LTcuMTA0IDExLjA4OFYyNjhoLTMuMjY0di00OS45MmgzLjE2OHYxMi42NzJjMS43MjgtMy41MiA0LjAzMi02LjQgNi45MTItOC42NHM1Ljk1Mi0zLjU1MiA5LjIxNi0zLjkzNmMuNjQtLjA2NCAxLjIzMi0uMDk2IDEuNzc2LS4wOTZoMS4yOTZ2My4wNz J6bTI3LjY0OCA0Ny44MDhjLTMuMzkyIDAtNi41Ni0uNjg4LTkuNTA0LTIuMDY0YTI0LjUwMyAyNC41MDMgMCAwIDEtNy43MjgtNS42NjRjLTIuMjA4LTIuNC0zLjkzNi01LjE4NC01LjE4NC04LjM1Mi0xLjI0OC0zLjE2OC0xLjg3Mi02LjU0NC0xLjg3Mi0xMC4xMjggMC0zLjUyLjYwOC02LjgxNiAxLjgyNC05Ljg4OCAxLjIxNi0z LjA3MiAyLjkxMi01Ljc2IDUuMDg4LTguMDY0YTI0LjcxMyAyNC43MTMgMCAwIDEgNy41ODQtNS40NzJjMi44OC0xLjM0NCA2LjAxNi0yLjAxNiA5LjQwOC0yLjAxNiAzLjQ1NiAwIDYuNjU2LjY3MiA5LjYgMi4wMTZhMjQuMDE3IDI0LjAxNyAwIDAgMSA3LjY4IDUuNTJjMi4xNzYgMi4zMzYgMy44ODggNS4wNzIgNS4xMzYgOC4yMD ggMS4yNDggMy4xMzYgMS44NzIgNi40NjQgMS44NzIgOS45ODR2Ljc2OGMwIC4zODQtLjAzMi42MDgtLjA5Ni42NzJoLTQ0LjczNmMuMjU2IDMuMDcyLjk3NiA1LjkzNiAyLjE2IDguNTkyIDEuMTg0IDIuNjU2IDIuNzIgNC45NDQgNC42MDggNi44NjRhMjEuNjI4IDIxLjYyOCAwIDAgMCA2LjUyOCA0LjU2IDE4LjY5IDE4LjY5IDAg MCAwIDcuODI0IDEuNjhjMS43OTIgMCAzLjU2OC0uMjQgNS4zMjgtLjcyYTIwLjQzNiAyMC40MzYgMCAwIDAgNC45NDQtMi4wNjQgMTcuMzIzIDE3LjMyMyAwIDAgMCA0LjAzMi0zLjIxNiAxNi40NzcgMTYuNDc3IDAgMCAwIDIuNzg0LTQuMDhsMi45NzYuNzY4Yy0uNzA0IDEuNzI4LTEuNzI4IDMuMzQ0LTMuMDcyIDQuODQ4YTE5Lj I1NyAxOS4yNTcgMCAwIDEtNC43NTIgMy44NCAyNi4xOTMgMjYuMTkzIDAgMCAxLTUuOTA0IDIuNDk2IDIzLjQ4IDIzLjQ4IDAgMCAxLTYuNTI4LjkxMnptMjAuNjQtMjcuMjY0Yy0uMTkyLTMuMTM2LS44NjQtNi4wMTYtMi4wMTYtOC42NC0xLjE1Mi0yLjYyNC0yLjY3Mi00Ljg5Ni00LjU2LTYuODE2YTIwLjQyMyAyMC40MjMgMCAw IDAtNi40OC00LjQ2NGMtMi40MzItMS4wNTYtNS4wNTYtMS41ODQtNy44NzItMS41ODRzLTUuNDQuNTQ0LTcuODcyIDEuNjMyYTE5Ljk2NCAxOS45NjQgMCAwIDAtNi4zODQgNC41MTJjLTEuODI0IDEuOTItMy4yOTYgNC4xOTItNC40MTYgNi44MTYtMS4xMiAyLjYyNC0xLjc3NiA1LjQ3Mi0xLjk2OCA4LjU0NGg0MS41Njh6bTEwLj Y1NiAxLjE1MmMwLTMuNTg0LjYwOC02LjkyOCAxLjgyNC0xMC4wMzIgMS4yMTYtMy4xMDQgMi45MTItNS44MDggNS4wODgtOC4xMTIgMi4xNzYtMi4zMDQgNC43NTItNC4xMTIgNy43MjgtNS40MjQgMi45NzYtMS4zMTIgNi4xOTItMS45NjggOS42NDgtMS45NjggNC4zNTIgMCA4LjIyNCAxLjAwOCAxMS42MTYgMy4wMjQgMy4zOTIg Mi4wMTYgNS45MiA0Ljc4NCA3LjU4NCA4LjMwNGwtMy4xNjggMS4xNTJjLTEuNi0yLjk0NC0zLjg0LTUuMjQ4LTYuNzItNi45MTItMi44OC0xLjY2NC02LjA4LTIuNDk2LTkuNi0yLjQ5Ni0yLjg4IDAtNS41ODQuNTc2LTguMTEyIDEuNzI4YTIwLjgwNyAyMC44MDcgMCAwIDAtNi42MjQgNC43NTJjLTEuODg4IDIuMDE2LTMuMzYgNC 40LTQuNDE2IDcuMTUyLTEuMDU2IDIuNzUyLTEuNTg0IDUuNjk2LTEuNTg0IDguODMyIDAgMy4xMzYuNTYgNi4wOTYgMS42OCA4Ljg4IDEuMTIgMi43ODQgMi42MjQgNS4yMzIgNC41MTIgNy4zNDRhMjEuMDQgMjEuMDQgMCAwIDAgNi42MjQgNC45OTIgMTguMjYyIDE4LjI2MiAwIDAgMCA4LjAxNiAxLjgyNCAxOS4yMiAxOS4yMiAw IDAgMCA1LjUyLS44MTYgMjMuMDEgMjMuMDEgMCAwIDAgNS4wNC0yLjE2YzEuNTM2LS44OTYgMi44NjQtMS45MzYgMy45ODQtMy4xMiAxLjEyLTEuMTg0IDEuODcyLTIuNDQ4IDIuMjU2LTMuNzkybDMuMjY0Ljk2Yy0uNTc2IDEuNzI4LTEuNTIgMy4zMjgtMi44MzIgNC44YTE5LjcwNCAxOS43MDQgMCAwIDEtNC42MDggMy43OTJjLT EuNzYgMS4wNTYtMy42OTYgMS44ODgtNS44MDggMi40OTZhMjMuNDggMjMuNDggMCAwIDEtNi41MjguOTEyYy0zLjM5MiAwLTYuNTYtLjY4OC05LjUwNC0yLjA2NGEyNC44NiAyNC44NiAwIDAgMS03LjcyOC01LjYxNmMtMi4yMDgtMi4zNjgtMy45NTItNS4xMzYtNS4yMzItOC4zMDQtMS4yOC0zLjE2OC0xLjkyLTYuNTQ0LTEuOTIt MTAuMTI4ek00NzAuMzY4IDI2OGgtMy4yNjR2LTI3Ljg0YzAtMTMuMTg0LTQuMzg0LTE5Ljc3Ni0xMy4xNTItMTkuNzc2LTIuMjQgMC00LjQxNi40MTYtNi41MjggMS4yNDhhMjEuNzI0IDIxLjcyNCAwIDAgMC01Ljg1NiAzLjQ1NiAyMy44MDYgMjMuODA2IDAgMCAwLTQuNzA0IDUuMjMyIDIyLjQ0NSAyMi40NDUgMCAwIDAtMi45Nz YgNi40OFYyNjhoLTMuMjY0di03MC4wOGgzLjI2NHYzMi42NGEyNC42NDUgMjQuNjQ1IDAgMCAxIDMuNzkyLTUuNDI0IDI1LjM2NyAyNS4zNjcgMCAwIDEgNC45NDQtNC4xNzYgMjMuODg0IDIzLjg4NCAwIDAgMSA1LjcxMi0yLjY4OGMyLjAxNi0uNjQgNC4wOC0uOTYgNi4xOTItLjk2IDUuMzc2IDAgOS4zNiAxLjk1MiAxMS45NTIg NS44NTYgMi41OTIgMy45MDQgMy44ODggOS40NCAzLjg4OCAxNi42MDhWMjY4em0zNS4yMzItMi4zMDRjLS4xMjguMDY0LS40NDguMjQtLjk2LjUyOC0uNTEyLjI4OC0xLjIuNjA4LTIuMDY0Ljk2LS44NjQuMzUyLTEuODU2LjY1Ni0yLjk3Ni45MTItMS4xMi4yNTYtMi4zNTIuMzg0LTMuNjk2LjM4NC0yLjQ5NiAwLTQuNjU2LS43Mi 02LjQ4LTIuMTYtMS44MjQtMS40NC0yLjczNi0zLjQ3Mi0yLjczNi02LjA5NlYyMjAuOTZoLTcuMTA0di0yLjg4aDcuMTA0di0xNy4xODRoMy4yNjR2MTcuMTg0aDExLjgwOHYyLjg4aC0xMS44MDh2MzguNzg0Yy4xMjggMS44NTYuODMyIDMuMjY0IDIuMTEyIDQuMjI0IDEuMjguOTYgMi43NTIgMS40NCA0LjQxNiAxLjQ0IDEuMDI0 IDAgMi0uMTEyIDIuOTI4LS4zMzYuOTI4LS4yMjQgMS43NDQtLjQ4IDIuNDQ4LS43NjhhMTUuMDIgMTUuMDIgMCAwIDAgMS43MjgtLjgxNmMuNDQ4LS4yNTYuNzA0LS40MTYuNzY4LS40OGwxLjI0OCAyLjY4OHpNNTkwLjQxNiAyNjhjMC0xLjQ3Mi4xNDQtMy4yOTYuNDMyLTUuNDcyLjI4OC0yLjE3Ni45OTItNC40NjQgMi4xMTItNi 44NjQgMS4xMi0yLjQgMi43NTItNC43MzYgNC44OTYtNy4wMDggMi4xNDQtMi4yNzIgNS4xMDQtNC4yNCA4Ljg4LTUuOTA0YTU2NS4yNjcgNTY1LjI2NyAwIDAgMSA1LjgwOC0yLjQ0OGMyLjA4LS44NjQgNC0xLjkwNCA1Ljc2LTMuMTIgMS43Ni0xLjIxNiAzLjIzMi0yLjY0IDQuNDE2LTQuMjcyIDEuMTg0LTEuNjMyIDEuNzc2LTMu NjMyIDEuNzc2LTYgMC0xLjQwOC0uMzA0LTIuOC0uOTEyLTQuMTc2LS42MDgtMS4zNzYtMS41Mi0yLjYwOC0yLjczNi0zLjY5Ni0xLjIxNi0xLjA4OC0yLjczNi0xLjk4NC00LjU2LTIuNjg4LTEuODI0LS43MDQtMy45ODQtMS4wNTYtNi40OC0xLjA1Ni0yLjMwNCAwLTQuMzg0LjM1Mi02LjI0IDEuMDU2LTEuODU2LjcwNC0zLjQ1Ni AxLjUyLTQuOCAyLjQ0OC0xLjM0NC45MjgtMi40NDggMS44NTYtMy4zMTIgMi43ODQtLjg2NC45MjgtMS40NTYgMS41ODQtMS43NzYgMS45NjhsLTIuMzA0LTIuMjA4Yy4wNjQtLjEyOC41Ni0uNjcyIDEuNDg4LTEuNjMyLjkyOC0uOTYgMi4xOTItMiAzLjc5Mi0zLjEyIDEuNi0xLjEyIDMuNTM2LTIuMTI4IDUuODA4LTMuMDI0IDIu MjcyLS44OTYgNC44MTYtMS4zNDQgNy42MzItMS4zNDQgMi44OCAwIDUuNDQuNDE2IDcuNjggMS4yNDggMi4yNC44MzIgNC4wOTYgMS45MiA1LjU2OCAzLjI2NCAxLjQ3MiAxLjM0NCAyLjU5MiAyLjg5NiAzLjM2IDQuNjU2Ljc2OCAxLjc2IDEuMTUyIDMuNTM2IDEuMTUyIDUuMzI4IDAgMi43NTItLjY0IDUuMTItMS45MiA3LjEwNG ExOS40NDggMTkuNDQ4IDAgMCAxLTQuNzUyIDUuMDg4IDMwLjA1NyAzMC4wNTcgMCAwIDEtNi4wNDggMy41MDQgMjk0LjM5IDI5NC4zOSAwIDAgMS01LjgwOCAyLjQ0OGMtMy4wNzIgMS4yOC01LjU4NCAyLjgzMi03LjUzNiA0LjY1Ni0xLjk1MiAxLjgyNC0zLjUwNCAzLjcxMi00LjY1NiA1LjY2NC0xLjE1MiAxLjk1Mi0xLjk1MiAz LjgwOC0yLjQgNS41NjgtLjQ0OCAxLjc2LS43MDQgMy4xNTItLjc2OCA0LjE3NmgzNC45NDRWMjY4aC0zOC40OTZ6bTk2LjA5Ni0yOC4xMjhjMCA0LjIyNC0uNTkyIDguMTEyLTEuNzc2IDExLjY2NC0xLjE4NCAzLjU1Mi0yLjgzMiA2LjYyNC00Ljk0NCA5LjIxNi0yLjExMiAyLjU5Mi00LjYwOCA0LjYwOC03LjQ4OCA2LjA0OC0yLj g4IDEuNDQtNi4wMTYgMi4xNi05LjQwOCAyLjE2LTMuNDU2IDAtNi42MjQtLjcyLTkuNTA0LTIuMTYtMi44OC0xLjQ0LTUuMzc2LTMuNDU2LTcuNDg4LTYuMDQ4cy0zLjc2LTUuNjY0LTQuOTQ0LTkuMjE2Yy0xLjE4NC0zLjU1Mi0xLjc3Ni03LjQ0LTEuNzc2LTExLjY2NCAwLTQuMjI0LjU5Mi04LjExMiAxLjc3Ni0xMS42NjQgMS4x ODQtMy41NTIgMi44MzItNi42MjQgNC45NDQtOS4yMTYgMi4xMTItMi41OTIgNC42MDgtNC42MjQgNy40ODgtNi4wOTYgMi44OC0xLjQ3MiA2LjA0OC0yLjIwOCA5LjUwNC0yLjIwOCAzLjM5MiAwIDYuNTI4LjczNiA5LjQwOCAyLjIwOCAyLjg4IDEuNDcyIDUuMzc2IDMuNTA0IDcuNDg4IDYuMDk2czMuNzYgNS42NjQgNC45NDQgOS 4yMTZjMS4xODQgMy41NTIgMS43NzYgNy40NCAxLjc3NiAxMS42NjR6bS0zLjI2NCAwYzAtMy44NC0uNDk2LTcuMzYtMS40ODgtMTAuNTZzLTIuMzg0LTUuOTUyLTQuMTc2LTguMjU2Yy0xLjc5Mi0yLjMwNC0zLjkzNi00LjA4LTYuNDMyLTUuMzI4LTIuNDk2LTEuMjQ4LTUuMjQ4LTEuODcyLTguMjU2LTEuODcycy01Ljc3Ni42MjQt OC4zMDQgMS44NzJjLTIuNTI4IDEuMjQ4LTQuNjg4IDMuMDI0LTYuNDggNS4zMjgtMS43OTIgMi4zMDQtMy4xODQgNS4wNTYtNC4xNzYgOC4yNTZzLTEuNDg4IDYuNzItMS40ODggMTAuNTZjMCAzLjg0LjQ5NiA3LjM2IDEuNDg4IDEwLjU2czIuMzg0IDUuOTM2IDQuMTc2IDguMjA4YzEuNzkyIDIuMjcyIDMuOTUyIDQuMDMyIDYuND ggNS4yOCAyLjUyOCAxLjI0OCA1LjI5NiAxLjg3MiA4LjMwNCAxLjg3MnM1Ljc2LS42MjQgOC4yNTYtMS44NzJjMi40OTYtMS4yNDggNC42NC0zLjAwOCA2LjQzMi01LjI4IDEuNzkyLTIuMjcyIDMuMTg0LTUuMDA4IDQuMTc2LTguMjA4czEuNDg4LTYuNzIgMS40ODgtMTAuNTZ6bTQ0LjQ0OCAyNS4wNTZWMjY4aC0yOS4wODh2LTMu MDcyaDEzLjYzMnYtNDcuMjMyYy0uNTEyLjc2OC0xLjM5MiAxLjYxNi0yLjY0IDIuNTQ0YTMyLjQxNSAzMi40MTUgMCAwIDEtNC4xMjggMi41OTIgMzQuMzMyIDM0LjMzMiAwIDAgMS00LjcwNCAyLjA2NGMtMS42MzIuNTc2LTMuMDg4Ljg2NC00LjM2OC44NjR2LTMuNDU2YzEuNjY0IDAgMy40MDgtLjQ0OCA1LjIzMi0xLjM0NGEzNi 42NzMgMzYuNjczIDAgMCAwIDUuMDQtMi45NzZjMS41MzYtMS4wODggMi44MzItMi4xMjggMy44ODgtMy4xMnMxLjYxNi0xLjU1MiAxLjY4LTEuNjhoMy4yNjR2NTEuNzQ0aDEyLjE5MnptNTIuODk2LTE1LjI2NGMwIDIuODgtLjYyNCA1LjUwNC0xLjg3MiA3Ljg3MmExOC4wMSAxOC4wMSAwIDAgMS01LjA4OCA2Yy0yLjE0NCAxLjYz Mi00LjYyNCAyLjg5Ni03LjQ0IDMuNzkyLTIuODE2Ljg5Ni01Ljc5MiAxLjM0NC04LjkyOCAxLjM0NC0zLjQ1NiAwLTYuNTc2LS41MjgtOS4zNi0xLjU4NHMtNS4xNjgtMi40NjQtNy4xNTItNC4yMjRjLTEuOTg0LTEuNzYtMy41Mi0zLjc5Mi00LjYwOC02LjA5NmExNi44OCAxNi44OCAwIDAgMS0xLjYzMi03LjI5NmMwLTIuMzA0Lj QzMi00LjQ0OCAxLjI5Ni02LjQzMmExOC4zODcgMTguMzg3IDAgMCAxIDMuNDU2LTUuMjggMjEuMzExIDIxLjMxMSAwIDAgMSA0Ljg5Ni0zLjg4OGMxLjgyNC0xLjA1NiAzLjY2NC0xLjg3MiA1LjUyLTIuNDQ4YTI4Ljc1NiAyOC43NTYgMCAwIDEtNC44OTYtMi4zNTIgMTcuNjkyIDE3LjY5MiAwIDAgMS00LjAzMi0zLjMxMiAxNS40 MzYgMTUuNDM2IDAgMCAxLTIuNzM2LTQuMjcyYy0uNjcyLTEuNTY4LTEuMDA4LTMuMjgtMS4wMDgtNS4xMzYgMC0yLjY4OC42MDgtNS4wNTYgMS44MjQtNy4xMDRhMTYuNTYyIDE2LjU2MiAwIDAgMSA0Ljc1Mi01LjEzNmMxLjk1Mi0xLjM3NiA0LjE2LTIuNDMyIDYuNjI0LTMuMTY4YTI1Ljg3MiAyNS44NzIgMCAwIDEgNy40NC0xLj EwNGMyLjQ5NiAwIDQuOTc2LjM2OCA3LjQ0IDEuMTA0IDIuNDY0LjczNiA0LjY1NiAxLjc5MiA2LjU3NiAzLjE2OGExNi44IDE2LjggMCAwIDEgNC43MDQgNS4xMzZjMS4yMTYgMi4wNDggMS44MjQgNC40MTYgMS44MjQgNy4xMDQgMCAxLjg1Ni0uMzUyIDMuNTY4LTEuMDU2IDUuMTM2YTE1LjYxIDE1LjYxIDAgMCAxLTIuNzg0IDQu MjI0IDE5LjU0NSAxOS41NDUgMCAwIDEtNC4wMzIgMy4zMTIgMjYuNzIgMjYuNzIgMCAwIDEtNC44OTYgMi40IDI0Ljk2MyAyNC45NjMgMCAwIDEgNS45NTIgMi42ODhjMS44NTYgMS4xNTIgMy40NTYgMi41MTIgNC44IDQuMDhhMTkuNTMgMTkuNTMgMCAwIDEgMy4yMTYgNS4yMzJjLjggMS45MiAxLjIgNCAxLjIgNi4yNHptLTMuMj Y0LS4yODhjMC0yLjYyNC0uNjA4LTQuOTYtMS44MjQtNy4wMDhhMTYuOCAxNi44IDAgMCAwLTQuNzA0LTUuMTM2IDIyLjQ3IDIyLjQ3IDAgMCAwLTYuMzg0LTMuMTY4Yy0yLjMzNi0uNzM2LTQuNjU2LTEuMTA0LTYuOTYtMS4xMDQtMi4zNjggMC00LjcyLjQtNy4wNTYgMS4yLTIuMzM2LjgtNC40MzIgMS45Mi02LjI4OCAzLjM2YTE3 LjI3OSAxNy4yNzkgMCAwIDAtNC41MTIgNS4yMzJjLTEuMTUyIDIuMDQ4LTEuNzI4IDQuMzItMS43MjggNi44MTYgMCAyLjU2LjYwOCA0Ljg0OCAxLjgyNCA2Ljg2NGExNy4yNjMgMTcuMjYzIDAgMCAwIDQuNjU2IDUuMDg4YzEuODg4IDEuMzc2IDQuMDE2IDIuNDMyIDYuMzg0IDMuMTY4IDIuMzY4LjczNiA0LjcwNCAxLjEwNCA3Lj AwOCAxLjEwNCAyLjM2OCAwIDQuNzItLjM4NCA3LjA1Ni0xLjE1MiAyLjMzNi0uNzY4IDQuNDMyLTEuODU2IDYuMjg4LTMuMjY0YTE2LjczIDE2LjczIDAgMCAwIDQuNTEyLTUuMTg0YzEuMTUyLTIuMDQ4IDEuNzI4LTQuMzIgMS43MjgtNi44MTZ6bS0zNy4wNTYtMzIuNzM2YzAgMi4xNzYuNTI4IDQuMDk2IDEuNTg0IDUuNzZhMTQu NjQ1IDE0LjY0NSAwIDAgMCA0LjA4IDQuMjI0YzEuNjY0IDEuMTUyIDMuNTIgMi4wMTYgNS41NjggMi41OTIgMi4wNDguNTc2IDQuMDY0Ljg2NCA2LjA0OC44NjRzNC0uMzA0IDYuMDQ4LS45MTJhMjAuMTEgMjAuMTEgMCAwIDAgNS42MTYtMi42NCAxNC4xOSAxNC4xOSAwIDAgMCA0LjEyOC00LjI3MmMxLjA1Ni0xLjY5NiAxLjU4NC 0zLjYzMiAxLjU4NC01LjgwOCAwLTIuMTc2LS40OTYtNC4wOTYtMS40ODgtNS43NmExMy43NDggMTMuNzQ4IDAgMCAwLTMuOTM2LTQuMjI0Yy0xLjYzMi0xLjE1Mi0zLjUwNC0yLjAzMi01LjYxNi0yLjY0YTIzLjE0IDIzLjE0IDAgMCAwLTYuNDMyLS45MTJjLTIuMjQgMC00LjM4NC4zMDQtNi40MzIuOTEyLTIuMDQ4LjYwOC0zLjg3 MiAxLjUwNC01LjQ3MiAyLjY4OGExMy43NTggMTMuNzU4IDAgMCAwLTMuODQgNC4zMmMtLjk2IDEuNjk2LTEuNDQgMy42MzItMS40NCA1LjgwOHoiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNNTQ3LjIyMiAxOTh2NzAiIHN0cm9rZS1vcGFjaXR5PSIuMzA0IiBzdHJva2U9IiMzMjNDNEIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW xpbmVjYXA9InNxdWFyZSIvPjwvZz48L3N2Zz4=
20. ! Base64 is an
 anti-pattern
21. It increases file sizes…
22. …that increase is on your Critical Path
23. An Experiment
24. Time (ms) 0 100 200 300 400 500 600 700 800 Regular Base64 41.55ms 33.86ms 629ms 280ms 0.84ms 0.083ms Parse First Paint Decode Desktop
25. 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.02ms 0.063ms Parse First Paint Decode Mobile
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. csswz.it/2FVsnJB Read the case study
28. @import
29. @import "https://fonts.googleapis.com/css?family=Open+Sans";
30. @import "reset.css"; @import "typography.css"; @import "grid.css"; @import "components.css";
33. Style.css Style.css Reset.css Client Server typography.css grid.css components.css Reset.css typography.css grid.css components.css
35. <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" />
37. Load time (ms) 0 275 550 825 1,100 @import <link /> 412ms
38. Selector Performance
39. ! This is the last thing on your list of things to optimise
40. .from > #right .to-left {} The Key Selector
42. .nav__item {} .sidebar p {} .icon * {} * {} Pretty fast! A little slower Much slower Actually really fast
43. .nav > ul > li > a {} .nav ul li a {} Which is Faster?
45. csswz.it/2FWUszW Join the
 discussion
46. “ “Roughly 50% of the time used to calculate the computed style for an element is used to match selectors…” — csswz.it/2GIs8l4
48. Alphabetic CSS
49. ! This isn’t even on your list of things to optimise
50. .c-btn { display: inline-block; padding: 0.5em 1em; background-color: #f43059; color: #fff; cursor: pointer; text-align: center; vertical-align: middle; font: inherit; }
51. .c-btn { background-color: #f43059; color: #fff; cursor: pointer; display: inline-block; font: inherit; padding: 0.5em 1em; text-align: center; vertical-align: middle; }
52. Size (bytes) 0 1,150 2,300 3,450 4,600 Regular CSS Alpha CSS
53. 3.24% smaller
54. aaabbbccc
55. aaabbbccc 3a3b3c
56. aaabbbccc 3a3b3c cbcaabbac
57. aaabbbccc 3a3b3c cbcaabbac cbc2a2bac This is a very crude
 over-simplifIcation
58. i Gzip loves repetition and consistency
59. Mixin vs. @extend
60. .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
61. .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; } @extend 18 LoC Mixin 30 LoC
62. .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; }
63. Compression Delta (%) 0 25 50 75 100 @extend Mixin 68.15% 44.83% (Higher is better) 23.32%
64. i Mixins are better for performance than @extend
65. ! That was a very
 non-scientific demo
66. Filesize (Kb) 0 45 90 135 180 Before Gzip After Gzip 12Kb 108Kb 18kb 72kb @extend Mixin
67. “ “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
68. Asset Domains
70. <link rel="stylesheet" href="/assets/style.min.css" />
71. <link rel="stylesheet" href="https://st1.skybet.net/style.min.css" />
72. 0 0.5 1.0 2.0 CSS on an Asset Domain
73. 0 0.5 1.0 2.0 Back on the Host Domain
74. “ “Make CSS small, minify, compress, load from the same hostname even (no DNS) and inline, if small enough.” — Stoyan Stefanov, csswz.it/2fYM2ei
75. LINK in BODY
76. LINK in BODY Traditionally, all <link /> elements go in the <head> But we can now start putting <link /> in the <body> Effectively progressively rendering pages…
77. <head> <link rel="stylesheet" href="app.css" /> </head> <body> <header class="page-header">…</header> <section class="sidebar">…</section>
 <main class="content">…</main> <footer class="page-foot">…</footer> </body> HTTP/1.1: Bundle everything But this
 contains lots of
 redundancy… …and blocks
 rendering
78. Browsers don’t render anything until all CSS has been retrieved.
79. <head> <link rel="stylesheet" href="common.css" /> <link rel="stylesheet" href="page-header.css" /> <link rel="stylesheet" href="sidebar.css" /> <link rel="stylesheet" href="content.css" /> <link rel="stylesheet" href="page-foot.css" /> </head> <body> <header class="page-header">…</header> <section class="sidebar">…</section>
 <main class="content">…</main> <footer class="page-foot">…</footer> </body> HTTP/2: Split everything Much less
 redundancy… …But still
 blocks rendering
80. Now browsers now only block rendering of subsequent content
81. <head> <link rel="stylesheet" href="common.css" /> </head> <body> <link rel="stylesheet" href="page-header.css" /> <header class="page-header">…</header> <link rel="stylesheet" href="sidebar.css" /> <section class="sidebar">…</section> <link rel="stylesheet" href="content.css" /> <main class="content">…</main> <link rel="stylesheet" href="page-foot.css" /> <footer class="page-foot">…</footer> </body> Nice
82. Before csswz.it/2J0RCj3
84. After csswz.it/2J0RCj3
86. “ “Firefox and Edge/IE will give you a lovely progressive render, whereas Chrome and Safari give you a white screen until all the CSS loads. “The current Chrome/Safari behaviour is no worse than putting all your stylesheets in the <head>, so you can start using this method today.” — csswz.it/2J0RCj3
89. <link rel="stylesheet" href="content.css"><script> </script> <main class="content">…</main> Empty script
 block for Firefox
90. Loading CSS and JS
91. i Inline scripts block on CSSOM construction
92. <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>
94. <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>
95. <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>
97. i Load the JS with the async attribute
99. Basically…
100. 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
101. Thank You!
102. Thank You! @csswizardry csswizardry@gmail.com speakerdeck.com/csswizardry harry.is/for-hire