Comment ajouter une animation de préchargement à WordPress (étape par étape)

Avez-vous déjà remarqué cette icône tournante ou cette animation qui apparaît pendant le chargement d'un site web ? C'est une animation de préchargement, et c'est un outil pratique que vous pouvez utiliser sur vos projets WordPress.

Les préchargeurs ont un véritable objectif. Sur les sites riches en contenu, ils maintiennent l'intérêt des visiteurs pendant ces secondes cruciales de chargement, ce qui peut réduire les taux de rebond.

Et pour les sites d'entreprise, un préchargeur de marque peut même ajouter une touche professionnelle.

Si vous pensez que cela semble compliqué, ne vous inquiétez pas. Nous avons trouvé 2 méthodes pour ajouter une animation de préchargement WordPress, adaptées aux utilisateurs de tous niveaux.

Pourquoi ajouter une animation de préchargement dans WordPress ?

Un préchargeur ou un chargeur de page est une animation que vous voyez en attendant le chargement d'une page. Il indique aux utilisateurs que la page web est encore en cours de préparation et leur demande d'attendre patiemment. Une fois le chargement terminé, le préchargeur disparaît et le visiteur peut voir la page web normalement.

Voici un exemple de cet élément de conception WordPress :

Un scénario où vous pourriez vouloir ajouter une animation de chargement est si votre page web contient de nombreuses grandes images ou des intégrations vidéo. Dans ce cas, le temps de chargement de votre page sera plus long que la normale, et vous voudrez que les utilisateurs restent assez longtemps pour que la page apparaisse complètement.

Si votre page ne contient pas beaucoup d'éléments lourds, il est alors préférable de vous concentrer sur l'amélioration de la vitesse et des performances de votre site web. Vous pourriez également vouloir passer à un meilleur fournisseur d'hébergement WordPress.

Cela dit, voyons comment vous pouvez facilement ajouter une animation de chargement de page à votre site WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Comment ajouter une animation de chargement simple avec WP Smart Preloader
• How to Add a Customizable Loading Animation With Safelayout Cute Preloader
• Frequently Asked Questions About WordPress Preloaders

Comment ajouter une animation de chargement simple avec WP Smart Preloader

Une façon simple d'ajouter une animation de préchargement dans WordPress est d'utiliser WP Smart Preloader.

Ce plugin est un excellent choix si vous souhaitez une solution rapide et facile sans vous perdre dans trop de paramètres.

C'est parce qu'il dispose de 6 animations de préchargeur WordPress intégrées que vous pouvez utiliser, et que vous n'avez pas à configurer beaucoup de paramètres pour activer l'animation.

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 comment installer un plugin WordPress.

Après l'activation, allez dans Paramètres » WP Smart Preloader, puis ouvrez le menu déroulant « Smart Preloader ». Cela affiche toutes les différentes animations que vous pouvez utiliser.

Le plugin affichera un aperçu de l'animation choisie, vous permettant ainsi de sélectionner différents préchargeurs pour voir celui que vous préférez.

Par défaut, l'animation apparaîtra sur votre site web 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 zone « CSS personnalisé ».

Une autre option consiste à créer une animation HTML5 personnalisée en ajoutant du code dans la zone « Animation personnalisée ».

Après avoir choisi une animation, faites défiler jusqu'à la section « Durée d'affichage du chargeur ». Ici, vous pouvez modifier la durée de lecture du préchargeur. 

L'option par défaut est de 1500 millisecondes, soit 1,5 seconde. Cela devrait bien fonctionner pour la plupart des sites, mais vous pouvez saisir un nombre différent si vous le souhaitez.

Par défaut, l'animation prendra 2500 millisecondes, soit 2,5 secondes, pour disparaître complètement. Pour modifier cela, tapez simplement un nombre plus grand ou plus petit dans le champ « Chargeur à faire disparaître ».

Lorsque vous êtes satisfait de la configuration du préchargeur, cliquez simplement sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Vous pouvez maintenant visiter votre blog WordPress ou votre site web pour voir le préchargeur en action.

Comment ajouter une animation de chargement personnalisable avec Safelayout Cute Preloader

Le premier plugin permet d'ajouter facilement une animation de chargement dans WordPress. Cependant, si vous souhaitez plus de contrôle sur le design pour qu'il corresponde à votre marque, vous pouvez consulter Safelayout Cute Preloader.

Pour commencer, installez et activez le plugin dans votre zone d'administration WordPress. Pour plus de détails, consultez notre guide sur comment installer un plugin WordPress.

Une fois le plugin actif, accédez à Paramètres » Safelayout Preloader pour commencer sa configuration.

Étape 1 : Activer le préchargeur et choisir un préréglage

Tout d'abord, vous devez activer le préchargeur et décider où il apparaîtra sur votre site.

Vous pouvez commencer dans l'onglet « Préréglages » pour choisir un design préfabriqué. Si l'un d'eux vous plaît, cliquez simplement sur le bouton « Modifier les paramètres de ce préchargeur » sous le modèle.

Ensuite, passez à l'onglet « Paramètres d'affichage ».

Ici, vous devez cocher la case « Activer le préchargeur mignon Safelayout » pour vous assurer que le plugin fonctionne.

Ensuite, utilisez le menu déroulant « Afficher sur » pour choisir où afficher le préchargeur. Pour ce tutoriel, nous choisirons « Site Web complet ».

Sur cet écran, vous pouvez également définir la durée de l'animation.

• Temps de chargement minimum : Ceci définit la durée la plus courte pendant laquelle le préchargeur sera visible. C'est utile si vous voulez vous assurer que votre animation de marque est toujours vue au moins un instant, même si votre page se charge instantanément.
• Temps de chargement maximum : Ceci définit la durée la plus longue pendant laquelle le préchargeur sera visible. Cela agit comme un filet de sécurité, masquant automatiquement le préchargeur afin que les utilisateurs ne soient pas bloqués à le regarder si votre page rencontre une erreur de chargement.

Vous pouvez également choisir d'afficher un bouton « Fermer » après quelques secondes. Une fois que vous avez apporté vos modifications, cliquez simplement sur « Enregistrer les modifications ».

Étape 2 : Personnaliser l'animation principale

Maintenant, vous pouvez concevoir l'apparence de l'animation elle-même. Cela inclut l'arrière-plan, l'icône principale et une barre de progression facultative.

Tout d'abord, allez dans l'onglet « Arrière-plan ».

Ici, vous pouvez choisir un effet d'animation, changer la couleur de l'arrière-plan et ajuster son opacité.

Si vous ne souhaitez pas d'effet d'arrière-plan spécial, sélectionnez simplement « Pas d'arrière-plan ».

Ensuite, cliquez sur l'onglet « Barre de progression ».

Une barre de progression est un excellent moyen de montrer aux visiteurs que la page se charge.

Vous pouvez choisir une forme, puis personnaliser sa couleur, sa position et sa taille.

Si vous n'en voulez pas, choisissez simplement « Aucune barre de progression ».

Ensuite, rendez-vous dans l'onglet « Icône ».

C'est le graphique animé principal, comme un cercle qui tourne.

Vous pouvez choisir une icône, puis modifier sa taille, sa couleur et son style d'animation. Si vous estimez qu'une icône est trop présente avec vos autres réglages, vous pouvez sélectionner « Aucune icône ».

N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » lorsque vous avez terminé la personnalisation de chaque onglet.

Étape 3 : Ajoutez votre image de marque et votre texte

Enfin, vous pouvez ajouter votre logo et votre texte personnalisé pour que le préchargeur corresponde parfaitement à votre marque.

Allez dans l'onglet « Image de marque » et cochez la case « Afficher la marque » pour ajouter votre logo.

Ensuite, cliquez sur le bouton « Bibliothèque multimédia » pour télécharger votre image de logo.

Vous pouvez ensuite ajuster la position et les marges du logo pour qu'il s'intègre bien aux autres éléments.

Ensuite, examinons l'onglet « Compteur ».

Ce réglage affiche un pourcentage de 0 % à 100 % pour indiquer la progression du chargement. Vous pouvez l'activer et personnaliser sa position, sa couleur et sa taille de police.

