Utilisation de Google AMP pour accélérer le chargement des pages mobiles de votre site WordPress

Pourquoi la vitesse des pages est importante

Si, comme des milliards d'entre nous, vous avez récemment consommé du contenu Web sur un appareil mobile, vous avez remarqué que l'expérience pourrait être améliorée. La lecture d'articles d'actualité est souvent extrêmement lente , les pages prenant beaucoup de temps à se charger. Même après le chargement du texte sur la page, les pages continuent de se charger pendant plusieurs secondes, à mesure que les publicités, le suivi du javascript et les images sont téléchargés.
Les applications mobiles nous ont habitués au chargement rapide du contenu , à la visualisation hors ligne et aux interfaces rapides. Mais les sites mobiles sont souvent à la traîne, littéralement. Cela est particulièrement vrai pour les sites d'actualités et de blogs, qui utilisent de nombreux widgets pour les publicités, les analyses, le partage et les commentaires. Vous pouvez le tester facilement en installant un bloqueur de contenu sur un appareil iOS et en remarquant l'augmentation de la vitesse.
Bien sûr, vous pouvez utiliser un thème réactif pour atténuer certains des problèmes, mais la conception réactive ne traite pas des performances de chargement des pages. La plupart du temps, le responsive est à l'origine du problème : nous concevons des sites Web capables de s'adapter à de nombreuses résolutions différentes et nous ne parvenons pas à créer une expérience optimisée pour les écrans les plus petits, les performances CPU inférieures et les connexions les plus lentes. Avec une conception réactive, toutes les ressources et fonctionnalités du bureau continueront de se charger lorsque la page sera rendue sur mobile, ce qui entraînera souvent de mauvaises performances. Selon Facebook, le temps de chargement moyen d'un article d'actualité sur mobile est de 8 secondes.
Alors que certains d'entre nous ont la chance d'avoir des connexions réseau 3G ou 4G sur nos smartphones, il suffit de sortir des centres urbains pour que les débits du réseau chutent de manière drastique. Et bien sûr, il y a le « prochain milliard » de personnes et d'appareils qui se connectent depuis les pays en développement où les connexions réseau rapides ne sont tout simplement pas encore disponibles.
Heureusement, les choses évoluent dans la bonne direction, tous les grands acteurs travaillant sur des moyens d'accélérer le chargement du contenu sur les appareils mobiles. Facebook a lancé Instant Articles, une solution de chargement rapide de contenu Web, bien que limitée à leur jardin clos. Apple a lancé sa propre application News. Google a lancé AMP (Accelerated Mobile Pages), une initiative avec un objectif similaire à celui de Facebook mais une approche standard ouverte.
WordPress a récemment annoncé avoir ajouté la prise en charge des pages mobiles accélérées (AMP) de Google à WordPress.com et aux sites WordPress.org sous la forme d'un plugin gratuit.
Voyons donc comment vous pouvez ajouter AMP à votre blog ou site d'actualités WordPress.org et bénéficier des dernières technologies pour accélérer votre site Web sur les appareils mobiles.

Qu'est-ce que Google AMP ?

La promesse AMP de Google est de faire en sorte que vos pages se chargent instantanément sur les appareils mobiles. Il résout l'un des derniers problèmes restants avec l'Internet mobile. Bien que tout le monde l'utilise, l'Internet mobile est étonnamment lent. AMP contourne ce problème en limitant le nombre de fonctionnalités sur une page, en supprimant les fonctionnalités de conception pour plus de rapidité. Google a affirmé que la vitesse de chargement d'AMP est 85% plus rapide que les pages Web ordinaires.
AMP crée une vue mobile spéciale pour votre site Web. Ce nouveau site mobile améliore votre contenu pour les clients pris en charge tels que la recherche mobile Google et Chrome. Cette nouvelle vue s'ajoute aux sites Web réguliers et mobiles que vous avez déjà. Sous cette vue, vos pages ressemblent à des pages Web normales, mais avec tout sauf le contenu supprimé. Pour cette raison, vous devez vous assurer que votre site WordPress est prêt pour cela

