Google AMP - Introduction

Google Accelerated Mobile Pages(Google-AMP) est le nouveau projet open source de Google spécialement conçu pour créer des pages Web légères en utilisant amp html. L'objectif principal de ce projet est de s'assurer que le code AMP fonctionne correctement et se charge rapidement sur tous les appareils possibles tels que les smartphones et les tablettes.

AMP n'est qu'une extension du HTML standard. Peu de balises HTML ont changé et AMP a ajouté des restrictions sur leur utilisation. Dans ce chapitre, nous allons lister les balises html qui ont été modifiées et les restrictions qui leur sont ajoutées. Les balises qui traitent du chargement de ressources externes, par exemple des images, css, js, soumission de formulaires, vidéo, audio, etc., sont modifiées.

De nombreuses nouvelles fonctionnalités ont également été ajoutées à amp, par exemple amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-ad, amp-lightbox et bien plus encore qui peuvent être utilisées directement dans les pages html. Reste d'autres qui sont destinés à l'affichage sont utilisés tels quels.

Avec tous ces changements et nouvelles fonctionnalités, AMP promet de donner un chargement plus rapide, de meilleures performances pour les pages lorsqu'elles sont utilisées dans un environnement en direct.

Lorsque vous recherchez quelque chose dans la recherche Google sur votre mobile, l'affichage qui est vu dans le carrousel Google en haut sont principalement des pages amp, comme indiqué ci-dessous -

Lorsque vous cliquez sur la page AMP, l'URL que vous obtenez dans la barre d'adresse est la suivante -

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

L'URL ne provient pas directement de l'éditeur, mais Google la pointe vers sa propre copie sur le serveur Google qui est une version en cache et permet de rendre le contenu plus rapide par rapport à une page non-amp. Cela se produira uniquement sur les appareils ou en mode émulateur Google.

Exemple de page d'ampli

Un exemple de page d'ampli est présenté ci-dessous -

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

À faire et à ne pas faire dans une page AMP

Comprenons certaines choses à faire et à ne pas faire qu'un programmeur doit suivre dans une page AMP.

Balises obligatoires

Il y a quelques balises obligatoires à inclure dans une page d'ampli comme indiqué ci-dessous -

Nous devons nous assurer qu'il y a un amp ou ⚡ ajouté à la balise html comme indiqué ci-dessous -

<html amp>
   OR
<html ⚡>

Les balises <head> et <body> doivent être ajoutées à la page html.
Les balises meta obligatoires suivantes doivent être ajoutées dans la section head de la page; sinon ça échouera pour la validation de l'ampli

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

Lien de rel = "canonical" à ajouter à l'intérieur de la balise head

<link rel = "canonical" href = "./regular-html-version.html">

Étiquette de style avec ampli-passe-partout -

