Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
userADgents
ACCELERATED MOBILE PAGES
Comprendre la notion d’AMP, pour
des pages web plus rapides sur mobile
MOBILI


tea t...
DES INTERNAUTES ABANDONNENT
UN SITE LORSQUE LE CHARGEMENT
EXCÈDE 3 SECONDES !
53%
LE CHIFFRE
Source : DoubleClick by Google
DANS UN MONDE MOBILE FIRST,
OÙ IL Y A + DE MOBINAUTES QUE
D’INTERNAUTES, IL EST TEMPS D’OPTIMISER
LA LECTURE DES PAGES WEB...
GOOGLE A DONC LANCÉ LE FORMAT ‘AMP’
QUI PERMET D’AFFICHER BEAUCOUP
PLUS RAPIDEMENT UNE PAGE WEB SUR MOBILE
UNE INITIATIVE ...
I

CONCRÈTEMENT, QU’EST CE QUE C’EST ?
COMMENT ÇA SE TRADUIT ?
Lors d’une requête sur Google sur terminal mobile,
les sites disposant de la pastille & mention AM...
POUR QUELS SITES ?
Il s’agit aujourd’hui principalement de sites d’informations : actualités généralistes, actualités
spor...
L’internaute qui sélectionne
un contenu AMP n’est en
fait pas redirigé vers le site
à l’origine du contenu : la
lecture se...
II

LES BÉNÉFICES DE L’AMP
4
fois 

+ rapides
10fois
- de données
PAR RAPPORT AUX PAGES NON AMP !
15à 

85%
de gain de vitesse 

d’affichage
UNE AUGMENTATION SIGNIFICATIVE 

DE VISIBILITÉ
EN CRÉANT DES ARTICLES AMP, LES ÉDITEURS / MARQUES VERRONT LEURS
CONTENUS, ...
S’IMPOSER DANS LA GUERRE DU
RÉFÉRENCEMENT
GOOGLE A DEPUIS QUELQUES ANNÉES ANNONCÉ LA PRIORISATION DES SITES
MOBILE-FRIENDL...
UNE MEILLEURE EXPÉRIENCE

UTILISATEUR
UN CONFORT DE LECTURE EN TOUTE MOBILITÉ
ENTRAINANT DAVANTAGE DE CONTENUS CONSULTÉS
III

PARLONS TECHNIQUE
3 PARTIES COMPOSENT L’AMP :
ET TECHNIQUEMENT ?
Elle garantit un rendu
rapide des pages AMP
HTML. Et permet d’intégrer
dans...
AMP HTML
ET TECHNIQUEMENT ?
Même si la plupart des balises sur une page
AMP HTML sont des balises HTML standard,
certaines...
AMP JS
ET TECHNIQUEMENT ?
La bibliothèque AMP JS comprend toutes les
meilleures pratiques d'AMP en termes d’efficacité. Ell...
AMP CACHE
ET TECHNIQUEMENT ?
Toujours afin d’optimiser la vitesse d’affichage Google fournit gratuitement un CDN « Content
D...
IV

LES COMPLEXITÉS DE L’AMP
NOUVELLE
VERSION DU SITE
ATTENTION
DUPLICATION
PUBLICITÉ
& AMP
ANALYTICS
& AMP
L’AMP est un projet
complexe qui nécessite
...
VOUS SOUHAITEZ ÊTRE ACCOMPAGNÉ DANS
VOTRE STRATÉGIE MOBILE FIRST / AMP ?
Rencontrons-nous !
userADgents est spécialisée da...
userADgents
Nicolas Benoist
CTO
n.benoist@useradgents.com
Solange Derrey
Directrice du Pôle Trendwatchers
& de la Communic...
userADgents
RETROUVEZ NOS
AUTRES ÉTUDES
SUR
SLIDESHARE
ENVIE D’UNE
ÉTUDE
SUR-MESURE ?
DÉCOUVREZ 

NOTRE
CATALOGUE
DE FORMA...
USERADGENTS & JOSHFIRE
AGENCE DIGITALE
MOBILE FIRST USER CENTRIC
AGENCE CONSEIL
EN INNOVATION
userADgents est spécialisée ...
userADgents
FABRIQUE 

DE DISPOSITIFS 

DIGITAUXINNOVANTS
COMPLÉMENTAIRES
DEUXAGENCES
Hier l’enjeu était de s’adapter au w...
…DU CONSEIL À LA COMMERCIALISATION…
Analyse
comportementale
Ateliers d’idéation
Recherche de
concepts innovants
User journ...
userADgents
SOYEZ UTILES