Comment fonctionne l'AMP ?

AMP HTML est essentiellement un sous-ensemble de HTML avec uniquement des éléments JavaScript spécifiques autorisés. L'accent est mis sur l'accélération du chargement des sites à fort contenu tels que les sites d'actualités et les blogs. Bien qu'il limite fortement Javascript, il autorise des éléments d'analyse et de publicité spécifiques sur vos pages, ce qui en fait une bonne option pour les éditeurs de nouvelles.
Pour créer sa nouvelle vue mobile, AMP utilise trois éléments principaux :

• AMP HTML – Ce sous-ensemble de HTML ajoute des balises et des propriétés personnalisées avec de nombreuses restrictions qui permettent aux clients AMP de rendre votre contenu comme vous le souhaitez sans vous soucier des performances. Le plugin ajoute automatiquement ces nouvelles balises à vos pages, mais vous pouvez les utiliser dans vos propres modèles spécifiques à AMP si vous en avez besoin.
• AMP JS - Ce framework JavaScript a été conçu pour les pages mobiles qui gère la gestion des ressources et le chargement asynchrone qui font fonctionner le processus AMP. Veuillez noter que vous ne pouvez pas utiliser de code JavaScript tiers sur vos pages AMP.
• AMP CDN – AMP fournit un réseau de diffusion de contenu facultatif qui peut mettre en cache et optimiser davantage vos pages AMP.

Installation d'AMP

vous devrez installer le plugin avant de pouvoir utiliser AMP sur votre site WordPress. Si vous utilisez WordPress.com, cela vous est déjà disponible.

Le plugin officiel

Bien que vous puissiez trouver le plugin AMP officiel dans la boutique de plugins WordPress, vous ne trouverez que la dernière version sur le site Github du projet . Ainsi, vous avez un choix à faire.
L'installation du plugin via WordPress est la plus rapide. Il vous suffit de rechercher amp-wp dans la section "Ajouter un nouveau" de votre panneau d'administration Plugins WordPress. Il vous suffit ensuite de cliquer sur installer, puis d'activer pour commencer à utiliser AMP sur votre site Web.
Si vous avez besoin de la dernière version pour une raison quelconque, vous devrez installer le plugin manuellement. Après avoir téléchargé le package Github, il vous suffit de cliquer sur "Télécharger le plugin" dans votre panneau "Ajouter de nouveaux plugins". Trouvez simplement le fichier zip contenant le package et laissez WordPress prendre les choses à partir de là. Une fois le téléchargement terminé, vous pouvez simplement activer le plugin pour commencer à l'utiliser.

PageFrog et autres plugins AMP

Le plugin officiel provient directement de l'équipe du projet AMP de Google, ce qui en fait la version la plus récente d'AMP. Il crée une version /amp/ de chaque page et publication que vous avez. Il vous suffit d'ajouter /amp/ à la fin des URL pour les voir vous-même.
Cependant, vous ne pouvez pas modifier ces pages AMP. Si vous avez besoin de quelque chose de plus que ce que le plugin de base vous offre, vous aurez besoin de l'un des autres plugins AMP, comme PageFrog.
PageFrog s'appuie sur le plugin AMP principal en vous permettant de modifier certaines des modifications qu'il apporte. Il vous permettra même d'ajouter des fonctionnalités de style et de thème, ainsi que d'autres protocoles tels que les articles instantanés de Facebook. Vous pouvez trouver PageFrog et quelques autres plugins AMP sur la boutique de plugins WordPress.

Configuration de votre site WordPress pour AMP

Une fois que vous avez activé le plugin, vous avez terminé. Pour la plupart des installations, il vous suffit de créer le contenu comme vous le feriez normalement, et le plugin s'occupera du reste. Notez cependant que des éléments tels que votre code Google Analytics ne fonctionneront pas sur vos pages AMP par défaut. Lisez la suite pour savoir comment ajouter des fonctionnalités d'analyse et de référencement à vos nouvelles pages AMP. .

