Loading Polyfills Only When Needed

Avatar of Chris Coyier
Chris Coyier on

We had this question on ShopTalk just the other day. We’re so (rightfully) worried about web performance, it feels like we shouldn’t be loading polyfills all the time, only when we detect they are needed. Philip Walton:

… too many people building websites today take a “lowest-common-denominator” approach. By that I mean they ship the same bundle of JavaScript to all users (regardless of browser capabilities), and the bundle they ship contains all code required to make the site work in the oldest browser they want to support.

While I understand that this approach is simple, it’s not respectful of your users, and it prioritizes your convenience over their experience.

In a slightly-surprising twist, his tactic is to:

  1. Cut the mustard for browsers that support everything needed
  2. If passes: kick off everything else
  3. If anything fails: load all polyfills then kick things off

The idea is to keep things simple, and not get yourself into a complicated state where you’re trying to accommodate for the situation where “the browser can now be in 32 different states”.

Direct Link →