{"id":237625,"date":"2022-04-05T10:54:00","date_gmt":"2022-04-05T07:54:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=237625"},"modified":"2022-04-27T11:49:41","modified_gmt":"2022-04-27T08:49:41","slug":"comment-optimiser-la-livraison-css-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-optimiser-la-livraison-css-dans-wordpress\/","title":{"rendered":"Comment optimiser la livraison CSS dans WordPress"},"content":{"rendered":"

Si vous \u00eates ici, c’est probablement parce que vous avez re\u00e7u cet avis dans le<\/a> test PageSpeed \u200b\u200bInsights de Google<\/a>\u00a0:<\/p>\n

\"Comment<\/a><\/p>\n

Bien qu’il puisse \u00eatre difficile d’\u00e9liminer tous les fichiers bloquant le rendu, ce n’est pas si difficile avec les bons outils.<\/p>\n

Dans ce guide, je vais vous montrer trois fa\u00e7ons d’ acc\u00e9l\u00e9rer votre site<\/a> avec une diffusion CSS optimis\u00e9e. Il existe des options pour les nouveaux et les d\u00e9veloppeurs WordPress inclus ici.<\/p>\n

Commen\u00e7ons par le haut \u2013 qu’est-ce que cela signifie exactement d’optimiser la diffusion de CSS sur votre site WordPress ?<\/p>\n

Que signifie \u00ab\u00a0optimiser la diffusion CSS\u00a0\u00bb\u00a0?<\/h2>\n

Permettez-moi d’\u00eatre tr\u00e8s clair sur ce que je veux dire en premier.<\/p>\n

Les fichiers CSS sont utilis\u00e9s pour styliser les pages Web<\/a>. Chaque th\u00e8me WordPress charge un fichier style.css et vous avez probablement une poign\u00e9e de feuilles de style suppl\u00e9mentaires (fichiers CSS) ajout\u00e9es par des plugins. Par exemple, si vous avez un plugin qui ajoute un nouveau widget, il devra charger une autre feuille de style pour styliser ce widget.<\/p>\n

Tous les fichiers CSS sont charg\u00e9s avant que votre site ne soit rendu.<\/strong><\/p>\n

Cela signifie que les visiteurs verront un \u00e9cran blanc vierge jusque-l\u00e0. Maintenant, voici la chose\u2026<\/p>\n

La majorit\u00e9 du CSS charg\u00e9 n’est pas n\u00e9cessaire pour la page sur laquelle se trouve le visiteur, et encore moins pour ce qu’il peut voir imm\u00e9diatement. Par exemple, pourquoi les faire attendre pendant le chargement des styles pour le pied de page\u00a0? Il faudra probablement au moins quelques secondes avant qu’ils ne le voient (s’ils le voient jamais).<\/p>\n

En diff\u00e9rant nos fichiers CSS ou en les chargeant de mani\u00e8re asynchrone, nous pouvons permettre au site de s’afficher dans le navigateur du visiteur avant la fin du chargement des feuilles de style.<\/p>\n

Dans ce guide, je vais partager trois approches diff\u00e9rentes pour diff\u00e9rer vos feuilles de style et optimiser votre livraison CSS.<\/p>\n

Chemins de rendu critiques optimis\u00e9s en action<\/h3>\n

Si vous visitez la page d’accueil de Compete Themes<\/a>, gardez un \u0153il sur l’indicateur de chargement dans l’onglet du navigateur pendant le chargement du site. Vous remarquerez qu’une fois que le site est visible et semble charg\u00e9, l’indicateur de chargement continue de tourner pendant un instant de plus.<\/p>\n

C’est un exemple de ce \u00e0 quoi ressemble une livraison CSS optimis\u00e9e dans la pratique.<\/p>\n

Si vous souhaitez voir un exemple de chemin de rendu critique<\/a> hautement optimis\u00e9, visitez Amazon. L’ensemble du site ne se charge pas d’un coup. Au lieu de cela, au cours de quelques secondes, vous verrez diff\u00e9rents \u00e9l\u00e9ments appara\u00eetre tout au long de la page gr\u00e2ce au chemin de rendu soigneusement optimis\u00e9.<\/p>\n

1 fus\u00e9e WP<\/h2>\n

J’utilise le plugin WP Rocket<\/a> ici chez Compete Themes et le recommande avant toutes les autres solutions pour l’optimisation du chemin de rendu critique.<\/p>\n

Optimiser votre livraison CSS avec WP Rocket ne pourrait vraiment pas \u00eatre plus simple. Dans le menu Optimisation des fichiers, il y a une case \u00e0 cocher pour activer cette fonctionnalit\u00e9.<\/p>\n

\"Comment<\/a><\/p>\n

Une fois coch\u00e9, WP Rocket diff\u00e9rera automatiquement toutes vos feuilles de style afin qu’elles ne soient charg\u00e9es qu’une fois le site affich\u00e9 dans le navigateur du visiteur. Maintenant, si tout le CSS \u00e9tait diff\u00e9r\u00e9, votre site aurait l’air terrible jusqu’\u00e0 ce qu’il soit charg\u00e9, et les d\u00e9veloppeurs de WP Rocket ont r\u00e9solu ce probl\u00e8me avec \u00e9l\u00e9gance avec leur plugin.<\/p>\n

Lorsque vous activez cette option, WP Rocket trouvera automatiquement le CSS n\u00e9cessaire pour styliser les parties de votre site que les visiteurs voient au moment o\u00f9 votre site se charge, et ce code est ajout\u00e9 en ligne au document.<\/p>\n

En d’autres termes, votre site s’affiche plus rapidement dans le navigateur et semble \u00eatre enti\u00e8rement charg\u00e9 tandis que le CSS diff\u00e9r\u00e9 est ensuite charg\u00e9 au cours de la seconde ou des deux suivantes.<\/p>\n

\u00c0 mon avis, c’est de loin la meilleure solution pour optimiser la livraison CSS avec WordPress.<\/p>\n

WP Rocket est un plugin premium, mais si des temps de chargement plus rapides vous rapportent plus de revenus sur votre site, j’envisagerais certainement de l’obtenir pour votre site. J’ai un aper\u00e7u<\/a> beaucoup plus d\u00e9taill\u00e9 de WP Rocket que<\/a> vous pouvez lire si vous voulez en savoir plus. Sinon, vous pouvez consulter leur site ici<\/a>.<\/p>\n

2 Optimisation automatique<\/h2>\n

La deuxi\u00e8me approche que je recommanderais est le plugin Autoptimize<\/a>.<\/p>\n

\"Comment<\/a><\/p>\n

Ce plugin de performance riche en fonctionnalit\u00e9s fournit quelques approches pour optimiser la livraison CSS. L’option la plus simple consiste simplement \u00e0 ins\u00e9rer tous les CSS. Cela prendra tout le CSS trouv\u00e9 dans vos feuilles de style et l’ajoutera directement dans le document de la page afin qu’aucune feuille de style ne soit charg\u00e9e.<\/p>\n

Pour trouver cette option, vous devez cliquer sur le bouton Afficher les param\u00e8tres avanc\u00e9s en haut.<\/p>\n

\"Comment<\/a><\/p>\n

Vous verrez alors l’option d’int\u00e9grer tous les CSS.<\/p>\n

\"Comment<\/a><\/p>\n

Bien que cette option puisse am\u00e9liorer les performances, si vous avez ajout\u00e9 trop de CSS au document de la page, cela peut en fait ralentir votre site \u00e0 la place. Cela vaut peut-\u00eatre la peine d’exp\u00e9rimenter.<\/p>\n

Sinon, une approche int\u00e9ressante consiste \u00e0 activer l’option Inline et Defer CSS \u00e0 la place. Cela diff\u00e9rera toutes les feuilles de style et uniquement le CSS critique. Cependant, il ne trouvera pas automatiquement le CSS critique pour vous comme WP Rocket.<\/p>\n

Alors, comment obtenez-vous le CSS critique de votre site\u00a0? M\u00eame pour un d\u00e9veloppeur WP chevronn\u00e9, cela peut \u00eatre une sorte de casse-t\u00eate.<\/p>\n

Bien que je n’aie pas test\u00e9 la fiabilit\u00e9 de cet outil moi-m\u00eame, cet outil gratuit Critical Path CSS Generator<\/a> serait une approche viable. Entrez l’URL de votre site et il vous renverra le CSS que vous devez absolument charger.<\/p>\n

Vous pouvez ensuite copier et coller ce code dans la zone CSS du chemin critique dans Autoptimize.<\/p>\n

\"Comment<\/a><\/p>\n

Si vous utilisez cette approche, vous devrez peut-\u00eatre ajouter du CSS suppl\u00e9mentaire pour diff\u00e9rentes pages de votre site, et cela peut n\u00e9cessiter que vous connaissiez tr\u00e8s bien le CSS de votre th\u00e8me pour assurer un style coh\u00e9rent.<\/p>\n

Une autre approche<\/h3>\n

Il existe un plugin appel\u00e9 Autoptimize criticcss.com power-up<\/a>. C’est tout \u00e0 fait la bouch\u00e9e, mais ce plugin suppl\u00e9mentaire vous permettra de g\u00e9n\u00e9rer automatiquement le CSS critique de votre site en utilisant le service criticcss.com<\/a>.<\/p>\n

Vous devrez vous inscrire aupr\u00e8s de CriticalCSS pour un compte payant pour utiliser cette option.<\/p>\n

3 Acc\u00e9l\u00e9rer<\/h2>\n

Cette derni\u00e8re option est tr\u00e8s rapide et sera simple \u00e0 mettre en \u0153uvre pour un d\u00e9veloppeur WordPress.<\/p>\n

Speed \u200b\u200bUp<\/a> est un plugin l\u00e9ger qui vous permet de diff\u00e9rer toutes les feuilles de style non critiques.<\/p>\n

\"Comment<\/a><\/p>\n

Bien que cela n’optimise pas compl\u00e8tement votre livraison CSS, cela vous aidera.<\/p>\n

Disons que votre th\u00e8me ajoute une feuille de style, puis cinq autres feuilles de style sont ajout\u00e9es par les plugins. Si seule la feuille de style du th\u00e8me est critique \u00e0 charger avant d’afficher le site, vous pouvez diff\u00e9rer les cinq autres.<\/p>\n

Speed \u200b\u200bUp vous offre un filtre simple que vous pouvez ajouter au fichier functions.php d’un th\u00e8me enfant (ou \u00e0 un plugin) pour diff\u00e9rer les feuilles de style de votre choix. Tout ce dont vous avez besoin, ce sont les poign\u00e9es de chaque feuille de style en cours de chargement. Vous pouvez trouver ici quelques fonctions simples<\/a> pour afficher les descripteurs de toutes les feuilles de style enregistr\u00e9es sur votre site.<\/p>\n

Encore une fois, ce sera rapide et facile pour un d\u00e9veloppeur, mais je ne recommanderais pas cette solution si vous n’\u00e9crivez pas de code.<\/p>\n

Conclusion<\/h2>\n

J’esp\u00e8re que vous avez appris une ou deux choses sur l’ optimisation des performances de WordPress<\/a> dans cet article.<\/p>\n

Bien que chacune des trois solutions ci-dessus puisse bien fonctionner, je dois donner un dernier cri au plugin WP Rocket<\/a>. En tant que blogueur et d\u00e9veloppeur de th\u00e8mes WordPress, je trouve qu’il est si facile et indolore de travailler avec.<\/p>\n

Si vous souhaitez d’autres conseils pour acc\u00e9l\u00e9rer votre site, vous aimerez peut-\u00eatre ce guide sur l’optimisation des images<\/a> ou ma revue WP Engine sur<\/a> laquelle Compete Themes s’appuie pour des temps de chargement rapides.<\/p>\n

Source d’enregistrement: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Apprenez \u00e0 acc\u00e9l\u00e9rer votre site WordPress avec l’une de ces trois approches pour optimiser la livraison CSS. Conseils pour d\u00e9butants et avanc\u00e9s \u00e0 l’int\u00e9rieur.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[581,650,661,608],"tags":[844],"class_list":["post-237625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accelerer-wordpress","category-comment-faire","category-free-lance","category-uncategorized-4","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/237625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=237625"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/237625\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=237625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=237625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=237625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}