Votre widget de chat est en ligne, et il fonctionne. Puis vous ouvrez la boutique sur un téléphone, faites défiler jusqu'à un produit, et le lanceur est assis sur la barre Ajouter au panier. Vous appuyez sur Acheter, et la fenêtre de chat s'ouvre.
Le conseil habituel est de réduire le widget, de le définir comme fermé par défaut, et de différer le script. Tout cela concerne le poids, et le poids mérite d'être vérifié, alors je l'ai testé. Même site, widget activé et désactivé, et les scores de vitesse sont restés les mêmes les deux fois.
Certains widgets sont vraiment lourds et méritent d'être optimisés. Mais un widget qui se trouve sur votre bouton Ajouter au panier vous coûte la vente directement, et celui-ci n'est pas un problème de poids.
C'est un problème de position, et la bande inférieure de l'écran d'un téléphone est l'endroit où votre barre de panier, votre bannière de cookies, et votre lanceur finissent tous par se concurrencer.
Ci-dessous, j'ai examiné les résultats des tests, comment mesurer la barre de panier de votre propre thème, et à quoi régler le widget pour qu'il la dégage.
Dans cet article :
- Votre widget de chat n'est pas trop lourd, il est mal placé
- Ce qui s'est passé lorsque nous avons mesuré un widget activé ou désactivé
- Comment découvrir la hauteur réelle de votre barre de panier fixe
- La boucle de devinettes de pixels, et les paramètres qui y mettent fin
- Questions fréquentes sur les widgets de chat sur mobile
- Optimisation mobile du widget de chat : ce qu'il faut retenir
Votre widget de chat n'est pas trop lourd, il est mal placé
Sur un téléphone, le bas de l'écran est un espace disputé. Votre barre Ajouter au panier s'y trouve. Il en va de même pour votre bannière de cookies. Et pour votre lanceur de chat, généralement dans le coin inférieur droit par défaut.
Lorsque le lanceur se superpose au bouton Acheter, l'acheteur tape sur le chat au lieu d'acheter. Cela vous coûte la vente d'une manière qu'une poignée de kilo-octets supplémentaires ne feront jamais.
J'ai exécuté un audit Lighthouse sur le même site avec le widget activé et désactivé. La version courte : le widget a ajouté environ 148 Kio d'actifs et n'a déplacé aucun Core Web Vital.
La solution n'est donc pas un projet de taille de fichier. C'est trois étapes, dans cet ordre :
- Choisissez le coin qui n'est pas disputé. Si votre barre de panier ou votre bannière envahit un côté, déplacez le lanceur de l'autre.
- Mesurez la hauteur de votre barre fixe. Vous avez besoin du vrai chiffre de votre propre thème, pas d'une estimation.
- Définissez un décalage de pixels par rapport au bas. Cela soulève le lanceur pour qu'il dégage la barre au lieu de la cacher.
Traitez-les dans cet ordre, et la collision disparaît avant même que vous n'ouvriez un rapport de performance.
Ce qui s'est passé lorsque nous avons mesuré un widget activé ou désactivé
J'ai configuré quatre pages identiques sur le même site WordPress. Deux utilisaient WPChat, deux n'avaient aucun widget de chat.
Ensuite, j'ai testé chacune d'elles dans PageSpeed Insights sur un Android de milieu de gamme simulé sur une connexion lente, deux fois par page, et j'ai fait la moyenne des résultats.
Voici ce qui est ressorti.
| Métrique | Sans widget | Avec widget |
|---|---|---|
| Performance | 96.5 | 96.5 |
| First Contentful Paint | 2,0s | 2,0s |
| Largest Contentful Paint | 2,30s | 2,35s |
| Total Blocking Time | 0ms | 0ms |
| Cumulative Layout Shift | 0 | 0 |
| Speed Index | 2,05s | 2,20s |
- Largest Contentful Paint, le moment où le plus grand élément de l'écran a fini de charger, a été déplacé de 0,05 seconde.
- Speed Index, soit la vitesse à laquelle la page se remplit visuellement, a été déplacé de 0,15 seconde.
Les deux se situent dans la variance normale d'exécution à exécution sur des configurations identiques, donc aucune des deux n'est une réelle différence.
Total Blocking Time et Cumulative Layout Shift sont restés à zéro. Cela signifie que le widget n'a rien bloqué sur le thread principal et n'a rien déplacé sur la page pendant son chargement.
Le coût se retrouve dans les diagnostics. La page est passée de 33 Kio de fichiers cachables à 181 Kio, soit environ 148 Kio d'actifs du widget, ou la taille d'une photo de taille moyenne.
Donc, la version simple est la suivante : le widget a coûté environ 148 Kio et n'a déplacé aucun Core Web Vital, ce qui signifie qu'aucun des trois scores de chargement et de stabilité que Google utilise réellement pour le classement.
Tant que vous utilisez un plugin bien codé comme WPChat pour votre widget de chat, la vitesse du site ne sera pas un problème pour vos visiteurs mobiles.
Comment découvrir la hauteur réelle de votre barre de panier fixe
Chaque thème construit sa barre « Ajouter au panier » de manière différente, il n'y a donc pas de chiffre que je puisse vous donner. Vous devez lire le vôtre. Cela prend environ deux minutes dans votre navigateur de bureau.
Voici comment l'obtenir.
- Ouvrez l'une de vos pages produit dans Chrome sur votre ordinateur. Choisissez un produit que vous vendez réellement, pas un exemple, car le contenu de la barre modifie son apparence.
- Ouvrez les Outils de développement. Faites un clic droit n'importe où sur la page et choisissez « Inspecter ». Un panneau s'ouvre sur le côté ou en bas de votre écran.
- Passez à la vue téléphone. Cliquez sur la petite icône téléphone et tablette en haut à gauche du panneau Outils de développement, intitulée « Basculer la barre d'outils de l'appareil ». La page se redessine à la largeur d'un téléphone.
- Réglez-la sur une largeur de téléphone, 390 est une valeur courante. En haut de la page, vous verrez une boîte de taille avec un menu déroulant à côté, indiquant généralement « Responsive ». Tapez 390 dans le champ de largeur. Votre barre s'empile et se redimensionne différemment aux largeurs de téléphone par rapport à un écran de bureau.
- Faites défiler vers le bas jusqu'à ce que la barre fixe apparaisse. Sur la plupart des thèmes, elle glisse une fois que vous avez fait défiler le bouton principal « Ajouter au panier ».
- Faites un clic droit sur la barre elle-même et choisissez à nouveau « Inspecter ». Chrome saute sur cet élément dans le panneau « Éléments » et le met en surbrillance sur la page.
- Survolez la ligne mise en surbrillance dans le panneau Éléments. Une petite info-bulle apparaît sur la page, montrant deux nombres, quelque chose comme 390 × 64. Le premier est la largeur, le second est la hauteur. Ce second nombre est ce que vous cherchiez.
Notez-le. C'est la hauteur de votre barre en pixels.
Voici quelques points à considérer à partir de maintenant :
- Si le nombre semble trop petit, vous avez sélectionné le bouton au lieu de la barre. Dans le panneau Éléments, cliquez sur la ligne juste au-dessus de celle où vous vous trouvez et observez la surbrillance. Continuez à monter jusqu'à ce qu'elle couvre toute la bande, d'un bord à l'autre, puis lisez à nouveau la hauteur.
- Vérifiez un second produit. Un produit simple avec un bouton donne généralement une barre plus courte qu'un produit variable, où un sélecteur de quantité ou un menu déroulant de variation le rend plus haut.
- Gardez le plus grand nombre. Le widget ne peut se trouver qu'à une seule hauteur.
Vous avez maintenant un nombre. La question suivante est de savoir où le taper, car de nombreux widgets ne vous donnent aucun endroit pour le mettre et vous remettent du CSS à la place.
WPChat a des champs pour exactement cela : un réglage de position et des décalages de pixels séparés par rapport au bas et à la droite.
Transformer ce nombre en un décalage
Votre décalage est la hauteur de la barre plus un espace. Si votre barre mesure 64px, ne réglez pas le décalage à 64px.
Réglez-le plutôt sur quelque chose comme 80px. L'espace est important car les cibles tactiles n'ont pas besoin de se chevaucher pour causer des problèmes.
Le bout d'un doigt couvre beaucoup plus d'écran qu'un curseur de souris, donc deux contrôles placés l'un contre l'autre produiront des erreurs de toucher même lorsque la mise en page semble propre. Un espace de 16px au-dessus de la barre suffit à les séparer.
La formule de travail est donc : hauteur de la barre + 16px = votre décalage inférieur.
Une mise en garde avant de faire confiance à ce nombre
DevTools dessine votre mise en page, mais il ne dessine pas le téléphone. L'interface du navigateur elle-même se superpose à la page sur un appareil réel, et cela vous coûte de la hauteur que l'émulateur ne vous montre jamais.
Trois choses en consomment :
- L'interface du navigateur. La barre d'adresse et la barre d'outils en bas de Safari et Chrome sur iOS occupent de l'espace réel.
- La barre d'adresse qui se réduit. Elle rétrécit lorsque vous faites défiler et s'agrandit lorsque vous faites défiler vers le haut, de sorte que l'espace disponible change pendant que l'acheteur utilise la page.
- Les marges de sécurité d'iOS. La bande de l'indicateur d'accueil en bas des iPhones plus récents est un espace réservé que votre mise en page doit éviter.
N'oubliez pas que les hauteurs de barre diffèrent selon les thèmes comme Astra, Botiga, Woostify, et les autres, et je ne les ai pas tous testés.
C'est pourquoi je choisirais un décalage avec une marge de manœuvre plutôt qu'un décalage parfait au pixel près.
Réglez votre nombre, puis ouvrez la page produit sur un vrai téléphone une fois et appuyez sur le bouton Acheter. Si c'est propre, vous avez terminé. Si c'est juste, ajoutez 10px de plus et vérifiez à nouveau.
La boucle de devinettes de pixels, et les paramètres qui y mettent fin
Deux fils de discussion de support public sur WordPress.org montrent ce qui se passe lorsqu'un widget ne vous donne pas de paramètre pour cela.
Dans le premier fil, un propriétaire de magasin signale que le widget de chat couvre le bouton Ajouter au panier de WooCommerce sur mobile. La solution est courte : déplacez la position du widget dans les paramètres du plugin. C'est toute la résolution.
Le deuxième fil va dans l'autre sens. Une barre de cookies atterrit sur les boutons d'un widget de chat sur mobile, et il n'y a pas de paramètre pour cela.
Ainsi, le support fournit du CSS personnalisé qui élève la barre de 100px sur les écrans de moins de 479px de large.
Ce n’est pas suffisant, le nombre passe donc à 160px. L’utilisateur revient et signale que la bannière se trouve maintenant au milieu de nulle part.
Personne dans ce fil n’a rien fait de mal. La boucle se produit parce qu’une valeur de pixel devinée est testée par rapport à une hauteur de barre qui n’a jamais été mesurée, à l’intérieur d’une requête média, le propriétaire du magasin n’a aucun moyen de déboguer sur son propre téléphone.
Vous changez le nombre, rechargez, plissez les yeux, changez-le à nouveau. Il n’y a aucune mesure dans ce processus, c’est pourquoi il ne converge pas.
Les paramètres qui remplacent la devinette
L’emplacement de cette barre dépend de votre thème, c’est exactement pourquoi WPChat vous donne des contrôles de position au lieu de supposer qu’un coin fonctionne partout.
Les contrôles correspondent à l’ordre de correction mentionné plus tôt dans cet article.
- Position : Le lanceur est en bas à droite par défaut, avec le bas à gauche disponible. C’est le déplacement horizontal, pour lorsque votre bouton Ajouter au panier occupe un côté de la barre.
- Décalage : Champs de pixels séparés pour la distance par rapport à la droite et la distance par rapport au bas. Le nombre que vous avez mesuré précédemment va dans le champ du bas : la hauteur de votre barre plus l’espace de 16px.
- Ciblage de page : Cela vous permet de désactiver le widget sur des pages spécifiques, c’est ainsi que vous l’évitez des pages où vous n’en avez pas besoin.
Bon à savoir sur le ciblage de page : lorsque le widget est désactivé sur une page, WPChat ne le charge pas puis le masque. Il vérifie d’abord, donc les fichiers ne sont jamais téléchargés.
Prêt à commencer ? Consultez notre guide étape par étape pour ajouter un widget de chat en ligne à votre site web.
Questions fréquentes sur les widgets de chat sur mobile
Comment mesurer la hauteur de la barre « Ajouter au panier » fixe de mon thème ?
Mesurez-la dans Chrome DevTools avec la barre d’outils de l’appareil activée. Appuyez sur F12, cliquez sur « Activer/désactiver la barre d’outils de l’appareil », définissez la largeur sur la taille d’un téléphone comme 390, puis faites défiler jusqu’à ce que la barre fixe apparaisse. Faites un clic droit sur la barre, choisissez « Inspecter », et survolez la ligne mise en surbrillance dans le panneau « Éléments ». L’info-bulle affiche deux nombres, et le second est votre hauteur en pixels.
En bas à gauche ou en bas à droite quand j’ai une barre de panier fixe ?
Choisissez le coin opposé au bouton principal de la barre, de sorte qu’une mauvaise pression ne vous coûte rien. Si votre bouton Ajouter au panier se trouve à droite, placez le lanceur en bas à gauche. Lorsque la barre s’étend sur toute la largeur de l’écran, il n’y a pas de coin libre de toute façon, alors laissez la position telle quelle et soulevez le lanceur avec un décalage inférieur à la place.
Un widget de chat nuit-il à mon score PageSpeed ?
Dans mon test, non. En exécutant le même site avec le widget activé et désactivé, il a ajouté environ 148 Ko d’actifs et n’a pas affecté les Core Web Vitals. TBT et CLS sont tous deux restés à zéro. Une mise en garde : c’était une page de test propre, ce qui est un cas idéal, donc une page produit riche en images ne se comportera pas de manière identique.
Pourquoi un décalage de pixel recommandé ne fonctionne-t-il pas sur tous les thèmes ?
Parce que la barre fixe « Ajouter au panier » n’est pas une fonctionnalité de WooCommerce. Elle provient de votre thème ou d’un plugin séparé, et chacun construit cette barre à une hauteur différente. Tout nombre que vous copiez d’un fil de support a été mesuré sur le thème de quelqu’un d’autre, c’est pourquoi vous devez mesurer le vôtre.
Optimisation mobile du widget de chat : ce qu'il faut retenir
Un widget bien construit ne doit pas alourdir votre site. WPChat a ajouté environ 148 Ko dans mon test et n'a pas affecté les Core Web Vitals, donc le poids n'a jamais été ce qui a fait échouer la vente. La position était : le lanceur assis sur le bouton sur lequel votre client est venu appuyer.
Voici ce que vous pouvez faire :
- Mesurez votre barre fixe dans Chrome DevTools à la largeur d'un téléphone, et prenez la hauteur dans l'info-bulle.
- Ajoutez un espace de 16px à ce nombre. C'est votre décalage inférieur.
- Définissez la position et le décalage dans les paramètres de votre widget, pas dans une media query.
- Désactivez le widget pour le panier et la validation de commande, si vous voulez que l'attention soit entièrement portée sur la vente.
- Vérifiez-le une fois sur un vrai téléphone, car les propres barres du navigateur et la bande réservée en bas des iPhones plus récents consomment de la hauteur que l'émulateur ne vous montre jamais.
Le nombre que vous obtenez appartient à votre thème, pas aux widgets de chat en général. Différents thèmes construisent cette barre différemment, c'est pourquoi un champ dans lequel vous pouvez taper votre propre mesure vaut mieux que n'importe quel nombre que je pourrais imprimer ici.
Vous avez maintenant une mesure. WPChat vous donne un endroit où la saisir : position, décalages de pixels séparés et ciblage de page.
Obtenez WPChat et commencez à communiquer avec les visiteurs sur tous les appareils et développez votre entreprise.
