Souhaitez-vous optimiser votre livraison CSS WordPress ?
Les fichiers CSS contrôlent le formatage visuel et le style de votre site Web WordPress. Mais si votre code CSS n’est pas fourni de manière optimale, cela pourrait ralentir votre site Web.
Dans cet article, nous allons vous montrer deux méthodes simples pour optimiser votre livraison CSS WordPress.
Comment WordPress CSS Delivery affecte les performances de WordPress
Les fichiers CSS sont utilisés pour définir l’apparence visuelle de votre site WordPress. Votre thème WordPress contient un fichier de feuille de style CSS, et certains de vos plugins peuvent également utiliser des feuilles de style CSS.
CSS est nécessaire pour les sites Web modernes, mais il est possible que les fichiers CSS ralentissent la vitesse et les performances de votre site en fonction de leur configuration.
Même un petit retard dans la vitesse du site crée une mauvaise expérience utilisateur et peut affecter vos classements de recherche et vos conversions, entraînant moins de trafic et de ventes.
Les fichiers CSS peuvent ralentir votre site Web s’ils doivent être chargés avant que la page puisse être affichée. Cela signifie que vos visiteurs verront une page vierge jusqu’à ce que le fichier CSS soit chargé. C’est ce qu’on appelle le CSS bloquant le rendu.
Une autre raison courante pour laquelle les fichiers CSS peuvent ralentir votre site Web est lorsqu’ils contiennent plus de code que nécessaire pour afficher la partie visible de la page actuelle. Ce code supplémentaire signifie qu’ils prendront plus de temps à charger.
La bonne nouvelle est que vous pouvez améliorer les performances de votre site WordPress en optimisant la manière dont le code CSS est livré.
Cela se fait en identifiant le code CSS minimum nécessaire pour afficher la première partie de la page Web actuelle. Ceci est connu comme CSS critique.
Ce code critique est ensuite ajouté en ligne au code HTML de la page, plutôt que dans des feuilles de style distinctes, afin que le code puisse être rendu sans avoir besoin de charger le fichier CSS au préalable.
Le reste du CSS peut ensuite être chargé une fois que vos visiteurs ont pu voir le contenu de la page. C’est ce qu’on appelle le « chargement différé ».
Dans ce didacticiel, nous allons vous montrer deux méthodes pour optimiser la livraison CSS de WordPress, et vous pouvez choisir celle qui vous convient le mieux.
- Méthode 1 : Optimiser la livraison CSS de WordPress avec WP Rocket
- Méthode 2 : Optimiser la livraison CSS de WordPress avec Autoptimize
Méthode 1 : Optimiser la livraison CSS de WordPress avec WP Rocket
WP Rocket est le meilleur plugin de mise en cache WordPress du marché. Il offre le moyen le plus simple d’optimiser votre livraison CSS WordPress. En fait, c’est aussi simple que de cocher une case.
WP Rocket est un plugin premium, mais la meilleure partie est que toutes les fonctionnalités sont incluses dans leur plan le plus bas.
La première chose à faire est d’installer et d’activer le plugin WP Rocket. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Une fois activé, vous devez naviguer vers le Paramètres » WP Rocket et passez à l’onglet « Optimisation des fichiers ».
Ensuite, vous devez faire défiler jusqu’à la section des fichiers CSS. Une fois là-bas, vous devez cocher la case à côté de l’option « Optimiser la livraison CSS ».
Cette fonctionnalité identifiera intelligemment le CSS critique nécessaire pour formater la partie de la page Web que vos visiteurs voient en premier. Vos pages se chargeront plus rapidement et le reste du CSS sera chargé une fois que vos visiteurs auront pu voir son contenu.
Tout ce que vous avez à faire maintenant est de cliquer sur le bouton Enregistrer les modifications et d’attendre que WP Rocket génère le fichier CSS nécessaire pour tous vos articles et pages.
Il effacera également automatiquement le cache de votre site Web, de sorte que vos visiteurs verront la nouvelle version optimisée de votre site au lieu des versions non optimisées stockées dans le cache.
WP Rocket peut vous aider à améliorer les performances de votre site Web de nombreuses autres façons. Pour en savoir plus, consultez notre guide sur la façon d’installer et de configurer correctement WP Rocket dans WordPress.
Méthode 2 : Optimiser la livraison CSS de WordPress avec Autoptimize
Autoptimize est un plugin gratuit conçu pour améliorer la livraison des fichiers CSS et JS de votre site Web.
Bien qu’Autoptimize soit un plugin gratuit, il n’a pas autant de fonctionnalités que WP Rocket et prend plus de temps à configurer.
Par exemple, il n’est pas capable d’identifier automatiquement les CSS critiques comme le peut WP Rocket. Au lieu de cela, Autoptimize nécessite l’aide d’un service tiers premium, ce qui représente un coût supplémentaire et nécessite un temps supplémentaire de configuration.
Cependant, cela pourrait être une bonne option si vous avez un budget serré et n’avez pas besoin de toutes les autres fonctionnalités de WP Rocket pour accélérer votre site.
La première chose à faire est d’installer et d’activer le plugin Autoptimize. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez visiter le Paramètres » Optimisation automatique page pour configurer les paramètres du plugin. Une fois là-bas, vous devez faire défiler jusqu’à la section Options CSS et cocher la case Optimiser le code CSS en haut.
Une fois que vous avez fait cela, vous devez vous assurer que l’option « Agréger les fichiers CSS » n’est pas cochée, puis cochez « Éliminer les CSS bloquant le rendu ».
Vous pouvez maintenant cliquer sur le bouton « Enregistrer les modifications et vider le cache » pour enregistrer vos paramètres.
Mais le plugin ne fonctionnera pas correctement tant que vous n’aurez pas créé un compte Critical CSS. Il s’agit d’un service d’abonnement premium qui fournira à Autoptimize le code CSS critique dont il a besoin pour optimiser votre livraison CSS WordPress.
Pour ce faire, accédez à l’onglet CSS critique dans les paramètres d’Autoptimize. Vous trouverez ici les informations dont vous avez besoin pour vous inscrire à Critical CSS. Vous pouvez commencer en cliquant sur le lien d’inscription dans le troisième paragraphe.
Une fois que vous avez reçu votre clé d’API CSS critique, faites défiler jusqu’à la section Clé d’API afin de pouvoir la coller dans la zone de texte « Votre clé d’API ». Après cela, assurez-vous de cliquer sur le bouton Enregistrer les modifications.
Autoptimize dispose désormais de toutes les informations dont il a besoin pour ajouter le CSS en ligne critique et différer le chargement des feuilles de style jusqu’à ce que la page ait été rendue. En conséquence, votre site Web se chargera plus rapidement.
Nous espérons que ce didacticiel vous a aidé à apprendre à optimiser la livraison CSS de WordPress.
Vous voudrez peut-être également consulter notre guide ultime sur le coût réel de la création d’un site Web WordPress et notre comparaison des sociétés d’hébergement WordPress les mieux gérées.
Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour des didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Le post Comment optimiser facilement la livraison CSS WordPress (2 méthodes) est apparu en premier sur WPBeginner.
Articles similaires:
