Les nouvelles fonctionnalités du plugin AMP for WordPress v2.0

L’officiel du plugin AMP for WordPress a été mis à jour à la version 2.0.

Ce plugin officiel du projet AMP permet la publication de contenu AMP avec WordPress d’une manière qui est entièrement et parfaitement intégrée aux mécanismes standard de la plate-forme.

Et l’équipe d’AMP project de préciser dans post d’annonce vers la version 2.0 :

Il y a environ trois ans, nous avons entrepris de résoudre le défi d’autoriser la publication complète de contenu AMP dans WordPress dans le but de faciliter la tâche des propriétaires de sites WordPress pour parcourir facilement les chemins sans friction vers la publication de contenu réussie sur la plate-forme WordPress.

Progression rapide jusqu’à aujourd’hui, et nous voici, très heureux d’annoncer la sortie v2.0 du plugin officiel AMP for WordPress !

?? Drumroll please ??

Announcing the v2.0 release of the official AMP Plugin for WordPress ?? This update brings massive improvements like advanced automation, developer tooling, and optimized serving ?

Learn what's new ?? https://t.co/rdK7zllE3x

— AMP Project (@AMPhtml) August 27, 2020

Annonce de la sortie v2.0 du plugin officiel de l’AMP pour WordPress. Cette mise à jour apporte des améliorations massives telles que l’automatisation avancée, l’outillage des développeurs et le service optimisé.

La version 2.0 du plugin officiel AMP for WordPress est maintenant disponible et est livrée avec un certain nombre de fonctionnalités utiles pour les propriétaires de site.

Le plugin est conçu pour offrir des outils essentiels pour aider à la création de contenu AMP.

Les propriétaires de sites WordPress peuvent utiliser le plugin pour créer des pages rapides tout en minimisant la quantité de ressources nécessaires.

La mise à jour de V1 à V2 apporte quelques mises à niveau majeures. Voici un aperçu de ce qui est disponible.

AMP et les Core Web Vitals

Google a récemment lancé une initiative appelée Core Web Vitals ou Signaux Web Essentiels dans le but de fournir des conseils unifiés pour les signaux de qualité qui sont essentiels à la prestation d’une grande expérience utilisateur sur le Web. 

En un mot, si Google s’assure que les pages qu’il livre à ses utilisateurs répondent à certains seuils de valeurs pour ces mesures, elles ont une une chance équitable de réussir en tant que créateurs de contenu.

Depuis sa création, AMP a été tout au sujet d’un axiome simple : prenez soin de l’expérience utilisateur et tout le reste suivra.

Cela signifie que la fonctionnalité AMP a été envisagée, conçue et mise en œuvre explicitement dans le but de faciliter la création de sites user-first (pour l’utilisateur d’abord).

Ce sont des sites rapides, beaux, engageants, sécurisés et accessibles. Par conséquent, l’optimisation des signaux Web essentiels est très bien alignée sur les principes de vision et de conception de l’AMP.

En bref, l’AMP est un outil puissant et rentable pour faciliter la construction de sites performants, réduisant ainsi le niveau d’expertise technique, ainsi que le temps et les ressources nécessaires pour atteindre cet objectif.

Le succès, alimenté par AMP

Les missions des projets Open source WordPress et AMP sont très bien alignées. Le projet AMP vise à démocratiser la performance et la construction de grandes expériences de page, qui est au cœur de la mission de WordPress de démocratiser l’édition web.

Dans un écosystème tel que WordPress, AMP apporte une notion de «performance en tant que service» en fournissant, en dehors de la boîte, un large éventail de pratiques exemplaires de codage et de performance :

• Rester toujours à jour quand il s’agit de profiter de ce que le web est capable d'offrir;
  
  
• Et imposer des mécanismes de contrôle efficaces permettant une bonne performance constante.

AMP aide les créateurs de WordPress à tirer parti de l’ouverture et de la flexibilité de WordPress tout en minimisant la quantité de ressources nécessaires pour être investi dans le développement et la maintenance de sites qui fonctionnent toujours bien.

Le plugin officiel de l’AMP pour WordPress est la technologie de base qui facilite la publication de contenu alimenté par l’AMP dans WordPress; et il le fait par :

