davidbgk
/
larlet-fr-david-cache

title: Progressive enhancement is still important
url: https://jakearchibald.com/2013/progressive-enhancement-still-important/
hash_url: 8ab1036c933fd4ae50e8f6a349a928c0

<p>About 5 years ago it felt like the progressive enhancement battle had been won, but after watching the reactions to Nicholas Zakas' <a href="http://www.slideshare.net/nzakas/enough-withthejavascriptalready">"Enough with the JavaScript already"</a> it seems all the old arguments are back with reinforcements. Well, I'm wearing my angry-pants and I'm ready for a jog down ranty lane.</p>
<h2 id="this-is-not-about-users-without-js">This is not about users without JS</h2>
<p>If you turn JavaScript off, you're going to have a tough time on the web. If you remove the steering wheel from your car you're going to have a tough time going round corners. My advice: Leave the steering wheel where it is.</p>
<p>Progressive enhancement has never been about users who've turned JavaScript off, or least it wasn't for me.</p>
<h2 id="elevators-vs-escalators">Elevators vs escalators</h2>
<p>Christian Heilmann <a href="http://christianheilmann.com/2012/02/16/stumbling-on-the-escalator/">re-purposes a Mitch Hedberg observation</a> to relate to progressive enhancement. Basically, when an elevator fails, it's useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.</p>
<p>Given the diversity of user agents, your JS failing isn't an edge case. Sometimes it'll be the browser's fault, sometimes yours. For example, a few months ago the JavaScript on the <a href="https://www.google.com/intl/en/chrome/browser/">Download Chrome</a> page failed. Y'know what happened when you clicked the "Download Chrome" button? Nothing. A dash of progressive enhancement would have allowed people to continue downloading Chrome while the problem was fixed.</p>
<h2 id="reduce-your-testing-efforts-in-older-browsers">Reduce your testing efforts in older browsers</h2>
<p>A couple of years ago I was working on an intranet site for a large company. I built it with progressive enhancement out of habit. The users were mostly on IE7, it was a tightly controlled environment.</p>
<p>Then, at the 11th hour, the client asked for the site to work on Blackberrys, and not the shiny WebKit ones, some of them were using the old Blackberry browser. The site was a disaster on those phones.</p>
<p>However, the ancient Blackberry wasn't too bad at the ol' HTML and CSS, but when it came to JS it was a random error generator.</p>
<p>A little (ahem) UA-sniffing later and we weren't serving JS to the Blackberrys. This got us 90% of the way there, instantly. The rest was just minor CSS tweaks. This was only possible because the site worked without JS. Sure, there were some full-page refreshes that newer browsers did quicker with XHR, and some nice transitions were missing, but it <em>worked</em>.</p>
<p>We took this idea further for <a href="http://lanyrd.com/mobile/">Lanyrd's mobile site</a> where a basic feature detect was used to decide if scripts should be loaded. We didn't use JavaScript for anything that couldn't handle ApplicationCache, which was what most of the JS was handling.</p>
<p>The BBC call this basic feature test <a href="http://responsivenews.co.uk/post/18948466399/cutting-the-mustard">"Cuts the mustard"</a>. Do yourself a favour, save your JS for the cutting-edge browsers, then you only have to drag the older browsers through HTML &amp; CSS.</p>
<p>It's important to do this at the script-loading stage rather than just before execution. Not only do you avoid downloading the JS in browsers that don't need it, but you save on parsing too. On bockety old mobiles, such as the Blackberry, parsing can take many orders of magnitude longer than the downloading, and the UI is blocked while this happens.</p>
<h2 id="reduce-your-testing-efforts-in-general">Reduce your testing efforts in general</h2>
<p>When I make something work on the server, it has to work in Django 1.5.1 running on Python 2.7.3 served through Nginx 1.1.19 etc etc etc. I control the lot, if I change one of the dependencies I can test it before deploying.</p>
<p>Code running on the client is more of a testing effort due to the diversity of interpreter vendors and versions. Unless your server architecture is frequently changing, having most of your logic on the server is easier.</p>
<h2 id="be-faster">Be faster</h2>
<p>JavaScript is more powerful than HTML &amp; CSS, it's like a Formula 1 car whereas HTML &amp; CSS is a bicycle. However, in a race, the bicycle will get off the line first. An F1 car has a complex start-up procedure and requires a team of people to get it going. If the race is short enough, the bicycle will win.</p>
<p>Here's how most pages load:</p>
<ol>
<li>HTML downloads</li>
<li>CSS downloads</li>
<li>CSS fetches additional assets</li>
<li>JS downloads</li>
<li>JS executes</li>
<li>JS fetches additional assets</li>
<li>JS updates DOM</li>
</ol>
<p>This is the order in which they generally start, 1-4 can happen in parallel to some degree.</p>
<p>In a progressively enhanced page, the whole of step 2 blocks rendering, but other than that the HTML can be parsed and rendered in chunks as it downloads. This is assuming your scripts are async or are at the bottom of the document, which they should be (<a href="http://www.html5rocks.com/en/tutorials/speed/script-loading/">more on script loading</a>). In this case, step 6 probably isn't necessary and step 7 is minor.</p>
<p>Also, most modern browsers will take a peek at pages you <em>might</em> open and scans them for things it needs, so there's a chance the browser already has a head start on downloading the CSS and JS.</p>
<p>In a page that's entirely JS-driven, as in <code>&lt;body&gt;&lt;/body&gt;</code>, your first render is blocked by all 7 steps. Sure, your HTML download is tiny, but your JS isn't, and you don't get any progressive rendering. If your JS needs to download additional assets, this also blocks rendering and cannot be seen by the look-ahead scanner that can pick up CSS &amp; JS downloads.</p>
<p>JS dependent pages that aren't simply <code>&lt;body&gt;&lt;/body&gt;</code> may be able to get some stuff onto the screen sooner, but the page cannot be interacted with until all 7 steps are complete.</p>
<p>But yes, if the race is a bit longer, the F1 car will win. This is why you progressively enhance. You're off the line straight away on your bicycle, but as the F1 car comes past to overtake, you jump off the bike, do a jaw-dropping backflip in the air, land in the F1 cockpit, and accelerate into the distance.</p>
<p>A great example of this is <a href="http://www.twitter.com">Twitter</a>, their JS-driven site was painfully slow and clunky. They're fixing this by <a href="https://blog.twitter.com/2012/improving-performance-twittercom">switching to progressive enhancement</a>.</p>
<p>Fans of progressive enhancement had a "told you so" moment when <a href="http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product">Airbnb's improved performance</a> by delivering requested content as HTML (and sold it as a new idea).</p>
<p>And don't get me started on <a href="http://blogger.com">blogger.com</a>.</p>
<h2 id="its-not-doubling-up-on-work">It's not doubling up on work</h2>
<p>There's a perception that progressive enhancement means building everything on the server then building it again, like for like, on the client. This is rarely the case. Lean on the server as much as possible.</p>
<p>If you want to dynamically update a part of the page, that's great if it's actually faster, but do you need client-side templates? Could the server just send you the new HTML for the element? Often, yes. Remember, HTML is a semantic data format just like JSON, and if you're simply going to convert that JSON to HTML on the client, just do it on the server.</p>
<p>If you need client-side templates, use a format that can be shared with the server, such as <a href="http://mustache.github.io/">Mustache</a>. Even then, consider compiling the templates to JavaScript functions on the server and serve those, saves every client having to do the parsing &amp; compilation.</p>
<h2 id="work-with-the-browser-not-against-it">Work with the browser, not against it</h2>
<p><a href="http://lanyrd.com/mobile/">Lanyrd's mobile site</a> is built the progressive enhancement way, but we used JavaScript to handle all page-to-page navigation (similar to using XHR to bring the new content in). This was to hack around limitations in AppCache, and it came at a cost.</p>
<p>So, you click on a link, JS changes the content. At this point, the URL isn't reflecting the content. That's ok, we have <code>history.pushState()</code>. Then the user clicks the back button, we pick up the URL change and switch the content back. However, this doesn't feel natural because the user is sent back to the top of the page, whereas expectation is to restore the scroll position. Ok, so now we have to record scroll positions before we change content, and work out the conditions for when scroll position should be restored.</p>
<p>The more you take over from the browser, the more complex yet expected browser behaviour you have to reimplement in JavaScript. And if different browsers do different thing, you pick one behaviour &amp; it feels odd to users who aren't used to it.</p>
<h2 id="app-is-not-an-excuse">"App" is not an excuse</h2>
<p>"Yeah, but I'm building a webapp, not a website" - I hear this a lot and it isn't an excuse. I challenge you to define the difference between a webapp and a website that isn't just a vague list of best practices that "apps" are for some reason allowed to disregard. <a href="http://adactio.com/journal/6246/">Jeremy Keith makes this point</a> brilliantly.</p>
<p>For example, is Wikipedia an app? What about when I edit an article? What about when I search for an article?</p>
<p>Whether you label your web page as a "site", "app", "microsite", whatever, it doesn't make it exempt from accessibility, performance, browser support and so on.</p>
<p>If you need to excuse yourself from progressive enhancement, you need a better excuse.</p>
<h2 id="there-are-of-course-exceptions">There are, of course, exceptions</h2>
<p>…but they must be exceptions. <a href="http://www.spritecow.com/">SpriteCow</a>, <a href="http://jakearchibald.github.io/jank-invaders/">Jank Invaders</a> and <a href="http://jakearchibald.github.io/request-quest/">Request Quest</a> all depend on JS.</p>
<p>SpriteCow could be done server-side, but it's a rare case where the client can totally outperform the server due to the transfer of image data.</p>
<p>Jank Invaders is basically a demo of a JavaScript feature, and like many games simply doesn't have a sensible server-side fallback.</p>
<p>Request Quest depends on JavaScript because it's… well… it has to process… yeah ok, I just got lazy. Don't do that!</p>
<p>One of the best things about the web is it can rival native applications without a hefty initial download, without an install process, and do so across devices old and new. Let's keep it that way.</p>
<p><strong>Edit:</strong> Emil Björklund wrote <a href="http://thatemil.com/blog/2013/07/02/progressive-enhancement-still-not-dead/">a similar post yesterday</a> that's worth reading. <strong>Another edit:</strong> Emil's server appears to be down at the moment, not even progressive enhancement can save us from that.</p>