Vous voyez l’avertissement « Combine external CSS » dans Pingdom, GTmetrix, ou Google PageSpeed Insights ? Vous n’êtes pas seul, car il s’agit d’une erreur très courante pour de nombreux propriétaires de sites Web WordPress. Cet avertissement s’affiche généralement lorsque vous avez 10 fichiers CSS ou plus chargés à partir d’un CDN et/ou d’un sous-domaine (domaine externe). Un moyen de résoudre ce problème est de concaténer vos fichiers CSS, ou de les combiner pour qu’ils se chargent en une seule requête.

Remarque : Si vous utilisez HTTPS avec un fournisseur qui prend en charge HTTP/2, cet avertissement peut généralement être ignoré en toute sécurité. Avec HTTP/2, plusieurs fichiers CSS peuvent maintenant être chargés en parallèle sur une seule connexion.
Avertissement Combine external CSS dans Pingdom

Avertissement Combine external CSS dans Pingdom

Si vous utilisez toujours HTTP et que vous n’avez pas encore migré vers HTTP/2, vous pouvez suivre le tutoriel ci-dessous pour savoir comment combiner des fichiers CSS externes. Encore une fois, la concaténation est maintenant une technique qui est généralement considérée comme désuète. Plus de 77% des navigateurs supportent maintenant HTTP/2 lorsqu’ils fonctionnent sur HTTPS, ainsi que de nombreux fournisseurs de CDN et d’hébergement web, dont Kinsta. Il est également important de noter que Pingdom ne supporte pas encore HTTP/2 puisqu’il utilise une version plus ancienne de Chrome.

Combiner le CSS externe dans WordPress

Le message d’avertissement Combine external CSS est généralement affiché lorsque vous utilisez un CDN parce que vous hébergez vos fichiers CSS sur un domaine externe, tel que cdn.domaine.com. Ce que vous pouvez faire, c’est simplement concaténer vos fichiers CSS sur votre serveur web. Une fois qu’ils sont combinés, vous ne verrez plus cet avertissement car il les chargera dans une seule requête. L’une des façons les plus simples d’y parvenir est d’utiliser un plugin WordPress gratuit appelé Autoptimize, développé par Frank Goossens.

Plugin Autoptimize

Plugin Autoptimize

Ce plugin est assez léger, seulement 176 Ko pour être exact. Au moment d’écrire ces lignes, il compte actuellement plus de 600 000 installations actives avec une note de 4,7 sur 5 étoiles. Le plugin vous aide avec la concaténation de vos scripts, la minification, l’expiration des en-têtes, et la possibilité de déplacer les styles vers votre en-tête et les scripts vers votre pied de page.

Vous pouvez le télécharger à partir du référentiel WordPress ou en le recherchant dans votre tableau de bord WordPress sous « Ajouter » wxtensions. Une fois installé, vous voudrez aller dans les paramètres et activer l’option « Optimiser le code CSS ». Ceci concaténera (combinera) vos fichiers CSS. Et si vous utilisez un CDN, assurez-vous d’entrer votre URL CDN. De cette façon, vos fichiers CSS se chargeront en une seule requête sur votre CDN.

Combiner des fichiers CSS externes

Combiner des fichiers CSS externes

Après avoir activé les paramètres ci-dessus, vous verrez maintenant vos fichiers CSS dans un fichier « autoptimize_xxxxxxx.css ».

Fichiers CSS combinés

Fichiers CSS combinés

4
Partages