• L’automatisation autant que possible du processus de génération de balisage valide à l’AMP, permettant aux utilisateurs de suivre des flux de travail aussi proches que possibles des flux de travail standards sur WordPress auxquels ils sont habitués.
  
  
• La fourniture des outils de validation efficaces pour aider à faire face aux incompatibilités de l’AMP lorsqu’elles se produisent, y compris les aspects de l’identification des erreurs, de leur contextualisation et de leur signalement avec précision.
  
  
• La fourniture d’une prise en charge du développement d’AMP afin de faciliter la construction par les développeurs WordPress de créer des composants écosystémiques compatibles avec l’AMP et de créer des sites Web et des solutions avec la compatibilité AMP intégrée.
  
  
• La prise en charge de la signification des pages AMP sur Origin, faciliter la mise à profit par les propriétaires de sites de redirection mobile, de liaison AMP vers AMP, de la minimisation des problèmes de validation AMP dans Search Console et de la génération de pages AMP optimisées par défaut.
  
  
• La fourniture des solutions clés en main pour les segments de créateurs et éditeurs de WordPress pour être en mesure de passer de zéro à la génération de contenu AMP en un rien de temps, indépendamment de l’expertise technique ou de la disponibilité des ressources.

La version 2.0 du plugin AMP représente un point d’inflexion dans la génération de contenu AMP dans WordPress. La version 2.0 du plugin offre les fonctionnalités suivantes.

Mises à jour du mode Reader

1. AMP-first themes :
   
   N’importe quel thème compatible avec l’AMP, ainsi que tous les modes de modèle et tous les types de contenu, peuvent être servis comme AMP.
   
   Il y a le support out-of-the box (en dehors du cadre) pour toutes les fonctionnalités essentielles, y compris:
   
   
   • Menus de navigation
     
     
   • Logos
     
     
   • Commentaires
     
     
   • Variations de conception de modèles
   
   L’étendue de l’ancien mode Reader et les modèles de publication AMP de V1 sont disponibles pour la compatibilité à l’envers.
   
   
2. AMP Customizer :
   
   Deux thèmes sont utilisés lorsque le mode Reader (Lecteur) est sélectionné, de sorte que le plugin AMP fournira deux versions du customizer :
   
   
   • Personnalisation par défaut pour le thème actif
     
     
   • L’AMP Customizer pour le thème AMP Reader
   
   
   
3. Brand Affinity :
   
   Le plugin AMP synchronise les paramètres généraux du site pour maintenir l’affinité de la marque (Brand Affinity) entre les pages AMP et les pages non-AMP.
   
   Cela signifie que le logo, l’arrière-plan, la couleur, l’en-tête et d’autres éléments seront les mêmes sur les deux versions d’un site.

Les outils

Ces outils cherchent à automatiser autant que possible le processus de publication de contenu AMP, et de rendre plus facile pour les développeurs WordPress de construire plus facilement des thèmes compatibles AMP, des plugins et des solutions écosystémiques.

1. Opt-in/Opt-out :
   
   Le plugin AMP donne aux propriétaires du site la flexibilité de décider quelles parties d’un site doivent et ne doivent pas être servies comme AMP.
   
   
   
   
   Le plugin AMP vous permet d’intégrer progressivement AMP dans votre stratégie de contenu. Il vous offre la flexibilité de sélectionner les parties de votre site qui doivent être servies comme AMP et celles qui ne devraient pas.
   
   Et cette capacité découple les types de posts des types de modèles, ce qui permet de permettre à tous les modèles d’être servis comme AMP, tout en permettant d’exclure des types de posts spécifiques de l’AMP.
   
   
2. CSS Tree Shaking :
   
   Les scénarii où les pages chargent d’énormes quantités de CSS, dont une grande partie n’est probablement pas utilisée du tout, sont malheureusement assez fréquents, et ils peuvent entraver les expériences de page perçues par les utilisateurs.
   
   Pour éviter de tels scénarii, AMP limite l’utilisation de CSS à moins de 75 Ko de CSS sur une page donnée.
   
   Garder CSS sous ces contraintes peut parfois être difficile. Le plugin AMP fournit un support pour faciliter la limitation du nombre total de CSS sur les pages sous la limite de 75 Ko. Ceci est fait en « agitant l’arbre CSS » pour une page, en supprimant autant de CSS inutilisé que possible.
   
   En outre, lorsque le CSS total laissé après le tri est encore excessif, le plugin priorise les styles CSS, de sorte que la feuille de style la plus importante du thème est conservée, tout en excluant les moins importantes (par exemple, les styles d’impression).

Outils de validation intégrés

L’une des principales forces de l’AMP n’est pas seulement qu’il est plus facile de créer des sites user-first, mais qu’il le fait d’une manière qui est vérifiable. AMP fournit une spécification de validateur, qui peut être implémentée de différentes manières.

