Google AMP - Présentation

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 de l'ampli fonctionne correctement et se charge rapidement sur tous les appareils possibles tels que les smartphones, les tablettes, etc.

Qu'est-ce que l'AMP?

Accerated Mobile Pages (AMP) est le projet open source de Google spécialement conçu pour rendre les pages Web conviviales pour les mobiles en rendant le contenu plus rapide, plus fluide et réactif dans n'importe quel navigateur.

Le site officiel de Google amp est - https://www.ampproject.org/

POURQUOI AMP?

Tout utilisateur s'attend à ce que les sites Web chargent le contenu très rapidement. Cependant, cela peut ne pas être le cas lorsque les pages sont presque inondées d'images, de vidéos, d'animations, de widgets sociaux, ce qui alourdit la page et augmente ainsi son temps de chargement. Un tel scénario peut entraîner la perte d'utilisateurs du site Web à long terme.

Google AMP est conçu pour résoudre ce problème. AMP a un moyen spécial de prendre en charge les images, iframes, javascripts, publicités, vidéos, animations, css, polices chargées, etc. Le contenu des pages AMP est mis en cache à la fin de Google, de sorte que chaque fois que l'utilisateur clique sur les résultats de la recherche, le contenu est servi à partir du cache. La version du cache est également mise à jour en temps opportun afin que l'utilisateur reçoive toujours une nouvelle page mise à jour.

Pourquoi choisir AMP?

Cette section vous explique pourquoi vous devez opter pour AMP pour votre site -

Priorité à la recherche Google

Aujourd'hui, lorsque vous recherchez quelque chose sur Google, vous trouverez un carrousel Google affiché en haut avec des pages, suivi de la liste des pages en réponse à votre recherche. Le carrousel de nouvelles affiché sont tous des sites AMP valides. Cela signifie que Google donne la priorité aux pages amp et les affiche selon le classement dans le carrousel de nouvelles.

Un exemple de recherche effectuée dans Google avec le mot clé "latest indian news»Est donné ici -

Toutes les pages les mieux classées qui sont des pages AMP sont affichées au début dans le carrousel Google, comme indiqué dans l'image ci-dessus.

Une page Google AMP ressemble à l'illustration ci-dessous lorsque l'utilisateur recherche quelque chose dans la recherche Google. Notez qu'il existe un logo Google AMP sur les pages AMP.

Temps de chargement plus rapide

Lorsque votre page est convertie en AMP, le temps de chargement sera bien meilleur par rapport à une page non-amp. Un temps de chargement plus rapide est également un facteur important dans le classement des pages dans la recherche Google.

Pas de pop-ups

L'utilisation de Google AMP offre une expérience de navigation Web agréable car l'utilisateur ne verra aucune fenêtre contextuelle indésirable pour les pages conçues avec Google AMP.

Génère du trafic

Lorsque le taux de chargement des pages est rapide, il augmente automatiquement le nombre de téléspectateurs et ainsi le trafic vers la page augmente.

Comment fonctionne l'AMP?

Les composants les plus importants qui sont utilisés pour créer un site Web sont javascript, images, vidéos, polices, css, etc. La conception de pages AMP se fait en prenant soin de tous ces facteurs d'une manière unique. Dans cette section, discutons brièvement de ce que fait exactement AMP pour accélérer les pages.

JavaScript asynchrone

Javascript joue un rôle important sur la page, car il aide à ajouter de l'interactivité à la page sous forme d'animations, de changements DOM, etc. Il ajoute également de la lenteur à la page et peut empêcher le rendu d'autres contenus sur la page.

Comment AMP aborde JavaScript?

AMP charge JavaScript de manière asynchrone. Le JavaScript personnalisé n'est strictement pas autorisé à l'intérieur d'une page AMP. Notez que AMP a beaucoup de composants ajoutés, certains d'entre eux remplacent les balises html existantes; par exemple amp-img, amp-iframe, amp-video, amp-lightbox, amp-animations etc.

Pour chacun de ces composants, il y a un fichier JavaScript à charger qui a l'attribut async ajouté à la balise de script. Seuls les fichiers JavaScript liés aux composants amp sont autorisés sur la page et tout autre JavaScript à l'intérieur d'une page AMP ou d'un fichier javascript tiers n'est pas autorisé. Comme AMP utilise le cache Google AMP, les fichiers sont préchargés à partir du cache, ce qui accélère leur chargement.

Tailles des balises HTML

Il est obligatoire de donner la taille des balises image, iframe, vidéo afin que amp page puisse localiser l'espace sur la page sans avoir à charger la ressource. Les ressources à charger sont hiérarchisées par la page amp. Le contenu a plus de priorité sur les ressources à charger.

Widgets sociaux / AD

Amp fournit des composants spéciaux à savoir amp-facebook, amp-twitter, amp-ad, amp-sticky pour prendre en charge les widgets sociaux à afficher sur la page. Le composant AMP-ad est utilisé pour diffuser des annonces sur la page. AMP prend un soin particulier dans la manipulation des composants et charge le contenu selon une priorité basée sur les exigences.