Enfin, allez dans l'onglet « Texte ». Par défaut, le préchargeur affiche le texte « Chargement... », mais vous pouvez le modifier pour quelque chose de plus créatif.

Cochez simplement la case « Afficher le texte », écrivez votre propre message et personnalisez sa police, sa couleur et sa position.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer les modifications ».

Et voilà ! Votre animation de préchargeur devrait maintenant apparaître en fonction de vos configurations. Vous pouvez consulter votre site sur mobile, ordinateur ou tablette pour le voir en action.

Voici à quoi ressemble le nôtre :

Questions fréquemment posées sur les préchargeurs WordPress

Au fil des ans, de nombreux lecteurs nous ont interrogés sur l'utilisation des préchargeurs. Voici les réponses à certaines des questions les plus courantes.

Les préchargeurs affectent-ils la vitesse du site web ?

Un préchargeur en soi n'accélère pas votre site web. Son but est d'améliorer l'expérience utilisateur en masquant le processus de chargement avec une animation soignée.

Pour améliorer réellement la vitesse de votre site, vous devriez vous concentrer sur des éléments tels que la mise en cache avec WP Rocket, l'optimisation de vos images et l'utilisation d'un hébergeur haute performance.

Les préchargeurs sont-ils mauvais pour le SEO ?

Lorsqu'il est correctement implémenté, un préchargeur léger ne devrait pas nuire à votre SEO. Cependant, une animation mal codée ou lourde pourrait ralentir le chargement initial de la page.

Cela peut affecter négativement vos Core Web Vitals, qui sont importants pour les classements de recherche. La clé est de rester simple et rapide.

Puis-je utiliser un préchargeur uniquement sur des pages spécifiques ?

Oui, absolument. La plupart des plugins de préchargeur vous permettent de choisir où l'animation apparaît.

Vous pouvez l'activer sur l'ensemble du site, uniquement sur la page d'accueil, ou même sur des articles et des pages spécifiques où vous vous attendez à des temps de chargement plus longs.

Quelle est la différence entre un préchargeur et une page de démarrage ?

Un préchargeur s'affiche pendant le chargement de votre contenu et disparaît automatiquement.

Une page de démarrage est un écran d'introduction séparé qui demande à l'utilisateur de cliquer sur un lien ou un bouton pour accéder au site Web principal.

Nous déconseillons généralement l'utilisation de pages de démarrage car elles créent une étape supplémentaire pour les visiteurs et peuvent avoir un impact négatif sur votre taux de rebond et votre SEO.

Plus d'astuces WordPress pour engager les visiteurs de votre site web

L'ajout d'une animation de préchargement n'est qu'une des nombreuses façons d'améliorer votre site WordPress. Si vous recherchez des idées plus créatives pour captiver votre public, nous avons ce qu'il vous faut :

• Comment ajouter un effet parallax à n'importe quel thème WordPress – Créez de la profondeur et un intérêt visuel avec cette technique d'illusion de défilement.
• Comment ajouter des flocons de neige qui tombent dans votre blog WordPress – Ravissez vos visiteurs avec une touche de magie hivernale sur votre site.
• Comment ajouter facilement le mode sombre à votre site WordPress – Offrez une expérience de navigation plus confortable avec cette fonctionnalité populaire.
• Comment ajouter des effets d'Halloween à votre site WordPress – Pimentez votre site avec ces astuces amusantes et festives pour Halloween.
• Comment ajouter un arrière-plan animé dans WordPress – Faites une déclaration audacieuse avec des arrière-plans animés accrocheurs.
• Comment ajouter une vidéo YouTube comme arrière-plan plein écran dans WordPress – Créez une première impression puissante avec des arrière-plans vidéo dynamiques.
• Comment ajouter le défilement infini à votre site WordPress (Guide étape par étape) – Gardez les visiteurs engagés en chargeant de manière transparente plus de contenu pendant qu'ils font défiler.

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement une animation de préchargement à votre site WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de pages glisser-déposer dans WordPress et notre guide complet sur comment modifier un site Web WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.