Comment les vitesses lentes des pages mobiles ruinent vos taux de conversion

Il y a de fortes chances que la mauvaise conception de la page de destination post-clic vous coûte au moins la moitié de votre budget PPC, selon des recherches récentes de Google.

Les données du géant des moteurs de recherche indiquent que plus d'un internaute mobile sur deux abandonnera une page Web si elle ne se charge pas dans les 3 secondes. Et depuis février 2017, la page de destination post-clic mobile moyenne prend 22 secondes embarrassantes à charger.

Si vous vous êtes arrêté pour faire le calcul, vous vous rendez probablement compte à quel point une page à chargement lent peut être préjudiciable à vos résultats.

Si vous générez 5 000 visiteurs post-clic sur la page de destination mobile par mois et convertissez 5 % d'entre eux, vous manquerez 1 500 conversions au cours de l'année. Si le chargement prend plus de 3 secondes, la moitié de vos visiteurs – 2 500 par mois dans cette hypothèse – ne voient même pas l'intégralité de votre page de destination post-clic avant de rebondir. Pire encore, votre budget PPC est épuisé à chaque fois.

Mais peut-être que votre page ne se charge pas en 3 secondes. Peut-être qu'il se charge en 5 secondes, ou 6 secondes, ou 10 secondes. Si tel est le cas, les données de Google montrent que vous perdez encore plus.

Nouveaux repères de vitesse des pages mobiles

Comment vos pages se comparent-elles aux autres sur le Web ? Pour établir de nouvelles références en matière de vitesse de chargement, Google a analysé 900 000 pages de destination post-clic mobiles d'annonces dans 126 pays au début de 2017.

Ce qu'ils ont trouvé était une confirmation de leur hypothèse : les pages mobiles sont « gonflées » avec trop d'éléments.

Parmi elles, les pages des secteurs de l'automobile, de la vente au détail et de la technologie sont en moyenne les plus longues à charger. Indépendamment de l'industrie, cependant, certaines données choquantes montrent que les pages de destination post-clic mobiles dans l'ensemble laissent beaucoup à désirer.

Par exemple, 70 % des pages analysées ont mis 7 secondes pour charger le contenu juste au-dessus de la ligne de flottaison. Sur ces mêmes pages, il a fallu plus de 10 secondes au total pour charger le contenu visuel au-dessus et en dessous du pli.

À l'aide d'algorithmes avancés de SOASTA, une autre étude de Google a lié la vitesse de chargement des pages à des indicateurs de performance clés plus significatifs, tels que les conversions et le taux de rebond. Dans un article de blog, les chercheurs précisent :

Nous avons construit deux modèles d'apprentissage automatique : un pour prédire les conversions et un pour prédire les taux de rebond. Chaque modèle a utilisé des données du monde réel provenant d'un large échantillon de sites de commerce électronique mobiles, corrélant l'impact de 93 métriques de page différentes, des formats d'image à un certain nombre de scripts. En termes simples, les deux modèles ont recherché quels facteurs de site mobile inciteraient les acheteurs à acheter ou à rebondir. Le modèle de conversion avait une précision de prédiction de 93 % et le modèle de rebond était encore plus précis, à 96 %.

Avec une précision quasi précise, les modèles d'apprentissage automatique ont découvert que lorsque le temps de chargement d'une page passe d'une à trois secondes, la probabilité qu'un visiteur mobile rebondisse augmente de 32 %. À partir de là, un graphique montre que les choses empirent encore :

En plus du taux de rebond, l'étude a montré qu'un temps de chargement de page lent peut également réduire les conversions. Alors quel est le coupable ?

Les chercheurs ont identifié quelques défauts majeurs de conception mobile.

Les plus grands tueurs de vitesse de page de destination post-clic sur mobile

La vitesse n'est pas seulement un détracteur des conversions et du budget publicitaire payant ; c'est aussi l'un des facteurs de classement des moteurs de recherche de Google. Si votre page ne se charge pas plus rapidement que les 3 secondes recommandées, vous perdez de l'argent et vous n'êtes pas trouvé. L'un des problèmes suivants pourrait en être la cause.

1. Trop d'éléments de page

Aujourd'hui, la page Web moyenne a la même taille, en données, que le jeu vidéo classique « Doom : »

À 2,3 Mo, il est devenu un tas d'éléments inutiles. Et ses concepteurs ont le BSO - "le syndrome de l'objet brillant et brillant" - suggère l'ingénieur logiciel Ronan Cremin :

