[mobile] Charger des ressources de manière conditionnelle avec matchMedia()

A ParisWeb, suite à une réflexion de Vitaly Friedman sur les ressources chargée en web et  mobile first, nous avions avec Raphaël Goetter fait quelques tests de chargement conditionnel, notamment pour ne pas charger du tout une police @font-face sur la version mobile. Ces tests se basent sur window.matchMedia().

Christian Heilmann dans son article (en anglais) « Conditional loading of resources with mediaqueries » pousse cette méthode encore plus loin, avec l’ajout d’éléments data-* combiné avec un JavaScript basé sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais également des images, etc.

Mise à jour : Andy Davies a publié quelques tests de performance concernant cette technique pour charger conditionnellement des CSS : Think Twice Before Using matchMedia to Conditionally Load Stylesheets . Le problème de cette technique, pour résumer rapidement, est que le CSS n’est chargé qu’après le JS. Une des optimisations conseillée est donc simplement de rassembler tous les CSS dans une seule page.