Minification CSS et JS | Hummingbird – WordPress (Plugin)

Description Hummingbird 

La vitesse de chargement est un facteur décisif pour améliorer l’expérience utilisateur et le classement d’un site sur les pages des moteurs de recherche (SERP), notamment sur Google. 

Hummingbird est un plugin qui dispose d’intéressantes fonctionnalités que vous pouvez exploiter pour améliorer la vitesse de chargement de votre site WordPress pour de meilleures performances et un meilleur score Google Page Speed.

Qu’est-ce que le plugin Hummingbird ?

Hummingbird est un plugin développé par WPMU DEV pour aider les utilisateurs WordPress à améliorer la vitesse de chargement de leur site web. 

L’outil est un plugin de mise en cache, mais dispose également d’autres fonctionnalités d’optimisation que vous pouvez utiliser pour améliorer les performances globales de votre site. 

Au nombre de ces fonctionnalités d’optimisation, nous pouvons citer : 

• La mise en cache 
• La possibilité de différer les feuilles de styles CSS et les scripts JS
• La minification des codes CSS et JavaScript 
• L’intégration du Lazy Loading 
• La compression de fichiers
• Etc. 

Des millions de fichiers sont compressés chaque jour avec plus de 100 000 téléchargements de la version gratuite du plugin. 

Hummingbird : Comment installer le plugin ? 

L’installation de Hummingbird dépend de la version du plugin que vous souhaitez utiliser :

1. Installer la version gratuite de Hummingbird depuis WordPress 

L’installation de Hummingbird reste assez simple comme tout autre plugin WordPress. 

• Pour commencer, rendez-vous sur votre tableau de bord WordPress 
• Dans la barre de menu à gauche, cliquez sur « Plugins » puis sur « Ajouter nouveau » 
• Recherchez ensuite “Hummingbird” puis cliquez sur le bouton « Installer maintenant ». 
• À la fin du téléchargement, cliquez sur « Activer ». 

Hummingbird vient ainsi d’être installé, vous devez pouvoir accéder à toutes les fonctionnalités du plugin directement sur votre tableau de bord WordPress.  

2. Installer Hummingbird Pro 

Pour ceux qui souhaitent installer la version Pro du plugin, vous disposez de la plateforme Hub de WPMU DEV dotée d’une interface de gestion tout-en-un. 

Cette option facilite la gestion des mises à jour et l’installation de plugins et de thèmes via un seul espace de travail. 

Hummingbird : Les principales fonctionnalités du plugin 

Voici une liste des principales tâches que vous pouvez faire avec le plugin Hummingbird : 

Configurer la mise en cache 

Pour configurer la mise en cache avec Hummingbird : 

• Rendez-vous sur votre tableau de bord WordPress
• Cliquez sur WP-Admin » Hummingbird » Caching 
• Puis cliquez sur « Activer » pour activer le module de mise en cache Hummingbird 

Après l’activation du module, vous disposez d’une liste de paramètres pour configurer la mise en cache de votre site tels que : 

Le préchargement du cache : Par défaut, les fichiers d’une page sont stockés en cache uniquement qu’après qu’un premier internaute tente d’accéder à cette page. La fonctionnalité préchargement de cache permet d’émuler une première visite sur vos pages afin de déclencher le processus de mise en cache. Ce qui améliore la vitesse de chargement de vos pages aussitôt dès le premier visiteur réel. 

La mise en cache mobile : Cette fonctionnalité vous permet de décider d’activer ou non la mise en cache pour vos visiteurs qui utilisent des appareils mobiles. 

Les exclusions : Hummingbird vous offre aussi la possibilité d’exclure spécifiquement certains cookies, pages ou URL pour éviter les conflits avec de tiers programmes. Vous disposez également des commutateurs à bascule pour décider facilement des contenus que vous souhaitez ou ne souhaitez pas qu’ils soient pris en compte dans la mise en cache. 

Il existe plusieurs d’autres fonctionnalités que vous pouvez découvrir sur la documentation officielle de Hummingbird.

Généralement, dans la plupart des cas, il ne sera pas forcément nécessaire d’utiliser toutes ces fonctionnalités. Vous pouvez activer la mise en cache et laisser le reste des paramètres sur leur valeur par défaut. 

