Pages mobiles accélérées: AMP pour WordPress Mobile Optimization

Pages mobiles accélérées pour WordPress

La navigation et la navigation sur Internet devraient être rapides et faciles. Les webmasters tentent constamment de rendre cela possible en optimisant les performances du site Web et en améliorant la vitesse du site, et un excellent moyen d’y parvenir est avec AMP pour WordPress.


Les sites Web ont été principalement conçus pour un écran plus grand. Mais les petits écrans augmentent en nombre et dépassent même les ordinateurs portables et les ordinateurs personnels. Les mobiles représentent désormais 65% du temps consacré aux médias numériques. Les appareils portables ont besoin de pages pour se charger aussi rapidement que sur des écrans plus grands, sinon plus rapidement.

Pour répondre à cette demande de contenu à chargement rapide, des applications conçues pour des plateformes mobiles spécifiques sont disponibles sur Apple (News), Facebook (Instant Articles) et Snapchat (Discover). Au début de cette année. Google a introduit la page mobile accélérée (AMP) pour accélérer la livraison de contenu mobile et offrir une meilleure expérience utilisateur.

Qu’est-ce que l’AMP?

AMP pour WordPress: Projet AMP

Projet AMP a été annoncé par Google en octobre 2015, et lancé en février 2016. Il s’agit d’une initiative open source qui donne aux éditeurs les moyens de créer une fois un contenu optimisé pour mobile et de le charger instantanément partout sur le Web mobile..

Le 24 février 2016, Google a commencé à déployer du contenu compatible AMP dans un carrousel sur sa page de résultats de recherche mobile. Les utilisateurs peuvent glisser le carrousel et appuyer sur l’élément qu’ils souhaitent lire. Pinterest a signalé que les pages étaient 4 fois plus rapide, utilisant 8 fois moins de données que les pages optimisées pour mobile normales. Cela est possible en raison de la façon dont les pages sont formatées et livrées.

En août 2016, Google Search comptait plus de 150 millions de documents AMP dans son index et augmentait au rythme de 4 millions par semaine. Début août, Google a également lancé un aperçu de la recherche Google pour le contenu amplifié. Il prévoit de le mettre en œuvre plus largement dans le courant de l’année.

AMP pour WordPress: Aperçu de la recherche AMP

AMP dans l’aperçu de la recherche

Vous pouvez avoir un aperçu des pages à chargement rapide dans la recherche activée par AMP ici. Vérifiez-le en utilisant le lien sur votre téléphone mobile (ne fonctionne pas sur les ordinateurs de bureau).

Quels sites Web devraient utiliser AMP?

En février, le projet a été lancé pour les éditeurs. Mais l’adoption d’AMP s’est propagée bien au-delà de l’industrie de l’édition jusqu’au divertissement, aux voyages, au commerce électronique et plus encore.

Des rapports favorables sont reçus des premiers adoptants. Avec une amélioration de 88% du temps de chargement des documents AMP, Rapports du Washington Post une augmentation du nombre d’utilisateurs de retour de téléphones mobiles de 23%. eBay est l’une des principales sociétés de commerce électronique passant à AMP avec près de 15 millions de pages de navigation de produits basées sur AMP. Dans un court laps de temps, ces pages devraient être remontées pour être découvertes dans une recherche.

Alors, quels sites Web devraient utiliser AMP? Certainement ceux qui dépendent fortement du mobile pour le trafic. Mais étant donné que de plus en plus d’utilisateurs choisissent d’utiliser leurs appareils mobiles pour naviguer sur Internet, AMP pour WordPress (ou tout site Web) pourrait être un bon ajout.

Ce qui est différent dans AMP?

Ce système de livraison de contenu est basé sur le framework HTML AMP et est plus rapide que le HTML habituel car,

  • Il s’agit d’une version allégée du cadre HTML normal, moins tout le contenu JavaScript. Pour JavaScript, le cadre repose sur la bibliothèque AMP JS commune.
  • Le contenu est mis en cache et stocké dans un cloud commun, donc le temps nécessaire pour interroger et récupérer à partir du serveur est éliminé.

Il y a beaucoup plus de différences, mais les deux mentionnées ici devraient vous donner une compréhension rapide et large.

Pourquoi les éditeurs et les blogs devraient activer AMP

Tant que la lecture des pages à chargement lent sur les mobiles reste une expérience décourageante pour les utilisateurs, les éditeurs manquent les revenus de la publicité sur les mobiles. AMP aidera à attirer et à retenir un visiteur pendant de plus longues périodes sur le site Web et a le potentiel de générer des clics générateurs de revenus.

