Accelerated Mobile Pages : un projet open source pour un web mobile plus efficace

Accelerated Mobile Pages : un projet open source pour un web mobile plus efficace

Les pions sont en place, que la partie commence !

Avatar de l'auteur
David Legrand

Publié dans

Internet

07/10/2015 8 minutes
23

Accelerated Mobile Pages : un projet open source pour un web mobile plus efficace

Google et Twitter viennent enfin de dévoiler leur contre-attaque. Face à Apple News et Facebook Instant articles, les deux sociétés ont décidé de miser sur un projet ouvert fédérant de nombreux acteurs. Le but reste le même : rendre moins décevante l'expérience du web sur mobile.

Comme prévu, une conférence s'est tenue à New York ce mercredi afin de dévoiler un projet poussé notamment par Google et Twitter dans le domaine de l'information en ligne : AMP, pour Accelerated Mobile Pages. Mais comme pour tenter d'éviter la comparaison avec Apple News ou les Instant articles de Facebook, celui-ci est volontairement présenté de manière plus large. Et il faut bien avouer que certaines différences importantes sont à noter.

L'expérience du contenu mobile est exécrable, il faut tout revoir

Comme nous avons déjà eu l'occasion de l'évoquer, il s'agit ici d'une initiative ouverte qui vise à revoir l'expérience de lecture sur mobile. En effet, les sites d'information multiplient les erreurs ergonomiques, d'incitation à télécharger leurs applications en pop-ups invasives lorsque ce n'est pas une vidéo en lecture automatique qui se lance en plein milieu d'un article.

En partie poussé par Adblock (nous y reviendrons), le marché commence à se poser quelques questions et les réponses sont multiples. Il faut dire qu'une page peut mettre plusieurs secondes à se charger, l'utilisateur peut être interrompu plusieurs fois, le tout étant relativement décevant. Et la déception n'est pas la meilleure condition pour un marché prospère.

Pour le moment, ceux qui ont le mieux réussi à tirer leur épingle du jeu sont du côté des géants du Net, ces plateformes cherchant à en profiter pour devenir des distributeurs de presse nouvelle génération. Ils proposent ainsi leur propre format et le modèle économique qui va avec. Les éditeurs peuvent ainsi foncer et profiter de l'aubaine d'audience quitte à en devenir dépendant, ou rester dans leur coin (voir notre analyse). Un choix cornélien.

Mais si Apple et Facebook ont décidé de faire les choses de leur côté, avec leur propre format et un nombre de partenaires limités, Google et Twitter ont vu plus grand et surtout, plus ouvert. Un choix qu'ils espèrent bien payant lorsqu'il s'agira de représenter une force importante face aux solutions concurrentes. Une façon aussi pour Google de continuer à favoriser une consultation sur le web, là où sa régie représente une très large part du gateau publicitaire.

AMP : un projet ouvert et open source pour convaincre de manière large

Dans la FAQ du projet AMP, on peut ainsi lire que l'initiative « est née de discussions entre les éditeurs et des sociétés technologiques concernant le besoin d'améliorer l'écosystème du contenu mobile pour tous [...] Les sociétés impliquées dans les phases primaires du projet voulaient que le web mobile fonctionne mieux pour tous, pas uniquement pour une plateforme, un ensemble de technologies ou quelques éditeurs ». 

Ainsi, le projet repose avant tout sur AMP HTML, un framework open source distribué via GitHub sous licence Apache 2.0. Il permet de constituer des pages statiques qui se chargent de manière rapide, tout en permettant un rendu adapté aux standards actuels. Il n'exclut d'ailleurs pas de contenu multimédia ou social puisque l'on peut utiliser vidéos, GIF et autres tweets. L'équipe indique que la migration se veut simple, puisque réutilisant les standards actuels.

Pour autant, il y aura forcément des contraintes. Cela concerne par exemple la taille des éléments qui devra être prévue à l'avance ou encore le JavaScript qui est presque totalement exclu tout comme le chargement d'éléments tiers. Un choix fait pour éviter de reproduire le désastre que représente le chargement de dizaines de scripts à l'ouverture d'une page.

Les développeurs devront donc trouver d'autres solutions dans le but de garder un ensemble léger et adapté à tous les écrans, puisque les appareils mobiles sont ici les premiers visés (mais pas les seuls).

Le but est ainsi de permettre aux éditeurs de proposer leurs contenus dans ce format, aux intermédiaires de s'y greffer et à des tiers de l'exploiter. La liste de partenaires techniques est ainsi assez fournie, et on y retrouve des réseaux sociaux comme LinkedIn et Pinterest, un CMS tel que Wordpress, des services comme Nuzzel, mais aussi des outils d'analyse d'audience : Adobe Analytics, Chartbeat et Parse.ly. Google Analytics devrait bien entendu être de la partie.