Alors que le Web traversait ses années d'adolescence difficiles, nous avons laissé des fonctionnalités rampantes s'installer et, finalement, l'encombrement a tout simplement pris le dessus sur nous. Nouveau module de galerie JavaScript ? Bien sûr, pourquoi pas? Oooh, cette nouvelle police Web serait bien ici, mais pourquoi ne pas ajouter un autre outil d'analyse pendant que nous y sommes ? Dois-je prendre la peine de redimensionner cette image de 6 000 pixels ? Non, laissez le navigateur le faire, ça marche pour moi.

Google a découvert que le « featuritus », comme l'appelle Cremin, peut avoir des effets extrêmement négatifs sur la vitesse de chargement. La page moyenne comporte désormais des centaines à des milliers d'éléments - titres, images, boutons - stockés sur des dizaines de serveurs. Lorsque ces éléments ne sont pas optimisés, le résultat peut être une expérience de chargement « imprévisible » et « volatile ».

Les chercheurs sont même allés jusqu'à identifier le nombre d'éléments sur une page comme le prédicteur le plus précis des conversions. Moins, disent-ils, c'est plus. Lorsque les éléments d'une page passent de 400 à 6 000, les chances de convertir un visiteur chutent de 95 %.

Les meilleurs concepteurs d'Internet, selon les données, le savent depuis 2014. Alors que la taille moyenne des pages n'a cessé de croître pour la plupart des sites Web, le top 10 a franchi un cap :

Pour eux, le « poids » des pages (taille des données) a diminué au cours des dernières années. Tous les autres, semble-t-il, sont victimes de featuritus.

Selon Google, 70 % des pages testées faisaient plus de 1 Mo, 36 % de 2 Mo et 12 % de plus de 4 Mo. En conséquence, il y a peu de chances que les visiteurs restent longtemps. Via une connexion 3G rapide (la vitesse de la plupart des connexions cellulaires dans le monde), 1,49 Mo prend environ 7 secondes à charger.

Résoudre le problème

Dans le cas d'une page fortement pondérée, la meilleure solution est la prévention. Heureusement, la prévention est aussi simple que de définir ce que Google appelle des « budgets de performance ». Avant de commencer à créer votre page, déterminez à quelle vitesse vous voulez qu'elle se charge (le « budget »). Ensuite, concevez votre page dans les limites de votre budget.

« Il est beaucoup plus efficace de livrer quelque chose rapidement si cela fait partie des critères de conception », explique Hakan Nizam de L'Oréal. « Cela libérerait la bande passante des développeurs. Cela permettrait aux développeurs de se concentrer sur d'autres facteurs qui affectent les taux de conversion. La conversation sur la vitesse doit être résolue afin de passer à d'autres différenciateurs.

Dans un article de blog pour Google, Jason Cohen compare le budget à d'autres limitations créatives :

Inclure la vitesse dans le processus de conception n'est pas différent de la prise en compte des limites des autres supports créatifs. Les concepteurs ne créeraient pas de publicité en quatre couleurs pour une publication imprimée en noir et blanc ni ne produiraient une vidéo de 30 secondes pour un créneau de 15 secondes. Si nous ne concevons pas dans les limites du support, le résultat est une mauvaise expérience.

Malgré le dépassement du trafic Internet sur les ordinateurs de bureau par les mobiles, le canal est toujours à la traîne par rapport aux ordinateurs de bureau dans la plupart des mesures d'expérience utilisateur. Les concepteurs doivent cesser de considérer le mobile comme une réflexion après coup. C'est son propre support, et l'expérience utilisateur doit le refléter.

Bien sûr, la technique de « budgétisation » suppose que vous partez de zéro. Si vous essayez d'optimiser une page de destination post-clic déjà lente, les chercheurs recommandent de procéder à un audit de vos éléments et de surveiller vos scripts tiers pour découvrir ceux qui contribuent le plus à son poids. Ensuite, réduisez la taille pour optimiser en conséquence.

2. Trop d'images

Au cours de leurs recherches, une image en particulier a attiré l'attention des testeurs de Google. Il pesait un énorme 16 Mo. Encore et encore, ils ont continué à trouver des images qui s'enlisaient dans les pages.

« Les éléments graphiques tels que les favicons, les logos et les images de produits peuvent facilement représenter jusqu'à deux tiers (en d'autres termes, des centaines de kilo-octets) du poids total d'une page », ont averti les chercheurs.

À l'aide de leurs modules d'apprentissage automatique, ils ont découvert que le deuxième indicateur de conversion le plus précis était le nombre d'images sur une page. Par rapport aux pages qui n'ont pas réussi à convertir les visiteurs, les pages qui pouvaient contenir 38 % d'images en moins.

