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

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. :)

8 thoughts on “Creating Living Style Guides to Improve Performance”

  1. 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.

  2. 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

  3. 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?

  4. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>