Comment ajouter une animation de chargement de page (préchargeur) dans WordPress

La vitesse des pages joue un rôle essentiel dans les performances de votre site Web. S'il faut plus d'une seconde ou deux pour qu'une page se charge complètement, cela peut suffisamment frustrer les utilisateurs pour les faire quitter votre site. Cependant, cela peut aider si le visiteur a quelque chose d'intéressant à regarder pendant que la page finit de se charger.

Une animation de chargement de page, ou "animation de préchargement", aide à informer les visiteurs qu'une page est en cours de chargement (elle n'est pas bloquée) et augmente la probabilité qu'ils restent sur le site. De cette façon, il peut améliorer l'expérience utilisateur (UX) et réduire vos taux de rebond.

Dans cet article, nous expliquerons les avantages des animations de préchargement et quand en utiliser une. Ensuite, nous vous expliquerons vos options pour ajouter une animation de chargement de page WordPress. Commençons!

Qu'est-ce qu'une animation de préchargement ?

Une animation de préchargement signale aux utilisateurs qu'une page est en cours de chargement. Il s'agit d'une animation simple qui peut être utilisée comme indicateur de progression pour les pages qui ne chargent que certains éléments de contenu à la fois.

Les préchargeurs WordPress offrent aux visiteurs quelque chose de plus agréable et intéressant à regarder en quelques secondes pendant qu'ils attendent que la page entière finisse de se charger. Dans certains cas, ils peuvent même proposer une estimation du temps restant.

Quand dois-je utiliser un préchargeur ?

Un préchargeur est un choix judicieux lorsque vous avez un site WordPress contenant beaucoup de vidéos ou d'images qui prend un peu plus de temps à charger que la normale. De cette façon, les visiteurs seront rassurés sur le fait que votre site fonctionne comme prévu et qu'il n'est pas endommagé.

Cependant, si votre site est principalement basé sur du texte, une animation de préchargement peut ne pas être nécessaire. Au lieu de cela, il serait plus logique de se concentrer sur l'amélioration de la vitesse de votre page.

2 options pour ajouter une animation de chargement de page à WordPress

Il existe deux méthodes principales que vous pouvez utiliser pour ajouter une animation de préchargement WordPress à votre site. Vous pouvez utiliser un plugin, qui est l'option la plus simple, ou effectuer la tâche manuellement. Voyons comment démarrer avec les deux méthodes.

Option 1 : Ajouter une animation de préchargement à l'aide d'un plug-in

L'ajout d'une animation de préchargement via un plugin est l'option la plus rapide et la plus simple pour la plupart des utilisateurs. Il existe une poignée de plugins que vous pouvez utiliser, mais nous recommandons WP Smart Preloader :

Il s'agit d'un plugin gratuit et hautement personnalisable. Il utilise CSS et un balisage HTML minimal pour aider à réduire le risque que les utilisateurs quittent votre site Web lors du chargement du contenu. Dans les étapes suivantes, nous allons vous montrer comment cela fonctionne.

Étape 1 : Télécharger WP Smart Preloader

Vous pouvez télécharger le plugin WP Smart Preloader via le répertoire de plugins WordPress. Ensuite, vous pouvez télécharger le fichier .zip sur votre site WordPress en accédant à Plugins > Add New > Upload Plugin dans le tableau de bord d'administration :

Une autre option consiste à rechercher le plugin via la barre de recherche sur l'écran Plugin > Ajouter nouveau :

Dans tous les cas, une fois le plugin installé, cliquez sur le bouton Activer . Vous pouvez ensuite localiser ses options sous Paramètres > WP Smart Preloader .

Étape 2 : Sélectionnez votre style

Sur la page Paramètres de WP Smart Preloader, la première chose à faire est de sélectionner un style pour le préchargeur. Sous la section Select Preloader , il y aura un menu déroulant vous permettant de choisir parmi six options de style, ainsi qu'une option pour une animation personnalisée :

Une fois que vous avez sélectionné un style, vous pouvez le prévisualiser dans la fenêtre ci-dessous. Si vous souhaitez ajouter votre propre animation personnalisée, vous pouvez inclure votre code HTML dans la section Animation personnalisée :

À la fin de cet écran, vous pouvez définir la durée du chargeur lui-même et l'effet de "fondu sortant" :

Si vous laissez ces champs vides, les valeurs par défaut seront respectivement fixées à 1 500 millisecondes (1,5 seconde) et 2 500 millisecondes (2,5 secondes). Lorsque vous avez terminé, cliquez sur le bouton Enregistrer les modifications .

Étape 3 : prévisualisez votre animation de préchargement

