The value of trying things out

I was recently reminded of an interesting situation that arose a while back at Yahoo! London; a situation that was resolved using simple testing and demonstration:

We had recently begun extensive performance optimisation of the Yahoo! Eurosport site in an attempt to improve our YSlow grades. At the time, the design of the Yahoo! Eurosport site used rounded corners on all of the modules. Due to the fact that we had developed the modules to be bulletproof, and because the backgrounds varied slightly for different modules, this ended up with a considerable overhead on CSS backgrounds.

Yahoo! Eurosport before:

Our first idea was to approach UED to find out if we could just remove the rounded corners and instantly improve our performance. In our eyes, this was an insignificant visual change with an extremely high pay-off in regard to the performance boost. However, in UED’s eyes, this change was unacceptable and would diminish the impact of the design enough for them to categorically say no.

So we accepted the decision and went back to our desks to continue our optimisation. But, by its very nature, YSlow just couldn’t let it rest; the resulting reports continually highlighted those backgrounds as a significant issue.

With that in mind, one of the front-end developers on our team decided to take matters into his own hands and create a second style sheet without the rounded corner images just for the purpose of testing. The resultant comparisons were, unsurprisingly, an extensive boost in performance; both in download times, and in rendering time.

Several days later, we were chatting with the UEDs on the team and happened to apologise for leaving the non-rounded corner style sheet active on the testing environment. It was then that we discovered they hadn’t noticed at all—and, what’s more, they were pleasantly surprised to find the impact on the design was minimal. What’s more, we were able to demonstrate the difference in rendering time to them in their own browsers.

Yahoo! Eurosport after:

Following that little test, and subsequent demonstration to the UED team, it was unanimously agreed that the gain in performance was significantly greater than the loss of visual impact, and we were able to move the updated CSS live.

The only downside to this process was the fact that we had to leave a lot of legacy HTML wrappers in place that would normally have hosted the extra background images. In a perfect world, we would have been able to strip all that HTML as well. Unfortunately, the templates were developed in such a hurried way that this task was basically impossible, and those redundant wrappers are in place to this day.

I think that little anecdote illustrates the value in testing changes even if you thoroughly disagree with them at the outset. You’ll either be proven entirely right, or you’ll be pleasantly surprised.