Les pages AMP peuvent être transmises par un tel validateur pour déterminer s’il s’agit effectivement de pages AMP valides. Lorsqu’une page est déterminée à être entièrement compatible avec l’AMP, nous pouvons être sûrs que les principes de conception d’AMP seront présents à la livraison de cette page.

Le plugin AMP assure une intégration complète de la spécification de validation AMP. Il l’utilise au cœur de ses capacités pour identifier les problèmes de validation.

De plus, le plugin AMP for WordPress contextualise les problèmes indiquant précisément le composant du site responsable de l’occurrence du balisage incriminé.

Et il expose les informations de validation de différentes façons afin que les utilisateurs (développeurs et non-développeurs) ont les mécanismes dont ils ont besoin pour comprendre les problèmes de surface et pour traiter avec eux.

1. Editeur : Lors de la modification d’une page AMP dans l’éditeur Gutenberg, si un bloc qui inclut des éléments AMP non valides est ajouté, le plugin le détecte et le signale contextuellement à l’utilisateur.
   
   
   
   
   
   
   
2. Index d’erreurs : L’écran “Index d’erreurs” met en avant tous les problèmes de validation qui ont été identifiés dans le site, ainsi que des informations récapitulatives sur chaque problème.
   
   
   
   
   
   Cliquer sur un problème spécifique affiche des informations détaillées sur le problème, y compris une liste des URL touchées par celui-ci.
   
   
3. Barre d’administration : Le plugin AMP fournit des informations sur l’état de validation et le pourcentage du budget CSS utilisé, ainsi que des points d’entrée aux écrans de validation décrits ci-dessus, directement à partir de la barre d’administration.
   
   
   
   
   L’utilisateur peut acquérir d'un coup d’œil une compréhension de l’état de validation du contenu donné en cours de modification, ainsi que des informations récapitulatives sur l’utilisation du budget CSS, le nombre de problèmes, les liens vers la version non AMP de la page et vers l’écran Paramètres.
   
   
4. URL validées : L’écran “URLs validées” affiche dans une liste toutes les URL qui ont passé par le processus de validation, ainsi qu’un résumé détaillé de l’état de validation pour chacune d’elles, y compris l’état global, le nombre et le type d’erreurs trouvées, et d’autres éléments clés des données de validation.
   
   
   
   
   
   
   
   Et l’écran “URLs validées” expose les informations de validation détaillées pour une seule URL.

Masquer les outils de développement

Avant la version 2.0, les outils de développement du plugin AMP étaient activés pour tous les utilisateurs disposant d’autorisations pour modifier les publications.

Ces utilisateurs obtiendraient des problèmes de validation indiqués dans l’éditeur et les informations de validation seraient affichées dans la barre d’administration.

L’état de validation de surface et les erreurs de cette façon sont l’idéal pour les utilisateurs techniquement avertis qui veulent et peuvent faire quelque chose au sujet des informations présentées.

Mais, cette information peut être déconcertante (et ennuyeuse) pour les utilisateurs qui ne peuvent rien faire sur les questions, ou ne peuvent même pas comprendre ce qu’ils signifient.

Les outils de développement peuvent maintenant être désactivés pour les utilisateurs qui ne veulent pas (ou ne peuvent pas) traiter des problèmes de validation, mais pour les utilisateurs qui le font, le flux de travail de validation est amélioré.

Les outils de développement ne sont accessibles qu’aux administrateurs et ils ont la possibilité de les activer et de les désactiver à volonté. En outre, comme l’utilisateur suit le flux d’intégration, s’il se déclare non technique, le plugin configure les outils de développement pour les désactiver par défaut.

Les outils de développement ne sont donc accessibles qu’aux administrateurs et peuvent être activés et désactivés à volonté.

Suppression du plugin AMP pour WordPress

Le plugin AMP permet aux utilisateurs d’installer des plugins qui ne sont pas encore compatibles avec l’AMP, et de les laisser s’exécuter uniquement sur la version non-AMP (bureau) du site.

Les utilisateurs Administrateurs ont la flexibilité de supprimer l’exécution de plugins spécifiques lors du rendu des pages AMP.

Ceci est particulièrement utile pour éviter les problèmes de validation introduits par les plugins compatibles non AMP, tout en conservant la fonctionnalité correspondante sur les pages non AMP.

Redirection mobile

AMP est un cadre Web entièrement responsive et donc les sites alimentés par AMP peuvent apporter une expérience user-first aux utilisateurs sur le bureau et le mobile. Ce scénario idéal est activé par la configuration du plugin AMP en mode Standard, et il correspond au scénario idéal.

