Réduire la taille des ressources CSS WordPress

par | 3 Juin 2022 | Tutoriels, WordPress

L’un des avertissements récurrents que vous rencontrez dans les outils de test de vitesse, et notamment dans PageSpeed Insights, est de réduire la taille des ressources CSS WordPress. Cette amélioration a pour but d’optimiser la vitesse d’un site, mais aussi l’expérience des utilisateurs et utilisatrices. Voyons comment procéder.

 

 

1. Que sont les ressources CSS WordPress

Pour commencer, il faut comprendre ce que sont les ressources CSS et quel est leur rôle au sein d’un site WordPress. Le code CSS est un langage informatique indispensable sur toute page web. En effet, il permet d’attribuer des styles à cette dernière au moyen de règles. Par exemple, il régit la mise en page, les typographies, les couleurs ou encore certaines des animations d’une page. Il permet également d’optimiser l’affichage sur toutes les tailles d’écran.

Code CSS indispensable

Par conséquent, le CSS est omniprésent dès que vous naviguez sur internet. Et évidemment, il se trouve aussi sur les sites WordPress. Sans lui, vous ne pourriez pas personnaliser votre site comme bon vous semble. Et les règles CSS, quant à elles, sont reprises dans des fichiers, que l’on peut aussi appeler “ressources” CSS.

 

2. Accélérer un site WordPress en réduisant la taille des ressources

Réduire la taille des ressources CSS WordPress vous permettra d’accélérer votre site. En effet, le formatage du code CSS peut comporter de nombreux éléments inutiles au bon fonctionnement d’un site. Néanmoins, ils sont utiles pour les développeuses et développeurs et permettent une lecture facile du code. Il s’agit notamment des espaces, des sauts de ligne ou des commentaires.

 

2.1 Compilation du CSS dans le navigateur

Mais ces éléments sont susceptibles de ralentir un site. Pour qu’une page web soit affichée dans un navigateur, une requête est d’abord envoyée au serveur pour demander les fichiers nécessaires. Parmi eux, se trouvent les fichiers CSS qui doivent d’abord être chargés, puis le code CSS doit être compilé ou “lu” par le navigateur. Plus il y a de code dans un fichier, plus il faut de temps pour le compiler. Et bien sûr, les éléments inutiles (espaces, commentaires) doivent également être compilés.

 

3. Comment repérer les ressources CSS dont il faut réduire la taille

Votre thème comporte des fichiers CSS, mais les extensions que vous installez contiennent, elles aussi, des ressources CSS. Pour les repérer, il faut d’abord effacer le cache et désactiver votre extension de performance et de cache si vous en utilisez une. Ensuite, vous pourrez tester le site dans PageSpeed Insights et repérer les fichiers CSS dont la taille doit être réduite.

 

Avertissement de PageSpeed Insights
Les ressources ont été réduites, mais des améliorations sont encore possibles

 

Supprimer des extensions

Selon le chemin du fichier et donc le dossier dans lequel il se trouve, vous pourrez repérer à quel élément du site il appartient. S’il s’agit d’une extension, la première question à vous poser sera la nécessité de cette fonctionnalité sur votre site. En effet, si vous pouvez vous passer totalement d’une extension et surtout de ses fichiers, vous réglerez déjà une partie du problème.

 

4. Réduire la taille des ressources CSS WordPress

Minifier

Pour réduire la taille des ressources CSS WordPress, nous allons éliminer les éléments inutiles mentionnés plus haut (espaces, sauts de ligne, commentaires). Pour ce faire, il faudra “minifier” le code des fichiers. Ce processus permet de concaténer les caractères du fichier qui devient peu lisible pour un humain, mais qui reste parfaitement compilable pour un navigateur.

Il existe de nombreuses extensions qui vous permettent de minifier le code CSS. Cette fonctionnalité est par ailleurs disponible dans la plupart des extensions standards de performance et de cache. Pensez à toujours tester votre site en profondeur après avoir activé la minification ou toute autre optimisation de code.

 

4.1 W3 Total Cache

 

