Creating Living Style Guides to Improve Performance

I recently spoke at JSConf about my experience working with Trulia to create a living style guide. The goal for the project was to improve performance, team velocity, and also to have a more consistent design. It was such a fun project (because their engineers were great to work with) and also successful on all three fronts. Here are some of the metrics for the data-lovers:

  • Their HTML is 48% smaller
  • 21% faster load time
  • 60% faster time to first byte
  • Reduced unused CSS by 135kb
  • Search results page views increased by 11%
  • Property detail page views increased by 3% (this page was not changed, changes on the SRP alone account for this figure)
  • Click throughs, leads, customer satisfaction, and filter use also improved

Creating Living Style Guides to Improve Performance from Nicole Sullivan

I’ll be speaking at Velocity Conference in a couple weeks where I’ll go into more detail about the Sass magic that made this possible. 🙂


Posted

in

, , , ,

by

Tags:

Comments

8 responses to “Creating Living Style Guides to Improve Performance”

  1. […] (@stubbornella) gave a talk basically on how to organize a large web project, titled “Creating Living Style Guides.” It was more of a tips and tricks style talk, and there were several good ones. She […]

  2. Kimberly Blessing Avatar

    I see you start off showing what I assume is a fairly recent version of the AOL style guide… what makes me sad about your subsequent statements about that is the fact that earlier versions of AOL’s style guide were much more of a living thing, and that work eventually led to the Big Bowl system that was, in part, a living style guide. (This was all part of my own work at AOL and what led me to write about style guides and standards back in the early 2000s.) Let’s hope they find their way back! Thanks for sharing, Nicole.

  3. Stefan Burt Avatar
    Stefan Burt

    Hey Nicole,

    Great talk thanks for sharing, I have a question regarding the chrome extension which lists out all the different font styles used on the page do you have a link for that? I’ve searched the google extensions site and couldn’t find it.

    thanks again,

    Stefan

  4. chris Avatar

    The demo typography tool looks useful. Is that an internal tool or is it available on github?

    1. Nicole Sullivan Avatar

      @chris – we’re working on open sourcing it now (converting it to Chrome). Stay tuned! 🙂

  5. Aaron Reisman Avatar

    Hey Nicole,

    Love the slides… I’m just confused how you didn’t run into render performance?

    I feel like if you were to render each component individually on ever page… like a button for example, it render costs would be much greater then benefit, how did you get around these issues?

  6. Rob Avatar

    Love the Inception Rule! Don’t want to fall into the dreaded Limbo.

  7. Paul Avatar
    Paul

    Nicole, hello!

    Thank you for very useful presentation.

    I have a question: How do you use such guidelines for responsive grid? I mean all values of headers and text are different for different devices. Do you create any “rules”? If you design for 1920 dimension you use one values and for 320 you make some coefficient?