Cours WordPress en ligne
Pour concaténer et réduire votre CSS et JavaScript, c'est un bon conseil pour accélérer votre site. Il existe de nombreuses façons de le faire, mais le meilleur que nous ayons trouvé dans WordPress est un plugin appelé Autoptimize.
Comme son nom l'indique, Autoptimize «optimise automatiquement» beaucoup de choses sur votre site pour la vitesse. Ici, nous allons voir comment débloquer deux des gains les plus rapides d'Autoptimize: concaténer et réduire vos fichiers JavaScript et CSS.
Que signifie «concaténer» et «réduire» pour JS et CSS
Ces termes techniques peuvent sembler abstraits, mais ils ne le sont pas vraiment. En bref:
- Enchaînement (ou agrégation) est le regroupement de nombreux fichiers différents en un seul. L'avantage de la vitesse du site est que le navigateur n'a qu'à demander une fichier à partir du serveur, plutôt que de faire potentiellement des dizaines de demandes distinctes.
- Minification consiste à «réécrire» votre code afin qu'il contienne moins d'espace blanc, des noms de fonction longs et d'autres lettres inutiles pour l'ordinateur qui exécutera réellement ce code. L'avantage de la vitesse du site est que vos fichiers sont beaucoup plus petits et donc plus rapides pour le serveur à transférer vers votre navigateur.
Autoptimize fera ces deux choses pour vous, une fois que vous l'avez configuré correctement. Regardez la vidéo pour découvrir comment:
Et voici un guide textuel des mêmes informations:
Comment utiliser Autoptimize pour concaténer et minimiser CSS et JavaScript dans WordPress
- Allez dans «Plugins> Add New» et recherchez «Autoptimize»
- Installer et activer «Autoptimize»
- Vous aurez maintenant le plugin, mais pour qu'il fasse quoi que ce soit, vous devez lui dire ce que vous voulez qu'il fasse. Pour cela, vous allez dans "Paramètres> Optimisation automatique"
- Sur cette page, vous allez cocher «Optimiser le code JavaScript?» Et «Agréger les fichiers JS?» Pour réduire et concaténer les fichiers JavaScript. Vous pouvez également cocher la case "Aussi agréger JS en ligne?" Pour concaténer également du JavaScript qui a été imprimé directement sur votre page plutôt que d'être appelé à partir d'un fichier distinct.
- Cochez «Optimiser le code CSS?» Et «Agréger les fichiers CSS?» Pour réduire et concaténer les feuilles de style CSS. Vous pouvez également cocher la case "Également regrouper les CSS en ligne?" Pour concaténer également les CSS imprimés directement sur votre page plutôt que d'être appelés à partir d'un fichier distinct.
- N'hésitez pas à jouer avec les autres options de performances d'Autoptimize, telles que "Optimiser le code HTML?"
- Cliquez autour de votre site avec l'inspecteur de votre navigateur ouvert sur l'onglet «Console» pour vous assurer que rien ne s'est cassé. (Vous verrez des erreurs rouges si quelque chose s'est produit.) La réduction ne cassera généralement rien, mais l'agrégation / concaténation le pourrait, car les fichiers peuvent commencer à s'exécuter en dehors de leur ordre prévu. Si quelque chose ne fonctionne pas, décochez l'option «Agréger» pour ce type de fichier jusqu'à ce que vous puissiez trouver la cause du problème.
- Vous êtes prêt!
Avec un peu de chance, avec ces mesures, vous obtiendrez un score légèrement meilleur sur un outil de rapport de vitesse de site comme PageSpeed Insights de Google. Quand je l'ai fait ici sur WPShout, notre score est passé de 63 et 81 à 72 et 84 (sur mobile et ordinateur de bureau, respectivement).
Si vous avez le bug de vitesse du site, lisez nos autres articles sur le sujet. Et assurez-vous que vous êtes sur un bon hébergement – cela ne suffira pas à vous garantir un site rapide, mais c'est probablement la décision la plus importante que vous puissiez prendre pour la vitesse du site.
Bonne concaténation et minification!
[ad_2]