Page d’accueil de l’extension W3 Total Cache
Page d’accueil de l’extension W3 Total Cache

 
Dans W3 Total Cache, rendez-vous dans le menu Performances > Réglages Généraux et dans la section “Minifier”, cochez la case “Activer”. Ensuite, il faut se rendre dans le menu Performances > Minifier et dans la section “CSS”, il faut cocher la case “Activer”. Vous avez le choix de combiner et minifier, de minifier uniquement ou de combiner uniquement.

 

Réduire la taille des ressources CSS WordPress avec W3 Total Cache
Réduire la taille des ressources CSS WordPress avec W3 Total Cache

 
Je vous recommande d’activer la minification, mais de vérifier si la combinaison des fichiers a un impact positif ou négatif dans vos tests de vitesse. En effet, les fichiers combinés peuvent résulter en un fichier unique et très lourd qui, finalement, ralentit le chargement d’une page.

 

4.2 LiteSpeed Cache

 

Page d’accueil de l’extension LiteSpeed Cache
Page d’accueil de l’extension LiteSpeed Cache

 
Si vous utilisez LiteSpeed Cache pour réduire la taille des ressources CSS WordPress, il faut vous rendre dans le menu LiteSpeed > Optimisation de page (Page Optimization) et dans le premier onglet, Réglages CSS, activer “Minifier CSS”. Vous pouvez également activer l’option “Combiner CSS” tout en vérifiant que votre site n’est pas ralenti par un fichier combiné trop lourd.

 

Réduire la taille des ressources CSS WordPress avec LiteSpeed Cache
Configuration de LiteSpeed Cache

 
Si vous le souhaitez, vous pouvez aussi activer toutes les autres fonctionnalités, à l’exception de CCS Per URL. Ensuite, testez bien votre site et si vous constatez un problème, il faudra désactiver les options une par une pour repérer celle qui en est responsable.

 

4.3 WP Fastest Cache

 

Page d’accueil de l’extension WP Fastest Cache
Page d’accueil de l’extension WP Fastest Cache

 
Vous pouvez aussi minifier et combiner le CSS avec l’extension WP Fastest Cache, dans l’onglet Réglages. Il suffit de cocher les cases “Minifier le CSS” et “Combiner le CSS”. Là aussi, il faut vérifier que la combinaison des fichiers ne vous pose pas de problème de vitesse.

 

Configuration de WP Fastest Cache
Configuration de WP Fastest Cache

 

4.4 WP-Optimize

 

Page d’accueil de l’extension WP-Optimize
Page d’accueil de l’extension WP-Optimize

 
L’extension WP-Optimize vous permet aussi de réduire la taille des ressources CSS WordPress. Pour activer la minification, rendez-vous dans le menu WP-Optimize > Minifer. Dans l’onglet “État de la minification”, il faudra activer la minification ainsi que l’option “Traiter les fichiers CSS”. Ensuite, dans l’onglet CSS, vous pourrez cocher les cases “Activer la minification des fichiers CSS” et “Activer la fusion des fichiers CSS”. Cette seconde fonctionnalité combine les fichiers et il faut donc vérifier qu’elle ne ralentit pas votre site.

 

Réduire la taille des ressources CSS WordPress avec WP-Optimize
Configuration de WP-Optimize

 

4.5 Autoptimize

 

Page d’accueil de l’extension Autoptimize
Page d’accueil de l’extension Autoptimize

 
L’extension Autoptimize offre également la possibilité de réduire la taille des ressources CSS WordPress. Pour ce faire, il faut se rendre dans le menu Réglages > Autoptimize, puis dans l’onglet JS, CSS & HTML, il faut naviguer jusqu’à la section “Options CSS” et cocher l’option “Optimiser le code CSS”. Ensuite, il faudra cocher la fonctionnalité “Concaténer les fichiers CSS” pour activer la minification.

 

Configurer Autoptimize
Configuration d’Autoptimize

 

5. Conclusion

Réduire la taille des ressources CSS WordPress peut se faire facilement à l’aide d’une extension de performance et de cache. Il est aussi judicieux de passer en revue les ressources signalées dans PageSpeed Insights pour vérifier si les extensions auxquelles elles appartiennent peuvent être supprimées d’un site. Grâce à cette optimisation, vous pourrez accélérer votre site et améliorer l’expérience de vos utilisateurs et utilisatrices.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Réservez votre audit SEO gratuit et recevez un rapport personnalisé sur la santé de votre site web