CSS

Le CSS externe n'est pas autorisé dans les pages AMP. Le CSS personnalisé, le cas échéant, peut être ajouté à l'intérieur de la balise de style à l'aide de l'attribut amp-custom. Le CSS en ligne est également autorisé. AMP réduit les requêtes http de toutes les manières possibles.

Polices

Les polices sont autorisées dans les pages amp et la priorité de chargement des polices est décidée par AMP.

Animation

AMP prend en charge les composants amp-animation et permet la transition telle qu'elle est prise en charge par les navigateurs modernes.

Compte tenu de tous les points énumérés ci-dessus, AMP prend un soin tout particulier pour les requêtes HTTP faites pour les polices, les images, les iframes, les publicités à diffuser, etc. Les ressources disponibles au-dessus du pli de page sont rendues en premier et plus tard, la préférence est donnée aux ressources disponibles sous le pli .

Autres points

Google AMP Cache est un autre facteur important qui aide à rendre le contenu plus rapide à mesure que le contenu est extrait du cache.

L'éditeur doit gérer la page amp et non-amp de deux sites. Par exemple, considérez que le site a l'adresse -https://www.mypage.com. Ensuite, les pages en interne pour les non-amp à servir sur le bureau seronthttps://www.mypage.com/news. Pour les appareils ou AMP, ce sera:https://www.mypage/com/news/amp/

Comment Google identifie-t-il les pages AMP et non AMP?

Voyons maintenant comment Google identifie les pages AMP et non AMP.

  • Lorsque la recherche Google explore la page, s'il arrive à obtenir amp en html ou <html amp> ou <html ⚡>, il sait qu'il s'agit d'une page AMP.

  • En outre, si Google tombe sur une page non-amp, d'abord pour connaître la page amp, il est obligatoire d'ajouter les balises de lien suivantes dans la section head de la page html pour les pages amp et non-amp.

URL de la page pour les pages non-amp

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

Ici, rel = "amphtml" est spécifié pour qu'une page non-amp pointe vers la version amp, de sorte que Google affiche la bonne en fonction de la plate-forme.

URL de la page pour amp-page

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

Ici, rel = "canonical" est spécifié dans la page amp pour pointer vers la version standard de html, de sorte que Google affiche la bonne en fonction de la plate-forme.

Si votre site n'a qu'une seule page ampli, vous ne devez pas oublier d'ajouter le rel = "canonical" qui pointera vers lui-même -

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

Le diagramme suivant montre une référence à rel = "amphtml" pointant vers la page amp et rel = "canonical" pointant vers la page html standard.

Fonctionnalités de Google AMP

Dans cette section, laissez-nous discuter des fonctionnalités importantes disponibles avec Google AMP -

Mise en cache de l'ampli

La mise en cache de Google Amp est l'une des principales fonctionnalités ajoutées à amp. Il fournit un réseau de livraison de contenu basé sur un proxy pour servir des pages d'ampli pures.Le cache d'ampli est disponible par défaut pour toutes les pages d'ampli valides.Il aide à rendre les pages plus rapides par rapport aux pages non-amp.À l'heure actuelle, il existe 2 fournisseurs de cache d'ampli Google Cache AMP et Cache AMP Cloudflare. Lorsque l'utilisateur clique et est redirigé vers la page amp, le contenu est diffusé à partir du cache Google.

Composants d'ampli

Amp a une grande liste de composants conçus à des fins diverses. Certains d'entre eux sont énumérés ci-dessous -

  • amp-img - Utilisé pour afficher des images sur les pages amp.

  • amp-iframe- Utilisé pour afficher l'iframe avec un contenu externe à afficher sur les pages. Veuillez noter que l'iframe utilisé est en bac à sable, ce qui signifie qu'il a besoin d'une autorisation pour afficher les données sur la page amp. Les détails de l'origine croisée doivent donc être spécifiés pour l'attribut sandbox.

  • amp-video - Pour montrer la vidéo sur la page.

  • amp-audio - Pour afficher l'audio sur la page.

  • amp-datepicker- Utilisé pour afficher les widgets de date sur la page. Vous n'avez pas besoin de choisir des datepickers tiers car le même est directement disponible est amp.

  • amp-story - Un support pour afficher vos histoires sur la page.

  • amp-selector- Est un composant d'ampli qui affiche le menu des options et l'utilisateur peut choisir entre les options. Les options affichées peuvent être du texte, des images ou tout autre composant amp.

  • amp-list - Est un composant amp qui appelle un point de terminaison CORS json et les données du fichier json sont affichées dans un modèle.

La publicité

La publicité est très importante pour les éditeurs car leurs revenus dépendent entièrement des annonces diffusées sur la page. Amp n'autorise pas l'ajout de javascript externe sur la page, mais un composant ampli spécial appelé amp-ad est introduit qui se charge de diffuser des annonces sur la page.

