AMP / PWA : on vous dit tout !

AMP  =  « Accelerated Mobile Pages »

Pour aller plus loin, Google tente une évolution pour les AMP pour rester à jour : les AMP Stories. Toujours aussi « mobile-first », les AMP stories donnent aux utilisateurs la possibilité de consommer le contenu autrement  sous un format apprécié sur les réseaux sociaux. En effet, Google s’est référé aux stories des réseaux sociaux pour apporter une valeur ajoutée aux utilisateurs. Cependant, on peut également retrouver les AMP Stories sur le desktop. En 2018, à l’annonce de cette nouvelle évolution, les médias ont pu tester en premier la conception d’une AMP Story. Il est également question d’interactivité entre les utilisateurs et une marque par exemple. L’expérience utilisateur est valorisée avec le format AMP.

PWA  =  « Progressive Web App »

Une autre évolution majeure en termes de technologies du web et du mobile : PWA, application web progressive, en français. Les PWA permettent d’obtenir un site mobile avec les fonctionnalités d’applications téléchargeables. Elles existent depuis 2015 et évoluent chaque année. Sous peu, les PWA devraient représenter 50% des expériences en ligne. On associe PWA avec l’expérience utilisateur (UX) afin d’optimiser le temps de chargement des pages sur mobile.

 

Vous devez sûrement vous poser une question : Alors, quelle différence avec le format AMP ?

C’est à nouveau Google qui met en place les PWA. Le moteur de recherche va encore plus loin que le format AMP avec les PWA. On découvre des fonctionnalités qui se rapprochent des applications mobiles (devenant dénuées de sens). Combien d’applications que vous utilisez quotidiennement avez-vous téléchargé ? Combien d’apps qui finalemen ne vous servent pas finalement ? Face à ce constat, Google a compris que les utilisateurs manquent d’intérêt pour ces applications.

 

Au niveau des fonctionnalités, les utilisateurs peuvent créer un raccourci sur l’écran d’accueil de leur smartphone pour gagner du temps en parcourant leur téléphone. Par la même occasion, faites un tri dans vos applications téléchargées. Les PWA permettent aux utilisateurs de recevoir des notifications. Elles intègrent les fonctionnalités intégrées au téléphone comme le micro et l’appareil photo. Et enfin, les contenus d’un site en PWA peuvent être lus hors-connexion. Pratique quand on a une faible connexion voir inexistante.

 

Autour des PWA, il faut avoir une réflexion UX, design et fonctionnelle en même temps. Les PWA sont optimisées pour le référencement. Les utilisateurs se sentent plus engagés vis-à-vis des PWA. Avant de s’engager dans la conception d’une PWA, il faut se poser 3 questions : d’où viennent les utilisateurs de votre site ? Quelle solution de déploiement ? Quels sont les besoins techniques ?

 

Parlons technique

Il est temps d’aborder le côté technique des PWA et AMP. Commençons par les trois concepts qui entourent une PWA :

1. La description des métadonnées du site mobile dans un fichier manifest.json (nom de l’appli + icône à utiliser + URL pour démarrer + orientation de l’écran +mode d’affichage + couleur du thème)
2. L’intégration d’un fichier Javascript comme proxy interne pour la fonctionnalité hors-connexion
3. Le squelette de l’application avec l’application Shell pour faire apparaître rapidement l’aperçu du site.

Poursuivons par les outils qui permettent de développer une PWA :

•  » Lighthouse PWA Anlysis Tool  » : outil de Google pour évaluer la qualité d’un site web par rapport aux principes d’une PWA.
•  » Mobile HTML5.org  » : cet outil permet de tester le bon fonctionnement d’une PWA
•  » Web App Manifest Generator  » : c’est un outil qui automatise la création du fichier manifest.json
•  » What Web can Do Today  » : l’outil aide à connaître quels fonctionnalités sont compatibles avec tels navigateurs.

Continuons avec les 3 concepts qui entourent le format AMP :

1. AMP HTML : c’est le code HTML qui réduit la taille des fichiers pour un chargement rapide.
2. AMP Javascript : cela permet d’avoir un rendu graphique immédiat
3. Caches AMP : le code HTML est chargé instantanément.

Puis, des plugins existent pour le CMS WordPress, ce qui facilite la tâche. Joomla et Drupal ont également un plugin pour l’AMP. Ensuite, des outils sont mis à disposition pour savoir si le site suit les principes de l’AMP :

• « The AMP Validator » : outil qui permet de tester l’efficacité des AMP
• « Google Search Console : test amp » : c’est un outil qui permet de savoir si votre page AMP est valide

Doit-on associer AMP et PWA ensemble ?

On a l’impression que le format AMP est proche des PWA néanmoins il faut savoir qu’il y a quelques différences. Le format AMP n’est valable que pour les pages de contenus (appelés page cms sur les sites développés avec un cms) tandis que PWA intègre les fonctionnalités d’une application.

Et si une combinaison des deux technologies pouvait améliorer l’expérience utilisateur ? Comme le combo gagnant du référencement SEM = SEO + SEA + SMO.

Les deux technologies PWA et AMP s’associent pour faciliter le SXO (UX et SEO) que ce soit sur mobile ou Desktop. Par conséquent, l’association de ces deux concepts serait une solution efficace pour améliorer un site Internet. Cela permettrait de prendre que les points forts de chacune des technologies. D’ici 2022, le standard technologie sera le PWAMP.

Voici les points forts qu’on retrouve si on associe AMP et PWA ensemble :

• Chargement de la 1^ère page instantanément
• Optimisation SEO
• Mise en avant de l’expérience utilisateur riche
• Chargement des pages rapides après le passage de l’AMP
• Fonctionnalités avancées : hors connexion par exemple

PWA + AMP = PWAMP