Comment ajouter une animation de préchargement à WordPress (étape par étape)
Voulez-vous ajouter une animation de préchargement à votre site WordPress ?
Un préchargeur est une animation montrant la progression du chargement d’une page en arrière-plan. Cela permet aux visiteurs de savoir que la page est en cours de chargement, ce qui peut améliorer l'expérience utilisateur et réduire votre taux de rebond.
Dans cet article, nous allons vous montrer comment ajouter un préchargeur à WordPress, étape par étape.
Qu'est-ce qu'une animation de préchargement et pourquoi l'ajouter à WordPress ?
Si une page prend beaucoup de temps à charger, les visiteurs peuvent décider que votre site Web est en panne et abandonner votre contenu. Une façon d'arrêter cela consiste à ajouter un préchargeur, qui est une animation ou un statut qui montre la progression du chargement de la page.
Vous pouvez voir un exemple en direct d’animation de préchargement lors de l’ajout d’une nouvelle publication dans WordPress. Cliquez simplement sur le bouton « Aperçu » dans l'éditeur de publication et WordPress affichera une animation de préchargement pendant qu'il chargera l'aperçu.
Si la majeure partie de votre contenu est constituée de texte avec très peu d’images et de vidéos, vous n’aurez généralement pas besoin d’ajouter un préchargeur à votre site Web. Au lieu de cela, il est préférable de se concentrer sur l’amélioration de la vitesse et des performances de votre site Web ou peut-être de passer à un meilleur fournisseur d’hébergement WordPress.
D'un autre côté, si votre site contient de nombreuses images ou vidéos intégrées, il peut être judicieux d'ajouter une animation de préchargement.
Cela dit, voyons comment vous pouvez facilement ajouter un préchargeur à votre site Web WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :
Méthode 1 : Ajout d'un préchargeur dans WordPress avec WP Smart Preloader (méthode facile)
Le moyen le plus simple d’ajouter un préchargeur dans WordPress consiste à utiliser WP Smart Preloader. Ce plugin dispose de six animations de préchargement intégrées que vous pouvez utiliser, ou vous pouvez créer vos propres animations en utilisant du HTML et du CSS personnalisés.
La première chose à faire est d'installer et d'activer le plugin WP Smart Preloader. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.
Lors de l'activation, accédez à Paramètres » WP Smart Preloader, puis ouvrez la liste déroulante « Smart Preloader ». Cela montre toutes les différentes animations que vous pouvez utiliser.
Le plugin affichera un aperçu de l'animation que vous avez choisie, afin que vous puissiez sélectionner différents préchargeurs pour voir lequel vous préférez.
Par défaut, l'animation apparaîtra sur votre site WordPress, mais si vous préférez, vous pouvez l'utiliser uniquement sur votre page d'accueil. Cochez simplement la case « Afficher uniquement sur la page d’accueil ».
Si vous souhaitez créer votre propre animation CSS, tapez simplement votre code dans la case « CSS personnalisé ».
Une autre option consiste à créer une animation HTML5 personnalisée en ajoutant du code dans la case « Animation personnalisée ».
Après avoir choisi une animation, faites défiler jusqu'à la section « Durée pour afficher le chargeur ». Ici, vous pouvez modifier la durée de lecture du préchargeur.
L'option par défaut est 1 500 millisecondes ou 1,5 seconde. Cela devrait bien fonctionner pour la plupart des sites, mais vous pouvez saisir un numéro différent si vous le souhaitez.
Par défaut, l'animation mettra 2 500 millisecondes ou 2,5 secondes pour disparaître complètement. Pour changer cela, tapez simplement un nombre plus grand ou plus petit dans le champ « Loader to Fade Out ».
Lorsque vous êtes satisfait de la configuration du préchargeur, cliquez simplement sur le bouton « Enregistrer les modifications » pour stocker vos paramètres.
Vous pouvez maintenant visiter votre blog WordPress pour voir le préchargeur en action.
Méthode 2 : Ajout d'un préchargeur dans WordPress avec LoftLoader (plus personnalisable)
Une autre façon d’ajouter une animation de préchargement à votre site Web WordPress consiste à utiliser LoftLoader. Ce plugin est livré avec des animations intégrées et vous permet de personnaliser le préchargeur de différentes manières.
La première chose à faire est d'installer et d'activer le plugin LoftLoader. Pour plus de détails, consultez notre guide du débutant sur la façon d’installer un plugin WordPress.
Lors de l'activation, accédez à Paramètres » LoftLoader Lite pour configurer les paramètres du plugin. LoftLoader Lite s'intègre au personnalisateur de thème WordPress, cet écran devrait donc vous sembler familier.
Pour commencer, cliquez sur « Afficher sur ». Sur cet écran, vous pouvez choisir si vous souhaitez utiliser le même préchargeur sur l'ensemble de votre blog WordPress ou uniquement sur la page d'accueil.
Par exemple, si votre page d'accueil contient de nombreuses images et vidéos par rapport au reste de votre site, il peut être judicieux d'afficher le préchargeur sur votre page d'accueil personnalisée uniquement.
Après avoir pris votre décision, cliquez sur la flèche « Retour » pour revenir à la page principale des paramètres.
Ensuite, cliquez sur l'option « Arrière-plan ».
Ici, vous pouvez changer la couleur d'arrière-plan en cliquant sur la case « Choisir la couleur ». Vous pouvez également modifier l'opacité de l'arrière-plan et choisir une nouvelle animation de fin telle que « Fondu » ou « Glisser vers le haut et vers le bas ».
Au fur et à mesure que vous apportez des modifications, l'aperçu sera mis à jour, vous pourrez donc essayer différents paramètres pour voir ce qui vous convient le mieux. Lorsque vous êtes satisfait des paramètres d'arrière-plan, cliquez sur la flèche « Retour ».
Ensuite, vous pouvez modifier l'animation en cliquant sur l'option « Loader ».
Vous pouvez choisir une nouvelle animation en cliquant sur les différentes vignettes dans la case « Loader Animation ». Pour changer la couleur du préchargeur, sélectionnez simplement une nouvelle couleur dans la case « Choisir la couleur ».
Une fois que vous avez fait cela, cliquez sur la flèche « Retour ».
Ensuite, cliquez sur l’option de menu « Plus ». Ici, vous pouvez modifier la durée de lecture de l'animation en sélectionnant « Temps de chargement maximum ».
Vous pouvez ensuite saisir la durée de vie du préchargeur.
Ensuite, vous souhaiterez peut-être donner aux utilisateurs un moyen de fermer l'animation, surtout si vous utilisez un temps de chargement maximum plus long. Pour ajouter un bouton de sortie, cliquez sur « Fermer le bouton », puis utilisez les paramètres pour configurer votre bouton.
Lorsque vous êtes satisfait de la configuration du bouton, cliquez simplement sur le bouton « Publier » pour mettre en ligne votre préchargeur.
Vous pouvez désormais visiter votre site Web pour voir le nouveau préchargeur en action.
Nous espérons que cet article vous a aidé à apprendre comment ajouter une animation de préchargement à WordPress. Vous voudrez peut-être également consulter notre guide sur la façon de créer une page de destination avec WordPress ou consulter nos choix d'experts pour les meilleurs constructeurs de pages WordPress par glisser-déposer.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.