{"id":977,"date":"2020-06-18T20:44:07","date_gmt":"2020-06-18T20:44:07","guid":{"rendered":"https:\/\/www.ezoic.com\/fr-lang\/2020\/06\/18\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/"},"modified":"2020-06-18T20:44:07","modified_gmt":"2020-06-18T20:44:07","slug":"comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/","title":{"rendered":"COMMENT OPTIMISEZ UN CSS CRITIQUE AFIN D\u2019AM\u00c9LIORER LA VITESSE DE VOTRE SITE"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.0.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; z_index_tablet=&#8221;500&#8243; hover_enabled=&#8221;0&#8243;]<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_67_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Sommaire<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a18ae64a6653\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a18ae64a6653\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#COMMENT_OPTIMISEZ_UN_CSS_CRITIQUE_AFIN_DAMELIORER_LA_VITESSE_DE_VOTRE_SITE\" title=\"COMMENT OPTIMISEZ UN CSS CRITIQUE AFIN D\u2019AM\u00c9LIORER LA VITESSE DE VOTRE SITE\">COMMENT OPTIMISEZ UN CSS CRITIQUE AFIN D\u2019AM\u00c9LIORER LA VITESSE DE VOTRE SITE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#QUEST-CE_QUUN_CSS_CRITIQUE\" title=\"QU\u2019EST-CE QU\u2019UN CSS CRITIQUE ?\">QU\u2019EST-CE QU\u2019UN CSS CRITIQUE ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#QUEL_CSS_EST_CRITIQUE_ET_POURQUOI_UNE_PARTIE_DE_CELUI-CI_EST-IL_%C2%AB_NON_CRITIQUE_%C2%BB\" title=\"QUEL CSS EST CRITIQUE ET POURQUOI UNE PARTIE DE CELUI-CI EST-IL \u00ab NON CRITIQUE \u00bb ?\">QUEL CSS EST CRITIQUE ET POURQUOI UNE PARTIE DE CELUI-CI EST-IL \u00ab NON CRITIQUE \u00bb ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#COMMENT_OPTIMISER_LA_LIVRAISON_DES_CSS_CRITIQUES\" title=\"COMMENT OPTIMISER LA LIVRAISON DES CSS CRITIQUES ?\">COMMENT OPTIMISER LA LIVRAISON DES CSS CRITIQUES ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#QUEL_EST_LIMPACT_DU_CHARGEMENT_CSS_SUR_LA_VITESSE_DES_PAGES_DE_MON_SITE\" title=\"QUEL EST L\u2019IMPACT DU CHARGEMENT CSS SUR LA VITESSE DES PAGES DE MON SITE ?\">QUEL EST L\u2019IMPACT DU CHARGEMENT CSS SUR LA VITESSE DES PAGES DE MON SITE ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#QUELLES_TECHNIQUES_PEUVENT_AMELIORER_LA_LIVRAISON_CSS_SANS_CASSER_DES_CHOSES\" title=\"QUELLES TECHNIQUES PEUVENT AM\u00c9LIORER LA LIVRAISON CSS SANS CASSER DES CHOSES ?\">QUELLES TECHNIQUES PEUVENT AM\u00c9LIORER LA LIVRAISON CSS SANS CASSER DES CHOSES ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#DOIS-JE_CHARGER_LE_CSS_DE_MANIERE_ASYNCHRONE\" title=\"DOIS-JE CHARGER LE CSS DE MANI\u00c8RE ASYNCHRONE ?\">DOIS-JE CHARGER LE CSS DE MANI\u00c8RE ASYNCHRONE ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#COMMENT_VOUS_POUVEZ_UTILISER_LE_CHARGEMENT_CSS_ASYNCHRONE_POUR_RENDRE_VOTRE_SITE_PLUS_RAPIDE\" title=\"COMMENT VOUS POUVEZ UTILISER LE CHARGEMENT CSS ASYNCHRONE POUR RENDRE VOTRE SITE PLUS RAPIDE:\">COMMENT VOUS POUVEZ UTILISER LE CHARGEMENT CSS ASYNCHRONE POUR RENDRE VOTRE SITE PLUS RAPIDE:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#QUEST-CE_QUE_LE_CSS_INLINE_DOIS-JE_CHARGER_LE_CSS_DE_CETTE_FACON\" title=\"QU\u2019EST-CE QUE LE CSS INLINE ? DOIS-JE CHARGER LE CSS DE CETTE FA\u00c7ON ?\">QU\u2019EST-CE QUE LE CSS INLINE ? DOIS-JE CHARGER LE CSS DE CETTE FA\u00c7ON ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#%C2%AB_PUIS-JE_UTILISER_CES_TECHNIQUES_ENSEMBLE_%C2%BB\" title=\"\u00ab PUIS-JE UTILISER CES TECHNIQUES ENSEMBLE ? \u00bb\">\u00ab PUIS-JE UTILISER CES TECHNIQUES ENSEMBLE ? \u00bb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#CSS_BLOQUANT_LAFFICHAGE_ET_AMELIOREZ_LES_TEMPS_DE_CHARGEMENT_DES_PAGES\" title=\"CSS BLOQUANT L\u2019AFFICHAGE ET AM\u00c9LIOREZ LES TEMPS DE CHARGEMENT DES PAGES\">CSS BLOQUANT L\u2019AFFICHAGE ET AM\u00c9LIOREZ LES TEMPS DE CHARGEMENT DES PAGES<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/#DERNIER_MOT_SUR_LOPTIMISATION_DES_CSS\" title=\"DERNIER MOT SUR L\u2019OPTIMISATION DES CSS\">DERNIER MOT SUR L\u2019OPTIMISATION DES CSS<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_OPTIMISEZ_UN_CSS_CRITIQUE_AFIN_DAMELIORER_LA_VITESSE_DE_VOTRE_SITE\"><\/span>COMMENT OPTIMISEZ UN CSS CRITIQUE AFIN D\u2019AM\u00c9LIORER LA VITESSE DE VOTRE SITE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Avez-vous d\u00e9j\u00e0 fait un test de vitesse de votre site et r\u00e9alis\u00e9 que la moiti\u00e9 des choses sur la liste des choses \u00e0 am\u00e9liorer ne semblent pas \u00eatre des choses qui sont intuitives \u00e0 r\u00e9parer ? Heureusement, vous n\u2019\u00eates pas le seul ! M\u00eame de tr\u00e8s bons d\u00e9veloppeurs ont souvent du mal \u00e0 mettre en \u0153uvre certaines des recommandations relatives \u00e0 la vitesse des pages que Google et d\u2019autres outils de test de vitesse diffusent. L\u2019une des suggestions les plus difficiles \u00e0 mettre en \u0153uvre est l\u2019optimisation des CSS critiques.<\/p>\n<p>Ci-dessous, je vais vous expliquer comment penser et optimiser les CSS critiques sur votre site, afin que vous puissiez le <a href=\"\/?p=14259\">rendre plus rapide<\/a>. Cela inclut la requ\u00eate classique des outils pour \u00ab supprimer le CSS bloquant le rendu sous le pli \u00bb.<\/p>\n<p>Prenez conscience que les outils de vitesse de page \u2013 m\u00eame ceux de Google \u2013 ne sont pas si utiles pour <a href=\"https:\/\/blog.ezoic.com\/improve-page-speed-seo-actionable-ways\/\" target=\"_blank\" rel=\"noopener\">mesurer la vitesse r\u00e9elle du site<\/a>.<\/p>\n<p>Cela dit, les \u00e9diteurs esp\u00e8rent souvent que la vitesse du site pourra elle-m\u00eame contribuer au r\u00e9f\u00e9rencement SEO. Bien qu\u2019il soit extr\u00eamement improbable que l\u2019am\u00e9lioration de la vitesse d\u2019un site ait un impact spectaculaire sur le r\u00e9f\u00e9rencement, il est possible que l\u2019exp\u00e9rience des visiteurs puisse \u00eatre am\u00e9lior\u00e9e en ayant un site plus rapide.<\/p>\n<p>L\u2019optimisation des chargements CSS critiques est certainement quelque chose qui peut am\u00e9liorer ces deux objectifs.<\/p>\n<p><!--more--><\/p>\n<p>Obtenez des conseils suppl\u00e9mentaires sur la fa\u00e7on <a href=\"https:\/\/blog.ezoic.com\/speed-up-wordpress-websites-instantly\/\" target=\"_blank\" rel=\"noopener\">de am\u00e9liorer la vitesse des sites WordPress ici<\/a> .<\/p>\n<p>Obtenez des conseils sur la fa\u00e7on <a href=\"https:\/\/blog.ezoic.com\/speed-lazy-loading-images-serving-next-gen-formats\/\" target=\"_blank\" rel=\"noopener\">d\u2019am\u00e9liorer le chargement d\u2019images et de les servir dans les formats next-gen ici<\/a>.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Render-blocking-The-CSS-critical-to-the-page-loading-properly-to-the-visitor-min.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6572\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Render-blocking-The-CSS-critical-to-the-page-loading-properly-to-the-visitor-min.jpg\" alt=\"optimisation css de rendu-blocage\" width=\"640\" height=\"640\"><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"QUEST-CE_QUUN_CSS_CRITIQUE\"><\/span>QU\u2019EST-CE QU\u2019UN CSS CRITIQUE ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le CSS critique (critical CSS) est souvent appel\u00e9 \u00ab chemin de rendu CSS critique \u00bb, ce qui renvoie simplement au code CSS n\u00e9cessaire pour afficher le site dans un navigateur pour un visiteur en ligne. Le visiteur verra souvent un \u00e9cran blanc jusqu\u2019\u00e0 ce que les feuilles de style CSS aient \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9es et analys\u00e9es. C\u2019est pourquoi il est important d\u2019optimiser la diffusion des CSS pour la vitesse des pages et l\u2019exp\u00e9rience des visiteurs. Pour am\u00e9liorer la vitesse de chargement d\u2019un site, seul le CSS n\u00e9cessaire pour charger la partie visible d\u2019une page doit \u00eatre charg\u00e9 sur demande. Puisque le CSS a tendance \u00e0 emp\u00eacher l\u2019affichage, cela signifie que la page appara\u00eetra beaucoup plus rapidement pour le visiteur du site.<\/p>\n<p>C\u2019est pourquoi les outils de vitesse de page diront souvent aux utilisateurs d\u2019\u00e9liminer les CSS emp\u00eachant l\u2019affichage sous le pli. Il s\u2019agit d\u2019un CSS qui n\u2019aura pas besoin d\u2019afficher pleinement la page correctement dans la fen\u00eatre d\u2019affichage du visiteur du site.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"QUEL_CSS_EST_CRITIQUE_ET_POURQUOI_UNE_PARTIE_DE_CELUI-CI_EST-IL_%C2%AB_NON_CRITIQUE_%C2%BB\"><\/span>QUEL CSS EST CRITIQUE ET POURQUOI UNE PARTIE DE CELUI-CI EST-IL \u00ab NON CRITIQUE \u00bb ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS signifie <em>Cascading Style Sheets<\/em>. Le CSS est ce qui d\u00e9finit comment certaines parties HTML d\u2019un site doivent \u00eatre affich\u00e9es. Les pages ne s\u2019afficheront pas tant que le CSS demand\u00e9 n\u2019aura pas \u00e9t\u00e9 charg\u00e9. Les sites avec beaucoup de CSS peuvent prendre beaucoup de temps \u00e0 charger.<\/p>\n<p>Le CSS est g\u00e9n\u00e9ralement responsable de la mise en page d\u2019un site, de la structure de navigation, du th\u00e8me, et plus encore. Il aide vraiment \u00e0 d\u00e9finir l\u2019apparence standard d\u2019un site web.<\/p>\n<p><strong>Alors, pourquoi certains CSS ne sont-ils pas critiques ?<\/strong> Ne serait-il pas plus facile si vous \u00e9liminiez tous les CSS non critiques afin d\u2019\u00e9viter le casse-t\u00eate de vous demander comment optimiser la diffusion de CSS sur votre site ?<\/p>\n<p>Eh bien, voil\u00e0. Vous n\u2019avez pas besoin de tout votre CSS pour chaque page ou chaque visiteur, mais vous aurez probablement besoin de tout cela \u00e0 un moment donn\u00e9. Voici ce qu\u2019est un chemin de rendu CSS critique\u2026. Voici ce qu\u2019est un chemin de rendu CSS critique\u2026.<\/p>\n<blockquote>\n<p>Par exemple, une page d\u2019article et une page <em>Contact Us<\/em> peuvent n\u00e9cessiter des \u00e9l\u00e9ments l\u00e9g\u00e8rement diff\u00e9rents du CSS. Pour quelqu\u2019un qui visite la page d\u2019article, les \u00e9l\u00e9ments CSS qui sont uniques \u00e0 la page Contactez-nous ne sont pas critiques \u00e0 charger pour ce visiteur ; pourtant, ce CSS est toujours charg\u00e9 quand quelqu\u2019un navigue \u00e0 la page d\u2019article dans de nombreux cas, car un webmaster aura besoin de tous les fichiers CSS \u00e0 t\u00e9l\u00e9charger pour afficher la page.<\/p>\n<\/blockquote>\n<p>Vous pouvez voir dans cet exemple que le site n\u00e9cessite tout les CSS abord\u00e9s, mais peut ne pas avoir besoin de tout les CSS pour chaque URL ou visite. Cela signifie que le CSS critique diff\u00e8re selon l\u2019utilisateur et la page d\u2019un site.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_OPTIMISER_LA_LIVRAISON_DES_CSS_CRITIQUES\"><\/span>COMMENT OPTIMISER LA LIVRAISON DES CSS CRITIQUES ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Comme nous l\u2019avons mentionn\u00e9 plus haut, la nature du CSS critique variera. Un chargement incorrect du CSS peut causer toutes sortes de probl\u00e8mes.<\/p>\n<p>Puisque le CSS bloque l\u2019affichage, le chargement de tout le CSS pour chaque visiteur sur chaque page produira souvent des vitesses de site plus lentes. D\u2019un autre c\u00f4t\u00e9, retarder le chargement des CSS critiques peut avoir pour cons\u00e9quence que la page soit <em><span style=\"color: #ff0000;\">compl\u00e8tement vide pour le visiteur<\/span><\/em>.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/about-blank-58824fe55f9b58bdb3b27e21.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6576\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/about-blank-58824fe55f9b58bdb3b27e21.png\" alt=\"CSS n\u2019a pas r\u00e9ussi \u00e0 charger correctement apr\u00e8s le plugin\" width=\"760\" height=\"451\"><\/a><\/p>\n<p>Typiquement, si le CSS n\u2019est pas correctement optimis\u00e9, ou s\u2019il est charg\u00e9 de mani\u00e8re asynchrone de mani\u00e8re incorrecte, le site appara\u00eetra comme un \u00e9cran blanc vide ou avec des parties de la page manquantes. Cela inclut \u00e9galement les polices de caract\u00e8res et la mise en page affich\u00e9es de mani\u00e8re impr\u00e9cise.<\/p>\n<p>La meilleure fa\u00e7on d\u2019optimiser la livraison des CSS est de comprendre quels \u00e9l\u00e9ments sont critiques, lesquels sont critiques de temps \u00e0 autre et lesquels ne le sont jamais.<\/p>\n<blockquote>\n<p>Un exemple de CSS qui est toujours critique pourrait \u00eatre la couleur de fond du site<\/p>\n<\/blockquote>\n<p><strong>Voici une liste de CSS qui est souvent toujours critique:<\/strong><\/p>\n<ul>\n<li>Couleur d\u2019arri\u00e8re-plan<\/li>\n<li>Le style de page qui est au-dessus du pli (ou dans la fen\u00eatre du p\u00e9riph\u00e9rique)<\/li>\n<li>Dimensions des th\u00e8mes par type d\u2019appareil<\/li>\n<li>et autres&#8230;. selon le site et son CSS unique<\/li>\n<\/ul>\n<p>Certains CSS ne sont critiques que dans des circonstances particuli\u00e8res :<\/p>\n<blockquote>\n<p>Par exemple, le CSS critique pour un visiteur mobile est diff\u00e9rent de celui d\u2019un visiteur de bureau. Les visiteurs mobiles n\u2019ont besoin que du CSS qui chargera correctement la version mobile d\u2019une page. Le CSS n\u00e9cessaire pour un rendu de bureau d\u2019une page n\u2019est pas critique pour cette visite.<\/p>\n<\/blockquote>\n<p><strong>Voici une liste de variables CSS courantes qui ne sont critiques que dans certaines circonstances:<\/strong><\/p>\n<ul>\n<li>Mises en page du bureau<\/li>\n<li>Mises en page mobiles<\/li>\n<li>Conception du pied de lit<\/li>\n<li>Menu styles<\/li>\n<li>Certains types de page<\/li>\n<\/ul>\n<p>Enfin, certains CSS ne sont jamais vraiment critiques pour un site particulier.<\/p>\n<blockquote>\n<p>Par exemple, un site mobile peut avoir un menu hamburger. Le CSS requis pour survoler l\u2019affichage dans le menu d\u00e9roulant de ce menu n\u2019est pas critique pour le rendu de la page pour le visiteur. Ce CSS peut \u00eatre \u00ab lazy loaded \u00bb une fois que le visiteur a rendu la page.<\/p>\n<\/blockquote>\n<p><strong>Ci-dessous est une liste de CSS qui n\u2019est presque jamais critique \u00e0 afficher initialement:<\/strong><\/p>\n<ul>\n<li>CSS qui est en dessous du pli<\/li>\n<li>CSS qui est pour un autre appareil que celui que le visiteur utilise<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"QUEL_EST_LIMPACT_DU_CHARGEMENT_CSS_SUR_LA_VITESSE_DES_PAGES_DE_MON_SITE\"><\/span>QUEL EST L\u2019IMPACT DU CHARGEMENT CSS SUR LA VITESSE DES PAGES DE MON SITE ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La quantit\u00e9 de CSS sur chaque site web est diff\u00e9rente. Son impact sur la vitesse varie en fonction de la taille des fichiers CSS d\u2019un site.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/site-speed-improvement-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6564\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/site-speed-improvement-min-1024x460.png\" alt=\"chargement paresseux css\" width=\"786\" height=\"353\"><\/a><\/p>\n<p>Vous pouvez utiliser l\u2019outil <a href=\"https:\/\/sitespeed.ezoic.com\/#\/app\/\" target=\"_blank\" rel=\"noopener\">free site speed breakdown tool<\/a> d\u2019Ezoic pour voir exactement la taille des fichiers CSS sur votre site. Un site moyen peut n\u2019avoir que 50 \u00e0 200 Ko de CSS ; cependant, la livraison du CSS lui-m\u00eame peut rendre le site plus rapide quelle que soit la taille des fichiers.<\/p>\n<p>Comprendre quels fichiers CSS sont les plus gros et les plus importants \u00e0 afficher aux visiteurs d\u00e9terminera en fin de compte l\u2019impact que l\u2019optimisation de la livraison CSS aura sur votre site.<\/p>\n<p><strong>Au final, le CSS n\u2019est que mod\u00e9r\u00e9ment important pour la vitesse de chargement de site<\/strong> \u2013 selon la taille de tous vos fichiers CSS, le CSS peut \u00eatre divis\u00e9 en CSS qui est critique et doit \u00eatre bloquer l\u2019affichage, et le CSS qui peut \u00eatre charg\u00e9 apr\u00e8s l\u2019affichage de pages (non critiques si vous voulez).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"QUELLES_TECHNIQUES_PEUVENT_AMELIORER_LA_LIVRAISON_CSS_SANS_CASSER_DES_CHOSES\"><\/span>QUELLES TECHNIQUES PEUVENT AM\u00c9LIORER LA LIVRAISON CSS SANS CASSER DES CHOSES ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>L\u2019optimisation de la livraison CSS est difficile car si le CSS n\u00e9cessaire pour afficher une page \u00e0 un visiteur n\u2019est pas charg\u00e9 sur demande, la page ne s\u2019affichera pas correctement ou sera affich\u00e9e en blanc.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/F9EXp.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/F9EXp-1024x467.png\" alt=\"Le blocage CSS fait en dire que mon site ne fonctionne pas\" width=\"763\" height=\"348\"><\/a><\/p>\n<p>Le CSS peut \u00eatre optimis\u00e9 pour acc\u00e9l\u00e9rer un site en le chargeant \u00ab en ligne \u00bb ou \u00ab asynchrone \u00bb (aussi appel\u00e9 chargement paresseux).<\/p>\n<p>Nous voulons essentiellement d\u00e9terminer la quantit\u00e9 minimale de CSS bloquant l\u2019affichage n\u00e9cessaire pour charger correctement la page et ensuite utiliser ces techniques pour optimiser la livraison CSS au visiteur du site.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"DOIS-JE_CHARGER_LE_CSS_DE_MANIERE_ASYNCHRONE\"><\/span><strong>DOIS-JE CHARGER LE CSS DE MANI\u00c8RE ASYNCHRONE ?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Comme mentionn\u00e9 ci-dessus, tous les CSS n\u2019ont pas besoin de bloquer l\u2019affichage. Nous ne voulons \u00e9videmment pas que les pages se chargent de mani\u00e8re incorrecte, il est donc logique que certains CSS bloquent le rendu des pages ; cependant, le CSS qui n\u2019est pas n\u00e9cessaire pour que la page soit affich\u00e9e correctement peut \u00eatre servi de mani\u00e8re asynchrone.<\/p>\n<p>Si le CSS critique n\u2019est pas charg\u00e9 sur demande, les visiteurs sont susceptibles de voir une page blanche ou une page qui se charge avec des erreurs. Le chargement asynchrone de CSS signifie qu\u2019il est charg\u00e9 apr\u00e8s que la page a \u00e9t\u00e9 initialement rendue pour le visiteur.<\/p>\n<p>C\u2019est une excellente technique lorsque vous savez quels fichiers CSS ne sont pas critiques pour le chargement de la page correctement.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMENT_VOUS_POUVEZ_UTILISER_LE_CHARGEMENT_CSS_ASYNCHRONE_POUR_RENDRE_VOTRE_SITE_PLUS_RAPIDE\"><\/span>COMMENT VOUS POUVEZ UTILISER LE CHARGEMENT CSS ASYNCHRONE POUR RENDRE VOTRE SITE PLUS RAPIDE:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si vous \u00eates un utilisateur d\u2019Ezoic, la meilleure et la plus efficace fa\u00e7on de le faire est d\u2019utiliser <a href=\"\/?page_id=26969\">l\u2019application Sitespeed<\/a> dans Ezoic.<\/p>\n<p>Installez simplement l\u2019application et utilisez les param\u00e8tres simples pour pr\u00e9visualiser et d\u00e9finir les param\u00e8tres CSS sur votre site.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Image-from-iOS-1-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6552\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Image-from-iOS-1-min-1024x569.png\" alt=\"optimiser la vitesse du site\" width=\"765\" height=\"425\"><\/a><\/p>\n<p>Et voil\u00e0, c\u2019est tout !<\/p>\n<p><strong>Si vous n\u2019\u00eates pas un utilisateur d\u2019Ezoic, ou si vous pr\u00e9f\u00e9rez r\u00e9gler le CSS \u00e0 la main, vous pouvez utiliser ces \u00e9tapes simples.<\/strong><\/p>\n<p>1.) Allez sur <a href=\"https:\/\/sitespeed.ezoic.com\" target=\"_blank\" rel=\"noopener\">sitespeed.ezoic.com<\/a>.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/ezoic-site-speed-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6540\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/ezoic-site-speed-min-1024x486.png\" alt=\"vitesse css site web\" width=\"794\" height=\"377\"><\/a><\/p>\n<p>2.) Scannez votre site Web \u00e0 l\u2019aide de l\u2019outil.<\/p>\n<p>3.) Acc\u00e9dez \u00e0 l\u2019onglet \u00ab Actifs \u00bb (Assets)<\/p>\n<p>4.) Cliquez ensuite sur la cat\u00e9gorie CSS + cat\u00e9gorie.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/css-files-1-min-1.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6544\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/css-files-1-min-1.png\" alt=\"Chemin d\u2019acc\u00e8s critique au rendu CSS\" width=\"748\" height=\"379\"><\/a><\/p>\n<p>5.) S\u00e9lectionnez chacune de ces URL une par une, puis utilisez l\u2019une des m\u00e9thodes suivantes pour tester leur chargement asynchrone sur votre site.<\/p>\n<ul>\n<li>Vous pouvez utiliser ce code ci-dessous si vous souhaitez le coder en dur sur vos pages:<\/li>\n<\/ul>\n<blockquote>\n<p>&lt;lien rel=&#8221;preload \u00bb href= \u00bb<span style=\"color: #ff0000;\"><strong>THECSSFILE. CSS<\/strong><\/span>&#8221; as=&#8221;style \u00bb onload=&#8221;this.rel=&#8217;stylesheet&#8217; \u00bb&gt;<br \/>&lt;Noscript&gt;&lt;lien rel =&#8221;stylesheet \u00bb href= \u00bb<span style=\"color: #ff0000;\"><strong>URL<\/strong><\/span>&#8220;&gt;&lt;\/noscript&gt;<br \/>&lt;Script&gt;<\/p>\n<\/blockquote>\n<ul>\n<li>Si vous \u00eates un utilisateur de WordPress, vous pouvez utiliser n\u2019importe quel nombre de plugins de mise en cache, de r\u00e8gles CSS ou de vitesse. Pour cet exemple, je vais utiliser Wp-Rocket.\n<ul>\n<li>Connectez-vous \u00e0 WordPress et naviguez vers votre plugin.<\/li>\n<li>Il devrait y avoir un moyen de \u00ab chargement paresseux \u00bb ou de chargement asynchrone du CSS. Ils auront l\u2019option de le faire en gros ou de ne le faire que pour des fichiers s\u00e9lectionn\u00e9s.<\/li>\n<li>C\u2019est pourquoi vous aviez besoin des URLs de l\u2019outil plus t\u00f4t. Ces URLs vous permettront d\u2019acc\u00e9der facilement aux fichiers CSS contribuant au temps de chargement global des sites.<\/li>\n<li>Vous pouvez maintenant utiliser le plugin pour charger paresseusement vos fichiers CSS ou exclure certains fichiers du chargement paresseux. WP-Rocket me donne la possibilit\u00e9 d\u2019exclure les fichiers s\u00e9lectionn\u00e9s.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/critical-CSS-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6548\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/critical-CSS-min-1024x393.png\" alt=\"chargement critique CSS derni\u00e8re\" width=\"852\" height=\"327\"><\/a><\/p>\n<p>6.) Maintenant, un par un, vous devez passer par un processus d\u2019\u00e9limination si vous n\u2019\u00eates pas s\u00fbr quels fichiers CSS doivent \u00eatre rendus-bloquants et lesquels ne le sont pas.<\/p>\n<ul>\n<li>Pour tester ceci, vous pouvez essayer de charger paresseusement tout le CSS d\u2019abord et ensuite v\u00e9rifier si le site se charge correctement en mode Incognito de Chrome avec un cache effac\u00e9 et un rafra\u00eechissement dur chaque fois que vous ajouter ou supprimer un fichier CSS.<\/li>\n<li>En fin de compte, vous arriverez \u00e0 un point o\u00f9 une partie du CSS peut \u00eatre charg\u00e9e de mani\u00e8re asynchrone sans interrompre le site ou l\u2019afficher de mani\u00e8re incorrecte.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: C\u2019est la fa\u00e7on la plus lente de le faire. Si vous pouvez lire les fichiers et d\u00e9terminer ceux qui sont critiques au d\u00e9part, vous pouvez vous \u00e9pargner beaucoup d\u2019essais et d\u2019erreurs.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"QUEST-CE_QUE_LE_CSS_INLINE_DOIS-JE_CHARGER_LE_CSS_DE_CETTE_FACON\"><\/span>QU\u2019EST-CE QUE LE CSS INLINE ? DOIS-JE CHARGER LE CSS DE CETTE FA\u00c7ON ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Excellente question. Peut-\u00eatre.<\/p>\n<p>Google a quelques directives \u00e0 ce sujet (<a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/OptimizeCSSDelivery\" target=\"_blank\" rel=\"noopener noreferrer\">this<\/a>).<\/p>\n<p>CSS inline signifie que le CSS est charg\u00e9 dans la &lt;balise&gt; du HTML du site. C\u2019est plus rapide que si le visiteur devait t\u00e9l\u00e9charger les fichiers CSS directement depuis le serveur ; cependant, si tout le CSS du site est affich\u00e9 en ligne, cela peut ralentir le temps de chargement de l\u2019ensemble du site. Plut\u00f4t que de devoir t\u00e9l\u00e9charger le CSS du serveur une seule fois, le visiteur doit maintenant t\u00e9l\u00e9charger le CSS sur chaque page affich\u00e9e.<\/p>\n<p>Le CSS inline est excellent lorsque chaque page n\u2019a que le CSS n\u00e9cessaire affich\u00e9 en ligne. Les CSS non critiques ne doivent pas \u00eatre affich\u00e9s en ligne. Cela peut en fait se traduire par des vitesses de page plus lentes.<\/p>\n<p><strong>Comment utiliser le CSS inline pour augmenter la vitesse du site :<\/strong><\/p>\n<p>Si vous \u00eates un utilisateur d\u2019Ezoic, encore une fois, tout cela se fait facilement en utilisant la nouvelle application SiteSpeed dans l\u2019app store.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/sitespeed-css-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6560\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/sitespeed-css-min-1024x415.png\" alt=\"application critique de chemin d\u2019acc\u00e8s css\" width=\"809\" height=\"328\"><\/a><\/p>\n<p><span style=\"color: #ff0000;\">[REMARQUE : Si vous ne voyez pas l\u2019application SiteSpeed dans votre app store, ne vous inqui\u00e9tez pas. Il devrait \u00eatre publi\u00e9 \u00e0 tous les utilisateurs dans la semaine prochaine.]<\/span><\/p>\n<p><strong>Si vous n\u2019avez pas acc\u00e8s \u00e0 Ezo\u00efc, ou pr\u00e9f\u00e9rez le faire \u00e0 la main, vous pouvez utiliser ces \u00e9tapes ci-dessous en conjonction avec les autres \u00e9tapes ci-dessus.<\/strong><\/p>\n<p>1.) Allez \u00e0 <a href=\"https:\/\/sitespeed.ezoic.com\" target=\"_blank\" rel=\"noopener\">sitespeed.ezoic.com<\/a>.<\/p>\n<p>2.) Lancez votre site \u00e0 l\u2019aide de l\u2019outil.<\/p>\n<p>3.) Acc\u00e9dez \u00e0 l\u2019onglet \u00ab Actifs \u00bb.<\/p>\n<p>4.) Cliquez ensuite sur la cat\u00e9gorie CSS + cat\u00e9gorie.<\/p>\n<p>5.) Vous devriez d\u00e9j\u00e0 avoir d\u00e9termin\u00e9 quel CSS est critique ci-dessus. Tous les fichiers CSS que vous devez exclure du chargement asynchrone peuvent maintenant \u00eatre charg\u00e9s en ligne.<\/p>\n<ul>\n<li>Pour \u00e9crire ceci en code dur sur votre site, vous pouvez entrer les fichiers CSS dans le tag &lt;head&gt; comme ceci&#8230;<\/li>\n<\/ul>\n<div class=\"w3-example\">\n<blockquote>\n<div class=\"w3-code notranslate htmlHigh\">&lt;lien rel=&#8221;stylesheet \u00bb href=&#8221;styles.css \u00bb&gt;<\/div>\n<\/blockquote>\n<ul>\n<li>Pour ce faire dans WordPress, vous pouvez injecter l\u2019utilisation de levier de l\u2019injection de CSS en ligne \u00e0 vos plugins ou th\u00e8mes avec [ <em>wp_add_inline_style <\/em>]<em>.<\/em> Cette pratique est consid\u00e9r\u00e9e comme la meilleure. Il fera en sorte qu\u2019il n\u2019apparaisse qu\u2019\u00e0 l\u2019endroit o\u00f9 le plugin ou les th\u00e8mes CSS existants apparaissent pour que vous n\u2019ayez pas \u00e0 le rendre disponible en ligne si le CSS est suppos\u00e9 \u00eatre pr\u00e9sent dans tout le site.<\/li>\n<\/ul>\n<div id=\"attachment_6556\" class=\"wp-caption aligncenter\" style=\"width: 696px;\">\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6556 lazyloaded\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3.png\" sizes=\"(max-width: 686px) 100vw, 686px\" srcset=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1.png 828w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1-300x213.png 300w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1-768x544.png 768w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1.png 400w\" alt=\"optimiser css wordpress\" width=\"686\" height=\"486\" data-lazy-src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3.png\" data-lazy-srcset=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1.png 828w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1-300x213.png 300w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1-768x544.png 768w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1.png 400w\" data-lazy-sizes=\"(max-width: 686px) 100vw, 686px\" data-was-processed=\"true\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6556\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3.png\" alt=\"optimiser css wordpress\" width=\"686\" height=\"486\" srcset=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1.png 828w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1-300x213.png 300w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1-768x544.png 768w, https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/autoptimize-3-1.png 400w\" sizes=\"(max-width: 686px) 100vw, 686px\"><\/noscript><\/a><\/p>\n<p class=\"wp-caption-text\"><em>Autoptimiser <\/em>plugin<em> disponible pour WordPress.<\/em><\/p>\n<\/div>\n<ul>\n<li>Il y a des plugins qui le font aussi bien, mais ils ne sont g\u00e9n\u00e9ralement pas aussi bons que l\u2019inlining CSS.<\/li>\n<\/ul>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%AB_PUIS-JE_UTILISER_CES_TECHNIQUES_ENSEMBLE_%C2%BB\"><\/span><strong>\u00ab PUIS-JE UTILISER CES TECHNIQUES ENSEMBLE ? \u00bb<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Oui ! C\u2019est la meilleure fa\u00e7on d\u2019optimiser les CSS.<\/p>\n<p>Lorsqu\u2019elles sont utilis\u00e9es en combinaison, ces techniques offrent le moyen optimal de minimiser le nombre de CSS bloquant le rendu utilis\u00e9 sur votre site sur chaque page.<\/p>\n<p>Les \u00e9tapes ci-dessus ne sont pas la fa\u00e7on la plus efficace d\u2019ex\u00e9cuter ces t\u00e2ches, mais si vous n\u2019\u00eates pas un d\u00e9veloppeur de m\u00e9tier, vous pourriez avoir de la difficult\u00e9 \u00e0 le faire avec succ\u00e8s sans une s\u00e9rie de tactiques d\u2019essais et d\u2019erreurs s\u00e9rieuses.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/css-loading-speed-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6568\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/css-loading-speed-min-1024x361.png\" alt=\"vitesse css\" width=\"791\" height=\"279\"><\/a><\/p>\n<p>Encore une fois, si vous \u00eates un utilisateur d\u2019Ezoic, le <a href=\"https:\/\/www.ezoic.com\/\" target=\"_blank\" rel=\"noopener\">free sitespeed optimizer<\/a> \u00e0 l\u2019int\u00e9rieur de l\u2019app store d\u2019Ezoic fera tout cela automatiquement et vous donnera quelques r\u00e9glages qui devraient faciliter cette t\u00e2che.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CSS_BLOQUANT_LAFFICHAGE_ET_AMELIOREZ_LES_TEMPS_DE_CHARGEMENT_DES_PAGES\"><\/span>CSS BLOQUANT L\u2019AFFICHAGE ET AM\u00c9LIOREZ LES TEMPS DE CHARGEMENT DES PAGES<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le plus difficile pour la plupart des \u00e9diteurs et des d\u00e9veloppeurs de sites est de d\u00e9terminer quels fichiers CSS doivent \u00eatre bloqu\u00e9s et affich\u00e9s inline et lesquels peuvent \u00eatre affich\u00e9s de mani\u00e8re asynchrone.<\/p>\n<p>Les \u00e9diteurs de WordPress seront familiers avec tous les excellents plugins et outils qui sont disponibles pour aider \u00e0 mettre en \u0153uvre ces pratiques. Malheureusement, presque tous ces plug-ins \u2013 y compris WP-Rocket (l\u2019un de mes favoris) \u2013 cassent encore souvent le site ou n\u2019offrent pratiquement aucune am\u00e9lioration de la vitesse du site.<\/p>\n<p>La raison pour laquelle la plupart des outils et plugins ne peuvent pas faire cela correctement est qu\u2019il peut \u00eatre tr\u00e8s difficile de savoir quels fichiers CSS sont n\u00e9cessaires pour un rendu permanent. De plus, il est difficile d\u2019appliquer les m\u00eames r\u00e8gles de blocage de rendu \u00e0 chaque visiteur. Tous les visiteurs n\u2019ont pas besoin des m\u00eames r\u00e8gles CSS.<\/p>\n<blockquote>\n<p>Par exemple, si je charge de mani\u00e8re asynchrone des \u00e9l\u00e9ments CSS de bureau, mes visiteurs mobiles b\u00e9n\u00e9ficieront d\u2019un temps de chargement CSS l\u00e9g\u00e8rement plus rapide tandis que les visiteurs de mon bureau verront une page blanche. J\u2019ai besoin de m\u2019assurer que le CSS de bureau ne se charge que de mani\u00e8re asynchrone sur les appareils mobiles.<\/p>\n<\/blockquote>\n<p>Si vous \u00eates un d\u00e9veloppeur, ce <a href=\"https:\/\/github.com\/filamentgroup\/criticalCSS\" target=\"_blank\" rel=\"noopener\">GitHub project<\/a> peut vous aider \u00e0 comprendre quel CSS est critique pour d\u00e9finir comment bloquer l\u2019affichage (render-blocking) et vous pouvez alors facilement \u00e9crire les r\u00e8gles n\u00e9cessaires pour charger paresseusement le CSS non critique. En attendant, vous pouvez ajouter tous les CSS universellement critiques en ligne sur chaque page respective.<\/p>\n<p><a href=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/sitespeed-tool-min.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6588\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/sitespeed-tool-min-1024x242.png\" alt=\"mesurer la vitesse du site et css\" width=\"880\" height=\"208\"><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"DERNIER_MOT_SUR_LOPTIMISATION_DES_CSS\"><\/span>DERNIER MOT SUR L\u2019OPTIMISATION DES CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le CSS est un \u00e9l\u00e9ment de base de la plupart des grands sites. Le terme \u00ab Render-blocking CSS \u00bb, CSS bloquant l\u2019affichage, a une mauvaise r\u00e9putation \u00e0 cause des outils de vitesse de page qui disent souvent aux webmasters d\u2019\u00e9liminer le CSS bloquant l\u2019affichage au-dessus du pli.<\/p>\n<p>Au final, vous voulez que le CSS bloque vos pages s\u2019affichant incorrectement. La cl\u00e9 est d\u2019optimiser la livraison du CSS de sorte que seul le CSS n\u00e9cessaire pour charger les pages de la partie visible soit bloqu\u00e9 par l\u2019affichage. Ceci inclut les CSS qui sont au-dessus du pli. Malheureusement, cela varie selon le type d\u2019appareil, de sorte qu\u2019il se pr\u00eate bien \u00e0 une approche autoritaire.<\/p>\n<p><a href=\"https:\/\/sitespeed.ezoic.com\" target=\"_blank\" rel=\"noopener\">Avec l\u2019outil de mesure de la vitesse du site d\u2019Ezoic<\/a>, vous pouvez facilement voir quels fichiers CSS sont les plus gros et offrent les meilleures possibilit\u00e9s d\u2019optimisation. Vous pouvez ensuite utiliser des outils communs, des plugins ou des codes HTML personnalis\u00e9s pour essayer de charger les diff\u00e9rents fichiers de mani\u00e8re asynchrone et d\u2019induire les CSS critiques.<\/p>\n<p>La <em><strong>Site Speed<\/strong><\/em> app gratuite d\u2019Ezoic simplifie consid\u00e9rablement la t\u00e2che si vous utilisez d\u00e9j\u00e0 Ezoic et avez acc\u00e8s \u00e0 l\u2019app store (disponible bient\u00f4t).<\/p>\n<p>Questions, commentaires ? Laissez-les en bas et je ferai de mon mieux pour y r\u00e9pondre.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.0.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; z_index_tablet=&#8221;500&#8243; hover_enabled=&#8221;0&#8243;] COMMENT OPTIMISEZ UN CSS CRITIQUE AFIN D\u2019AM\u00c9LIORER LA VITESSE DE VOTRE SITE Avez-vous d\u00e9j\u00e0 fait un test de vitesse de votre site et r\u00e9alis\u00e9 que la moiti\u00e9 des choses sur la liste des choses \u00e0 am\u00e9liorer&hellip; <a class=\"more-link\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimisez-un-css-critique-afin-dameliorer-la-vitesse-de-votre-site\/\">Continue reading <span class=\"screen-reader-text\">COMMENT OPTIMISEZ UN CSS CRITIQUE AFIN D\u2019AM\u00c9LIORER LA VITESSE DE VOTRE SITE<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[10],"tags":[8],"class_list":["post-977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-referencement-seo","tag-fr","entry"],"_links":{"self":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/977"}],"collection":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/comments?post=977"}],"version-history":[{"count":0,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/977\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media\/991"}],"wp:attachment":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media?parent=977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/categories?post=977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/tags?post=977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}