Comment implémenter AMP sur votre site Web et obtenir une vitesse de chargement supersonique

Vous voudrez peut-être implémenter AMP pour augmenter la vitesse de la page. Voici pourquoi

Un site Web à chargement rapide est absolument indispensable. La durée d'attention humaine est dans une spirale descendante - personne ne veut attendre, surtout s'il est sur un appareil mobile.

À quelle vitesse devons-nous être? Google recommande un temps de chargement de page inférieur à deux secondes.

Il existe de nombreuses mesures populaires dans les domaines techniques et sur la page du référencement qui vous aident à atteindre l'objectif.

Cependant, l'une de ces mesures - la configuration de pages mobiles accélérées (AMP) pour la version mobile d'un site Web - est utilisée avec parcimonie.

Pourquoi? En un mot, passer à AMP prend pas mal de temps, d'efforts et de fonds en fonction de la taille d'un site Web. Au final, cela n'en vaut peut-être même pas la peine.

Vaut-il la peine d'investir dans AMP ? Si la réponse est oui, cet article vous aidera pas à pas à configurer efficacement AMP pour votre site Web WordPress.

Implémenter AMP Étape 1 : Choisir le bon plugin

Options de plug-in

WordPress propose de nombreux plugins pour AMP. J'en ai essayé quelques-uns avec succès à des degrés divers. L'un d'eux a donné de merveilleux résultats dans Google Pagespeed Insights pendant un certain temps. Mais ça a cassé toutes mes pages AMP sur mobile !

Ma recommandation

Je recommanderais le plugin AMP pour WP – Accelerated Mobile Pages – WordPress. Ce plugin fournit de nombreuses options pour personnaliser les pages Web mobiles. Le reste de l'article portera sur la configuration d'AMP pour votre site Web à l'aide de ce plugin.

Après avoir installé et activé le plugin, le tableau de bord WordPress affichera la possibilité d'ouvrir la version AMP de votre site Web. Vous verrez également le nouveau plugin (AMP) comme mis en évidence dans l'image ci-dessous.

Comme dans l'image ci-dessus, vous verrez un ensemble d'options, nous couvrirons chacune d'elles une par une.

Passons aux paramètres.

Implémenter AMP Étape 2 : Configuration de base du plug-in

Type de site Web

Sélectionnez l'option qui représente le mieux votre entreprise. Sélectionnez "autre" si rien d'autre ne correspond, vous aurez ensuite la possibilité de saisir le type de votre site Web.

Où avez-vous besoin d'implémenter AMP ?

Sélectionnez où vous souhaitez implémenter AMP. Lorsque vous optez pour AMP, vous décidez de garder vos pages Web mobiles presque entièrement HTML. Vous devez abandonner les codes CSS/JS qui réduisent la vitesse de chargement.

L'inconvénient est que l'expérience utilisateur (UX) est affectée. Par exemple, vous ne pouvez plus avoir de bouton d'appel à l'action (CTA) qui pivote pour attirer l'attention d'un visiteur. AMP supprime ce code, économisant ainsi sur le temps de chargement de la page. Cela peut éventuellement entraîner un taux d'engagement réduit.

Dans la liste ci-dessus, vous pouvez choisir d'avoir AMP sur vos pages, vos publications ou les deux.

Conception et présentation

Ici, vous pouvez configurer votre logo , la taille recommandée est de 120 x 90 pixels. Je recommanderais de ne pas utiliser le logo car il ajoute au temps de chargement de la page. Si aucun logo n'est mis à jour sur ce panneau, la page AMP n'aura que le nom du site Web à la place du logo.

L'option Global Color Scheme vous aidera à choisir une couleur pour vos pages AMP qui apparaît sur les liens CTA de la page et sur le lien de pied de page.

Par exemple, j'ai choisi le bleu clair comme couleur globale , comme le montre l'image ci-dessous.

Suivi analytique

Dans ce panneau d'options, vous pouvez activer les outils que vous utilisez pour le suivi. Par exemple, vous pouvez activer Google Analytics en ajoutant l'ID de suivi. De cette façon, les données des pages AMP seront mises à jour directement dans votre compte Google Analytics.

De même, vous pouvez ajouter plusieurs autres outils de suivi comme indiqué dans l'image ci-dessus.

Paramètres de confidentialité

