Avec cette version, AMP Optimizer rend également beaucoup plus simple d’intégrer la fonctionnalité AMP dans les frameworks et les CMS ! Par exemple, l'équipe AMP vient de sortir un plugin AMP pour le merveilleux générateur de site statique Eleventy qui utilise toutes ces nouvelles fonctionnalités.
Mais d’abord, jetons un coup d’oeil rapide à ce qui est nouveau dans AMP Optimizer 2.0 :
- Importation automatique de scripts de composant AMP.
- Ajout automatique de toutes les balises AMP obligatoires manquantes.
- Nouveau support Markdown via la conversion de la balise <img> en <amp-img>
- Génération de balises CSP pour les inline amp-scripts.
- Minification HTML intégrée en supprimant l’espace blanc inutile (cela inclut des optimisations spécifiques AMP telles que la suppression de l’espace blanc de l’inline JSON et la minification des scripts d’inline AMP à l’aide de Terser).
- Le rendu AMP côté serveur prend désormais en charge la mise en page intrinsèque. Cela signifie que AMP Optimizer peut supprimer le code AMP-boilerplate pour les pages en utilisant la disposition intrinsèque générant des temps de chargement beaucoup plus rapides.
- Les transformations fonctionnent 40% plus vite en passant de parse5 à htmlparser2 !
Parlons maintenant des 3 premières fonctionnalités et de la façon dont elles simplifient la création de pages AMP et l’intégration de l’AMP dans les frameworks et les CMS.
Importation automatique d’extension de composants AMP
L’importation automatique de composants AMP signifie que AMP Optimizer analysera le DOM pour tous les composants AMP utilisés et injectera automatiquement toutes les importations de scripts nécessaires dans le head.
Par exemple, s’il rencontre la balise suivante :
<amp-video src="video.mp4" width="300" height="200"></amp-video>
Il ajoutera automatiquement l’importation d’extension de script amp-vidéo :
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Cela fonctionne également pour les composants AMP qui ne nécessitent pas une balise spécifique :
<div amp-fx="fade-in">I will fade in</div>
Dans ce cas, la présence de l’attribut amp-fx déclenchera l’importation du script de l’amp-fx-collection :
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
C’est assez impressionnant, parce que de nombreuses fonctionnalités AMP sont maintenant super simples à utiliser et ne vous obligent plus à aller fouiller les documents AMP et copier / coller l’importation de script.
L’équipe en charge d’AMP s’attend à voir une baisse significative du trafic sur son site "amp.dev" une fois que cette fonctionnalité aura été largement adoptée !
Ajouter automatiquement toutes les balises AMP obligatoires manquantes
L’autre pièce du puzzle pour la façon dont AMP Optimizer améliore l’expérience du développeur est la possibilité d’ajouter des balises AMP obligatoires manquantes.
Par exemple, en prenant ce bout de code HTML suivant :
<html>
<head>
<title>My Page</title>
<link rel="canonical" href="/mypage.html" />
</head>
<body>
<h1>Hello World!</h1>
</body>
AMP Optimizer ajoutera automatiquement toutes les balises et attributs obligatoires nécessaires pour en faire une page AMP valide :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
<link rel="canonical" href="/mypage.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>...</noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Cela signifie que vous n’avez pas besoin d’inclure un balisage spécifique AMP dans vos modèles de mise en page lors de l’utilisation de l’AMP Optimizer.
Avec l’importation automatique de composants, la création des pages AMP devient aussi facile que l’utilisation de balises HTML intégrées.
Travailler à l’amélioration de la prise en charge de l’AMP des frameworks et CMS
Cette version AMP Optimizer est le premier tremplin pour offrir un meilleur support AMP dans les frameworks et les plates-formes CMS.
Next.js offre déjà un grand support AMP et a AMP Optimizer déjà intégré. Cela signifie qu’avec cette version AMP Optimizer (disponible dans Next.js v9.2.2), la création de pages AMP dans Next.js est devenue encore plus facile.
Vous pouvez maintenant utiliser directement les composants AMP (dans ce cas amp-fx-collection).
Bref, en résumé, chaque site Web publiant des pages AMP devrait utiliser AMP Optimizer pour bénéficier des améliorations de performances allant jusqu’à 50% de temps de rendu plus rapide.
La meilleure partie : les performances s’amélioreront automatiquement avec le temps avec chaque nouvelle optimisation côté serveur qui est libérée.
Les nouvelles fonctionnalités introduites avec cette version améliorent considérablement l’expérience du développeur AMP. L’utilisation de composants AMP devient aussi simple que l’utilisation de n’importe quelle autre balise HTML.
Mais ce n’est que la première étape et l’équipe en charge d’AMP prévoit de construire sur ce point à l’avenir et apporter un support AMP à plus de frameworks et CMS.
Source