Les pages AMP apparaissent à côté d’une icône éclair pour les marquer à partir des pages Web normales. Les téléspectateurs qui cliquent sur cette option seront directement dirigés vers les pages AMP dans la visionneuse AMP. Non seulement cela, le contenu sera instantanément disponible sur une recherche Google et accessible via les plateformes sociales comme Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel et Pinterest.

De plus, les éditeurs auront accès à Google Analytics pour observer les performances de leurs pages. Ils peuvent distinguer leur meilleur contenu et l’utiliser pour optimiser les performances du site Web et l’expérience utilisateur.

AMP offre un autre avantage en ce qu’il prend en charge les hautes performances et l’expérience utilisateur, de sorte que les ressources des éditeurs peuvent être concentrées sur la fourniture d’un contenu de qualité.

Quelles optimisations sont nécessaires pour AMP

AMP est en fait beaucoup d’optimisations au site Web fait de manière uniforme comme l’exige Google. Les différentes optimisations que vous devez effectuer pour rendre une page Web compatible AMP sont,

  • Autoriser uniquement le JavaScript asynchrone – pour l’empêcher de retarder le rendu des pages. Cela signifie que vous ne pouvez pas utiliser le JavaScript que vous créez et que vous devez vous fier aux éléments AMP pour gérer le contenu interactif de vos pages. JS dans les iframes est autorisé, mais seulement s’il n’entrave pas le rendu.
  • Dimensionner toutes les ressources statiquement – AMP charge la page sans attendre le téléchargement de ressources telles que des images et des iframes. La taille de ces ressources doit être indiquée dans HTTP, donc la taille et la position de ces ressources sont connues avant le début du téléchargement.
  • Ne laissez pas les mécanismes d’extension bloquer le rendu – si une extension doit être incluse dans la page, le script personnalisé doit en informer le système. Ainsi, un espace est créé pour l’extension, avant même que l’AMP ne sache ce qu’elle inclura. Les extensions pour les visionneuses, les intégrations Instagram et les tweets sont correctes car elles ne bloquent pas le rendu des pages, même si cela nécessite des requêtes HTTP supplémentaires.
  • Gardez tout JavaScript tiers hors du chemin critique – Le JavaScript personnalisé n’est autorisé que dans les iframes en bac à sable. De cette façon, il ne bloque pas le chargement de la page principale.
  • Tous les CSS doivent être en ligne et liés à la taille – cela aide à réduire le nombre de requêtes HTTP dans le chemin critique.
  • Le déclenchement des polices doit être efficace– le système AMP n’autorise pas les requêtes HTTP jusqu’à ce que les polices commencent à se télécharger.
  • Minimisez les recalculs de taille – les recalculs retardent le rendu, il doit donc être réduit au minimum.
  • Exécuter uniquement des animations compatibles GPU – toutes les animations doivent pouvoir fonctionner sur GPU (Graphical Processing Unit).
  • Prioriser le chargement des ressources – Seul le contenu nécessaire est chargé en premier, avec les annonces et les images récupérées dès que possible, mais chargées uniquement lorsque cela est nécessaire. De cette façon, la demande de CPU est maintenue au minimum.
  • Charger des pages en un instant – le pré-rendu utilise beaucoup de bande passante et de CPU. Le pré-rendu AMP charge uniquement le contenu requis en premier et télécharge les iframes tiers et d’autres ressources uniquement si nécessaire.

Une gamme standard de formats d’annonces, de réseaux publicitaires et de technologies sera disponible. Dans le même temps, les éditeurs peuvent également choisir leurs propres formats, tant que ce n’est pas un frein à la vitesse.

Comment ajouter AMP pour WordPress

Google a un Didacticiel que vous pouvez consulter pour créer des pages HTML AMP de base, les mettre en scène, les valider comme étant conformes AMP, les publier et les distribuer. Validation des pages AMP est important, car de cette façon, des tiers comme Twitter et Instagram sont convaincus que les pages s’afficheront bien sur leurs plateformes.

En ce qui concerne les sites Web hébergés sur WordPress.com, ils sont automatiquement pris en charge pour WordPress sans rien faire de plus. Les sites Web WordPress auto-hébergés peuvent activer AMP pour WordPress en installant un plugin.

Plugin AMP WordPress par Automattic

Plugin AMP WordPress par Automattic

Une fois que vous téléchargez, installez et activez le Plugin AMP sur le site WordPress, vos articles auront automatiquement une version AMP générée dynamiquement. Vous pouvez accéder à ces pages en ajoutant ampli à la fin de votre URL (example.com/my-post/amp). Si vous n’avez pas activé de jolis permaliens, ajoutez ?amp = 1 vers des liens (qui ressembleraient à example.com/?p=100&amp=1). La seule autre étape consiste à tester et valider vos pages comme mentionné ci-dessus.

