{"id":1106,"date":"2013-01-03T20:54:22","date_gmt":"2013-01-03T19:54:22","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1106"},"modified":"2023-04-01T18:01:09","modified_gmt":"2023-04-01T16:01:09","slug":"charger-des-ressources-conditionnelles-matchmedia","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/","title":{"rendered":"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchMedia()"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>A ParisWeb, suite \u00e0 une r\u00e9flexion de Vitaly Friedman sur les ressources charg\u00e9e en web et \u00a0mobile first, nous avions avec <a href=\"http:\/\/goetter.fr\/\" target=\"_blank\" rel=\"noopener\">Rapha\u00ebl Goetter<\/a> fait <a href=\"http:\/\/blog.goetter.fr\/post\/33953678024\/mobile-first-quelques-tests-de-chargement\" target=\"_blank\" rel=\"noopener\">quelques tests de chargement conditionnel<\/a>,\u00a0notamment\u00a0pour ne pas charger du tout une police @font-face sur la version mobile. Ces tests se basent sur\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/DOM\/window.matchMedia\">window.matchMedia()<\/a>.<\/p>\n<p><a href=\"http:\/\/christianheilmann.com\/\">Christian Heilmann\u00a0<\/a>dans son article (en anglais) \u00ab\u00a0<strong><a lang=\"en\" title=\"Conditional loading of resources with mediaqueries\" href=\"http:\/\/christianheilmann.com\/2012\/12\/19\/conditional-loading-of-resources-with-mediaqueries\/\" target=\"_blank\" rel=\"noopener\" hreflang=\"en\">Conditional loading of resources with mediaqueries<\/a><\/strong>\u00a0\u00bb pousse cette m\u00e9thode encore plus loin, avec l&rsquo;ajout d&rsquo;\u00e9l\u00e9ments data-* combin\u00e9 avec un JavaScript bas\u00e9 sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais \u00e9galement des images, etc.<\/p>\n<p><em>Mise \u00e0 jour<\/em> : Andy Davies a publi\u00e9 quelques tests de performance concernant cette technique pour charger\u00a0conditionnellement\u00a0des CSS :\u00a0<a lang=\"en\" href=\"http:\/\/andydavies.me\/blog\/2012\/12\/29\/think-twice-before-using-matchmedia-to-conditionally-load-stylesheets\/\" hreflang=\"en\">Think Twice Before Using matchMedia to Conditionally Load Stylesheets<\/a>\u00a0. Le probl\u00e8me de cette technique, pour r\u00e9sumer rapidement, est que le CSS n&rsquo;est charg\u00e9 qu&rsquo;apr\u00e8s le JS. Une des optimisations conseill\u00e9e est donc simplement de rassembler tous les CSS dans une seule page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.A ParisWeb, suite \u00e0 une r\u00e9flexion de Vitaly Friedman sur les ressources charg\u00e9e en web et \u00a0mobile first, nous avions avec Rapha\u00ebl Goetter fait quelques tests de chargement conditionnel,\u00a0notamment\u00a0pour ne pas charger du tout une police @font-face sur la version mobile. Ces tests se basent sur\u00a0window.matchMedia(). Christian Heilmann\u00a0dans son article (en anglais) \u00ab\u00a0Conditional loading of resources with mediaqueries\u00a0\u00bb pousse cette m\u00e9thode encore &hellip;<\/p>\n","protected":false},"author":3,"featured_media":1111,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchMedia() - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<meta name=\"description\" content=\"El\u00e9ments data-* et JavaScript bas\u00e9 sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais \u00e9galement des images, etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchMedia() - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"El\u00e9ments data-* et JavaScript bas\u00e9 sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais \u00e9galement des images, etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-03T19:54:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-01T16:01:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/01\/conditionnalloading.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/\",\"name\":\"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchMedia() - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/conditionnalloading.jpg\",\"datePublished\":\"2013-01-03T19:54:22+00:00\",\"dateModified\":\"2023-04-01T16:01:09+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"El\u00e9ments data-* et JavaScript bas\u00e9 sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais \u00e9galement des images, etc.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/conditionnalloading.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/conditionnalloading.jpg\",\"width\":700,\"height\":200,\"caption\":\"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchmedia\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/twitter.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchMedia() - par St\u00e9phanie Walter - UX Researcher & Designer","description":"El\u00e9ments data-* et JavaScript bas\u00e9 sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais \u00e9galement des images, etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/","og_locale":"fr_FR","og_type":"article","og_title":"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchMedia() - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"El\u00e9ments data-* et JavaScript bas\u00e9 sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais \u00e9galement des images, etc.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-01-03T19:54:22+00:00","article_modified_time":"2023-04-01T16:01:09+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/01\/conditionnalloading.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/","name":"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchMedia() - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/conditionnalloading.jpg","datePublished":"2013-01-03T19:54:22+00:00","dateModified":"2023-04-01T16:01:09+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"El\u00e9ments data-* et JavaScript bas\u00e9 sur window.matchMedia() pour charger conditionnellement en fonction de la taille du viewport non seulement des feuilles de script, mais \u00e9galement des images, etc.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/charger-des-ressources-conditionnelles-matchmedia\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/conditionnalloading.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/01\/conditionnalloading.jpg","width":700,"height":200,"caption":"[mobile] Charger des ressources de mani\u00e8re conditionnelle avec matchmedia"},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/twitter.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1106"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=1106"}],"version-history":[{"count":2,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1106\/revisions"}],"predecessor-version":[{"id":8188,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1106\/revisions\/8188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1111"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}