Progressive Enhancement For a Faster Site

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

Wayfair Header Without Shadow

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!


If this type of thing interests you, please visit our careers page, and join the team!
This entry was posted in Web Performance by Jonathan K.. Bookmark the permalink.
Jonathan K.

About Jonathan K.

Jonathan is a Senior Software Engineer at Wayfair. He leads the Web Performance team, which focuses on performance and scalability projects. In his free time he likes to play Ultimate, travel, and read web performance blogs (yeah, really). You can find him on Twitter @jonathanklein, and if you are in the Boston area be sure to check out the Boston Web Performance Meetup group that Jonathan started!

2 thoughts on “Progressive Enhancement For a Faster Site

  1. Jonathan, good to see you here too :-), my question is, what did you do at database level to optimize the page processing and page load? again are you using MYSQL for all your backend, Big companies like Amazon uses Oracle, Java, I am amazed that PHP could be used for such a bigger system, Facebook does uses it but with HipHop.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>