La question de la publicité, des paywalls et des statistiques

On notera que certains de ces acteurs sont aussi des régies publicitaires, ce qui pose la question des formats acceptés en la matière. Car tout mobile et rapide que doit être l'information, elle doit être monétisée par les éditeurs pour permettre le financement des rédactions. Un point important alors que la rentabilité des sites mobiles pose encore question, alors que les bloqueurs de publicité débarquent sous iOS. 

Sur ce point, la FAQ est encore assez floue. Elle précise en effet que les membres du projet « ne peuvent garantir que toutes les technologies pourront fonctionner correctement au sein des fichiers AMP ». On peut ici comprendre que des solutions comme Flash ne seront pas les bienvenues. Reste à voir ce qu'il en sera dans la pratique.

Il est clairement indiqué que les éditeurs pourront librement vendre leur inventaire diffusé via des pages AMP HTML, mais il faudra sans doute attendre encore un peu avant de savoir de quoi il en retourne exactement. Dans une explication plus technique du projet, on apprend que les statistiques se baseront sur des pixels spécifiques, alors que la publicité sera chargée dans une iFrame avec une priorité basse, afin d'éviter tout problème, en attendant mieux, ou que les publicitaires prennent enfin leur destin et celui des éditeurs en main.

Du côté de ceux qui ont misé sur un abonnement, rien ne semble encore mis en place. En effet, la FAQ indique qu'il s'agit d'un objectif du projet de supporter la gestion des comptes et des paywalls, et que les éditeurs et les développeurs vont faire de leur mieux pour construire une solution qui convienne à tous, mais sans que cela ne soit pour le moment possible.

Des partenaires déjà nombreux, une mise en place qui va prendre du temps

Quoi qu'il en soit, le nombre d'éditeurs partenaires est pour le moment déjà assez important. On retrouve les habitués du genre : le Financial Times, le New York Times, le Wall Street Journal, le Washington Post, mais aussi Vox Media, BuzzFeed, Condé Nast, Mashable, ainsi que des acteurs plus proches de nous comme El Paìs, The Guardian, Zeit Online ou Les Echos pour la France.

Il faut dire que les éditeurs auront sans doute intérêt à rentrer dans le rang. Avec un chargement plus rapide et un format facile à exploiter sur mobile, les plateformes qui participent au projet vont sans aucun doute mettre les bons élèves en avant, Google en tête. On imagine alors que les éditeurs n'hésiteront pas très longtemps avant de sauter le pas, d'autant plus que Google News devrait lui aussi exploiter ce format à terme.

Car la mise en place va être progressive et les partenaires insistent sur le fait qu'il ne s'agit là que d'une première étape. De son côté, Twitter indique par exemple qu'il en dira plus à sa conférence dédiée aux développeurs, Flight, le 21 octobre prochain.

Partenaires AMP Project

De son côté, l'équipe du projet indique que les résultats sont concluants, avec des pages qui se chargent de 15 % à 85 % plus rapidement. Nuzzel parle de son côté d'un chargement en moins de 500 millisecondes pour une page qui demandait trois secondes précédemment.

Des chiffres notamment atteints grâce à une phase de pré-rendu qui favorise les éléments au-dessus de la ligne de flottaison et qui ne sont pas « coûteux » au niveau du CPU afin d'éviter tout problème de performances. Google met aussi ses CDN (Content Delivery Network) à disposition pour accélérer l'accès aux fichiers, mais d'autres sont invités à le faire. Ceux qui veulent participer au projet ou en savoir plus peuvent d'ailleurs le faire en passant par ce formulaire.

23

Écrit par David Legrand

Tiens, en parlant de ça :

Sommaire de l'article

Introduction

L'expérience du contenu mobile est exécrable, il faut tout revoir

AMP : un projet ouvert et open source pour convaincre de manière large

La question de la publicité, des paywalls et des statistiques

Des partenaires déjà nombreux, une mise en place qui va prendre du temps

Commentaires (23)


C’est pas pour dire du mal mais c’est ça l’alternative susceptible de rendre la publicité acceptable en ces temps d’adblockers tous azimuts ?

Et vu les éditeurs, timeo danaos et dona ferentes, tout ça…

&nbsp; <img data-src=" />


quoi, quoi quoi ???

&nbsp;



&nbsp;l’expérience utilisateur sur mobile est décevante ?

&nbsp;



&nbsp;on nous a vendu du rêve avec la 4G alors ?


T’inquiètes, la 5G arrive bientôt pour nous sauver de cette mauvaise passe&nbsp;!


Le retour du WAP !!! <img data-src=" />


Si je comprends bien d’un côté il y a ceux qui utilisent l’existant et de l’autre ceux qui veulent redéfinir un “standard”… Si c’est bien ça, je vais pouvoir sortir le porncorn <img data-src=" />


