Progressive Enhancement For a Faster Site

This is a cross post from the Wayfair Engineering Blog

Progressive Enhancement is often described as an alternate approach to “Graceful Degradation” – it encourages focusing on the most basic functionality first and then building out from there.  It also forms the core of the Yahoo! Graded Browser Support model, which we use as a guide for our own rules around browser support.  This is an important topic, but it has been covered fairly extensively in other articles, so I’m not going to dive into it too much here.  Instead I am going to talk about specific progressive enhancement techniques we use at Wayfair to improve site performance.

As you may know, there are some amazing new features in HTML5/CSS3 that make web development easier – rounded corners, drop shadows, gradients, placeholders in text fields, in browser form validation, etc., all of which reduce dependency on background images and JavaScript.  These are great features to have, but what about your IE 6, 7, and 8 users?  How about older versions of Safari and Firefox?  IE 6, 7, and 8 users comprise over 35% of the customers on www.wayfair.com, and we need to make sure that we give them a decent experience.


Using CSS3 Today:

Alright, let’s see exactly what I’m talking about.  Say you want to have a nice drop shadow under your site header, but you don’t want to hurt performance.  This is one really simple solution:

.subheader {
  -moz-box-shadow: 0px 3px 3px #d9d9d9;
  -webkit-box-shadow: 0px 3px 3px #d9d9d9;
  box-shadow: 0px 3px 3px #d9d9d9;
}

The two vendor prefixed lines (-moz and -webkit) will apply to older versions of Firefox and Webkit browsers like Safari and Chrome.  The last line is the W3C approved CSS3 rule for a box shadow, so modern browsers will use that.  What you get from this is a nice shadow in modern browsers and nothing in IE < 9:

Header in the latest version of Chrome

Header in IE 6, 7, and 8

We really don’t lose much in older browsers, but modern ones get an extra flourish without hurting the load time of the site.  This is a pretty simple example, so let’s get a bit more advanced.  Imagine you have an HTML element that you want to add a background gradient to, but you don’t want to use an image:

.gradient {
  background: #c9de96; /* REALLY old browsers */
  background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF 3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
  background: linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */
}

This provides a cross-browser way to add some visual accents to your site without needing background images. One note about the last item – using filters for IE may actually hurt the rendering speed of your site, so we typically avoid them at Wayfair. The AlphaImageLoader filter suffers from known performance problems, and I’ve heard similar complaints about other proprietary Microsoft filters, so tread with caution.  We typically use dataURIs instead of MS filters because of this.  If you want more examples, Stoyan Stefanov has a great post that goes into a lot of detail about writing high performance, CSS driven UI’s using techniques like this.

What About HTML5?

There are some new features in HTML5 that are specifically designed to remove dependency on JavaScript for simple tasks, and you can use some of these today.  The “placeholder” attribute for text inputs is a perfect example – it is something that people have been handling with JS for years, but should really be done by the browser.

HTML5 also added a number of new input types, like email, number, url, date, and many more.  Since inputs with an unrecognized type will default to text inputs, you can safely use these types right now.  It’s up to you whether you want to write JavaScript as a fallback for older browsers, or just let those users live without placeholders/validation/etc.

We have experimented with HTML5 a bit at Wayfair, and we intend to use it a lot more when we rewrite our checkout flow in PHP.  Since we will be touching all of that code anyway it seems like a good time to add some of this functionality for browsers that support it.

Conclusion:

Even though it may feel like browser support for HTML5 and CSS3 is poor, you can still start using some of the new features now, and get a lot of benefit from them.  By accepting the fact that every user doesn’t need to see the exact same thing you can eliminate tons of CSS background images and many lines of JavaScript.  Since reducing HTTP requests is the #1 way to improve site performance, these techniques can have a big impact on your site!