Sommaire
Avez-vous essayé d’améliorer les performances de votre site web en utilisant différentes techniques ? Avez-vous réfléchi à ce qui se passerait si vous réduisiez le JavaScript et le CSS ?
L’exécution de cette fonction rendra votre site web beaucoup plus rapide, et ces résultats seront pris en compte dans les tests de vitesse de votre site web. Vous pouvez utiliser différents outils pour réduire les scripts JavaScript et CSS. Ces outils, ainsi que d’autres techniques, amélioreront la vitesse de votre site web.
Dans ce tutoriel, je vais vous montrer comment utiliser un excellent plugin appelé Fast Velocity Minify pour accélérer votre site web et aider à améliorer les performances globales du site.
Pourquoi réduire Javascript et CSS ?
La raison principale de la réduction des JavaScript et des CSS est la vitesse et les performances globales du site. Si vous comparez les tests de vitesse des sites web avant et après, vous constaterez que la taille de vos pages web et la vitesse globale du site ont considérablement changé. Souvent, cette question et d’autres aspects du site web sont négligés.
Peut-être plus important encore est le fait que Google a annoncé que des vitesses de chargement plus rapides affectent directement le classement des sites web et le référencement global.
Des temps de chargement plus rapides ne contribueront pas seulement au référencement global, mais ils offriront aux utilisateurs de votre site une meilleure expérience.
Minifier la vitesse rapide
Afin de minifier JavaScript et CSS dans WordPress, nous allons utiliser un plugin lisse appelé Fast Velocity Minify.
En gros, ce plugin est un plugin d’optimisation de la vitesse pour les développeurs et les utilisateurs avancés. Vous pouvez l’utiliser pour minifier JavaScript dans WordPress, ainsi qu’utiliser les options et les fonctionnalités du plugin pour bien d’autres choses.
Lorsque vous minimisez les CSS dans WordPress à l’aide du plugin Fast Velocity Minify, vous vous paramétrez pour un meilleur classement SEO et une vitesse et des performances globales du site.
Comment fonctionne le plugin
Ce plugin réduit les demandes HTTP en fusionnant les fichiers CSS JavaScript en groupes de fichiers tout en essayant d’en utiliser le moins possible. Il réduit les fichiers CSS et JS de WordPress avec PHP Minify. Il n’y a pas d’exigences supplémentaires.
Fast Velocity Minify brille encore plus parce qu’il inclut des paramètres et des options pour les développeurs et les utilisateurs avancés. Cependant, les paramètres par défaut du plugin fonctionneront très bien pour la plupart des sites WordPress, vous pouvez donc facilement installer le plugin et l’utiliser même si vous êtes débutant.
Caractéristiques principales des plugins
Le plugin FVM offre une tonne de fonctionnalités. Parmi les principales qui se distinguent, citons
- Fusionner les fichiers JS et CSS en groupes pour réduire le nombre de requêtes HTTP.
- Fusion, inlining et optimisation des polices de Google.
- Gère les scripts chargés à la fois dans l’en-tête et dans le pied de page, séparément.
- Conserve l’ordre des scripts même si vous excluez certains fichiers de la minification.
- Prend en charge les scripts localisés (https://codex.wordpress.org/Function_Reference/wp_localize_script).
- Minifie les CSS et JS avec PHP Minify uniquement, aucun logiciel ou bibliothèque tiers n’est nécessaire.
- Possibilité de différer les fichiers JavaScript et CSS, soit globalement, soit uniquement pour PageSpeed Insights.
- Crée des fichiers de cache statiques dans le répertoire des téléchargements.
- Préservez vos fichiers originaux, en les dupliquant et en les copiant dans le répertoire de téléchargement.
- Consultez l’état et les journaux détaillés sur la page d’administration de WordPress.
- Option permettant de réduire le HTML, de supprimer les informations supplémentaires de l’en-tête et d’autres optimisations.
- Possibilité de désactiver la minification pour JS, CSS ou HTML (purgez le cache pour le voir).
Maintenant que vous en savez un peu plus sur la minification du JavaScript et du CSS, voyons comment utiliser facilement le plugin Fast Velocity Minify.
Installer et activer
Tout d’abord, installez et activez le plugin Fast Velocity Minify sur votre site web. Vous pouvez le faire en le recherchant dans le dépôt de plugins de votre tableau de bord d’administration WordPress.
Une fois que le plugin a été installé et activé, cliquez sur Paramètres Fast Velocity Minify. Cela vous mènera aux options d’installation et de configuration du plugin.
Lorsque vous arrivez à la bonne zone, vous verrez 6 onglets. Ils comprennent :
- Statut
- Paramètres
- Pro
- Développeurs
- Informations sur le serveur
- Aide
Je vais vous montrer chaque zone d’onglet, mais nous n’allons pas configurer le plugin pour les utilisateurs avancés et les développeurs. Je vais plutôt vous montrer comment configurer les paramètres de base qui permettront de minifier correctement le JavaScript et le CSS sur votre site WordPress.
Regardons les onglets.
Statut
L’onglet “Statut” énumérera simplement tous les fichiers traités une fois que vous aurez commencé à utiliser le plugin. Il vous permet également de purger les fichiers mis en cache.
Paramètres
Ce sont vos paramètres de configuration de base. Si vous les remplissez, le plugin fonctionnera et vous pourrez commencer à réduire les fichiers Javascript et CSS dans WordPress.
Pro
Cet onglet vous permettra de configurer les paramètres pro. Ne l’utilisez que si vous savez et comprenez ce que vous changez.
Développeurs
L’onglet “Développeurs” vous présentera des options encore plus avancées. Encore une fois, n’utilisez pas cet onglet, sauf si vous êtes un développeur ou si vous savez dans quoi vous vous engagez.
Informations sur le serveur
Cet onglet vous fournit toutes les informations sur le serveur afin que vous puissiez voir que tout fonctionne correctement.
Aide
L’onglet “Aide” vous permettra de référencer d’autres liens utiles pour le plugin.
Paramètres de configuration de base
Cliquez à nouveau sur l’onglet “Paramètres”. Vous pouvez remplir cette partie comme vous le souhaitez. Cela permettra au plugin de fonctionner correctement et vous permettra de gagner en rapidité et en fonctionnalité.
Cela étant dit, voici les paramètres de base recommandés que vous pouvez choisir pour faire fonctionner le plugin. Cliquez sur les options suivantes sous les paramètres de base.
Utilisez les captures d’écran pour la référence.
Fonctionnalité Options URL
Pour la fonctionnalité, il peut être idéal de conserver les paramètres du plugin après une désinstallation. Vous pourriez être amené à revenir au plugin à une date ultérieure. En outre, l’activation de la fonction “Fix Page Editors” fonctionne bien si vous disposez d’un environnement d’équipe sur le site web. De cette façon, vous n’aurez pas à vous soucier des problèmes de fusion entre JavaScript et CSS causés par les éditeurs visuels.
Dans la plupart des cas, la détection automatique des URL devrait suffire. Si vous avez des problèmes avec la réduction des JS et CSS, vous devrez peut-être forcer certaines URL à fonctionner correctement. Cependant, vous ne saurez probablement pas lesquelles tant que vous n’aurez pas rencontré de problèmes.
HTML, police, options de police Google
L’activation de l’option “Cleanup Header” permet de rationaliser la minification des JS et CSS. Mais comme ci-dessus, vous pouvez modifier cette option si vous rencontrez des problèmes sur le site.
Dans les options de police, vous pouvez gérer la manière dont FVM gère des éléments comme les emojis et les polices Google. L’une des meilleures options est de “Désactiver la fusion des polices Google”.
En parlant des polices de Google, le fait de garder la sélection pour “inline” aide à réduire le code. Cependant, certains sites peuvent obtenir de meilleures performances grâce à la fonction “async”, en fonction de la mise en page.
Font Awesome Options CSS
Une bonne pratique en matière de performances consiste à intégrer des éléments CSS Font Awesome dans votre site web. Cela permet de rationaliser l’effet du CSS. Mais comme l’option ci-dessus, vous pouvez obtenir de meilleures performances grâce à l’asynchronisation.
Dans les options CSS, la préservation de l’ordre, la désactivation de l’option “Imprimer” et l’insertion du CSS dans le pied de page contribuent grandement à la réduction de la taille. Mais si un élément de votre site se brise après la sélection, vous pouvez envisager de désactiver le traitement CSS et la minification des fichiers.
Options de vitesse des pages
En ce qui concerne le test de PageSpeed, vous pouvez activer “le report de tous les fichiers JS pour l’ISP uniquement”. Vous pouvez également exclure les fichiers JavaScript dans une liste d’ignorance pour PageSpeed Insights.
Cela vous donne une représentation plus précise des performances de votre site sans erreurs de lancement de JavaScript par des tiers.
C’est tout ! Vous pouvez laisser tout le reste sans contrôle ou le remplir comme bon vous semble. Faites défiler jusqu’en bas et cliquez sur le bouton “Enregistrer les modifications” et vous voilà parti.
Dernières réflexions
Lorsque vous minimisez correctement le JavaScript et le CSS sur votre site WordPress, vous créez une meilleure expérience utilisateur et des vitesses de chargement de pages plus rapides. En outre, vous mettez votre site sur la bonne voie pour un meilleur référencement et un meilleur classement dans Google.
Vous disposez maintenant d’un moyen fantastique de le faire, qui ne nécessite aucune compétence en matière de codage. Suivez simplement les étapes ci-dessus et vous êtes prêt à partir.
Avez-vous constaté que la réduction du JavaScript et du CSS a contribué à la vitesse et au référencement de votre site ? Quels autres plugins ou techniques utilisez-vous pour y parvenir ?