Avec des bonnes pratique de programmation on à déjà d’excellents résultats sur mobile.

&nbsp;



&nbsp;Il suffit de regarder les navigateurs genre Opera Mini qui zippent tout le contenu sur un serveur pour envoyer un seul gros fichier via une seule connexion plutôt que dix connections vers static.monsite.com ads.google.com supermoteurjsalamode.github.com… Avec bien-sur une page blanche au final si une seule de ces connexion échoue.

&nbsp;



&nbsp;On peut faire pareil sur son propre site, sans passer par le Man in The Middle d’opera ou de Chrome ni nécessiter de navigateur particulier !


tu veux tuer la poule aux oeufs de Google ? tu vas avoir des problèmes !


+1, malheureusement les dev’ font ce qu’on leur dit, à savoir placer le plus de régies pub et de trackers sur une page.



Si déjà on pouvait revenir à ce qui existe, et fonctionne parfaitement, comme par exemple une url pour les static, une url pour le contenu et une url pour la pub.



Vu les latences des connexions mobiles, plus de 3 url différentes et tout rame.


La faute aux marketeux, aux designers et aux chefs de projet incompétents… ;)



“De mon temps” (au début des années 2000), on estimait qu’une home performante devait faire moins de 50ko pour toucher convenablement l’utilisateur. Désormais, souvent, on sert 5Mo, 37 URLs, 800ko de js en 14 fichiers de lib’s.



Le web des bobos chics parisiens qui ont le câble quoi…

La plupart des sites choisissent eux même de réunir les conditions (techniques) de leur echec.



/vieuxCon off.


Le site du Monde, en la matière, fait office de parfait exemple de l’horreur. Même sur ordi c’est naze, mais alors sur mobile, c’est juste l’enfer …


Oui, le pire etant la pub video, le pop up avec une croix tres petite pour que tu cliques dessus. j’ai pas vérifié si ça distingue le wifi et la 3g/4g, mais je me retrouve forcé à utiliser ads block. Lemonde.fr est une calamité et la bannière des cookies est désespérante, on perd 1cm de lecture. ect…

Le problème vient d’une mauvaise idée qui aurait pu etre evité dans 100% des cas et une bonne communication avec le public comme Next Inpact.



Je doute que cela change quoique ce soit, si le site veut qu’on clique sur une pub ou qu’on regarde une video, ben il le fait.


J’ai bien lu l’article, mais j’ai pas compris à quoi ça sert leur AMP HTML. Parce que en 2015 sur un téléphone moderne (de moins de4 ans quoi), n’importe quel site écrit proprement en HTML se charge très bien non ? C’est une question de volonté et non de technique je suppose.


Un marketeux qui arrive à vendre son produit n’est pas incompétent.

&nbsp;Un designer conçoit un rendu qui plait au client n’est pas incompétent.

&nbsp;Un chef de projet qui mène son projet en suivant le cahier des charge n’est pas incompétent.

&nbsp;Tu voulais plutôt dire que les client ne sont pas prêt à mettre la main à la poche / ficeler un cahier des charges ?


De ce que j’ai compris de l’initiative c’est que AMP HTML est un framework pour forcer les devquideveloppentaveclespieds à rentrer des cases tracées de bonnes pratiques.

&nbsp;



Solution extrème. on pourrait trouver moins extrême: dire que si ton navigateur refuse de charger plus de 3 ressources externes. hop gagné. ah c’est plus extrême encore ? :)


C’est exactement ce à quoi j’ai pensé en commençant la lecture de l’article :)








Blood_Man a écrit :



Un marketeux qui arrive à vendre son produit n’est pas incompétent.

&nbsp;Un designer conçoit un rendu qui plait au client n’est pas incompétent.

&nbsp;Un chef de projet qui mène son projet en suivant le cahier des charge n’est pas incompétent.

&nbsp;Tu voulais plutôt dire que les client ne sont pas prêt à mettre la main à la poche / ficeler un cahier des charges ?





Si les trois négligent les conditions techniques (la réalité) qui permettront à ~100% des clients potentiels d’accéder convenablement au site / à l’outil : Oui, ils sont incompétents (dans leur domaine appliqué au web). S’ils se mettent en condition de servir leur site/outil/whatever à 15% des internautes les mieux équipés, ce sont en outre de parfaites andouilles, amha…



&nbsp;J’ai tellement vu ce genre d’erreurs chez les grands comptes, notamment. Avec des “pas besoin d’investir dans le web mobile, nous n’avons pas de visiteurs sur ces sites”, alors que le site en question est une plaie inatteignable en mobile, par exemple.



&nbsp;Donc, quand on réunit par soi-même les conditions propices à son échec, je ne trouve pas abusif de parler d’incompétence. En mode grognon/vieux con, cela va de soi.&nbsp; :)