Résoudre le problème

L'un des moyens les plus simples d'augmenter la vitesse de votre page est d'optimiser rapidement l'image. Faites de votre mieux pour…

• Réduisez les images inutiles

Avez-vous vraiment besoin de présenter six angles différents de votre produit ? Cette photo d'archive ajoute-t-elle vraiment de la valeur à votre page de destination post-clic ? Avez-vous besoin d'encoder du texte dans une image ou pouvez-vous à la place intégrer la police de votre choix avec Google Fonts ou Adobe Typekit ? Si la réponse est « non », envisagez de couper certaines images de votre conception.

• Diminuer la taille des images nécessaires

Si vous avez besoin de toutes ces images, quelques outils et stratégies différents peuvent vous aider à économiser de la bande passante. Tout d'abord, connaissez le format de votre fichier image. Remplacer un PNG par un JPEG peut vous faire économiser beaucoup de taille, et donc de vitesse. D'un autre côté, cela réduira également la qualité de votre image. Pour en savoir plus sur la façon de décider du format à utiliser, consultez cet article.

Deuxièmement, pensez à utiliser un outil. Les chercheurs affirment que 30% des pages pourraient économiser 250 Ko de données à l'aide d'un compresseur d'image. Guetzli et Zopfli de Google valent la peine d'être essayés.

3. Utilisation de JavaScript, temps de chargement en pleine page

Avant que des éléments tels que des images et des boutons puissent être affichés pour un utilisateur, le code HTML avec lequel une page est construite doit être reçu et interprété par le navigateur. Le temps que cela prend est connu sous le nom de « temps de préparation DOM » – le prédicteur le plus précis du rebond de page, selon les chercheurs.

Les données de Google montrent que les sessions utilisateur qui ont rebondi avaient des temps de préparation DOM qui étaient 55% plus lents que les sessions non rebondies. Les ralentissements de cette importance sont souvent causés par JavaScript, un type de code qui interrompt l'analyse du code HTML, utilisé dans de nombreux outils d'analyse, publicités et widgets sociaux tiers.

Daniel An et Pat Meenan comparent le ralentissement à un restaurant non organisé :

Imaginez que vous êtes au restaurant et que votre serveur est prêt à apporter votre repas, mais qu'il doit d'abord attendre que le sel et le poivre soient livrés d'un autre restaurant.

Mais JavaScript n'est pas le seul type de code qui ralentit les pages mobiles. CSS, HTML et les innombrables requêtes nécessaires pour traiter des éléments tels que les images et les polices créent un décalage dans le temps de chargement d'une page entière - le deuxième prédicteur le plus précis du taux de rebond. La page Web moyenne à partir de laquelle les utilisateurs ont rebondi était de 2,5 secondes plus lente que la page moyenne à partir de laquelle ils n'ont pas rebondi.

Résoudre le problème

Dans le but d'améliorer l'expérience de navigation mobile, Google a développé les programmes AMP et AMP pour les annonces. Les deux frameworks donnent aux développeurs les outils dont ils ont besoin pour fournir des expériences mobiles à des vitesses fulgurantes. Ils comprennent:

• AMP HTML : il s'agit d'une version de base simplifiée de ce que nous reconnaissons comme un langage de balisage hypertexte - le système de balises, de chiffres et de lettres utilisé pour créer la base de la plupart des pages Web.

• JavaScript AMP : la version AMP de Google du code populaire restreint l'utilisation de JavaScript tiers et écrit par l'auteur.

• Le CDN AMP : Cela permet aux développeurs de stocker une version en cache de leur page Web sur les serveurs de Google. Cette version mise en cache est un instantané numérique de la page qui contient toutes ses données au même endroit. En conséquence, il peut être servi à l'utilisateur plus rapidement.

Ensemble, les éléments du framework forment la base de pages qui utilisent 10 fois moins de données que la moyenne, et des publicités qui se chargent 6 fois plus rapidement.

Rendez-vous ici pour en savoir plus sur les premiers pas avec AMP.

Quelle est la vitesse de votre page mobile ?

Vos pages de destination post-clic sont-elles optimisées pour les mobiles ? Sont-ils exempts d'images inutiles, d'éléments maladroits et de JavaScript lourd ?

Découvrez-le avec un test adapté aux mobiles de Google, puis consultez notre guide pour optimiser l'expérience de la page de destination post-clic avant de créer votre page suivante :