La barre d'avis sur les cookies vous permet d'obtenir le consentement des visiteurs pour les cookies que vous utilisez sur le site Web. Dans l'image ci-dessous, la boîte de dialogue en noir est une barre d'avis de cookie.

Source de l'image – Monstre Insights

Si vous ou votre public êtes originaire d'un pays RGPD, vous devez activer les paramètres du RGPD - Règlement général sur la protection des données.

Attention, si vous devez choisir, vous ne pouvez choisir qu'une seule des deux options, pas les deux.

Publicité

Dans ce segment, choisissez où vous souhaitez positionner vos Annonces. Vous pouvez personnaliser selon vos besoins - vous pouvez publier des annonces sur tout le site ou sur des publications uniques, ou des en-têtes, entre autres options.

Vous pouvez choisir le type d'annonce, la taille de l'annonce, le client d'annonces de données et l'emplacement d'annonces de données à partir du code d'annonce Adsense.

Compatibilité tierce

La dernière entité capture la liste des plugins pour lesquels vous avez besoin de la compatibilité AMP.

Gravity Form et Elementor for AMP vous obligent à payer pour les extensions. Les données structurées, les publicités pour WP et les PWA pour WP sont des plugins gratuits. Les trois derniers seront abordés un peu plus en détail plus tard dans le post.

Implémenter AMP Étape 3 : Plus de paramètres AMP

réglages généraux

L'onglet Général couvre les options que nous avons couvertes dans la configuration de base. De plus, vous pouvez choisir si vous souhaitez avoir AMP sur les pages d'archives, de catégories et de balises.

L'activation de la dernière option - AMP Takeover (Beta) - fera que votre version de bureau et mobile sera la même. Cela signifie que votre version de bureau aura également des pages AMP.

Je recommanderais de désactiver cette option. Le chargement de la page est généralement meilleur sur ordinateur que sur mobile. Avoir AMP sur le bureau signifie échanger UX contre une petite augmentation de la vitesse de la page. Pas une bonne affaire.

Publicité

Cette section a les mêmes options que la section Publicité dans la configuration de base.

référencement

Si vous choisissez d'activer Meta Description , le texte que vous remplissez dans la section Head sera récupéré par Google. Ce sera différent du texte que vous avez rempli pour la version de bureau. Je recommanderais de garder le paramètre désactivé et de garder la méta description cohérente entre les deux versions.

Les balises de métadonnées OpenGraph sont des extraits de code qui contrôlent l'affichage des URL lorsqu'elles sont partagées sur les réseaux sociaux. Cette section est visible pour la version de bureau lorsque vous configurez le titre et les métadonnées dans votre plugin SEO. Vous trouverez ci-dessous un exemple du plugin Yoast SEO.

Vous pouvez le trouver en allant dans la section Éditeur de n'importe quel article ou page, faites défiler vers le bas. Une fois que vous voyez la section pour Yoast, cliquez sur l'onglet "Social", puis vous pouvez choisir la plateforme de médias sociaux de votre choix.

Le plugin AMP vous permet de sélectionner le plugin SEO de votre choix sur le même panneau d'options. Dans l'exemple ci-dessus, Yoast est le plugin choisi. Toutes les données que vous entrez dans Yoast pour la version Desktop sont copiées dans la version AMP.

Vous verrez l'option de supprimer l'indexation des pages paginées et la compatibilité de l'outil d'inspection d'URL.

Les pages paginées doivent être indexées mais uniquement en tant que pages canoniques. Je recommanderais de garder ce paramètre désactivé.

La compatibilité de l'outil d'inspection d'URL favorise une recherche plus transparente pour vous. Il fournit des rapports détaillés sur les informations d'exploration, d'indexation et de diffusion dans votre compte Google Search Console. Je recommanderais de le garder allumé.

Prise en charge des éléments

L'option d' AMPforWP PageBuilder vous permettra de créer des pages individuelles pour la version AMP, différentes de la version de bureau. C'est utile lorsque vous souhaitez avoir un texte ou un CTA légèrement différent pour les pages AMP.

Par exemple, si vous avez un CTA "Contactez-nous" pour ordinateur mais que vous préférez que les visiteurs mobiles vous appellent, vous pouvez activer cette option et créer une page séparée.

PWA

