YUI Theater — Nicole Sullivan: "Design Fast Websites (Don’t Blame the Rounded Corners)"

By Eric MiragliaDecember 23rd, 2008

Nicole Sullivan is a website performance specialist and a former member of Yahoo’s Exceptional Performance Team. She is currently writing a book for O’Reilly with Stoyan Stefanov on performance optimization and she and Stoyan are the creators of Smushit, an engine for crushing images.

Nicole visited Yahoo last week to do an encore of her "Design Fast Websites" talk in which she outlines a set of practical guidelines for building websites that are supremely fast and visually rich. Her advice is to know your craft, to engage your designers, and to make sure that your collaboration with designers works intelligently in the service of users. She was kind enough to let us record the talk and share it with you here on YUI Theater.

Nicole Sullivan: "Design Fast Websites" @ Yahoo! Video

download (m4v)

In Case You Missed…

Some other recent videos from the YUI Theater series:

Subscribing to YUI Theater:

11 Comments

  1. Are there links to the original sources for the three tests cited in the beginning of the presentation (the +100ms, +400ms and +500ms examples.) I’d like to be able to reference the tests directly.

  2. @Rob

    Amazon: +100ms = 1% drop in sales

    Results were reported by Greg Linden: http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt

    He describes it more here: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

    Google: +500ms = 20% reduction in searches

    Marissa Mayer in a speech at the Google I/O conference, May 2008. http://news.cnet.com/8301-10784_3-9954972-7.html

    She also said

    “Google Maps. When the company trimmed the 120KB page size down by about 30 percent, the company started getting about 30 percent more map requests.”

    Cheers,
    Nicole

  3. Hi,
    At one step “Choose your bling carefully” Nicole said about sites dedicated to different markets, different countries, like for ex China likes big buttons and such … is there a study done in this aspect?
    Where can I learn more about this?

    Thank you

  4. Really great presentation. Lots of people talk about going from pure standardista style dev to a more practical and maintainable style, but this is the first time I’ve ever seen someone explain it and not just come across as lazy.

    I’m convinced that Sullivan steps away from hardcore semantics because she’s taken a good look at all the possible solutions and found the middle road that truly makes sense in terms of savings and maintainability. This is where web development as an undefinable, unconstrained art meets the timeless beauty of a math equation or a science theorem stated as minimally as possible.

  5. @Sorin That is my personal opinion based on my work with Yahoo! properties around the world and feedback I’ve gotten from designers and developers in those markets. I would love to see experiments re: tolerance of incremental changes in performance broken down by geographic location, but as yet I’m not aware of such a study.

    @Dave Wow, thanks! I come from a standards/WAI/accessibility background and I take my semantics very seriously, but at heart I’m a pragmatist.

    A solution has to meet many criteria; scalability, performance, accessibility, maintainability, etc. Standards are definitely among the criteria, but sometimes finding a balance in competing priorities requires hard choices about priorities.

    Mainly I formed my opinions by building everything the wrong way first and suffering the consequences. :)

  6. The part that I liked the most was streamlining your CSS from the start. I never put enough thought into overall site efficiency in the coding process.

    I think your point on “choosing your bling” could be illustrated better. Consider an e-commerce site like Amazon. It’s good to be conservative with images on product on category pages, but when the user clicks on the zoom button, they’re asking for a big, less optimized image.

    smush.it is a neat tool. I think it’d be helpful to list the address or name of the site on the results page if you’re using the bookmarklet, or be able to enter in a site’s URL on the submission page.

  7. @Austin Web Design

    I’m glad you enjoyed the bits on CSS optimization. You might also enjoy my slides on Object Oriented CSS. It goes into more detail about writing scalable CSS. (Video and podcast to follow in the coming weeks).

    Thanks for your suggestions regarding bling. I think every site has their own definition of bling, mainly you just have to choose carefully how to add it to the site. For example, download “zoom” images after the onload so they don’t impact initial page load.

  8. [...] web, and most of them are not so powerful as our PC’s are. Unless you are trying to provide progressive image enhancement, more and bigger images are not always equal to a better user experience. Yahoo released a new [...]

  9. on the lines of Smush.it, have a look at Grosser’s ruby gem Smusher, essentially a command-line tool to smush your directories.

    made my life so much easier…

    http://github.com/grosser/smusher/

  10. [...] Nicole Sullivan tells you not to blame the rounded corners but to design for fast websites [...]