Sortie de AMP Toolbox 1.0

Boîte à outils AMP existe depuis un certain temps déjà, mais je pense qu'il est maintenant temps de faire une bonne introduction, car nous avons atteint le jalon de la version 1.0. En bref, la Boîte à outils AMP est une collection d'outils en ligne de commande et d'API JS qui permet de publier des pages AMP plus facilement. Chaque outil peut être téléchargé et utilisé individuellement.

La version 1.0 comprend deux mises à jour majeures :

1.  Le linter pour les documents AMP : AMP Linter signale les erreurs et les structures suspectes, comme les images manquantes ou de taille incorrecte, les en-têtes CORS absents ou les métadonnées invalides.

2.  Optimisation efficace pour AMP : AMP Optimizer peut maintenant générer des AMP optimisés, rendant les pages AMP hébergées plus faciles à gérer.

Mais il y a encore plus cool ! Examinons de plus près le contenu de la Boîte à outils AMP.

Interface en ligne de commande AMP

La plupart des fonctionnalités de la Boîte à outils AMP disposent d'une interface en ligne de commande. Vous pouvez l'installer globalement via NPM :

$ npm install @ ampproject / toolbox-cli

$ amp help

Ou vous pouvez utiliser l'outil intégré de NPM `npx` pour exécuter une commande ponctuelle :

$ npx @ ampproject / toolbox-cli help

Vérificateur AMP

Le tout nouveau linter de la Boîte à outils vérifie si vos documents AMP contiennent des erreurs courantes et respectent les bonnes pratiques :

$ amp lint https://amp.dev

PASS 1x1 images are specified by <amp-pixel>

WARN All <amp-img> have reasonable width and height

> [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: actual ratio [1999/1140 = 1.75] does not match specified [16/9 = 1.77]

> [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: actual ratio [3680/2314 = 1.59] does not match specified [16/9 = 1.77]

PASS Videos are under 4MB

PASS <amp-video><source/></amp-video> syntax is used for video

PASS Endpoints are accessible from cache

PASS Endpoints are accessible from origin

FAIL <meta charset> is the first <meta> tag

> <meta charset> not the first <meta> tag

PASS Runtime is preloaded

Ou sans installation :

$ npx @ ampproject / toolbox-cli lint https://amp.dev

Lorsque vous ajoutez la prise en charge SXG à votre site, le mode SXG de AMP Linter est très utile :

$ amp lint -f sxg https://amp.dev

PASS /amppkg/ is forwarded correctly

PASS application/signed-exchange content negotiation is correct

PASS dump-signedexchange -verify does not report errors

Optimiseur AMP

AMP Optimizer est un outil d'amélioration côté serveur pour les performances des pages AMP. AMP Optimizer implémente les meilleures pratiques de performance AMP et prend en charge le rendu côté serveur AMP. Ces optimisations peuvent améliorer le FCP de 50%. 

Vous pouvez l'utiliser via l'interface en ligne de commande :

$ amp optimize https://amp.dev

$ amp optimize file.html

Mais pour la production, il est préférable d'intégrer l'optimiseur de la Boîte à outils dans votre chaîne de construction ou de rendu. Il existe également un middleware Express : amp-optimizer-express, qui peut appliquer dynamiquement le rendu côté serveur AMP.

URLs du cache AMP

Pour les tests, il est préférable de vérifier si une page AMP est adaptée à tous les caches AMP. Utilisez toolbox-cache-url pour convertir une URL originale en format d'URL de cache AMP.

$ amp curls https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev

https://amp-dev.amp.cloudflare.com/c/s/amp.dev

https://amp-dev.bing-amp.com/c/s/amp.dev

Ou pour un cache spécifique :

$ amp curls --cache = google https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev

Liste des caches AMP

Il existe également une API pour obtenir la liste de tous les caches AMP officiels. C'est très utile lors de l'implémentation de CORS côté serveur :

const Caches = require('@ampproject/toolbox-cache-list');

Caches.list().then(console.log);

Parfois, il est nécessaire de mettre à jour ou de supprimer rapidement des documents AMP depuis le cache AMP. L'utilisation de l'API AMP Update Cache via l'interface en ligne de commande est très simple : 

$ amp update-cache https://www.example.com/ --privateKey/path/to/private-key.pem

Bien sûr, il existe également une version API disponible dans le package toolbox-update-cache.

CORS AMP

En parlant de CORS, de nombreux composants AMP (comme amp-list ou amp-state) utilisent des requêtes CORS pour exploiter des points de terminaison distants. Une partie de la Boîte à outils AMP est un middleware Express/Fastify qui ajoute automatiquement tous les en-têtes CORS nécessaires aux pages AMP. Il suffit d'ajouter le middleware CORS de la Boîte à outils à votre application Express, et vous pouvez oublier CORS lors de la fourniture de pages AMP :

const express = require（'express'）;

const ampCors = require（'@ ampproject / toolbox-cors'）;

const app = express（）;

// That's it!

app.use(ampCors())

Règles de validation AMP

Si vous souhaitez implémenter la complétion de code AMP spécifique pour votre éditeur de texte préféré, consultez amp-validator-rules : une bibliothèque JavaScript pour interroger les règles du validateur AMP. L'exemple suivant liste tous les attributs valides de l'élément amp-img :

import validatorRules from '@ampproject/toolbox-validator-rules';

validatorRules.fetch().then(rules => {

 // Get all website specific tag rules ...

 const tags = rules.getTagsForFormat('AMP');

 // ...find the definition of the amp-img tag...

 const ampImg = tags.find(e => e.tagName === 'AMP-IMG');

 const ampImgAttrs = ampImg.attrs

 // ...filter global, layout and amp-bind attributes...

 .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)

 // ...extract the name...

 .map(e => e.name)

 // ...sort alphabetically...

 .sort();

 // ...and display result in the console.

 console.log(ampImgAttrs);

}）;

Si vous trouvez ces mises à jour complexes, vous pouvez également choisir de créer un site avec Google AMP sur la plateforme de création de site intelligent YiYingBao, qui permet de construire un site en 3 minutes, de le publier rapidement sur des serveurs mondiaux, avec une expérience gratuite. Hotline : 4006552477  15600002121