<style amp-boilerplate>
   body{
      -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

Etiquette Noscript avec ampli-passe-partout -

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

Très important la balise de script amp avec async ajouté comme indiqué ci-dessous -

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

Si vous souhaitez ajouter du CSS personnalisé à la page, veuillez noter ici que nous ne pouvons pas appeler de feuille de style externe dans les pages amp. Pour ajouter du CSS personnalisé, tout votre CSS doit aller ici comme indiqué -

<style amp-custom>
   //all your styles here
</style>

L'attribut amp-custom doit être ajouté à la balise de style.

Scripts pour les composants AMP

Notez que les scripts avec src et type = ”text / javascript” ne sont strictement pas autorisés dans une page amp. Seules les balises de script asynchrones et liées aux composants amp peuvent être ajoutées dans la section head.

Cette section répertorie quelques scripts utilisés pour les composants d'ampli comme indiqué ci-dessous -

amp-ad

<script async custom-element = "amp-ad" 
   src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>

amp-iframe

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

Notez que le script a l'attribut async et custom-element avec le nom du composant amp à charger. Amp valide les balises de script en fonction de la propriété async et d'élément personnalisé et n'autorise pas le chargement d'un autre script. Ça prendtype=application/json que nous avons ajouté dans l'exemple de fichier comme indiqué ci-dessous

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

Le script ci-dessus peut être utilisé avec d'autres amp-components si nécessaire, par exemple pour amp-analytics.

Balises HTML

Jusqu'à présent, nous avons vu les balises obligatoires requises dans la page amp. Nous allons maintenant discuter des éléments HTML qui sont autorisés / non autorisés et des restrictions qui leur sont imposées.

Voici la liste des balises HTML autorisées / non autorisées -

Sr.Non	Balise HTML et description
1	img Cette balise est remplacée par amp-img. L'utilisation d'une balise img directe n'est pas autorisée dans une page AMP
2	video Remplacé par amp-video
3	audio Remplacé par amp-audio
4	iframe Remplacé par amp-iframe
5	object Interdit
6	embed Interdit
sept	form Peut être utilisé comme <form>. Nous devons ajouter le script pour travailler avec le formulaire dans une page AMP. Example − `<script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>`
8	Input elements `Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> are not allowed`
9	<fieldset> Permis
dix	<label> Permis
11	P, div, header,footer,section Permis
12	button Permis
13	a La balise <a> est autorisée avec la condition suivante, le href ne doit pas commencer par javascript. S'il est présent, la valeur d'attribut cible doit être _blank.
14	svg Interdit
15	meta Permis
16	Link Permis. Mais ne permet pas de charger une feuille de style externe.
17	style Permis. Il doit avoir un attribut amp-standard ou amp-custom.
18	base Interdit
19	noscript Autorisé

commentaires

Les commentaires html conditionnels ne sont pas autorisés. Par exemple -

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

Événements HTML

Les événements que nous utilisons dans les pages html comme onclick, onmouseover ne sont pas autorisés dans une page AMP.

Nous pouvons utiliser les événements comme suit -

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Voici un exemple d'événement utilisé sur l'élément d'entrée -

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

L'événement utilisé est déclenché par des entrées.

Des classes

Vous ne pouvez pas avoir de classes dans vos pages avec un préfixe comme -amp- or i-amp-. En outre, vous pouvez utiliser le nom de la classe selon vos besoins.

Ids

Vous ne pouvez pas avoir d'identifiants pour vos éléments html préfixés par -amp ou i-amp-. En outre, vous pouvez utiliser des identifiants pour votre élément html selon vos besoins.

Liens

Avoir JavaScript en href n'est pas autorisé dans les pages amp.

Example

<a href = "javascript:callfunc();">click me</a>

Feuilles de style

Les feuilles de style externes ne sont pas autorisées dans la page AMP. Il est possible d'ajouter les styles requis pour la page à l'intérieur -

<style amp-custom>
   //all your styles here
</style>

La balise de style doit avoir amp-custom attribut ajouté.

@-règles

Les @ -rules suivantes sont autorisées dans les feuilles de style -

@ font-face, @keyframes, @media, @page, @ prend en charge. @ l'importation ne sera pas autorisée. Le support pour le même sera ajouté à l'avenir.
Les @keyframes peuvent être utilisées dans <styleamp-custom> . S'il y a trop de @keyframes, il sera bon de créer <styleamp-keyframes> et appelez cette balise à la fin du document amp.
Les noms de classe, les identifiants, les noms de balises et les attributs ne doivent pas être précédés du préfixe -amp- et i-amp- car ils sont utilisés en interne dans le code amp, ce qui peut provoquer des conflits s'ils sont également définis sur la page au moment de l'exécution.
!important La propriété n'est pas autorisée dans le style car amp veut contrôler la taille de l'élément chaque fois que nécessaire.

Polices personnalisées

Les feuilles de style pour les polices personnalisées sont autorisées dans les pages AMP.

Example

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

Les polices sont ajoutées à la liste blanche des origines suivantes qui peuvent être utilisées dans les pages AMP.

Fonts.com - https://fast.fonts.net
Google Fonts - https://fonts.googleapis.com
Font Awesome - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (remplacez kitId en conséquence)

Note - Les polices personnalisées @ font-face sont autorisées dans les pages amp.

Example

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

Durée d'exécution AMP

L'environnement d'exécution de l'ampli est décidé une fois le fichier de base de l'ampli chargé -

<script async src = "https://cdn.ampproject.org/v0.js"></script>

Le fichier de base s'occupe du chargement des ressources externes, décide de la hiérarchisation du moment de leur chargement et aide également à la validation du document amp lorsque # development = 1 est ajouté à l'URL de l'ampli.

Example

http://localhost:8080/googleamp/amppage.html#development=1

L'URL ci-dessus, lorsqu'elle est exécutée dans le navigateur, répertorie les erreurs en cas d'échec de la validation de l'ampli ou affiche le message de réussite de la validation de l'ampli, si aucune erreur.

Composants AMP

Amp a beaucoup de composants d'ampli ajoutés. Ils sont essentiellement utilisés pour gérer le chargement de la ressource de manière efficace. Il contient également des composants pour prendre en charge l'animation, l'affichage des données, l'affichage des publicités, des widgets sociaux, etc.

Il existe 2 types de composants dans AMP.

Built-in
External

Note- <amp-img> est un composant intégré et disponible si le fichier core amp js est ajouté. Les composants externes comme <amp-ad>, <amp-facebook>, <amp-video> et bien d'autres nécessitent un fichier js respectif lié au composant à ajouter.

Attributs communs

Des attributs tels que la largeur, la hauteur, la disposition, l'espace réservé et le repli seront disponibles pour presque tous les composants AMP disponibles. Ces attributs sont très importants pour tout composant AMP car il décide de l'affichage du composant dans la page AMP.

Toutes les fonctionnalités ci-dessus répertoriées pour AMP sont décrites en détail dans les derniers chapitres de ce didacticiel.

Notez que tous les exemples de ce tutoriel sont testés pour les appareils et utilisent le mode Google Mobile Emulator. Apprenons cela en détail maintenant.

Émulateur Google Mobile

Pour utiliser l'émulateur mobile Google, ouvrez le navigateur Chrome, faites un clic droit et ouvrez la console développeur comme indiqué ci-dessous -

Nous pouvons voir l'outil de développement pour Chrome comme indiqué ci-dessus. Cliquez sur le lien que vous souhaitez tester dans le navigateur. Observez que la page s'affiche en mode Bureau.

Pour obtenir la page ci-dessus pour tester les appareils, cliquez sur Basculer la barre d'outils de l'appareil comme indiqué ci-dessous -

Vous pouvez également utiliser la touche de raccourci Ctrl + Maj + M. Cela changera le mode bureau en mode appareil comme indiqué ci-dessous -

Une liste d'appareils peut être vue comme indiqué ci-dessous -

Vous pouvez choisir l'appareil sur lequel vous souhaitez tester la page. Veuillez noter que toutes les pages de ces didacticiels sont testées sur l'émulateur Google Mobile comme indiqué ci-dessus. La même fonctionnalité est également disponible pour Firefox et les navigateurs Internet Explorer récents.

↰ Previous page Next page ↱

Google AMP - Introduction

Exemple de page d'ampli

À faire et à ne pas faire dans une page AMP

Balises obligatoires

Scripts pour les composants AMP

amp-ad

amp-iframe

Balises HTML

commentaires

Événements HTML

Des classes

Ids

Liens

Feuilles de style

@-règles

Polices personnalisées

Durée d'exécution AMP

Composants AMP

Attributs communs

Émulateur Google Mobile

Tutoriel Google AMP