Utilisation d'un optimiseur AMP
Important: this documentation is not applicable to your currently selected format email!
Les optimiseurs AMP sont des outils qui apportent des optimisations AMP Cache à votre propre site. L'utilisation d'un optimiseur AMP est essentielle pour créer une expérience de page exceptionnelle et atteindre la conformité Core Web Vitals. Si vous souhaitez en savoir plus sur le fonctionnement d'un optimiseur AMP, consultez notre guide détaillé des optimisations AMP.
AMP n'est-il pas déjà rapide ?
Vous vous dites peut-être : mais, AMP n'est-il pas censé être prêt à l'emploi ? Et vous pouvez avoir raison : le runtime AMP est optimisé pour la vitesse et toutes les pages AMP valides chargent rapidement. Cependant, il existe des optimisations de performances supplémentaires que vous pouvez implémenter sur votre serveur pour aider le navigateur à charger les pages AMP encore plus rapidement.
Au début, les caches AMP servaient la majorité des pages AMP. Ces caches effectuaient des optimisations supplémentaires sur les pages pour garantir une expérience utilisateur solide. Mais au fil du temps, de plus en plus de surfaces ont commencé à créer des liens vers des pages AMP et les développeurs ont commencé à créer des sites Web entiers avec AMP. C'est pourquoi l'équipe AMP a commencé à travailler sur les optimiseurs AMP afin de permettre à chacun de servir des pages AMP avec des performances similaires à celles d'AMP Cache sur sa propre origine.
Intégrer un optimiseur AMP
Il existe trois façons d'utiliser un optimiseur AMP :
- Utiliser un générateur de site ou un CMS avec une intégration d'optimiseur intégrée.
- Intégrer un optimiseur AMP dans votre système de construction ou votre serveur.
- Intégrer un optimiseur AMP dans votre environnement d'hébergement.
CMS et générateurs de sites
La meilleure façon de publier un AMP optimisé consiste à utiliser un générateur de site ou un CMS avec prise en charge d'un optimiseur AMP intégrée. Dans ce cas, vos pages AMP seront optimisées automatiquement. Actuellement, les générateurs de sites et CMS suivants intègrent l'optimiseur AMP :
- WordPress via le plugin AMP WordPress
- Next.js
- Eleventy via le plugin eleventy-amp-plugin
- Add yours?
Intégrations de build ou de serveur personnalisées
Vous pouvez également intégrer vous-même un optimiseur AMP. Il existe plusieurs implémentations open source d'optimiseur AMP disponibles :
- AMP Optimizer (Node.js) : une bibliothèque basée sur Node.js pour produire un AMP optimisé. Consultez notre guide de démarrage ici sur amp.dev. L'implémentation est maintenue par l'équipe AMP.
- AMP Toolbox for PHP: a PHP based library for producing optimized AMP. The implementation is maintained by the AMP team.
- amp-renderer (Python) : un port Python de Node AMP Optimizer.
Il existe différentes intégrations pour les pages rendues dynamiquement par votre serveur et les sites statiques :
- Temps de création : pour les sites statiques, il est préférable d'optimiser les pages AMP dans le cadre de la création. Cette approche est idéale car l'optimisation des pages AMP n'a pas d'impact sur les performances de diffusion. Consultez cet exemple pour une intégration de l'optimiseur AMP + Gulp.
- Temps de diffusion : si les sites Internet ont une nature plus dynamique ou ne sont pas capables d'appliquer les transformations de manière statique, l'optimisation peut être effectuée après la diffusion des documents AMP sur le serveur. Dans ce cas, pour garantir des délais de traitement rapides, il est préférable de mettre en cache les pages transformées pour les demandes suivantes. La mise en cache peut avoir lieu au niveau du CDN, sur l'infrastructure interne du site (ex. : Memcached), ou même sur le serveur lui-même, si l'ensemble des pages est suffisamment petit pour tenir en mémoire. Pour en savoir plus sur cette approche, consultez cette démo d'intégration de l'optimiseur AMP dans Express.JS.
Intégrations des fournisseurs d'hébergement
Certains fournisseurs d'hébergement permettent d'exécuter une logique personnalisée lors du déploiement ou de la diffusion d'une page Web. Cela peut être une excellente option pour intégrer AMP Optimizer. Les exemples d'intégration sont :
- Netlify AMP Optimizer Plugin
- Cloudflare Workers (bientôt disponible)
- AMP Optimizer Docker Image (bientôt disponible)
- Add yours?
-
Written by @sebastianbenz