The Value of Trying Things Out

Posted Wednesday 27th January, 2010

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.

Included in: CSS, Design, Development, HTML, Web

Categories:

  1. Accessibility
  2. Agile
  3. Ajax
  4. Apache
  5. API
  6. Architecture
  7. Books
  8. Browsers
  9. CMS
  10. CouchDB
  11. CSS
  12. Design
  13. Development
  14. Django
  15. Email
  16. Events
  17. Gaming
  18. Grammar
  19. Hardware
  20. HTML
  21. HTTP
  22. Humour
  23. Idea
  24. Information Architecture
  25. JavaScript
  26. jQuery
  27. Lean
  28. Life
  29. Linux
  30. Literature
  31. Mac OS X
  32. Management
  33. Meme
  34. Microformats
  35. Monday
  36. MySQL
  37. Networking
  38. News
  39. Personal
  40. Photoshop
  41. PHP
  42. Process
  43. Python
  44. Reference
  45. REST
  46. Science
  47. SEO
  48. Server
  49. Site
  50. Sitepimp
  51. Social
  52. Spelling
  53. Syndication
  54. Testing
  55. The Future
  56. Thoughts
  57. Tools
  58. Tutorial
  59. Tutorials
  60. Typography
  61. UI
  62. UNIX
  63. Virtualisation
  64. Web
  65. Web Standards
  66. Widgets
  67. Wii
  68. Writing
  69. Xbox
  70. XHTML