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
   

   View Slide

2. Hey! I’m Harry.
   

   View Slide

3. Hey! I’m Harry.
   Consultant Performance Engineer
   Leeds, UK
   csswizardry.com
   @csswizardry
   

   View Slide

4. View Slide

5. “
   “The Trainline reduced latency by
   0.3 seconds […] and customers spent
   an extra £8.1m a year.”
   — csswz.it/2FQHt2S
   

   View Slide

6. Performance
   CSS
   
   

   View Slide

7. Why Does it Even Matter?
   

   View Slide

8. View Slide

9. SERVER
   HTML
   CSS
   DOM
   CSSOM
   JS RendeR
   TREE
   

   View Slide

10. File Size
    

    View Slide

11. Larger files take longer
    to download…
    

    View Slide

12. Any idea how long to parse a
    1MB stylesheet on a Moto G4?
    

    View Slide

13. View Slide

14. i
    Light could
    travel 59,958km
    

    View Slide

15. View Slide

16. View Slide

17. Base64
    

    View Slide

18. background-image: url(/assets/masthead.jpg);
    background-image: url(data:image/jpeg;base64,...);
    

    View Slide

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=
    

    View Slide

20. !
    Base64 is an

    anti-pattern
    

    View Slide

21. It increases file sizes…
    

    View Slide

22. …that increase is on
    your Critical Path
    

    View Slide

23. An Experiment
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. csswz.it/2FVsnJB
    Read the
    case study
    

    View Slide

28. @import
    

    View Slide

29. @import "https://fonts.googleapis.com/css?family=Open+Sans";
    

    View Slide

30. @import "reset.css";
    @import "typography.css";
    @import "grid.css";
    @import "components.css";
    

    View Slide

31. View Slide

32. View Slide

33. Style.css
    Style.css
    Reset.css
    Client
    Server
    typography.css
    grid.css
    components.css
    Reset.css
    typography.css
    grid.css
    components.css
    

    View Slide

34. View Slide

35. 
    
    
    
    
    

    View Slide

36. View Slide

37. Load time (ms)
    0
    275
    550
    825
    1,100
    @import
    412ms
    

    View Slide

38. Selector Performance
    

    View Slide

39. !
    This is the last thing on
    your list of things to
    optimise
    

    View Slide

40. .from > #right .to-left {}
    The Key Selector
    

    View Slide

41. View Slide

42. .nav__item {}
    .sidebar p {}
    .icon * {}
    * {}
    Pretty fast!
    A little slower
    Much slower
    Actually really fast
    

    View Slide

43. .nav > ul > li > a {}
    .nav ul li a {}
    Which is Faster?
    

    View Slide

44. View Slide

45. csswz.it/2FWUszW
    Join the

    discussion
    

    View Slide

46. “
    “Roughly 50% of the time used to
    calculate the computed style for an
    element is used to match selectors…”
    — csswz.it/2GIs8l4
    

    View Slide

47. View Slide

48. Alphabetic CSS
    

    View Slide

49. !
    This isn’t even on your
    list of things to
    optimise
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

52. Size (bytes)
    0
    1,150
    2,300
    3,450
    4,600
    Regular CSS Alpha CSS
    
    

    View Slide

53. 3.24% smaller
    

    View Slide

54. aaabbbccc
    

    View Slide

55. aaabbbccc
    3a3b3c
    

    View Slide

56. aaabbbccc
    3a3b3c
    cbcaabbac
    

    View Slide

57. aaabbbccc
    3a3b3c
    cbcaabbac
    cbc2a2bac
    This is a very crude

    over-simplifIcation
    

    View Slide

58. i
    Gzip loves repetition
    and consistency
    

    View Slide

59. Mixin vs. @extend
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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;
    }
    

    View Slide

63. Compression Delta (%)
    0
    25
    50
    75
    100
    @extend Mixin
    68.15%
    44.83%
    (Higher is better)
    23.32%
    

    View Slide

64. i
    Mixins are
    better for performance
    than @extend
    

    View Slide

65. !
    That was a very

    non-scientific demo
    

    View Slide

66. Filesize (Kb)
    0
    45
    90
    135
    180
    Before Gzip After Gzip
    12Kb
    108Kb
    18kb
    72kb
    @extend Mixin
    

    View Slide

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
    

    View Slide

68. Asset Domains
    

    View Slide

69. View Slide

70. href="/assets/style.min.css" />
    

    View Slide

71. href="https://st1.skybet.net/style.min.css" />
    

    View Slide

72. 0 0.5 1.0 2.0
    CSS on an Asset Domain
    

    View Slide

73. 0 0.5 1.0 2.0
    Back on the Host Domain
    

    View Slide

74. “
    “Make CSS small, minify, compress,
    load from the same hostname even (no DNS)
    and inline, if small enough.”
    — Stoyan Stefanov, csswz.it/2fYM2ei
    

    View Slide

75. LINK in BODY
    

    View Slide

76. LINK in BODY
    Traditionally, all elements go in the
    But we can now start putting in the
    Effectively progressively rendering pages…
    

    View Slide

77. 
    
    
    
    …
    …

    …
    …
    
    HTTP/1.1:
    Bundle everything
    But this

    contains lots of

    redundancy…
    …and blocks

    rendering
    

    View Slide

78. Browsers don’t render anything
    until all CSS has been retrieved.
    

    View Slide

79. 
    
    
    
    
    
    
    
    …
    …

    …
    …
    
    HTTP/2:
    Split everything
    Much less

    redundancy…
    …But still

    blocks rendering
    

    View Slide

80. Now browsers now only block
    rendering of subsequent content
    

    View Slide

81. 
    
    
    
    
    …
    
    …
    
    …
    
    …
    
    Nice
    
    

    View Slide

82. Before
    csswz.it/2J0RCj3
    

    View Slide

83. View Slide

84. After
    csswz.it/2J0RCj3
    

    View Slide

85. View Slide

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 , so
    you can start using this method today.”
    — csswz.it/2J0RCj3
    

    View Slide

87. View Slide

88. View Slide

89. 
    …
    Empty script

    block for Firefox
    

    View Slide

90. Loading CSS and JS
    

    View Slide

91. i
    Inline scripts block on
    CSSOM construction
    

    View Slide

92. 
    
    <br/>var script = document.createElement('script');<br/>script.src = "script.js";<br/>document.getElementsByTagName('head')[0].appendChild(script);<br/>
    
    

    View Slide

93. View Slide

94. 
    
    <br/>var script = document.createElement('script');<br/>script.src = "script.js";<br/>document.getElementsByTagName('head')[0].appendChild(script);<br/>
    
    

    View Slide

95. 
    <br/>var script = document.createElement('script');<br/>script.src = "script.js";<br/>document.getElementsByTagName('head')[0].appendChild(script);<br/>
    
    
    

    View Slide

96. View Slide

97. i
    Load the JS with the
    async attribute
    

    View Slide

98. View Slide

99. Basically…
    

    View Slide

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
     

     View Slide

101. Thank You!
     

     View Slide

102. Thank You!
     @csswizardry
     csswizardry@gmail.com
     speakerdeck.com/csswizardry
     harry.is/for-hire
     

     View Slide