Toutefois, au fur et à mesure que l’écosystème WordPress évolue vers une compatibilité AMP omniprésente, les scénarii où le plugin est configuré avec les modes Transitional ou Reader sont encore fréquemment exigés et choisis par les utilisateurs.

Et comme c’est sur les appareils mobiles que les expériences de page AMP sont les plus importantes, les propriétaires de sites veulent diriger les visiteurs mobiles vers la version AMP de leur site, car ils traversent progressivement le chemin vers la compatibilité complète des AMP et en ayant leur site tout en AMP.

Le plugin AMP for WordPress offre la possibilité de rediriger automatiquement les visiteurs mobiles vers la version AMP sur le site.

Liaison AMP-to-AMP

Lorsque la redirection mobile est définie, le plugin permet automatiquement la liaison AMP-to-AMP (A2A), c’est à dire d’une page AMP vers une autre page AMP.

Avec les visiteurs du site A2A qui atterrissent sur une page AMP sont en mesure de rester sur une expérience AMP une fois et ils continuent leur voyage à travers le site.

Avec la liaison AMP-to-AMP, toute navigation intra-site mènera l’utilisateur vers la version AMP de la page, si elle est disponible.

Et en complément de cette capacité, le plugin AMP ajoute un lien dans le pied de page sur les pages AMP pour aller à la version non-AMP si nécessaire ou souhaitée, et aussi un lien sur le pied de page des pages non-AMP pour revenir à la version AMP si vous le souhaitez.

AMP Optimizer

Le plugin AMP permet d’optimiser les pages AMP côté serveur. Ces optimisations sont conçues pour améliorer les indicateurs de performance clés (KPI), tels que les principaux éléments de Google.

Le plugin AMP fournit un port PHP de AMP Optimizer (l’Optimiseur AMP) en tant que bibliothèque fournissant des optimisations automatisées côté serveur des pages AMP, y compris une variété de meilleures pratiques de performance pour AMP.

Ces optimisations améliorent les indicateurs de performance clés tels que la très importante métrique de performances Last Contentful Paint (LCP) lorsque les pages AMP sont diffusées à partir de l’origine.

Actuellement, la bibliothèque d’Optimizer fait partie du plugin AMP, mais elle sera disponible en tant que bibliothèque autonome pour d’autres CMS et solutions basées sur PHP pour en tirer profit.

Essentiellement, l’implémentation de l’AMP Optimizer correspond à Transformation Engine (TE) ou un moteur de transformation, qui reçoit une page AMP régulière (c.-à-d. non optimisée) et applique un pipeline en série de Transformers (c’est-à-dire des optimisations).

La Transformation Engine publie ensuite une page AMP optimisée, prête à être servie aux utilisateurs et à atteindre les seuils Core Web Vitals souhaités.

Configuration du plugin AMP for WordPress

• Intégration :
  
  La v2.0 du plugin AMP fournit un Assistant Intégration qui rend la configuration du plugin plus claire et plus intuitive, indiquant lequel des 3 modes de modèle (Standard, Transitional, Reader) peut fonctionner le mieux pour votre site et votre capacité technique.
  
  Lorsque vous installez et activez le plugin pour la première fois, vous pouvez accéder à l’Assistant Intégration à partir de la notification d’activation sur l’écran des plugins. Après cela, vous pouvez toujours y accéder via un lien sur l’écran des paramètres AMP.
  
  
• Écran des Paramètres :
  
  L’écran des paramètres a été entièrement redessiné dans la v2.0 et offre une présentation considérablement améliorée des paramètres pour une meilleure expérience utilisateur lors de l’élaboration de modifications de configuration.
  
  En ajoutant de la flexibilité pour accéder aux paramètres de configuration du plugin, il est également possible de rouvrir l’Assistant Configuration à partir de l’écran “Paramètres” à tout moment, et il existe maintenant un lien vers l’écran “Paramètres” disponible sur le composant de la barre d’administrateur AMP en tout temps.

En conclusion

Le plugin AMP for WordPress permet la publication complète de contenu AMP dans WordPress sur différents scénarii, allant du développement efficace de l’AMP aux solutions AMP clés en main complètes.

Beaucoup de travail arrive dans cette nouvelle version, et elle est chargée avec de nombreuses améliorations et de nouvelles capacités dans les domaines de l‘usage, la performance et la flexibilité.

Pour en savoir plus sur l’AMP dans WordPress, visitez le site plugin AMP, et si vous ne l’avez pas déjà fait, téléchargez le plugin et commencez sur le chemin de pour de grandes expériences de page pour votre site WordPress !

Source : AMP Developer Blog