Selon la description d'AMP pour WP Plugin - Les applications Web progressives (PWA) transforment votre site Web en une application Web et offrent aux visiteurs une expérience native de type application mobile.

C'est une amélioration de la conception. L'activation du module est une question de choix.

Performance

Le panneau Performances approfondit l'optimisation de la vitesse des pages.

Il vous permet de minifier CSS/JS pour réduire l'utilisation de la bande passante sans affecter l'UX ou les fonctionnalités. Leverage Browser Cache vous permet d'accélérer le temps de chargement pour les visiteurs qui reviennent. Je recommanderais de garder les deux options activées.

L'activation de l'optimisation du CSS déclenchera la fonction de secouage de l'arborescence d'optimisation du CSS. Vous pouvez le garder activé au cas où vous n'auriez pas un plugin différent qui fait déjà ce travail.

Analytics, données structurées, barre de notification et RGPD

Ces sections ont les mêmes options que celles couvertes dans la configuration de base.

Notifications push

Si vous souhaitez configurer des notifications push, vous pouvez en opter pour OneSignal, iZooto et Truepush .

Dans l'exemple ci-dessus, j'ai sélectionné OneSignal. Cependant, pour toute sélection, vous verrez une section pour entrer l'ID APP, une option pour activer les notifications push pour les Pages. De plus, vous devez choisir où vous souhaitez positionner la notification (en bas de la page par exemple), et quel texte vous souhaitez afficher.

Formulaires de contact

Cela vous permet de choisir l'un des 3 plugins pour optimiser AMP - Contact Form 7, Gravity Forms et Ninja Forms.

Tous les trois vous obligent à payer pour une extension. Dans le cas où votre CTA se concentre principalement sur les formulaires, il est prudent d'investir dans l'extension.

commentaires

Cet écran vous permet de choisir où vous souhaitez que les commentaires générés par les utilisateurs s'affichent sur votre site Web. Vous pouvez également choisir les sources à partir desquelles afficher les commentaires.

Choisissez les paramètres qui vous conviennent le mieux.

Articles instantanés

Les articles instantanés sont une fonctionnalité de l'application Facebook pour les utilisateurs mobiles qui vous permet d'héberger les articles de votre site Web.

L'avantage d'activer cette fonctionnalité est un temps de chargement encore plus rapide par rapport au même article sur votre site Web. Étant donné que l'article se charge dans l'application, vous bénéficiez d'une vitesse de chargement jusqu'à 10 fois plus rapide.

Cependant, comme le contenu reste sur Facebook, vous risquez de perdre une partie du trafic sur le site Web. C'est un compromis entre la vitesse de la page et le trafic du site Web. Je recommanderais de le garder.

Si vous choisissez de le garder, vous verrez les paramètres ci-dessous.

Après avoir entré votre identifiant de page Facebook, vous pouvez personnaliser les paramètres de l'article. Un paramètre qui nécessite plus d'explications est - Crawler Ingestion .

Lorsque le lien de votre article hébergé sur votre site Web est partagé sur Facebook, les robots d'exploration de Facebook recherchent la balise ia:markup_url . S'il est présent, Facebook ingère votre article et crée un article instantané sur votre page Facebook.

Outils

L'option Page AMP individuelle vous permet de choisir si vous souhaitez afficher les pages AMP par défaut ou non. Lorsque vous choisissez Afficher par défaut , toutes vos pages afficheront la version AMP. Cependant, vous pouvez choisir de masquer AMP pour des publications ou des pages individuelles.

Pour ce faire, allez sur n'importe quelle page et cliquez sur Modifier la page . Dans l'onglet Paramètres vers la droite, vous pouvez trouver l'option de le désactiver.

De même, vous pouvez choisir de masquer les versions AMP pour les catégories et publications sélectionnées.

Query Monitor est le panneau des outils de développement pour WordPress. Si vous êtes un développeur, qui a besoin de voir les requêtes sur la page, vous devez garder le paramètre activé.

Paramètres avancés

Le panneau d'options Paramètres avancés contient une multitude de paramètres dont la plupart sont explicites.

Je recommanderais de garder les paramètres par défaut activés, sauf si vous êtes un développeur WP ou si vous avez embauché un expert pour concevoir votre site Web.

commerce électronique