& COHÉRENTS
CULTIVEZ VOTRE
DIFFÉRENCE
Le digital et vos clients sont en
constante mouvance ! Nou...
MobiliTeaTime #13 : Accelerated Mobile Pages
Upcoming SlideShare
Loading in …5
×

MobiliTeaTime #13 : Accelerated Mobile Pages

7,470 views

Published on

L'Accelerated Mobile Page (AMP) est le format créé par Google permettant d’afficher beaucoup plus rapidement une page web ou du contenu sur mobile.

On fait le point sur cette notion dans ce guide pratique !

Au programme :

• Présentation de l'AMP
• Les bénéfices apportés par ce format
• Le fonctionnement technique
• Les complexités à prendre en compte

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

MobiliTeaTime #13 : Accelerated Mobile Pages

  1. 1. userADgents ACCELERATED MOBILE PAGES Comprendre la notion d’AMP, pour des pages web plus rapides sur mobile MOBILI
 
tea time #13
 
 userADgents GUIDE PRATIQUE
  2. 2. DES INTERNAUTES ABANDONNENT UN SITE LORSQUE LE CHARGEMENT EXCÈDE 3 SECONDES ! 53% LE CHIFFRE Source : DoubleClick by Google
  3. 3. DANS UN MONDE MOBILE FIRST, OÙ IL Y A + DE MOBINAUTES QUE D’INTERNAUTES, IL EST TEMPS D’OPTIMISER LA LECTURE DES PAGES WEB SUR MOBILE ! LE CONSTAT
  4. 4. GOOGLE A DONC LANCÉ LE FORMAT ‘AMP’ QUI PERMET D’AFFICHER BEAUCOUP PLUS RAPIDEMENT UNE PAGE WEB SUR MOBILE UNE INITIATIVE OPEN SOURCE : AMP PROJECT
  5. 5. I
 CONCRÈTEMENT, QU’EST CE QUE C’EST ?
  6. 6. COMMENT ÇA SE TRADUIT ? Lors d’une requête sur Google sur terminal mobile, les sites disposant de la pastille & mention AMP figurent dans les résultats de recherche. 
 Il est facile de swiper parmi le carrousel pour voir tous les sites AMP abordant le sujet recherché. Ce carrousel apparaît avant les résultats traditionnels et est donc très visible.
 Une fois sur le site souhaité, la page charge instantanément (en moins de 2 secondes en général) et il est facile de scroller sans attendre que le contenu de la page charge. Pour le moment ce type d’affichage « carrousel » n’est appliqué que pour les sites d’actualités.
  7. 7. POUR QUELS SITES ? Il s’agit aujourd’hui principalement de sites d’informations : actualités généralistes, actualités sportives, technologiques. AMP convient aux sites qui ont du contenu régulièrement mis à jour ou publié, des actualités chaudes. Depuis août 2016, Google a lancé AMP pour les sites e-commerce (uniquement pour les pages de listing et les pages produit), cela devrait donc se développer. À terme, tous les sites devraient avoir des pages en AMP pour améliorer l’expérience de lecture ! Ebay est le 1er site e-commerce à avoir développé l'AMP.Les sites d’actualités en AMP
  8. 8. L’internaute qui sélectionne un contenu AMP n’est en fait pas redirigé vers le site à l’origine du contenu : la lecture se fait directement sur le domaine de Google ! HTML AMP TRÈS LIGHT PRIORISATION LECTURE AU SEIN DU DOMAINE GOOGLE Avec des pages AMP, lorsqu’un contenu est consulté depuis les résultats de Google, c’est sa version AMP qui est systématiquement appelée à la place de la page HTML classique. Il s’agit en fait de pages HTML très légères, auxquelles s’ajoute le système de cache CDN et une réduction du Javascript. L’image principale et le texte sont chargés en premier, au lieu de la publicité et des scripts en temps normal. COMMENT ÇA MARCHE ?
  9. 9. II
 LES BÉNÉFICES DE L’AMP
  10. 10. 4 fois 
 + rapides 10fois - de données PAR RAPPORT AUX PAGES NON AMP ! 15à 
 85% de gain de vitesse 
 d’affichage
  11. 11. UNE AUGMENTATION SIGNIFICATIVE 
 DE VISIBILITÉ EN CRÉANT DES ARTICLES AMP, LES ÉDITEURS / MARQUES VERRONT LEURS CONTENUS, AUPARAVANT ISOLÉS SUR DES BLOGS, MIS EN AVANT DIRECTEMENT SUR GOOGLE.
  12. 12. S’IMPOSER DANS LA GUERRE DU RÉFÉRENCEMENT GOOGLE A DEPUIS QUELQUES ANNÉES ANNONCÉ LA PRIORISATION DES SITES MOBILE-FRIENDLY SUR SES SERPS. EN TOUTE LOGIQUE, LE MOTEUR DE RECHERCHE ENTEND ÉGALEMENT MIEUX RÉFÉRENCER LES SITES AMP !
  13. 13. UNE MEILLEURE EXPÉRIENCE
 UTILISATEUR UN CONFORT DE LECTURE EN TOUTE MOBILITÉ ENTRAINANT DAVANTAGE DE CONTENUS CONSULTÉS
  14. 14. III
 PARLONS TECHNIQUE
  15. 15. 3 PARTIES COMPOSENT L’AMP : ET TECHNIQUEMENT ? Elle garantit un rendu rapide des pages AMP HTML. Et permet d’intégrer dans des pages AMP des composants dynamiques et asynchrones tels que les analytics, les frameworks de publicités, et bientôt les tunnels ecommerce. Une déclinaison du HTML comportant certaines restrictions pour assurer des performances fiables, ainsi que certaines extensions permettant de créer directement du contenu riche sans javascript ou CSS complexe. Il fournit les pages AMP HTML sur un réseau CDN ultra rapide permettant de gagner en temps de réponse sur des data- center répartis sur le monde entier. LE AMP HTML LA BIBLIOTÈQUE AMP JS LE GOOGLE AMP CACHE
  16. 16. AMP HTML ET TECHNIQUEMENT ? Même si la plupart des balises sur une page AMP HTML sont des balises HTML standard, certaines sont remplacées par des balises AMP spécifiques. Ces éléments personnalisés, appelés composants AMP HTML, permettent d'implémenter facilement et efficacement des modèles communs. Exemple à droite, une publicité est composée uniquement d’une balise <amp-ad> qui permet d’afficher une bannière très rapidement sur la page. https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
  17. 17. AMP JS ET TECHNIQUEMENT ? La bibliothèque AMP JS comprend toutes les meilleures pratiques d'AMP en termes d’efficacité. Elle gère le chargement des ressources et contient les balises personnalisées. L'une des plus grandes optimisations est la désynchronisation de tout ce qui provient de ressources externes, de sorte que rien sur la page ne bloque le rendu des différents éléments. Toujours dans une logique de gain de performance, on peut citer également le système de « sandbox » pour tous les iframes, la pré-définition de la disposition de chaque élément sur la page avant le chargement des ressources et la désactivation des sélecteurs CSS lents.
  18. 18. AMP CACHE ET TECHNIQUEMENT ? Toujours afin d’optimiser la vitesse d’affichage Google fournit gratuitement un CDN « Content Delivery Network » de type « proxy-cache » qui sauvegarde une version cache des pages AMP afin d’améliorer la performance d’affichage. Avec Google AMP Cache, tous les fichiers JS et toutes les images se chargent à partir d'une source, laquelle utilise HTTP 2.0 pour une efficacité optimale. Ce cache intègre également un système de validation qui vérifie le bon fonctionnement de la page et sa non dépendance vis-à-vis de ressources externes. Le lien des pages AMP est donc aujourd’hui un lien www.google.fr/amp
  19. 19. IV
 LES COMPLEXITÉS DE L’AMP
  20. 20. NOUVELLE VERSION DU SITE ATTENTION DUPLICATION PUBLICITÉ & AMP ANALYTICS & AMP L’AMP est un projet complexe qui nécessite de développer une nouvelle version du site. Il faut veiller à ce que le contenu ne soit pas dupliqué avec la version mobile existante (gestion des Urls canoniques) LES COMPLEXITÉS D’AMP Certains réseaux publicitaires ne sont pas compatibles AMP Le tracking analytics n’est pas aussi complet qu’avec une page HTML, même si de nombreux outils sont déjà compatibles (Google Analytics, Comscore…) AMP est un projet récent dont on ne connait pas encore les évolutions ni la pérennité. Il est intéressant de mener ce projet très prometteur mais conserver son site mobile en parallèle est plus prudent. VIABILITÉ
  21. 21. VOUS SOUHAITEZ ÊTRE ACCOMPAGNÉ DANS VOTRE STRATÉGIE MOBILE FIRST / AMP ? Rencontrons-nous ! userADgents est spécialisée dans la conception, le développement et la promotion de sites et d’applications pour smartphones, tablettes et objets connectés.
  22. 22. userADgents Nicolas Benoist CTO n.benoist@useradgents.com Solange Derrey Directrice du Pôle Trendwatchers & de la Communication s.derrey@useradgents.com É T U D E R É A L I S É E P A R T R E N D W A T C H E R S Le pôle études digitales et formations de userADgents JE M’INSCRIS À LA NEWS JE FOLLOW SUR TWITTER Et pour ne rien manquer des prochaines études ! www.useradgents.com
  23. 23. userADgents RETROUVEZ NOS AUTRES ÉTUDES SUR SLIDESHARE ENVIE D’UNE ÉTUDE SUR-MESURE ? DÉCOUVREZ 
 NOTRE CATALOGUE DE FORMATIONS INTÉRESSÉ PAR UNE ÉTUDE SUR-MESURE POUR VOTRE ENTREPRISE ? N’HÉSITEZ PAS À CONSULTER NOTRE CATALOGUE DE FORMATIONS VOIR NOS 20 FORMATIONSDÉCOUVRIR NOS OFFRESEN VOIR PLUS ! Digitalisation du point de vente, smartwatches, smart home, Apple TV… découvrez toutes nos études en libre accès sur Slideshare ! Découvrez nos 3 offres d’études sur- mesure : étude sectorielle, étude de tendances et audit de marque. A partir de 5000 € H.T, sur devis Envie d’en savoir plus sur le mobile et l’innovation ? 
 Trouvez votre bonheur parmi nos 20 formations animées par des experts du domaine. A partir de 2000 € H.T pour 1 à 15 personnes
  24. 24. USERADGENTS & JOSHFIRE AGENCE DIGITALE MOBILE FIRST USER CENTRIC AGENCE CONSEIL EN INNOVATION userADgents est spécialisée dans la conception, le développement et la promotion de sites et d’applications pour smartphones, tablettes et objets connectés. Joshfire, une équipe de designers et d’ingénieurs qui conçoivent de A à Z des objets connectés et des expériences interactives sur mesure.
  25. 25. userADgents FABRIQUE 
 DE DISPOSITIFS 
 DIGITAUXINNOVANTS COMPLÉMENTAIRES DEUXAGENCES Hier l’enjeu était de s’adapter au web mobile, aujourd’hui & demain il sera d’embrasser ce nouveau monde ultra connecté où terminaux mobiles & objets communiquent.  Notre complémentarité nous permet d’imaginer des expériences transversales à ces dispositifs et de répondre aux nouvelles problématiques des marques. 1 ÈRE 1 FORMANTÀELLESDEUXLA: USERADGENTS & JOSHFIRE
  26. 26. …DU CONSEIL À LA COMMERCIALISATION… Analyse comportementale Ateliers d’idéation Recherche de concepts innovants User journey Ergonomie Tests utilisateurs Ateliers de co-création Design des interfaces Design industriel Objets connectés Applications natives (iOS/Android/Windows) Responsive & Adaptive Design Back-end & APIs Arduino / Raspberry Pi Réalité virtuelle Chat bots Publicité mobile Couponing SMS/Push Notif App Store Optimization Mobile-to-store Interactions in-store Beacons Vidéo Etudes fonctionnelles Prototypages Spécifications Suivi d’industrialisation & de production Etude de tendances Audit de marque Benchmarks Accompagnement stratégique Recherche & Innovation DESIGN PROMOTION CRM UX / IDÉATION DÉVELOPPEMENT PROTOTYPAGE & INDUSTRIALISATION CONSEIL
  27. 27. userADgents SOYEZ UTILES
 & COHÉRENTS CULTIVEZ VOTRE DIFFÉRENCE Le digital et vos clients sont en constante mouvance ! Nous aimons faire bouger les choses et secouer les esprits pour sortir des idées reçues et se challenger constamment. SENS EFFERVESCENCE ESSENCE Dans un environnement de plus en plus concurrentiel et un contexte de surexposition des consommateurs, chaque marque doit cultiver sa différence et revendiquer son ADN et ses valeurs. Nous pensons que le digital ne doit pas être gadget ! Nous voulons créer des dispositifs qui ont du sens pour vos clients. OUVREZ GRAND 
 LES YEUX …ANIMÉES PAR UNE VISION COMMUNE !

×