Le réseau publicitaire que l'éditeur souhaite diffuser sur sa page doit être pris en charge par amp-ad. Par exemple, pour diffuser des annonces double-clic sur la page, le double-clic doit prendre en charge les annonces à diffuser à l'aide du composant amp-ad. Le code suivant montre un tag amp-ad de doubleclick.

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad-layout">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

Amp prend également en charge les amphtmlads qui sont de pures ampads développés à partir de composants AMP et html. Amp prend également en charge amp-sticky-ads, une annonce de pied de page affichée au bas de la page. Les détails des annonces dans amp sont discutés dans le chapitre des annonces amp.

Widgets sociaux

Les widgets sociaux comme Facebook, Twitter, Instagram sont devenus très importants pour être affichés sur la page de l'éditeur, afin que les pages soient partagées sur les médias sociaux. AMP a étendu ses supports à tous les widgets de médias sociaux importants à utiliser sur la page en développant des composants AMP tels que amp-facebook, amp-twitter, amp-instagram, amp-pinterest etc.

Amp Média

Un autre composant important sur les pages est le média pour montrer des vidéos et également diffuser des publicités entre les vidéos en tant que publicités midroll. AMP fournit un moyen de le faire en utilisant amp-jwplayer, amp-youtube etc. Vous n'avez pas à charger de fichiers tiers supplémentaires pour que jwplayer, youtube apparaisse sur votre page.

Amp Analytics

Amp analytics est un composant AMP utilisé pour suivre les données sur une page donnée. Toutes les interactions de l'utilisateur sur la page peuvent être enregistrées et sauvegardées pour analyser les données à des fins d'amélioration ou à des fins commerciales.

Animations d'amplis

Amp-animation est un composant d'ampli qui définit les animations à utiliser sur d'autres composants d'ampli. Le service informatique prend en charge l'animation, transition qui fonctionne bien avec un navigateur moderne. Vous n'avez pas besoin d'utiliser de bibliothèque CSS externe pour effectuer l'animation et pouvez utiliser le composant amp-animation.

Disposition d'amplis

AMP-Layout est l'une des fonctionnalités importantes disponibles dans google-amp. Amp Layout garantit que les composants de l'ampli sont rendus correctement lorsque la page est chargée sans provoquer de scintillement ou de problème de défilement.

Google AMP s'assure que le rendu de la mise en page est effectué sur la page avant toute autre ressource distante telle que la requête http pour les images, les appels de données. Les attributs disponibles pour la mise en page sont la largeur / hauteur de tous les composants de l'ampli, l'attribut de mise en page avec des valeurs telles que responsive, fill, fixed, etc., l'attribut d'espace réservé à afficher lorsque la ressource prend du temps à se charger ou a une erreur, l'attribut de secours à afficher lorsque la ressource a une erreur.

Dispositions d'affichage de l'ampli

Amp prend en charge de nombreux composants utilisés pour afficher du contenu sur la page sans avoir besoin d'une bibliothèque tierce ou sans avoir à créer de CSS lourd sur la page. La liste comprend

  • Accordion- Amp-accordéon est un composant d'ampli utilisé pour afficher le contenu dans le format expand-collapse. Il devient facile pour les utilisateurs de le visualiser sur des appareils mobiles où ils peuvent sélectionner la section selon leur choix à partir de l'accordéon.

  • Carousel - Amp-carrousel est un composant d'ampli pour afficher un ensemble de contenus similaires à l'écran et utiliser les flèches pour passer d'un contenu à l'autre.

  • Lightbox - Amp-lightbox est un composant d'ampli qui occupera la pleine fenêtre et s'affichera comme une superposition.

  • Slider - Amp-image-slider est un composant ampli utilisé pour comparer 2 images en ajoutant un curseur en le déplaçant verticalement sur l'image.

  • Sidebar - La barre latérale Amp est un composant d'ampli utilisé pour afficher le contenu qui glisse des côtés de la fenêtre en appuyant sur un bouton.

Avantages d'AMP

  • Les pages AMP sont légères et se chargent plus rapidement

  • Google donne la priorité aux pages AMP sur la recherche Google. Les pages AMP sont répertoriées dans le format carrousel en haut de la page. Pour obtenir un meilleur classement, c'est un bon avantage d'avoir vos pages en AMP.

  • Les pages AMP sont adaptées aux mobiles car le contenu est réactif et s'ajuste bien dans tous les navigateurs sans nécessiter de style supplémentaire.

  • La satisfaction des utilisateurs augmente pour les pages AMP car le taux de chargement de la page est plus rapide par rapport aux pages sans ampli, économisant ainsi leur bande passante et leur batterie mobile.

Inconvénients de l'AMP

L'ampli présente les inconvénients suivants -

  • L'éditeur doit maintenir deux versions pour leurs pages amp et non-amp.

  • L'utilisateur doit déployer des efforts supplémentaires pour convertir les pages non-amp en amp. Comme l'ampli ne prend pas en charge le javascript personnalisé ou le chargement de javascript externe, la même chose doit être obtenue avec tout ce qui est disponible avec amp.