How to Use Modernizr Responsibly

If you like playing with new features which might not be available in all browsers, you have surely already tried Modernizr. This library allows to test whether the features you want are available or not. As Modernizr adds some CSS classes on the html element to indicate if a given feature is available, you might be tempted to directly include it in the head tag to know as soon as possible if the features you want are available or not.

This approach was what the developers of Modernizr themselves recommended at the beginning. The problem with it is that it’s not compatible with the responsible approach we all should have. That’s why Paul Irish, one of the developers of the project, shared his thoughts about how Modernizr should be included. These thoughts inspired this article. In it we will talk about why we should adopt a responsible approach when we want to use Modernizr. Then, we will see some ways to put this approach into practice when possible.

Why Caring about How Modernizr Is Included

The usefulness of a responsible approach can be resumed in one question: do you like waiting for several seconds to access a web page? Surely not, and your visitors hate that too. That’s why, if they wait for a long time for the page to be displayed, they won’t come back. And I’m pretty sure you don’t want that. We all love fancy features, but not if they slow down our website too much. The good news is that you can still keep your fancy features, even with a responsible approach. The difference is that you won’t load them the same way.

Let’s discuss a concrete example of a JavaScript file. In a lot of cases, we wait for the page to be loaded before executing the script. In these cases, including the script in the head element is useless because the script is loaded at a very early stage but it'll wait for the page to be loaded before running. The problem is that if your script is included in the head, the browser will load it before the page itself. This means that if your script is big in size, your visitors have to wait until the script is loaded before they can see the page.

Modernizr has been developed to determine if you can use some recent features, such as CSS transitions or transformations, in a web page. Excluding some special cases, you don't need these features in order to display something on the screen of the user. There are scripts that must be included in the head tag, but most of them don't. Modernizr is no exception. In most cases you don't need to include it in the head and you can include the library right before the end of the body.

Before moving forward, I want to clarify a point: if a web page using Modernizr takes a long time to load, including this library responsibly won't be enough to improve the performance. Embracing a responsible approach means that you have to think about it each time you want to include a JavaScript file or other potentially big resources. If you optimize the way one resource is included, you won't necessary see a big difference. However, if you optimize how you include all your resources, the difference can be huge.

Continue reading %How to Use Modernizr Responsibly%

by Jérémy Heleine via SitePoint