Steve Souders is an evangelist for web performance and open source. Previously at Yahoo, he’s now working at Google. He’s the author of High Performance Web Sites and Even Faster Web Sites and created YSlow.

It’s wonderful to have someone with Steve’s knowledge and experience talking at Webstock. We asked local web performance advocate, John Clegg, to interview Steve for us.

John: What is Web Performance Optimisation (WPO) all about?

Steve: I break “performance” into two parts: efficiency and speed. Efficiency is most critical when struggling with scalability issues and thus is more focused on backend operations. Speed has to do with the user’s perception of how fast a website is and how that affects their experience. Early in my career I focused on the performance issues of running large scale websites, but for the last six years or so I’ve been almost solely focused on the user’s perception of website speed.

John: Isn’t WPO “systems” stuff? Don’t we have to turn on some setting on the webserver and it’ll make my site fast? Why is WPO important to developers?

Steve: Luckily, there ARE many WPO improvements that are simple to implement, such as compression and caching. But not everything is that simple. The #1 challenge for building fast websites today is JavaScript, and there’s no silver bullet solution. Website owners should generate a todo list of performance improvements, and prioritize those based on the costs and benefits involved. The low hanging fruit should be tackled first, but pretty quickly the performance improvements will involve changing the way a website is built, and that’s where developers need to step in.

John: You’re giving a workshop at Webstock called “The Long Tent in the Performance Pole”. What’s it about? Who’s it pitched at? And what will we learn?

Steve: The benefits of faster websites is well documented: more traffic, happier users, increased revenue, and reduced operating costs. The entire organization is on board with WPO. Now what we need to do is figure out exactly what needs to be done to make our websites faster. We don’t want to mess this up – there’s nothing more frustrating than picking the wrong items to “fix” and seeing no improvement. This workshop shows which tools to use to analyze website performance and how to spot the most important performance problems to fix.

John: How has the focus of WPO changed in the past couple of years?

Steve: Sometimes it can be hard to get buy-in across the organization to work on optimization. You’re basically arguing to spend resources working on something that doesn’t change the way the website looks and doesn’t add any new features. That’s a tough sell! The main change in WPO over the last two years is the overwhelming number of case studies volunteered by industry leaders showing the impact WPO has on the business metrics – revenue, users, traffic, etc. The phase we’re in now is using technology to reduce the hurdles for adopting WPO. Using technology to simplify technology – it’s a fun and challenging problem.

John: How does the growth of mobile and tablets over the past couple of years change WPO?

Steve: WPO and web development in general haven’t kept pace with the adoption of mobile devices. We’re in catch up mode. I’ll be showing some mobile tools in my workshop, but there’s a real need for greater visibility into how these mobile clients perform.

John: In New Zealand, we have a lot of small to medium websites and only a few really big websites. Most of the sites are built and maintained by services companies. What advice would you give the service companies in pitching WPO to their clients?

Steve: Two things: Most of the case studies showing the bottomline benefits of WPO have been done by large websites (Google, Yahoo, etc.). That’s because it’s a lot of work to run these experiments and gather the data in a scientific way. That’s why Alistair Croll and Strangeloop Networks ran a similar case study on how performance affects typical (not huge) retail sites.

So the first thing I would do to pitch WPO would be to share these case studies, especially the ones that address websites outside of the top 100.

The second thing I would do is use WebPagetest to record a video of a fast website and a slow website running side-by-side. Even better, make it a video of the potential client and their faster competitor. Once someone sees how their slow site compares to a faster one they’ll become a WPO advocate.

Thanks Steve and John!

Steve’s workshop, The long tent in the performance pole, is on 16th February. You’ll go away with practical techniques to make your website faster – meaning a better user experience, more users, increased revenue, and reduced costs. What’s not to love!

Nicole Sullivan is right at the cutting edge of best CSS practice. She started the Object-Oriented CSS open source project, has consulted with Facebook and the W3C and blogs at http://stubbornella.org.

We are very pleased to welcome Nicole to Webstock and asked Russ Weakley, frequent Webstock speaker and all-round good guy, to interview her.

Russ: What is this Object Orientated CSS all about, in a nutshell?

Nicole: OOCSS is the radical idea that we can build robust, scalable, maintainable interfaces that adhere to engineering best practices.

Russ: Initially, there seemed to be a backlash against the use of the name “object orientated”. Do you thing the term is accurate, do you wish you had called it something else – like “Nicole’s much more efficient method of CSS (NMMEMOCSS)”?

Nicole: The name was meant to draw a parallel, not be literal. I don’t really mind the backlash. I think the name initially got a few more people (beyond the usual CSS crowd) to start thinking about how to write truly great CSS.

Russ: You have often talked about two key principles of OOCSS being: “Separate structure from skin” and “Separate content from container”. Could you explain what you mean by these two concepts?

Nicole: These principles suggest ways to create layers of abstractions in your CSS objects. You want to have each object solve only one problem, and solve it very very well. In that way, this simple object becomes predictable, testable, and flexible. You can use it to achieve designs that haven’t even been imagined yet.

To keep the objects from becoming overly complex, you want to decide on their boundaries. For example a rounded corner box shouldn’t specify how a heading inside it is rendered. A heading is a separate object. In this way, you keep container and content separate, so flexible.

Russ: For those that have been used to building using location based styling, OOCSS is a major mind shift. Are there techniques people can use to gradually shift to OOCSS?

Nicole: I recommend starting with the tiniest content objects like headings, links, text treatments, and lists. When you can draw on a toolbox of content objects you will find creating new features is much simpler. In my workshop at Webstock, participants will also get to try creating pages from a site that was created completely in OOCSS. There is nothing like creating new HTML pages from an existing object library to cause an “ah ha” moments where you suddenly understand.

Russ: Finally, you have stated that you are opposed to Conditional Comments. What are your objections, and how do you address browsers such as the wondrous IE6/7 browsers?

Nicole: I don’t like conditional comments because they require additional HTTP requests in browsers that are already struggling to keep up. I also like to keep all the code for any one object in a single file. IE dev tools are really inferior, it can be hard to tell that an IE-specific rule is causing what looks like a bug.

Instead, I choose to use * and _ hacks to target specific versions of IE. As a side benefit, these hacks look really gross, which is great because people hesitate to over-use them!

When creating objects like rounded corner boxes, you might notice that each type of box has a lot of code in common. Different boxes may have only tiny variations, like border color and width. When you create an abstract “box” object the code for each of the specific subclasses (skins) becomes really simple and predictable.

Thanks to both Nicole and Russ for this interview!

Nicole will be conducting the workshop CSS of the future – building with Object Oriented CSS at Webstock on the 14th February. She’ll be covering best-practice CSS and you’ll leave armed with practical changes that will make your code lean, efficient, and flexible.