cssmodernizr

Two instances of Modernizr on one page

I'm currently trying to make some speed improvements to one of my sites, and I'm looking at Modernizer usage.

Previously all of my javascript (including Modernizer) was lumped into one big js file. I've now removed Modernizer and it sits inline in the head section of the page. For clarity, it is a custom build.

However, not all feature detects are equal - some features benefit from being detected quickly while others can wait.

For instance, detecting webp support is pretty important, because I assume downloading a jpeg then another webp version sort of defeats the object of the feature.

Then, there are things like pointer/touch support, which don't affect layout as such and are more to do with interaction - so they can wait.

With that in mind, the obvious thing is to put two instances of Modernizer in the page - one for the important stuff at the top, and one for the rest at the bottom.

However, I've been unable to find anything on this topic. I guess that leads me to ask two questions: is it possible? And if it is - is it a sensible idea?

Solution

  • It definitively is possible to have two instances of Modernizr on one page; but in order to have that you have to manually rename the global object to something else since Modernizr is exposed to window directly:

        e.Modernizr = Modernizr // e is internal ref. to window object
}(window, document);

    This however may be considered a dirty patch since you have to alter the production code (& to maintain that alteration through update cycles manually), download and execute exactly the same basic functionality twice, which is less optimal.

    Another approach would be to build all that is needed immediately for first batch of (essential) tests and than to utilize Modernizr.addTest (it has to be included in build) later on, for non-essential functionality.

    Source and doc-like comments.

    Of course, you'd have to write your tests. You may relay on official Modernizr tests, but addTest called outside of the Modernizr's factory method lacks some useful methods (for example, things like Modernizr's internal createElement()).

    You have to make choices since there is no way to subsequently add other tests out of the box.