PWAMP (PWA + AMP) : l’avenir du web est là !

Accelerated Mobile Pages Project (AMP) : tout pour la vitesse

La vitesse, point crucial des sites Internet

Accelerated Mobile Pages (AMP) est une technologie open source proposée et soutenue par Google. Son objectif est d'améliorer le temps de chargement des sites Internet. Avec l'augmentation de la navigation mobile faisant parfois face à une connexion limitée, le sujet de la vitesse de chargement est un point crucial pour un site Internet. Selon les données de Google Analytics sur un échantillon de 3700 sites mobiles testés, 53% des internautes abandonnent si le temps de chargement est supérieur à 3 secondes.

AMP, comment ça fonctionne

Les Accelerated Mobile Pages sont construites en AMP-HTML, une technologie basée sur le langage HTML5. Le but d'AMP est de proposer une version “simplifiée” du site, se concentrant essentiellement sur les contenus et images, et en supprimant les éléments considérés comme bloquants comme par exemple les scripts Javascript.

AMP, les points faibles

Le point fort d'AMP en fait aussi sa faiblesse. Ce langage étant minimaliste, il est très limité. L'incompatibilité avec les ressources Javascript rend ainsi impossible les interactions avec les utilisateurs ou l'intégration d'interfaces graphiques poussées.  L'AMP revient aux basiques du web : des pages html statiques.

Google met un coup d'arrêt à la tendance actuelle d'avoir des sites utilisant à outrance les animations mais longs à charger. Ce point de vue n'est pas dénué de sens et suit la volonté des utilisateurs à avoir avant tout des sites rapides.

Progressive Web App (PWA) : tout pour l'interaction

PWA, les points forts

Les PWA répondent à une autre volonté des utilisateurs : avoir un site Internet avec l'experience utilisateur d'une application mobile. Elles sont donc souvent basées sur le langage javascript et permettent :

• l'utilisation hors connexion

• une navigation semblable aux applications mobiles

• la possibilité de les installer sur les téléphones

Vous pouvez retrouver notre définition des PWA

PWA, les points faibles

Les progressive web apps offrent une navigation fluide et une très bonne expérience utilisateur mais présentent le désavantage d'obtenir un temps de chargement de la première page important..

Attention tout de même, ce temps de chargement n'est pas forcément dramatique. Nous arrivions après optimisation à charger ce site en moins de 5 secondes ce qui est bien meilleur que le temps moyen de chargement d'une page mobile, qui est de 19 secondes avec une connexion 3G (échantillon de 10 000 sites mobiles via http://webpagetest.org/). Malgré tout, cela reste supérieur aux 3 secondes critiques évoquées plus haut et encore loin du temps de chargement d'un site AMP pouvant, lui, être inférieur à 1 seconde.

PWAMP : combiner PWA et AMP

Combiner PWA+AMP

L'objectif est alors de combiner les deux technologies et ainsi supprimer les points faibles de chacun pour n'en garder que les points forts :

L'AMP permet :

• Un chargement instantané de la première page

• Une optimisation pour le SEO

• Une expérience minimaliste

LA PWA, elle,  nous offre:

• Un chargement rapide des pages après le premier chargement

• Une expérience utilisateur très riche

• Des fonctions avancées : hors connexion, instabilité …

Solution 1 : transformer son AMP en PWA

La première solution est d'intégrer quelques notions des PWA dans son site AMP. On aura alors un site web progressif. Mais la notion de web app est absente. Cette solution est très efficace pour des petits sites avec du contenu statique. Mais le manque d'interaction devient vite un problème.

Solution 2 : Faire deux versions du site ?

La seconde solution est de faire deux versions du site : une AMP pour le premier chargement qui charge en arrière plan la PWA puis nous redirige dessus de manière transparente.

L'utilisation de cette solution assure une très bonne expérience utilisateur mais présente un inconvénient dans sa mise en place : nous sommes obligés de faire deux sites distincts avec donc deux développements et deux maintenances.

Une des prérogatives des PWA est de proposer un seul et unique développement pour tous les supports (bureau et mobile). L'ajout d'une version dédiée à l'AMP peut donc être perçu comme improductif et fastidieux. .

Solution 3: intégrer l'AMP dans sa PWA : la PWAMP

La troisième solution est d’inclure la version AMP du site dans la PWA. Cette solution permet :

• de garder les avantages de l’AMP

• de garder les avantages de la PWA

• d’avoir une seul et unique développement.

De plus cette solution peut être rapidement mise en place si vous possédez déjà d’une version AMP de votre site web.

Conclusion : l'avenir du web est là

Ce solution semble clairement être l'avenir proche du web. Comme nous avons vu il y a quelques années avec l'adoption très rapide des progressive web apps, le PWAMP deviendra certainement le nouveau standard et sera majoritairement utilisé d'ici 2020 à 2022.

Imaginez une application mobile qui se charge en moins d'une seconde : sans store, sans temps d'installation et sans prendre de place sur votre mobile.