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.
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.
Ce plugin est assez léger, seulement 176 Ko pour être exact. Au moment d’écrire ces lignes, il compte actuellement plus de 1 000 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.
Les clients de Kinsta ont un accès direct à la fonction de minification du code qui est intégrée directement dans le tableau de bord MyKinsta. Cette fonction permet aux clients d’activer la minification automatique de CSS et JavaScript en cliquant sur un bouton.
Après avoir activé les paramètres ci-dessus, vous verrez maintenant vos fichiers CSS dans un fichier « autoptimize_xxxxxxx.css ».