Si vous possédez une boutique en ligne, vous pouvez personnaliser votre version AMP pour WooCommerce . Si vous vendez principalement des actifs numériques, vous pouvez activer l'option d'assistance Easy Digital Downloads . Les deux options nécessitent que vous activiez une extension payante.

Panneau de traduction

Ce panneau vous permet de sélectionner les bonnes traductions pour un ensemble de mots couramment utilisés dans la langue de votre choix.

Par exemple, vous devez saisir la traduction de la version View Non-AMP adaptée à votre public.

Pour les traductions multilingues, vous pouvez activer la méthode Utiliser le fichier POT de Traduction . Le fichier POT (Portable Object Template) est un modèle pour les fichiers PO. Ce sont des fichiers de texte brut qui contiennent les traductions. Chaque langue a sa propre extension de fichier. Par exemple, le français a po.fr.

Mettre en œuvre l'étape 4 de l'AMP : concevoir

Thèmes

Tout comme pour la version de bureau de votre site Web, vous pouvez choisir un thème pour la version AMP.

Vous avez le choix entre quatre options gratuites.

• Rapide
• Conception un
• Conception deux
• Et, conception trois

De plus, chaque page et article contient une section qui vous permet de créer votre propre design.

Voici comment vous pouvez le trouver. Accédez à la page ou à la publication, puis cliquez sur "Modifier la page" dans la barre d'outils supérieure. Faites défiler vers le bas pour voir l'écran ci-dessous.

Si vous cochez la case Utiliser Builder , le modèle que vous créez sera affiché, sinon, le modèle gratuit que vous sélectionnez sera affiché.

Si vous créez votre propre modèle, vous avez le choix entre les modules ci-dessous.

N'oubliez pas que AMP est essentiellement une page HTML. Vous ne pouvez pas obtenir beaucoup de boutons de personnalisation ou de fantaisie.

Attention : vous devez sélectionner un thème. Le plugin en a besoin pour choisir les icônes et la structure, même lorsque vous créez votre propre design. Vous pouvez entrer dans plus de détails dans cette étape lorsque vous implémentez AMP.

Mondial

Ce panneau d'options vous permet de personnaliser votre version AMP.

Vous pouvez sélectionner les couleurs de votre choix comme ci-dessus. De plus, vous pouvez sélectionner Google Fonts . Cependant, je recommanderais de le garder désactivé car Google Fonts augmente le temps de chargement, ce qui va à l'encontre de l'objectif d'AMP.

Plus loin, vous pouvez choisir de garder la barre latérale et le défilement infini si c'est ce à quoi vous voulez que votre page Web ressemble. Cependant, du point de vue de la vitesse de la page, vous devriez le garder désactivé.

La bibliothèque d'icônes de polices sera la même que le thème que vous avez choisi au début du panneau Design.

Entête

Le panneau Options d'en-tête vous permet de décider de la disposition de votre en-tête et de l'apparence de votre menu de navigation.

Il vous permet également d'ajouter un bouton Appeler maintenant. C'est un bouton utile pour les utilisateurs mobiles.

Vous pouvez choisir d'afficher votre lien non-AMP dans l'en-tête. Cependant, si votre public n'est pas techniquement orienté SEO, il se peut qu'il ne clique pas sur le lien.

Vous pouvez également activer la barre de recherche . C'est avantageux si vous avez un site Web de blogs.

L' option d'en-tête avancée vous permet d'être plus précis avec les paramètres de votre section d'en-tête. C'est une question de choix. Cependant, gardez à l'esprit de ne pas ajouter de code, car cela aura un impact négatif sur la vitesse de chargement de la page.

Page d'accueil, unique, pied de page, page, partage social, date et divers

Ces panneaux d'options, tout comme l'en-tête, sont entièrement une question de choix de conception. Vous pouvez choisir les paramètres qui vous conviennent le mieux.

Résumé

Les étapes ci-dessus vous aideront à mettre en œuvre efficacement AMP sur votre site Web. Une fois que vous avez enregistré les modifications, consultez la version AMP sur votre téléphone ou, en ajoutant "/amp" après l'URL.

Les images ci-dessous capturent les fonctionnalités de votre page AMP.

VISUEL PAGE AMG

BAS DE PAGE

Voilà. Suivez ces étapes pour implémenter AMP et disposer de pages ultra-rapides sans erreur qui se chargent en moins de 2 secondes pour les visiteurs sur téléphone mobile.