Le mobile est au cœur de toutes les stratégies. L’avènement du smartphone et de l’Internet a bouleversé nos usages, nos habitudes et modes de consommation au point qu’ils sont devenus indispensables dans notre quotidien. D'après StatCounter, en novembre 2016, le trafic mobile a pour la première fois dépassé le trafic web depuis un ordinateur.
L’avenir du web est clairement tourné vers le mobile. Et le contexte actuel est déjà favorable. On ne compte plus les initiatives « mobile-friendly » prises par les grands acteurs du e-commerce et les géants du web, comme en témoigne la future indexation Mobile First de Google prévue pour 2018.
L’Index Mobile First prévoit de classer les pages web non plus à partir de leur version desktop, mais à partir de leur version mobile, ce qui démontre toute l’importance actuelle et future des sites web adaptés au mobile. Pour se préparer au Mobile First Index, il est donc indispensable d’ adapter son site au mobile.
Le Responsive Web Design peut être une solution, tout comme posséder un site mobile dédié. Mais le bon compromis réside certainement dans la mise en place d’une Progressive Web App (PWA), car en plus de posséder les qualités d’un site mobile, la PWA présente les avantages d’une application native. En offrant une expérience utilisateur optimale et de nombreuses opportunités de conversion pour les marques, la Progressive Web App n’est-elle pas en voie de révolutionner le web mobile ?
Progressive Web App : pourquoi l’adopter ?
Comme son nom l’indique, une Progressive Web App est une application web qui est donc accessible depuis un navigateur web. Toutefois, le terme « Progressive » apporte une dimension supplémentaire qui montre que la PWA n’est pas une simple application web.
Qu’est-ce qu’une Progressive Web App ?
Une Progressive Web App est une application web perfectible qui repose sur le principe de l’amélioration progressive afin de s’adapter à tous les utilisateurs, quels que soient le système d'exploitation et le navigateur Web utilisés. Ainsi, la Progressive Web App s’adapte progressivement à chaque nouvelle fonctionnalité des différents supports et navigateurs Web. En associant le meilleur des technologies du Web (HTML5, JavaScript et CSS) aux fonctionnalités des applications mobiles, les Progressive Web Apps proposent une expérience utilisateur unique. C’est grâce aux Service Workers, au fichier Manifest et à une conception App Shell que la Progressive Web App va pouvoir proposer une expérience similaire aux applications mobiles.
Une Web App aux multiples avantages
En plus de répondre pleinement aux exigences du Mobile First Index, la Progressive Web App apparaît comme une solution gagnant-gagnant aussi bien pour les utilisateurs que pour les professionnels.
Une expérience utilisateur inégalée
En associant le meilleur des sites mobiles et des applications, la Progressive Web App offre une expérience utilisateur unique, complète et fluide.
Elle se trouve facilement via une recherche sur n’importe quel navigateur web. Il s’agit ni plus ni moins de pages web avec des URL indexées sur les moteurs de recherche. La PWA s’affiche ensuite très rapidement sur son mobile pour offrir une expérience immersive en plein écran. L’utilisateur peut même sauvegarder la PWA en ajoutant l’icône de celle-ci sur l’écran d’accueil du mobile sans que cela ne prenne du temps ni de l’espace de stockage. La PWA est également sécurisée, le Service Worker ne fonctionne que pour les sites en HTTPS. Enfin, elle peut même s’utiliser sans connexion Internet et affiche des temps de chargement record. Par exemple, la PWA de Twitter (Twitter Lite) se charge 30% plus rapidement tout en utilisant 70% de données en moins et en pesant moins d’1 Mo sur le smartphone.
Un outil marketing puissant
Les nombreuses fonctionnalités des Progressive Web Apps offrent des opportunités commerciales et marketing très puissantes. En accédant aux fonctionnalités natives du mobile, on peut à la manière des applications mobiles :
-
utiliser la PWA en mode hors ligne,
-
bénéficier de temps de chargement hyper-rapide,
-
envoyer des notifications push à l’utilisateur,
-
installer l’icône de la PWA sur l’écran d’accueil,
-
choisir l'orientation de l’écran (portrait ou paysage) par défaut, etc.
Et pourtant, il s’agit d’une Web App qui s’apparente à un site mobile, ce qui facilite aussi son référencement sur les moteurs de recherche.
Votre présence web est donc assurée quels que soient les navigateurs web utilisés. De plus, l'excellente expérience utilisateur, la rapidité d’installation et de chargement ainsi que les notifications push permettent d’accroître les taux d'engagement et de conversion :
-
Le taux de conversion de Make My Trip a par exemple été multiplié par trois, et le nombre de sessions d’achat a augmenté de 160%.
-
Les notifications push ont permis d’augmenter le taux de ré-engagement de la société OLX de 250%.
Les exemples sont nombreux.
Si les sites de presse, tels que le Financial Times, le Washington Post ou récemment Forbes, et L’Équipe en France, ont rapidement décelé tout le potentiel des PWA, les autres secteurs ont été plus lents. Pourtant, les opportunités pour les sites e-commerce sont bien réelles. On peut imaginer comment une Progressive Web App serait intéressante dans le cadre d’une stratégie Web-to-Store. L’accès à la géolocalisation de l’utilisateur et l’envoi de notifications push permettraient, par exemple, d’envoyer des notifications en temps réel au moment où l’utilisateur se situe dans une zone géographique autour de votre boutique. Des avantages, des promotions l'inciteraient alors à venir vous rendre visite.
Peu à peu, la Progressive Web App se développe : des outils (Mobify, plugin WordPress, etc.) sont ainsi mis à disposition pour en faciliter la conception et l’analyse.
La PWA, une Web App « SEO Friendly »
Comme tout site internet, il est important d’être bien référencé sur les moteurs de recherche pour accroître sa visibilité, sa notoriété, générer du trafic, voire des conversions. On l’a vu plus haut, la Progressive Web App possède des URL qui peuvent être indexées. Aussi, il faut optimiser son référencement naturel. À ce sujet, Google a sorti un guide officiel des bonnes et mauvaises pratiques quant à l’indexation des PWA.
Le travail de SEO n’est finalement pas si différent d’un site web classique. Il faut toutefois adapter son SEO en fonction des PWA et de ses spécificités. Il est important de bien respecter les consignes recommandées par Google qui préconisent de bien différencier les versions desktop et mobile en utilisant notamment :
1. L’en-tête HTTP “Vary”
Si vous utilisez une fonction dynamique pour fournir du contenu mobile aux utilisateurs ou avoir une configuration d'URL mobile distincte, il est important de connaître cette en-tête et de l’utiliser.
Si vos pages web utilisent une conception web adaptée, cela ne vous affecte pas car votre serveur web envoie le même contenu à tous les utilisateurs.
L'en-tête HTTP “Vary” permet d’indiquer que différents contenus sont diffusés à différents utilisateurs. Il est généralement utilisé pour le SEO mobile lorsque les pages ont des versions différentes pour les petits écrans. Il peut aider Google et d'autres moteurs de recherche à déterminer la version mobile d'une page. Il peut aussi être utilisé par des caches pour déterminer s’il faut mettre en cache la page et comment procéder.
Pour résumer, l’en-tête "Vary" optimise la distribution du contenu à différentes personnes sur différents supports à partir de la même URL. Ainsi, l'utilisateur obtient le bon contenu.
2. Les annotations des URL mobiles et desktop dans une configuration d’URL distinctes
Les URL canoniques permettent d’indiquer au moteur de recherche qu’un même contenu est accessible à travers différentes URL. L’URL canonique (link rel="canonical") intégrée dans les pages concernées précise que cette même URL est définie comme l’URL favorite.
C’est une pratique courante pour éviter le contenu dupliqué interne (pages accessibles via le même nom de domaine), voire le contenu dupliqué externe (même contenu accessible à travers différents noms de domaine gérés).
Pour le mobile, cela permet d’indiquer au moteur de recherche qu’un même contenu est accessible via deux URL différentes pour préserver la version desktop de la version mobile. Il est alors nécessaire d’utiliser la balise canonique pour indiquer au moteur de recherche qu’il existe une page “favorite”.
La configuration courante consiste à distribuer des pages pour les ordinateurs sur www.example.com et des pages correspondantes sur m.example.com pour les mobinautes. De ce fait, la balise link rel="alternate" prend tout son sens. Sur la page pour ordinateur, la balise link rel="alternate" intégrée renvoie vers l'URL mobile correspondante. Cela permet à Googlebot de découvrir l'emplacement des pages mobiles de votre site. Sur la page mobile, la balise mise en place link rel="canonical" renvoie vers l'URL desktop correspondante.
Ces annotations doivent être également mises en place dans les fichiers sitemap.xml. Cela permet au moteur de recherche de comprendre la relation entre vos pages mobiles et desktop, et de les traiter en conséquence.
Bien entendu, d’autres pratiques SEO sont à prendre en compte, telle la mise en place sur chaque domaine de balises hreflang déployées sur des supports mobile/ordinateur dans le cadre d’une stratégie internationale.
Par ailleurs, le site doit nécessairement être sécurisé avec le protocole HTTPS, et idéalement, il doit être Responsive.
En respectant ces bonnes pratiques, il y a de grandes chances pour que votre site progresse naturellement dans les SERPs. Comme évoqué ci-dessus, l’UX et le temps de chargement grandement améliorés devraient contribuer à la progression SEO du site dans le nouvel index mobile.
Un développement plus facile et moins coûteux
À qualité égale, on a le choix entre le développement d’une Progressive Web App dont l’UX est similaire à une application native et celui d’une application mobile qu’il faudra dupliquer en deux, voire trois versions (Androïd, iOS et Windows Phone). Par contre, le coût de développement est nettement différent. Développer une application mobile est en effet beaucoup plus coûteux qu’une Progressive Web App. Selon les chiffres récoltés par Skilled.co, développer une PWA coûterait entre 5000€ et 18 000€, alors que les tarifs de développement d’une application native se situeraient plutôt entre 18 000€ et 70 000€. Une différence notable qui joue largement en la faveur du système soutenu par Google. De plus, avec une PWA on économise le coût d’inscription sur les magasins d’application comme App Store et Play Store : de quoi économiser quelques dizaines d’euros supplémentaires.
Quant à la comparaison avec un site mobile, le budget consacré au développement d’une Progressive Web App est certes plus important qu’une refonte du site mobile, mais c’est finalement un investissement qui sera amorti à terme. En complément d’une application mobile, il vaut mieux privilégier une PWA à un site mobile pour pouvoir calquer les prochaines mises à jour sur celles de l’application.
En plus de l’avantage financier, on économise sur le temps de développement. Alors que l’application mobile devra être dupliquée pour chaque système d’exploitation, la PWA ne requiert qu’un seul code compatible avec tous les systèmes d’exploitation et tous les navigateurs web, d’autant plus que de nombreux outils sont mis à la disposition des développeurs.
Pour faciliter et ainsi encourager leur développement, Google propose un certain nombre de bonnes pratiques ainsi que des outils de développement en open-source. On retrouve les frameworks Polymer et Angular, mais aussi une extension Chrome fort utile. Lighthouse permet en effet de tester la performance de votre Progressive Web App afin d’en améliorer la qualité. L’extension analyse et note votre Web App sur un score de 100 déterminé par un certain nombre de critères d'évaluation. Chaque point à améliorer pourra être corrigé à l’aide des bonnes pratiques proposées.
En dehors de Google, d’autres outils existent. Le site Hacker News readers as Progressive Web Apps compile par exemple les meilleurs frameworks pour développer une PWA.
Progressive Web App : vers une standardisation ?
Avec ses qualités attestées, on peut se demander si les Progressive Web Apps ne vont pas devenir la nouvelle norme du web mobile. Mais si en théorie, la Progressive Web App s’adapte à tous les navigateurs web et à tous les systèmes d’exploitation, en pratique, ce n’est pas encore tout à fait le cas.
Des incompatibilités demeurent...
Pour le moment, seuls Chrome, Firefox et Opera supportent les Service Workers propres aux Progressive Web Apps. Qu’en est-il des autres navigateurs web, Internet Explorer/Microsoft Edge et Safari ? Jusqu’à maintenant ils ne supportent pas ces Service Workers, alors qu’ils ont tout intérêt à le faire, notamment Microsoft pour qui les PWA seraient une bonne alternative pour combler le manque d'applications dans son Windows Store.
Apple, lui, avait peut-être moins d’intérêt à le faire pour ne pas concurrencer son App Store. Pourtant, face au succès grandissant des Progressive Web Apps et à l’avance qu’est en train de prendre Android, il semble que Microsoft, puis récemment Apple, soient actuellement en train de développer les Service Workers. C’est en tout cas ce qu’atteste leur statut “en développement” qui figure sur la page dédiée à l’avancée de leurs futures implémentations.
…mais ne sont pas un frein pour autant
L’essence même de la Progressive Web App est de pouvoir s’adapter progressivement aux différents supports. La non-compatibilité des Service Workers n’empêche pas le fonctionnement d’une Progressive Web App sur Safari. Les utilisateurs de Safari auront toutefois accès à moins de fonctionnalités que sur les navigateurs compatibles. Le mode hors-ligne, les push notifications ou encore l’icône installée sur l’écran d’accueil ne sont pas disponibles via le navigateur Apple. Malgré tout, certaines marques ayant adopté la PWA enregistrent plus de conversions sur iOS par rapport à un site non-PWA. C’est par exemple le cas de Lancôme qui a enregistré une augmentation globale de ses conversions de 17%, une hausse de 53% des sessions sur mobile sur iOS et une baisse du taux de rebond sur iOS de 10%. On peut aussi citer AliExpress qui a vu son taux de conversion augmenter de 82% sur iOS et 104% sur tous les navigateurs.
“Write once, run everywhere” ! … for everybody ?
Les Progressive Web Apps, apparues pour la première fois lors du Chrome Dev Summit de 2015, semblent être la solution toute trouvée pour répondre aux exigences du Mobile First Index et à celles des utilisateurs. Ainsi, les PWA s’adaptent, comme son nom l’indique, progressivement à tous les supports tout en proposant une expérience utilisateur optimale qui est source d’engagement et de conversion. Les premiers retours d’expérience, très positifs, semblent propices à la généralisation des Progressive Web Apps. Elles séduisent de plus en plus d’acteurs en ligne.
Les sites de presse, les sites de e-commerce, et même les réseaux sociaux (Twitter, et bientôt Instagram) affichent des résultats très satisfaisants. En revanche, peuvent-elles convenir à tout le monde ? Faut-il définitivement abandonner son application mobile ? Il paraît évident que la question de développer une PWA ou non se pose étant donné tous les bénéfices que l’on peut en tirer. Mais elle n’est pas la solution idéale à tous les cas de figure. Les secteurs d’activité, les usages des visiteurs en ligne, les objectifs sont des facteurs déterminants qu’il faut prendre en compte avant de passer à une Progressive Web App. Malgré cela, la PWA est incontestablement en train de mener une "petite" révolution dans le monde du web mobile. Mais de là à devenir un standard, l’avenir nous le dira.