Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FaCSSt: CSS & Performance

Harry Roberts
March 23, 2018

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.

Harry Roberts

March 23, 2018
Tweet

More Decks by Harry Roberts

Other Decks in Design

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
    [email protected]
    speakerdeck.com/csswizardry
    harry.is/for-hire

    View Slide