Une fois que vous avez terminé de configurer vos paramètres, visitez votre site WordPress dans un nouvel onglet de navigateur pour prévisualiser l'animation de préchargement. Vous pouvez revenir en arrière pour apporter des modifications stylistiques si nécessaire. Une fois que vous êtes satisfait du préchargeur, il sera configuré et prêt à fonctionner.

Option 2 : ajouter manuellement une animation de préchargement

Si vous n'êtes pas intéressé par l'utilisation d'un plugin, vous pouvez toujours ajouter cette fonctionnalité à votre site manuellement. Le principal avantage de la création d'un préchargeur personnalisé est que vous avez plus de flexibilité dans sa conception.

Bien sûr, c'est aussi un processus plus difficile. Ensuite, nous vous expliquerons comment créer, télécharger et formater une animation de préchargement personnalisée pour votre site WordPress.

Étape 1 : Faites un remue-méninges pour votre animation

La première étape consiste à décider du type d'animation que vous allez utiliser. Vous pouvez rechercher d'autres outils d'animation de préchargement pour avoir une idée du style que vous aimez. Il existe des animations gratuites que vous pouvez utiliser et explorer sur Codepen, ce qui peut être un excellent moyen d'avoir des idées.

Étape 2 : Développez ou téléchargez votre animation

Pour développer votre animation, vous pouvez utiliser un outil tel que Photoshop pour créer un GIF ou une animation de préchargement en rotation. Vous pouvez également consulter notre ressource sur la création d'animations WordPress à l'aide de CSS.

Nous recommandons cette dernière approche, car il est préférable d'ajouter un préchargeur GIF à votre site WordPress avec un plugin. En plus de Codepen (mentionné ci-dessus), vous pouvez également télécharger une animation à partir de sites tels que Spinkit et LoadLab.

Pour ce didacticiel, nous utiliserons une animation de préchargement de Spinkit. Quelle que soit la provenance de votre animation, vous aurez besoin de son code source CSS pour l'ajouter manuellement à votre site WordPress :

La plupart des animations de préchargement gratuites incluront un lien source, où vous pourrez trouver à la fois son HTML et son CSS :

Gardez à l'esprit que vous pouvez également utiliser le code source CSS d'une animation de préchargement, puis le personnaliser ultérieurement à votre guise.

Étape 3 : créer un thème enfant

Une fois que vous avez votre animation, vous pouvez l'ajouter à votre site WordPress. Le moyen le plus sûr de le faire est de créer un thème enfant. Si vous ne savez pas comment procéder, vous pouvez consulter notre tutoriel sur la création d'un thème enfant WordPress.

Étape 4 : Ajoutez du code HTML au fichier header.php de votre thème

L'étape suivante consiste à localiser le fichier header.php pour votre thème WordPress. Vous pouvez le faire via l'écran WordPress Theme Editor :

Vous pouvez également modifier les fichiers à l'aide d'un client FTP tel que FileZilla. Le fichier sera situé dans le dossier wp-content > themes du répertoire racine de votre site.

Une fois que vous avez localisé et ouvert le fichier, insérez le code HTML suivant sous la balise body :

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

Ajustez ou ajoutez le code HTML nécessaire à votre animation de préchargement WordPress particulière et enregistrez le fichier.

Étape 5 : Ajoutez le code CSS à votre feuille de style

Il est maintenant temps d'ajouter du CSS pour styliser votre animation. Localisez la feuille de style CSS ( style.css ) de votre thème WordPress, puis copiez et collez le code source CSS de votre animation. Dans notre cas, nous ajouterons les éléments suivants :

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Avant d'enregistrer vos modifications, supprimez cette partie : "margin : 100px auto ;". À sa place, copiez et collez ce qui suit :

 position: absolute; top: 48%; left: 48%;

Ensuite, vous pouvez enregistrer le fichier.

Étape 6 : Ajouter du code jQuey pour faire fonctionner l'animation

Afin de faire fonctionner votre animation de préchargement de spinner, vous devrez ajouter un peu de jQuery. Pour ce faire, vous pouvez revenir au fichier header.php et insérer ce qui suit avant la balise body de fermeture :

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

Enregistrez ensuite votre fichier et prévisualisez votre site pour vous assurer que l'animation du préchargeur WordPress fonctionne comme prévu.

Trouver plus de conseils et de guides de WP Engine

L'ajout d'animations de préchargement WordPress à votre site peut aider à engager les visiteurs et à réduire les taux de rebond. De plus, vous avez plusieurs options pour faire le travail rapidement.

Chez WP Engine, notre mission est de fournir des conseils, des astuces et des ressources aux développeurs, pour vous aider à vous assurer que votre site Web est toujours à son meilleur. En savoir plus sur nos plans aujourd'hui!