Vous ne remarquerez aucun paramètre ou fonctionnalité pour ce plugin. Il y a une option de tableau de bord ajoutée pour AMP Analytics où vous pouvez coller votre propre code de configuration JSON, mais c’est tout le monde.

Ce plugin est le plugin officiel de l’écurie Automattic, et à l’heure actuelle, il ne prend pas en charge les pages et les archives, et vous ne pouvez pas personnaliser les pages. Mais c’est une option très simple et facile à utiliser, et vous pouvez trouver quelques conseils via documentation sur Github pour personnaliser.

AMP pour WP – Pages mobiles accélérées

AMP pour WP Plugin WordPress gratuit

Une autre excellente option gratuite est AMP pour WP. Ce plugin WordPress gratuit offre une configuration rapide et facile – il suffit d’installer, d’activer les paramètres et de commencer à générer automatiquement votre AMP pour votre site Web. Bonus – ce plugin est également compatible multisite.

Il existe des paramètres intégrés pour activer AMP (publications, pages, archives), ajouter des zones de publicité mobile, des données structurées (une partie importante du référencement), l’intégration des balises méta Yoast SEO, des options avancées d’index / sans index, des notifications push, natives Commentaires AMP, traductions AMP personnalisées (si vous utilisez une langue autre que l’anglais, vous voudrez la mettre à jour) et plus encore. Les paramètres sont très complets pour un plugin gratuit qui est génial.

Mieux encore, ce plugin offre des options de conception afin que vous puissiez personnaliser l’apparence de votre sortie AMP. Utilisez les thèmes AMP par défaut inclus ou utilisez leur Cadre de thème AMP pour créer votre propre design unique.

AMP for WP propose également extensions premium pour ajouter des fonctionnalités (comme un appel à l’action ou la mise en cache AMP) et la prise en charge des plugins populaires, notamment WooCommerce, Advanced Custom Fields et Contact Form 7.

Plus de façons d’ajouter AMP pour WordPress

Bien sûr, ce n’est pas le seul moyen d’ajouter AMP à votre site Web WordPress. D’autres plugins qui peuvent vous aider avec les sites Web AMP pour WordPress comprennent:

  • WP AMP – pour créer un design AMP personnalisé sans codage et booster le référencement. Vous pouvez en savoir plus ici.
  • Accelerated Mobile Pages (AMP) pour WordPress – pour créer un thème AMP pour votre site Web.
  • AMP personnalisé – pour aider à personnaliser votre contenu AMP.
  • Articles instantanés Facebook et pages Google AMP – pour publier et gérer votre contenu directement de WordPress vers les pages Google AMP avec prise en charge des publicités et des analyses.
  • Colle pour Yoast SEO & AMP – pour s’assurer que le plugin WordPress AMP par défaut utilise les métadonnées Yoast SEO appropriées et permet la modification de la conception de la page AMP.

Si vous ajoutez AMP pour WordPress?

Bien que l’AMP ne soit pas obligatoire pour que les pages Web soient découvertes par Google, il est assez évident que Google visera à mettre en œuvre le projet AMP de manière plus large à terme. À l’heure actuelle, la conformité aux AMP n’est pas un facteur distinct pour classement de recherche par Google. Bien qu’il soit raisonnable de supposer que ce sera important à un moment donné,

Si vous gardez à l’esprit que la vitesse de chargement des pages est un facteur dans le classement des moteurs de recherche, vous n’avez vraiment pas beaucoup de choix si vous voulez faire partie de l’Internet mobile. Si les classements des moteurs de recherche sont importants pour vous, toutes les doutes sur la manière d’AMP peuvent disparaître.

Mais faire partie du projet nécessite le strict respect de la mise en forme requise par Google et ce n’est peut-être pas la tasse de thé de tout le monde. Cela restreint ce que vous pouvez mettre sur votre site Web et peut faire en sorte que tous les blogs semblent quelque peu uniformes et manquent d’individualité. Certaines animations ne sont pas autorisées et les formulaires ne sont pas pris en charge. Et en ce qui concerne les pages de destination, AMP n’est peut-être pas du tout une bonne idée. De plus, il peut y avoir des sites Web qui mettent l’accent sur l’esthétique et l’image de marque sur la vitesse, pour lesquels AMP peut s’avérer être un amortisseur.

Cependant, si vous souhaitez créer une expérience rapide et engageante pour vos utilisateurs et les faire rester plus longtemps, vous devez sérieusement envisager AMP pour WordPress (ou tout autre type de site Web que vous pourriez exécuter). Si c’est une place sur le carrousel AMP sur les pages de recherche Google que vous souhaitez coincer, sautez dans le train AMP.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map