Le mieux est la page du projet (cf lien de l’article), visiblement hébergée sur un serveur surchargé, qui effectue 111 requêtes (dont la majorité sont des images) en 7.5sec chez moi – certes, je n’ai pas la fibre, mais quand même !








DniMam a écrit :



Oui, le pire etant la pub video, le pop up avec une croix tres petite pour que tu cliques dessus. j’ai pas vérifié si ça distingue le wifi et la 3g/4g, mais je me retrouve forcé à utiliser ads block. Lemonde.fr est une calamité et la bannière des cookies est désespérante, on perd 1cm de lecture. ect…



 Le problème vient d'une mauvaise idée qui aurait pu etre evité dans 100% des cas et une bonne communication avec le public comme Next Inpact.       






 Je doute que cela change quoique ce soit, si le site veut qu'on clique sur une pub ou qu'on regarde une video, ben il le fait.








 d'ailleurs je me demande à quoi sert cette bannière ... car quand tu cliques sur le site, tu as déjà un cookie voire plusieurs qui sont déposé .. pour t'informer que si on continue on accepte ça , sauf qu'on s'est déjà fait enfanté de cookies monstrueux.      

&nbsp;

Par ailleurs , sourceforge fait un truc intéressant, il redirige carrément sur une page dédiée pour accepter les cookies



&nbsp;

&nbsp;

&nbsp;

&nbsp;





jpaul a écrit :



J’ai



bien lu l'article, mais j'ai pas compris à quoi ça sert leur AMP HTML.      



Parce que en 2015 sur un téléphone moderne (de moins de4 ans quoi),

n’importe quel site écrit proprement en HTML se charge très bien non ?

C’est une question de volonté et non de technique je suppose.






se charge "très bien" ( ça reste à prouver ) , mais .. à quel prix ( data / Mo )&nbsp; et quelle lenteur !


En faite j’avais mal compris, je pensais plutôt dans le cas où ces 3 personnes font partie d’un prestataire et où le client n’est donc pas un particulier. Si ils arrivent à vendre un produit (même pourri/inutilisable) ils ont tout gagné (enfin sauf leur image de marque ^^).


Perso, ma navigation web sur mobile me convient en 4G. Franchement entre 1sec de chargement et 800ms, qu’est-ce que j’en ai à foutre xD

&nbsp;

&nbsp;Plus sérieusement, j’utilise plus d’apps qu’autre chose (et c’est à ça qu’est sensé ressembler un mobile tout compte fait, des apps ! )


d un autre cote, les app, c est un gd retour en arrière ds les années 8090 où tu devais écrire ton programme spécifiquement pour chq système. Une des idées initiales du web, c était d avoir un support unique pour tous, à la LOTR: “one to rule them all” ;)

&nbsp;Mais le web a été vendu aux commerciaux, et on a tellement de pubs et autres distractions qu une page devient illisible sans adblocker. C est pas restrictif aux smartphones, prenez un PC de 10-15 ans qui affichait très bien les sites a l époque. Aujourd’hui’ hui, sans adblocker, l expérience est catastrophique: rallentissement énormes voir sites bloques a cause des pub videos mais aussi tous les googleanalytics, liens facebook & twitter, etc.

Je rêve de sites bien programmés, où tous ces liens externes seraient asynchrones (non bloquants) et optionnels cad que le browser puisse choisir proprement&nbsp; d afficher que le contenu du site.

&nbsp;La seule solution qu on a, c est les bloqueurs de pub et de scripts mais qui sont parfois si agressifs que la page ne s affiche plus (notamment à cause de liens synchrones)

&nbsp;(j utilise Firefox Portable, sur mon PC principal, portable ou tablette Windows, avec uBlock origin, Privacy Badger et Disconnect et NoScripts +/- actifs )








Vieux_Coyote a écrit :



Le site du Monde, en la matière, fait office de parfait exemple de l’horreur. Même sur ordi c’est naze, mais alors sur mobile, c’est juste l’enfer …





Ce qui&nbsp; est l’enfer c’est surtout la qualité et l’orientation des articles… Faut prononcer ça à l’italienne : l’immonde!!!



C’est la grande question, comment sommes-nous arrivé à cette bétise ? La prochaine etape ce sera de s’inscrire pour aller sur internet comme une extension de la hadopi afin de surveiller nos usages et proposer un contenu licite adapté en fonction de notre age via une carte d’identité ?



ça commence grosso modo “en continuant la navigation sur notre site vous acceptez les cookies” et la suite en novlangue donne ça : “collecte de données pour améliorer votre experience de navigation”



autant mettre une boite de dialogues dès l’ouverture du navigateur avec un petit cours sur les virus et la vie privée, financement d’un site web avec la pub… avec une liste de solutions genre Noscript, tor, diapora…