Les mobiles (smartphone, tablettes,…) font aujourd’hui partie de notre quotidien. Il ne se passe pas une seconde (j’exagère peut être un peu) sans que nous nous retrouvions à pianoter sur notre téléphone mobile ou tablette à la recherche d’articles de presse sur internet, du dernier film sorti au cinéma, du score du dernier classico (Ici c’est PARIS !) ou encore des dernières news sur Facebook, Google+, Twitter, … Bref, nous consommons énormement de contenus sur internet via nos appareils mobiles et ça les éditeurs de site d’informations l’ont bien compris…tout comme GOOGLE (enfin, Alphabet) d’ailleurs.

Le hic, c’est qu’il n’est pas toujours évident de consulter ces contenus en lignes en raison de fortes latences du côté des technologies mobiles (Edge, 3G+ ou 4G+ pour les plus chanceux). Et dans une société comme la notre où l’on veut TOUT dans la seconde même, de nombreux utilisateurs se découragent très peu de temps après avoir cliqué sur un lien.

Chaque fois qu’une page met du temps à se charger, les sites d’informations perdent des mobinautes et surtout l’opportunité de faire des bénéfices via la publicité et les contenus sponsorisés.

C’est pour résoudre tous ces problèmes (ou presque) que Google a lancé le projet AMP, en partenariat avec de célèbres éditeurs de contenus en ligne (BBC, Buzzfeed, Mashable, The Economist, Les Echos,…) et des entreprises du domaine des nouvelles technologies (Google, Adobe, LinkedIn, Twitter, WordPress,…)

Objectif affiché : permettre un chargement instantané de contenus multimédias (vidéos, animations, publicités,…) sur tout type d’appareil mobile (smartphone, tablette,…).

Le projet utilise un framework appelé AMP HTML, qui permettra  une meilleur gestion du cache et des performances des navigateurs. Il suffira pour intégrer le framework d’insérer un petit fichier Javascript disponible à l’adresse https://cdn.ampproject.org/v0.js, sans oublier d’insérer les bonnes métadonnées (viewport, canonical,…)

<!doctype html> <html ⚡> <head>   <meta charset="utf-8">   <link rel="canonical" href="hello-world.html" >   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">   <script src="https://cdn.ampproject.org/v0.js" async></script>   <style>body {opacity: }</style><noscript><style>body {opacity: 1}</style></noscript> </head> <body>Hello World!</body> </html>

Ce bout de code permet d’inclure :

  • La libraire Javascript de l’AMP
  • Le validateur AMP qui permettra (certainement) à Google de distinguer les pages conformes aux spécificationx du projet (ceci pourrait, dans l’avenir, jouer dans le référencement)
  • Des composants HTML beaucoup plus spécifiques aux contenus (autres que de simples balises div qui peuvent dire tout et n’importe quoi)

 

Plus d’informations