Mais si vous êtes particulièrement intéressé par une fonctionnalité, vous pouvez l’activer puis aller en pied de page et cliquer sur « Enregistrer les paramètres ». 

Combiner et minifier les fichiers 

Combiner et minifier les fichiers compte parmi les meilleures pratiques pour améliorer la vitesse de chargement d’un site web. Il s’agit également d’une fonctionnalité disponible sur le plugin Hummingbird. 

Pour l’activer : 

• Accédez à la section « wp-admin » puis cliquez sur « Hummingbird » et « Asset Optimization ». 
• Ensuite cliquez sur « Activer » pour activer le module de minification et de combinaison des fichiers. 

Le plugin exécutera alors une analyse complète de votre site afin d’identifier tous les fichiers qui sont potentiellement à optimiser. 

Une fois la phase d’analyse terminée, Hummingbird vous affiche à l’écran le nombre de fichiers identifiés. 

Vous pourrez alors décider de continuer avec la phase d’optimisation des fichiers. Une fois cette phase terminée, l’outil vous affiche le nombre de fichiers optimisés ainsi que la taille totale de fichier qui a pu être réduite. 

Les abonnés Hummingbird Pro ont la possibilité d’activer en plus le WPMU DEV CDN pour plus de performances avec un tableau de fichier composé de 5 icônes à savoir : 

• Minify : Pour réduire la taille du fichier sélectionné. S’il s’agit d’un fichier déjà minifié l’icône Minify » sera grisée. 
• Combiner : Cette icône sert à combiner ou concaténer toutes vos feuilles de styles en un seul fichier CSS et tous vos scripts en un seul fichier JavaScript. Ce qui allège le navigateur en réduisant le nombre de requêtes qui lui sont envoyées. Ainsi le navigateur est moins sollicité et les pages chargent plus vite. 
• Déplacer les scripts dans le footer : Il s’agit d’une technique qui empêche le blocage des rendus JavaScript et CSS. 
• CSS en ligne : Avec cette icône, vous avez la possibilité de déplacer le fichier CSS sélectionné et le rendre accessible directement en ligne. 
• Ne pas charger le fichier : Comme l’indique déjà le nom, cette fonctionnalité vous permet de bloquer le chargement du fichier sélectionné. Elle peut être utile au cas où vous n’avez pas forcément besoin d’un script donné sur votre site. 

Il est vrai qu’avec Hummingbird, vous avez la possibilité d’activer la concaténation en bloc des scripts. Toutefois, il est recommandé de procéder comme suit pour plus d’efficacité : 

Combiner un par un les fichiers JavaScript : Pour la concaténation de vos fichiers script, il serait plus judicieux de parcourir la liste des scriptis (identifiés par Hummingbird) et de procéder à une concaténation manuelle et d’un seul script à la fois puis d’enregistrer vos modifications. Testez ensuite votre code en front-end pour vous assurer que tout fonctionne correctement. 

Si aucun problème n’a été détecté, passez la concaténation du prochain script jusqu’à ce que tous les scripts que vous ciblez soient combinés. Cela diminuera le nombre total de requêtes envoyées au navigateur et vos pages se chargeront plus rapidement. 

Minifier un par un les fichiers JavaScript : La minification est aussi une pratique qui contribue grandement dans l’amélioration de la vitesse de chargement de votre site. Mais pour plus d’efficacité, il est recommandé de minifier distinctement chaque fichier script. Pour cela, le principe reste le même avec la concaténation. 

Vous parcourez la liste des scripts à minifier identifiés automatiquement par Hummingbird, minifiez un seul script à la fois puis enregistrez vos modifications. Testez ensuite votre front-end pour vous assurer que tout fonctionne parfaitement. 

Une fois que vous avez configuré tous les éléments précédemment présentés, vous devez remarquer un chargement plus rapide de votre site web. 

Hummingbird : Tarification 

Le plugin existe en deux versions : 

• Hummingbird version gratuite 
• Hummingbird Pro version payante à partir de 7,5 $ par mois avec une période d’essai gratuite de 7 jours pour tester l’outil avant de souscrire