Ajouter Google Analytics à vos pages AMP

Si vous avez également besoin de ces fonctionnalités sur vos pages mobiles, vous devez les ajouter manuellement au modèle de page single.php du plugin.
Pour ce faire, vous devrez cliquer sur l'option d'édition à côté du nom du plugin AMP dans votre liste de plugins. À partir de là, il vous suffit de cliquer sur le lien single.php pour commencer à le modifier. Veuillez noter que vous devrez peut-être refaire cela à chaque fois que vous mettez à jour le plugin.

Plugins SEO et AMP

Étant donné que vos pages AMP n'incluront aucune de vos fonctionnalités SEO, vous aurez besoin d'un nouveau plugin SEO compatible AMP.
Heureusement, la plupart des développeurs de plugins SEO ont ou auront des extensions AMP que vous pouvez utiliser . Vous devrez les installer séparément, mais vous en aurez besoin pour vous assurer que toutes vos pages contribuent à améliorer le référencement de votre site.
À partir de cet article, seuls trois plugins SEO WordPress ont publié des extensions ou des mises à jour AMP.

• Glue for Yoast SEO – Ajoute la prise en charge AMP au plugin Yoast SEO WordPress
• Schema App Structured Data – Plugin de schéma SEO avec AMP de schema.org
• WP SEO Structured Data Schema – Plugin de schéma SEO avec AMP de Kansas City SEO

Correction des erreurs

Comme pour tout ajout à votre site Web, vous souhaitez tester vos pages AMP pour détecter les erreurs et les incohérences , et les corriger.
AMP est toujours en évolution et de nombreuses fonctionnalités peuvent encore contenir des bogues. Vous devrez corriger manuellement ces erreurs dans vos fichiers de modèle avant de rendre vos pages AMP publiques. N'oubliez pas que vous devrez peut-être refaire vos modifications chaque fois que vous mettez à jour le plugin au cas où quelque chose changerait.

Publicité sur vos pages AMP

AMP HTML n'autorise pas JavaScript, de sorte que les annonces ne peuvent pas être directement intégrées. Au lieu de cela, elles résident dans des iframes en bac à sable sans accès au contenu principal de l'article.
Google a conçu AMP pour autoriser certains types de publicité. Vous avez juste besoin de la version compatible AMP de vos plugins publicitaires. Vous pouvez trouver une liste complète de ces plugins compatibles sur la page AMP Github .
Les fournisseurs d'annonces actuellement pris en charge incluent les éléments suivants :

• A9
• AdReactor
• AdSense
• Technologie publicitaire
• Double-clic

AMP ou application mobile ?

Bien que AMP puisse aider à accélérer les pages d'articles de votre site dans certaines conditions, cela ne fonctionnera pas dans toutes les situations et sur tous les appareils. Non seulement cela, mais cela s'accompagne également de grandes limitations sur le type d'analyse (pas de js !) et de publicité que vous pouvez exécuter sur vos pages.
AMP peut être une solution efficace pour le trafic provenant de la recherche, mais qu'en est-il de vos lecteurs les plus fidèles ?
Pour ceux-là, je pense qu'une application a encore beaucoup de sens, selon le type et la taille de votre public. Une application peut toujours offrir de nombreux avantages que même les AMP ou les Instant Articles ne fournissent pas : livraison et réactivation de contenu avec des notifications push, mise en cache de contenu et utilisation hors ligne, présence sur les magasins d'applications et, plus important encore, l'écran d'accueil de l'utilisateur.
Donc, si vous recherchez une plate-forme qui vous aidera à stimuler la croissance au fil du temps, tout en gardant le contrôle de votre contenu et des options spécifiques aux mobiles pour la publicité et l'analyse, envisagez de publier votre propre application. Si vous utilisez WordPress sur votre site d'actualités ou de blog, nous avons peut-être la bonne solution pour vous chez MobiLoud .